[Flutter] flutter_quill incorrectly recording text attributes

Im not sure what the issue is but i think flutter_quill is not recording the information correctly. this is what i see in the ui::

this is the content in the quill editor:

quill text::

{insert: this is normal text
this is header 1 text}

{insert:
, attributes: {header: 1}}

{insert: this is header 2 text}

{insert:
, attributes: {header: 2}}

{insert: this is header 1 text}

{insert:
, attributes: {header: 1}}



The issue is that in the UI it looks like this[font]:

is is normal text. [normal font]
this is header 1 text. [bigger font]



this is the code::

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';

class QuillInput extends StatefulWidget {
final Map<String, dynamic> column;
final String value;
final Function(String, dynamic) on_changed;
final Function(Function(String)) onRegisterInsertCallback;

QuillInput({
Key? key,
required this.value,
required this.column,
required this.on_changed,
required this.onRegisterInsertCallback,
}) : super(key: key);

@override
State<QuillInput> createState() => _QuillInputState();
}

class _QuillInputState extends State<QuillInput> {
late QuillController _controller;
late FocusNode _focusNode;
bool _isInitialized = false;
String _errorMessage = '';
int _lastCursorPosition = 0;

@override
void initState() {
super.initState();
_initializeController();
}

@override
void didUpdateWidget(QuillInput oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.value != oldWidget.value) {
_updateControllerValue();
}
}

void _initializeController() {
try {
_focusNode = FocusNode();
_controller = QuillController(
document: _parseDocument(widget.value),
selection: const TextSelection.collapsed(offset: 0),
);
_setupListeners();
_isInitialized = true;
_errorMessage = '';
if (mounted) setState(() {});
} catch (e, stackTrace) {
print("QuillInput - Error in _initializeController: $e");
print("QuillInput - Stack trace: $stackTrace");
_errorMessage = 'Error initializing editor: $e';
if (mounted) setState(() {});
}
}

void _updateControllerValue() {
final newDocument = _parseDocument(widget.value);
final diff = _controller.document.toDelta().diff(newDocument.toDelta());
if (diff.isNotEmpty) {
_controller.compose(diff, TextSelection.collapsed(offset: _lastCursorPosition), ChangeSource.remote);
}
}

Document _parseDocument(String value) {
if (value.isEmpty) {
return Document()..insert(0, '\n');
}
try {
// print("QuillInput - Parsing value: $value");
final documentData = jsonDecode(value);

// Ensure the last element ends with a newline
if (documentData.isNotEmpty && documentData.last['insert'] is String) {
final lastInsert = documentData.last['insert'];
if (!lastInsert.endsWith('\n')) {
documentData.last['insert'] += '\n';
}
}

return Document.fromJson(documentData);
} catch (e) {
print("QuillInput - Error parsing value as JSON: $e");
// Handle both escaped and unescaped newlines
value = value.replaceAll('\\n', '\n');
return Document()..insert(0, value + '\n');
}
}

void _setupListeners() {
_controller.addListener(_updateCursorPosition);
_focusNode.addListener(_handleFocusChange);
widget.onRegisterInsertCallback(_insertTextAtCursor);
}

void _updateCursorPosition() {
setState(() {
_lastCursorPosition = _controller.selection.baseOffset;
});
}

void _handleFocusChange() {
if (!_focusNode.hasFocus) {
String sysId = widget.column['sys_id'];
String formattedText = jsonEncode(_controller.document.toDelta().toJson());

print("on_changed: $formattedText");
widget.on_changed(sysId, formattedText);
}
}

void _insertTextAtCursor(String text) {
int insertPosition = _lastCursorPosition;
if (_controller.selection.baseOffset >= 0) {
insertPosition = _controller.selection.baseOffset;
}

_controller.replaceText(insertPosition, 0, text, null);

int newPosition = insertPosition + text.length;
_controller.updateSelection(
TextSelection.collapsed(offset: newPosition),
ChangeSource.local,
);
}

@override
Widget build(BuildContext context) {
if (_errorMessage.isNotEmpty) {
return Center(child: Text(_errorMessage));
}
if (!_isInitialized) {
return Center(child: CircularProgressIndicator());
}

return SafeArea(
child: Column(
children: [
QuillToolbar.simple(
configurations: QuillSimpleToolbarConfigurations(
controller: _controller,
sharedConfigurations: const QuillSharedConfigurations(
locale: Locale('de'),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: QuillEditor.basic(
configurations: QuillEditorConfigurations(
controller: _controller,
autoFocus: false,
expands: true,
padding: EdgeInsets.zero,
scrollable: true,
),
focusNode: _focusNode,
),
),
),
],
),
);
}

@override
void dispose() {
_controller.removeListener(_updateCursorPosition);
_focusNode.removeListener(_handleFocusChange);
_focusNode.dispose();
_controller.dispose();
super.dispose();
}
}



I didnt see any other stack overflow questions like mine. any advise or tips are welcome

Continue reading...