Skip to content

Commit

Permalink
fix(TM-43864): Fixed delta formatting in new version of quill-editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed Jun 20, 2024
1 parent 1c81bf4 commit 43016ef
Show file tree
Hide file tree
Showing 4 changed files with 269 additions and 77 deletions.
243 changes: 176 additions & 67 deletions example/lib/pages/components/quill_editor_demo.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,85 +15,122 @@ class QuillEditorDemo extends StatefulWidget {
class _QuillEditorDemoState extends State<QuillEditorDemo> {
final controller = QuillController.basic();

var _htmlPreview = true;

get htmlPreview => _htmlPreview;

set htmlPreview(value) {
if (htmlPreview == value) return;
setState(() {
_htmlPreview = value;
});
}

var _loading = true;

get loading => _loading;

set loading(value) {
if (loading == value) return;
setState(() {
_loading = value;
});
}

@override
void initState() {
super.initState();
ZdsQuillDelta.fromHtml('''
<h3>Google Doodles</h3><p><br/><img style="max-width: 100%;object-fit: contain" src="https://www.google.com/logos/doodles/2024/celebrating-chilaquiles-6753651837110223-2xa.gif"/><br><br/></p><p style="text-align:justify">Doodles celebrate a wide range of events, from national holidays like Independence Day and Christmas to special occasions like the anniversary of the first moon landing or the birth of significant figures in history such as Albert Einstein and Frida Kahlo.</p>
''').then((value) {
loading = true;
ZdsQuillDelta.fromHtml(editorData).then((value) {
controller.document = value.document;
}).whenComplete(() {
loading = false;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Quill Editor'),
actions: [
IconButton(
icon: const Icon(Icons.html),
onPressed: () {
final html = ZdsQuillDelta(document: controller.document).toHtml();
showDialog(
context: context,
builder: (context) {
return ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.7),
child: Dialog(
child: SingleChildScrollView(
child: Column(
children: [
Text(html),
],
),
)));
},
);
},
),
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.edit),
onPressed: () {
ZdsQuillEditorPage.edit(
context,
title: 'Edit Notes',
embedBuilders: getEmbedBuilders(),
initialDelta: ZdsQuillDelta(document: controller.document),
charLimit: 20000,
embedButtons: FlutterQuillEmbeds.toolbarButtons(
videoButtonOptions: null,
imageButtonOptions: QuillToolbarImageButtonOptions(
imageButtonConfigurations: QuillToolbarImageConfigurations(
onImageInsertCallback: (image, controller) async {
// Upload to cloud
controller.insertImageBlock(imageSource: image);
},
),
),
return Column(
children: [
Expanded(
child: Scaffold(
backgroundColor: Zeta.of(context).colors.surfacePrimary,
appBar: AppBar(
title: const Text('Quill Editor'),
actions: [
Row(
children: [
Text('HTML'),
Switch(
value: htmlPreview,
onChanged: (value) {
setState(() {
htmlPreview = !htmlPreview;
});
},
),
],
)
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.edit),
onPressed: () {
ZdsQuillEditorPage.edit(
context,
title: 'Edit Notes',
embedBuilders: getEmbedBuilders(),
initialDelta: ZdsQuillDelta(document: controller.document),
charLimit: 20000,
embedButtons: FlutterQuillEmbeds.toolbarButtons(
videoButtonOptions: null,
imageButtonOptions: QuillToolbarImageButtonOptions(
imageButtonConfigurations: QuillToolbarImageConfigurations(
onImageInsertCallback: (image, controller) async {
// Upload to cloud
controller.insertImageBlock(imageSource: image);
},
),
),
),
).then((value) {
if (value != null) {
setState(() {
controller.document = value.document;
});
}
});
},
),
).then((value) {
if (value != null) {
controller.document = value.document;
}
});
},
),
body: Column(
children: [
Expanded(
child: ZdsQuillEditor(
controller: controller,
readOnly: true,
padding: const EdgeInsets.all(16),
embedBuilders: getEmbedBuilders(),
focusNode: FocusNode(canRequestFocus: false),
body: Stack(
children: [
ZdsQuillEditor(
controller: controller,
readOnly: true,
padding: const EdgeInsets.all(16),
embedBuilders: getEmbedBuilders(),
focusNode: FocusNode(canRequestFocus: false),
),
if (loading) const LinearProgressIndicator(),
],
),
),
],
),
),
const Divider(),
Expanded(
child: Scaffold(
backgroundColor: Zeta.of(context).colors.surfacePrimary,
body: Builder(builder: (context) {
final html = ZdsQuillDelta(document: controller.document).toHtml();
return SingleChildScrollView(
padding: EdgeInsets.all(14),
physics: ClampingScrollPhysics(),
child: htmlPreview ? ZdsHtmlContainer(html, expanded: true, showReadMore: false) : Text(html),
);
}),
),
)
],
);
}
}
Expand All @@ -106,3 +143,75 @@ List<EmbedBuilder> getEmbedBuilders() {
return FlutterQuillEmbeds.editorBuilders();
}
}

const editorData = """
<p><img style="max-width: 100%;object-fit: contain"
src="https://www.google.com/logos/doodles/2024/double-cicada-brood-2024-6753651837110499-2xa.gif" /> </p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<br />
<ol>
<li>Plan the trip<ol>
<li>Book flights</li>
</ol>
</li>
<li>Reserve hotel<ol>
<li>Something</li>
</ol>
</li>
<li>Check review<ol>
<li>Read recent comments</li>
</ol>
</li>
<li>Compare prices<ol>
<li>Use comparison websites</li>
</ol>
</li>
<li>Pack luggage<ol>
<li>Clothes</li>
</ol>
</li>
</ol>
<br />
<ul>
<li>Toiletries<ul>
<li>Shampoo</li>
<li>Toothbrush</li>
</ul>
</li>
<li>Gadgets<ul>
<li>Phone</li>
<li>Charger</li>
</ul>
</li>
</ul>
<br />
<pre>Code snippet example:
Line 1: Initialize the project
Line 2: Write some code
Line 3: Test the code</pre>
<br />
<blockquote style="border-left: 4px solid #ccc;padding-left: 16px">“The only limit to our realization of tomorrow is our
doubts of today.”<br />– Franklin D. Roosevelt</blockquote>
<br />
<h1>Main Title</h1>
<br />
<h2>Subtitle</h2>
<br />
<h3>Section Title</h3>
<p><br /><strong>Bold text example</strong><br /><br /><em>Italic text example</em><br /><u>Underlined text example</u><br /><br /><s>Strikethrough text
example</s><br /><br />Small text example<br /><br /><code>Inline code example</code><br /><br /><span
style="color:#e53935">Red colored text</span><br /><br /><span style="background-color:#fdd835">Yellow
background text</span><br /><br />Indented paragraph example. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vivamus lacinia odio vitae vestibulum vestibulum.<br /><br />Another indented paragraph. Cras placerat
ultricies orci nec vestibulum.<br /><br />Left aligned text example<br /></p>
<p style="text-align:right">Right aligned text example</p>
<br />
<p style="text-align:center">Center aligned text example</p>
<br />
<p style="direction:rtl; text-align:inherit">Right to left text example</p>
<p><br /> <s>Multi-line strikethrough example:</s><br /><s>Line 1</s><br /><s>Line 2</s><br /><s>Line 3</s></p>
""";
50 changes: 44 additions & 6 deletions lib/src/components/organisms/html_preview/html_body.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,24 +107,42 @@ class ZdsHtml extends StatelessWidget {
}

Map<String, Style> _buildStyles(BuildContext context, ColorScheme colorscheme, BoxConstraints box) {
final zetaColors = Zeta.of(context).colors;
final bodyMedium = Theme.of(context).textTheme.bodyMedium;
final fSize = fontSize ?? bodyMedium?.fontSize;
return <String, Style>{
'p': Style(
fontSize: fontSize != null ? FontSize(fontSize!) : null,
fontSize: fSize != null ? FontSize(fSize) : null,
maxLines: maxLines,
before: '\n',
lineHeight: LineHeight.percent(125),
textOverflow: TextOverflow.ellipsis,
margin: Margins.only(left: 0, right: 0),
margin: Margins.zero,
padding: HtmlPaddings.zero,
),
'li': Style(
fontSize: fontSize != null ? FontSize(fontSize!) : null,
maxLines: maxLines,
lineHeight: LineHeight.percent(125),
textOverflow: TextOverflow.ellipsis,
margin: Margins.only(left: 0, right: 0),
backgroundColor: Theme.of(context).colorScheme.surface,
margin: Margins.zero,
),
'ol': Style(
fontSize: fontSize != null ? FontSize(fontSize!) : null,
maxLines: maxLines,
lineHeight: LineHeight.percent(125),
textOverflow: TextOverflow.ellipsis,
margin: Margins.zero,
),
'ul': Style(
fontSize: fontSize != null ? FontSize(fontSize!) : null,
maxLines: maxLines,
lineHeight: LineHeight.percent(125),
textOverflow: TextOverflow.ellipsis,
margin: Margins.zero,
),
'table': Style(
margin: Margins.zero,
height: Height.auto(),
width: Width.auto(),
border: Border(
Expand All @@ -135,6 +153,7 @@ class ZdsHtml extends StatelessWidget {
),
),
'tr': Style(
margin: Margins.zero,
height: Height.auto(),
width: Width.auto(),
border: Border(
Expand All @@ -145,6 +164,7 @@ class ZdsHtml extends StatelessWidget {
),
),
'th': Style(
margin: Margins.zero,
height: Height.auto(),
width: Width.auto(),
border: Border(
Expand All @@ -156,6 +176,7 @@ class ZdsHtml extends StatelessWidget {
padding: HtmlPaddings.all(6),
),
'td': Style(
margin: Margins.zero,
height: Height.auto(),
width: Width.auto(),
padding: HtmlPaddings.all(6),
Expand All @@ -167,12 +188,29 @@ class ZdsHtml extends StatelessWidget {
top: BorderSide(color: colorscheme.onSurface, width: 0.5),
),
),
'h3': Style(margin: Margins.zero),
'h4': Style(margin: Margins.zero),
'h5': Style(maxLines: maxLines, textOverflow: TextOverflow.ellipsis),
'iframe': Style(width: Width(box.maxWidth), height: Height((box.maxWidth / 16) * 9)),
'figure': Style(width: Width(box.maxWidth)),
'blockquote': Style(
padding: HtmlPaddings.only(left: 16),
border: Border(left: BorderSide(color: Zeta.of(context).colors.borderSubtle, width: 5)),
margin: Margins.zero,
padding: HtmlPaddings.symmetric(horizontal: 14, vertical: 8),
border: Border(left: BorderSide(color: zetaColors.borderDisabled, width: 4)),
color: zetaColors.textSubtle,
),
'pre': Style(
margin: Margins.zero,
padding: HtmlPaddings.all(14),
backgroundColor: zetaColors.surfaceTertiary,
lineHeight: LineHeight.percent(100),
color: zetaColors.primary.selected,
),
'code': Style(
margin: Margins.zero,
backgroundColor: zetaColors.surfaceTertiary,
lineHeight: LineHeight.percent(100),
color: zetaColors.primary,
),
...style,
};
Expand Down
Loading

0 comments on commit 43016ef

Please sign in to comment.