diff --git a/lib/assets/h3_dark.png b/lib/assets/h3_dark.png new file mode 100644 index 000000000..3228f9f11 Binary files /dev/null and b/lib/assets/h3_dark.png differ diff --git a/lib/assets/h4_dark.png b/lib/assets/h4_dark.png new file mode 100644 index 000000000..5a63ef2d4 Binary files /dev/null and b/lib/assets/h4_dark.png differ diff --git a/lib/assets/h5_dark.png b/lib/assets/h5_dark.png new file mode 100644 index 000000000..e66b02af8 Binary files /dev/null and b/lib/assets/h5_dark.png differ diff --git a/lib/assets/subscript.png b/lib/assets/subscript.png new file mode 100644 index 000000000..4499956a6 Binary files /dev/null and b/lib/assets/subscript.png differ diff --git a/lib/assets/superscript.png b/lib/assets/superscript.png new file mode 100644 index 000000000..821945219 Binary files /dev/null and b/lib/assets/superscript.png differ diff --git a/lib/src/constants/image_constants.dart b/lib/src/constants/image_constants.dart index ea3a1d3fc..d2a92636f 100644 --- a/lib/src/constants/image_constants.dart +++ b/lib/src/constants/image_constants.dart @@ -12,6 +12,18 @@ class ImageConstant { static const String kiHeaderTwoDarkPng = 'packages/quill_html_editor/assets/h2_dark.png'; + ///header three dark icon for toolbar + static const String kiHeaderThreeDarkPng = + 'packages/quill_html_editor/assets/h3_dark.png'; + + ///header four dark icon for toolbar + static const String kiHeaderFourDarkPng = + 'packages/quill_html_editor/assets/h4_dark.png'; + + ///header five dark icon for toolbar + static const String kiHeaderFiveDarkPng = + 'packages/quill_html_editor/assets/h5_dark.png'; + ///add table icon for toolbar static const String kiInsertTablePng = 'packages/quill_html_editor/assets/insert_table.png'; @@ -47,4 +59,12 @@ class ImageConstant { ///delete row icon for toolbar static const String kiInsertColumnRightPng = 'packages/quill_html_editor/assets/insert_column_right.png'; + + ///superscript icon for toolbar + static const String kiSuperscriptPng = + 'packages/quill_html_editor/assets/superscript.png'; + + ///subscript icon for toolbar + static const String kiSubscriptPng = + 'packages/quill_html_editor/assets/subscript.png'; } diff --git a/lib/src/tool_bar.dart b/lib/src/tool_bar.dart index 196e87422..5553dfc09 100644 --- a/lib/src/tool_bar.dart +++ b/lib/src/tool_bar.dart @@ -428,6 +428,14 @@ class ToolBarState extends State { _toolbarList[i] = _toolbarList[i].copyWith(isActive: formatMap['strike'] == true); break; + case ToolBarStyle.superscript: + _toolbarList[i] = _toolbarList[i] + .copyWith(isActive: formatMap['superscript'] == true); + break; + case ToolBarStyle.subscript: + _toolbarList[i] = _toolbarList[i] + .copyWith(isActive: formatMap['subscript'] == true); + break; case ToolBarStyle.blockQuote: _toolbarList[i] = _toolbarList[i] .copyWith(isActive: formatMap['blockquote'] == true); @@ -464,6 +472,18 @@ class ToolBarState extends State { _toolbarList[i] = _toolbarList[i].copyWith(isActive: formatMap['header'] == 2); break; + case ToolBarStyle.headerThree: + _toolbarList[i] = + _toolbarList[i].copyWith(isActive: formatMap['header'] == 3); + break; + case ToolBarStyle.headerFour: + _toolbarList[i] = + _toolbarList[i].copyWith(isActive: formatMap['header'] == 4); + break; + case ToolBarStyle.headerFive: + _toolbarList[i] = + _toolbarList[i].copyWith(isActive: formatMap['header'] == 5); + break; case ToolBarStyle.color: _toolbarList[i] = _toolbarList[i].copyWith(isActive: formatMap['color'] != null); @@ -723,6 +743,52 @@ class ToolBarState extends State { } toolbarItem = toolbarItem.copyWith(isActive: !toolbarItem.isActive); + } else if (toolbarItem.style == ToolBarStyle.headerThree) { + for (var element in _toolbarList) { + if (element.style == ToolBarStyle.headerOne || + element.style == ToolBarStyle.headerTwo) { + element = element.copyWith(isActive: false); + } + } + toolbarItem = + toolbarItem.copyWith(isActive: !toolbarItem.isActive); + } else if (toolbarItem.style == ToolBarStyle.headerFour) { + for (var element in _toolbarList) { + if (element.style == ToolBarStyle.headerOne || + element.style == ToolBarStyle.headerTwo || + element.style == ToolBarStyle.headerThree) { + element = element.copyWith(isActive: false); + } + } + toolbarItem = + toolbarItem.copyWith(isActive: !toolbarItem.isActive); + } else if (toolbarItem.style == ToolBarStyle.headerFive) { + for (var element in _toolbarList) { + if (element.style == ToolBarStyle.headerOne || + element.style == ToolBarStyle.headerTwo || + element.style == ToolBarStyle.headerThree || + element.style == ToolBarStyle.headerFour) { + element = element.copyWith(isActive: false); + } + } + toolbarItem = + toolbarItem.copyWith(isActive: !toolbarItem.isActive); + } else if (toolbarItem.style == ToolBarStyle.subscript) { + for (var element in _toolbarList) { + if (element.style == ToolBarStyle.superscript) { + element = element.copyWith(isActive: false); + } + } + toolbarItem = + toolbarItem.copyWith(isActive: !toolbarItem.isActive); + } else if (toolbarItem.style == ToolBarStyle.superscript) { + for (var element in _toolbarList) { + if (element.style == ToolBarStyle.subscript) { + element = element.copyWith(isActive: false); + } + } + toolbarItem = + toolbarItem.copyWith(isActive: !toolbarItem.isActive); } else { toolbarItem = toolbarItem.copyWith(isActive: !toolbarItem.isActive); @@ -765,6 +831,10 @@ class ToolBarState extends State { return {'format': 'blockquote', 'value': isActive}; case ToolBarStyle.codeBlock: return {'format': 'code-block', 'value': isActive}; + case ToolBarStyle.superscript: + return {'format': 'script', 'value': isActive ? 'super' : null}; + case ToolBarStyle.subscript: + return {'format': 'script', 'value': isActive ? 'sub' : null}; case ToolBarStyle.indentAdd: return {'format': 'indent', 'value': '+1'}; case ToolBarStyle.indentMinus: @@ -790,9 +860,15 @@ class ToolBarState extends State { case ToolBarStyle.clean: return {'format': 'clean', 'value': ''}; case ToolBarStyle.headerOne: - return {'format': 'header', 'value': isActive ? 1 : 4}; + return {'format': 'header', 'value': isActive ? 1 : false}; case ToolBarStyle.headerTwo: - return {'format': 'header', 'value': isActive ? 2 : 4}; + return {'format': 'header', 'value': isActive ? 2 : false}; + case ToolBarStyle.headerThree: + return {'format': 'header', 'value': isActive ? 3 : false}; + case ToolBarStyle.headerFour: + return {'format': 'header', 'value': isActive ? 4 : false}; + case ToolBarStyle.headerFive: + return {'format': 'header', 'value': isActive ? 5 : false}; case ToolBarStyle.background: return {'format': 'background', 'value': 'red'}; case ToolBarStyle.link: @@ -1217,6 +1293,12 @@ class ToolBarItem extends StatelessWidget { return _getAssetImageWidget(ImageConstant.kiHeaderOneDarkPng); case ToolBarStyle.headerTwo: return _getAssetImageWidget(ImageConstant.kiHeaderTwoDarkPng); + case ToolBarStyle.headerThree: + return _getAssetImageWidget(ImageConstant.kiHeaderThreeDarkPng); + case ToolBarStyle.headerFour: + return _getAssetImageWidget(ImageConstant.kiHeaderFourDarkPng); + case ToolBarStyle.headerFive: + return _getAssetImageWidget(ImageConstant.kiHeaderFiveDarkPng); case ToolBarStyle.background: return _getIconWidget(Icons.font_download_sharp); case ToolBarStyle.image: @@ -1227,6 +1309,10 @@ class ToolBarItem extends StatelessWidget { return _getIconWidget(Icons.redo_sharp); case ToolBarStyle.clearHistory: return _getIconWidget(Icons.layers_clear_sharp); + case ToolBarStyle.superscript: + return _getAssetImageWidget(ImageConstant.kiSuperscriptPng); + case ToolBarStyle.subscript: + return _getAssetImageWidget(ImageConstant.kiSubscriptPng); case ToolBarStyle.link: case ToolBarStyle.video: case ToolBarStyle.size: @@ -1316,6 +1402,18 @@ enum ToolBarStyle { headerTwo("Header H2"), + /// [headerThree] makes the text H3 + + headerThree("Header H3"), + + /// [headerFour] makes the text H4 + + headerFour("Header H4"), + + /// [headerFive] makes the text H5 + + headerFive("Header H5"), + /// [color] sets font color color("Font color"), @@ -1371,7 +1469,13 @@ enum ToolBarStyle { editTable("Edit table"), ///[separator] to add divider between toolbar items - separator("separator"); + separator("separator"), + + ///[subscript] makes an item as an subscript + subscript("subscript"), + + ///[superscript] makes an item as an superscript + superscript("superscript"); ///font - later releases diff --git a/lib/src/utils/format_config.dart b/lib/src/utils/format_config.dart index dd20d9e3d..fe8f335ba 100644 --- a/lib/src/utils/format_config.dart +++ b/lib/src/utils/format_config.dart @@ -19,6 +19,12 @@ class FormatConfig { /// [blockQuote] converts text to quote bool? blockQuote; + /// [superscript] makes selected text superscript + bool? superscript; + + /// [subscript] makes selected text subscript + bool? subscript; + /// [codeBlock] makes selected text code block bool? codeBlock; @@ -66,6 +72,8 @@ class FormatConfig { this.indentAdd, this.indentMinus, this.fontSize, + this.superscript, + this.subscript, }); /// will add the following formats in future release @@ -78,6 +86,8 @@ class FormatConfig { if (underline != null) 'underline': underline ?? false, if (strike != null) 'strike': strike ?? false, if (blockQuote != null) 'blockqoute': blockQuote ?? false, + if (superscript != null) 'superscript': superscript ?? false, + if (subscript != null) 'subscript': subscript ?? false, if (codeBlock != null) 'code-block': codeBlock ?? false, if (indentAdd != null || indentMinus != null) 'indent': indentAdd == true @@ -129,5 +139,14 @@ enum HeaderType { headerOne, /// to set the H2 header, - headerTwo + headerTwo, + + /// to set the H3 header, + headerThree, + + /// to set the H4 header, + headerFour, + + /// to set the H5 header, + headerFive, } diff --git a/pubspec.yaml b/pubspec.yaml index 03411c1e7..15d7fc548 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -45,6 +45,9 @@ flutter: - packages/quill_html_editor/assets/camera_roll_icon.png - packages/quill_html_editor/assets/h1_dark.png - packages/quill_html_editor/assets/h2_dark.png + - packages/quill_html_editor/assets/h3_dark.png + - packages/quill_html_editor/assets/h4_dark.png + - packages/quill_html_editor/assets/h5_dark.png - packages/quill_html_editor/assets/edit_table.png - packages/quill_html_editor/assets/insert_table.png - packages/quill_html_editor/assets/delete_column.png @@ -54,4 +57,6 @@ flutter: - packages/quill_html_editor/assets/insert_row_above.png - packages/quill_html_editor/assets/insert_row_below.png - packages/quill_html_editor/assets/insert_column_right.png + - packages/quill_html_editor/assets/superscript.png + - packages/quill_html_editor/assets/subscript.png - packages/quill_html_editor/assets/scripts/quill_2.0.0_4_min.js