updateToolbar method
Updates the toolbar from the JS handler on mobile and the onMessage listener on web
Implementation
void updateToolbar(Map<String, dynamic> json) {
//get parent element
String parentElem = json['style'] ?? '';
//get font name
var fontName = (json['fontName'] ?? '').toString().replaceAll('"', '');
//get font size
var fontSize = double.tryParse(json['fontSize']) ?? 3;
//get bold/underline/italic status
var fontList = (json['font'] as List<dynamic>).cast<bool?>();
//get superscript/subscript/strikethrough status
var miscFontList = (json['miscFont'] as List<dynamic>).cast<bool?>();
//get forecolor/backcolor
var colorList = (json['color'] as List<dynamic>).cast<String?>();
//get ordered/unordered list status
var paragraphList = (json['paragraph'] as List<dynamic>).cast<bool?>();
//get justify status
var alignList = (json['align'] as List<dynamic>).cast<bool?>();
//get line height
String lineHeight = json['lineHeight'] ?? '';
//get list icon type
String listType = json['listStyle'] ?? '';
//get text direction
String textDir = json['direction'] ?? 'ltr';
//check the parent element if it matches one of the predetermined styles and update the toolbar
if (['pre', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].contains(parentElem)) {
setState(mounted, this.setState, () {
_fontSelectedItem = parentElem;
});
} else {
setState(mounted, this.setState, () {
_fontSelectedItem = 'p';
});
}
//check the font name if it matches one of the predetermined fonts and update the toolbar
if (['Courier New', 'sans-serif', 'Times New Roman'].contains(fontName)) {
setState(mounted, this.setState, () {
_fontNameSelectedItem = fontName;
});
} else {
setState(mounted, this.setState, () {
_fontNameSelectedItem = 'sans-serif';
});
}
//update the fore/back selected color if necessary
if (colorList[0] != null && colorList[0]!.isNotEmpty) {
setState(mounted, this.setState, () {
var rgb = colorList[0]!.replaceAll('rgb(', '').replaceAll(')', '');
var rgbList = rgb.split(', ');
_foreColorSelected =
Color.fromRGBO(int.parse(rgbList[0]), int.parse(rgbList[1]), int.parse(rgbList[2]), 1);
});
} else {
setState(mounted, this.setState, () {
_foreColorSelected = Colors.black;
});
}
if (colorList[1] != null && colorList[1]!.isNotEmpty) {
setState(mounted, this.setState, () {
_backColorSelected = Color(int.parse(colorList[1]!, radix: 16) + 0xFF000000);
});
} else {
setState(mounted, this.setState, () {
_backColorSelected = Colors.yellow;
});
}
//check the list style if it matches one of the predetermined styles and update the toolbar
if ([
'decimal',
'lower-alpha',
'upper-alpha',
'lower-roman',
'upper-roman',
'disc',
'circle',
'square'
].contains(listType)) {
setState(mounted, this.setState, () {
_listStyleSelectedItem = listType;
});
} else {
_listStyleSelectedItem = null;
}
//update the lineheight selected item if necessary
if (lineHeight.isNotEmpty && lineHeight.endsWith('px')) {
var lineHeightDouble = double.tryParse(lineHeight.replaceAll('px', '')) ?? 16;
var lineHeights = <double>[1, 1.2, 1.4, 1.5, 1.6, 1.8, 2, 3];
lineHeights = lineHeights.map((e) => e * _actualFontSizeSelectedItem).toList();
if (lineHeights.contains(lineHeightDouble)) {
setState(mounted, this.setState, () {
_lineHeightSelectedItem = lineHeightDouble / _actualFontSizeSelectedItem;
});
}
} else if (lineHeight == 'normal') {
setState(mounted, this.setState, () {
_lineHeightSelectedItem = 1.0;
});
}
//check if the font size matches one of the predetermined sizes and update the toolbar
if ([1, 2, 3, 4, 5, 6, 7].contains(fontSize)) {
setState(mounted, this.setState, () {
_fontSizeSelectedItem = fontSize;
});
}
if (textDir == 'ltr') {
setState(mounted, this.setState, () {
_textDirectionSelected = [true, false];
});
} else if (textDir == 'rtl') {
setState(mounted, this.setState, () {
_textDirectionSelected = [false, true];
});
}
//use the remaining bool lists to update the selected items accordingly
setState(mounted, this.setState, () {
for (var t in widget.htmlToolbarOptions.defaultToolbarButtons) {
if (t is FontButtons) {
for (var i = 0; i < _fontSelected.length; i++) {
if (t.getIcons1()[i].icon == Icons.format_bold) {
_fontSelected[i] = fontList[0] ?? false;
}
if (t.getIcons1()[i].icon == Icons.format_italic) {
_fontSelected[i] = fontList[1] ?? false;
}
if (t.getIcons1()[i].icon == Icons.format_underline) {
_fontSelected[i] = fontList[2] ?? false;
}
}
for (var i = 0; i < _miscFontSelected.length; i++) {
if (t.getIcons2()[i].icon == Icons.format_strikethrough) {
_miscFontSelected[i] = miscFontList[0] ?? false;
}
if (t.getIcons2()[i].icon == Icons.superscript) {
_miscFontSelected[i] = miscFontList[1] ?? false;
}
if (t.getIcons2()[i].icon == Icons.subscript) {
_miscFontSelected[i] = miscFontList[2] ?? false;
}
}
}
if (t is ListButtons) {
for (var i = 0; i < _listSelected.length; i++) {
if (t.getIcons()[i].icon == Icons.format_list_bulleted) {
_listSelected[i] = paragraphList[0] ?? false;
}
if (t.getIcons()[i].icon == Icons.format_list_numbered) {
_listSelected[i] = paragraphList[1] ?? false;
}
}
}
if (t is ParagraphButtons) {
for (var i = 0; i < _alignSelected.length; i++) {
if (t.getIcons1()[i].icon == Icons.format_align_left) {
_alignSelected[i] = alignList[0] ?? false;
}
if (t.getIcons1()[i].icon == Icons.format_align_center) {
_alignSelected[i] = alignList[1] ?? false;
}
if (t.getIcons1()[i].icon == Icons.format_align_right) {
_alignSelected[i] = alignList[2] ?? false;
}
if (t.getIcons1()[i].icon == Icons.format_align_justify) {
_alignSelected[i] = alignList[3] ?? false;
}
}
}
}
});
if (widget.callbacks?.onChangeSelection != null) {
widget.callbacks!.onChangeSelection!.call(EditorSettings(
parentElement: parentElem,
fontName: fontName,
fontSize: fontSize,
isBold: fontList[0] ?? false,
isItalic: fontList[1] ?? false,
isUnderline: fontList[2] ?? false,
isStrikethrough: miscFontList[0] ?? false,
isSuperscript: miscFontList[1] ?? false,
isSubscript: miscFontList[2] ?? false,
foregroundColor: _foreColorSelected,
backgroundColor: _backColorSelected,
isUl: paragraphList[0] ?? false,
isOl: paragraphList[1] ?? false,
isAlignLeft: alignList[0] ?? false,
isAlignCenter: alignList[1] ?? false,
isAlignRight: alignList[2] ?? false,
isAlignJustify: alignList[3] ?? false,
lineHeight: _lineHeightSelectedItem,
textDirection: textDir == 'rtl' ? TextDirection.rtl : TextDirection.ltr));
}
}