Skip to content

Commit e6c3ba0

Browse files
committed
chore: Web reassignment on flutter quill. #1
1 parent ddd6dcc commit e6c3ba0

File tree

1 file changed

+70
-1
lines changed

1 file changed

+70
-1
lines changed

Diff for: README.md

+70-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
- [4. Adding the `Quill` editor](#4-adding-the-quill-editor)
2828
- [4.1 Instantiating `QuillEditor`](#41-instantiating-quilleditor)
2929
- [4.2 Defining triple click selection behaviour](#42-defining-triple-click-selection-behaviour)
30+
- [4.3 Reassigning `quillEditor` on web platforms](#43-reassigning-quilleditor-on-web-platforms)
31+
- [4.3.1 Creating web embeds](#431-creating-web-embeds)
3032

3133

3234
# Why? 🤷‍
@@ -588,4 +590,71 @@ For this, we get the text offset from the `controller`
588590
and use it to set the text selection to the whole text.
589591
We then set the `_selectionType` back to `none`,
590592
so on the next click,
591-
the selection loops back to nothing.
593+
the selection loops back to nothing.
594+
595+
596+
### 4.3 Reassigning `quillEditor` on web platforms
597+
598+
In order for our editor to work on the web,
599+
we need to make a few changes to the `quillEditor` variable.
600+
Because of this,
601+
we are going to reassign a new `QuillEditor` instance
602+
to it on web platforms.
603+
604+
Go back to `_buildEditor()` and continue where we left off.
605+
Add the following line under the `quillEditor` variable instantiation.
606+
607+
```dart
608+
if (widget.platformService.isWebPlatform()) {
609+
quillEditor = QuillEditor(
610+
controller: _controller!,
611+
scrollController: ScrollController(),
612+
scrollable: true,
613+
focusNode: _focusNode,
614+
autoFocus: false,
615+
readOnly: false,
616+
placeholder: 'Add content',
617+
expands: false,
618+
padding: EdgeInsets.zero,
619+
onTapUp: (details, p1) {
620+
return _onTripleClickSelection();
621+
},
622+
customStyles: DefaultStyles(
623+
h1: DefaultTextBlockStyle(
624+
const TextStyle(
625+
fontSize: 32,
626+
color: Colors.black,
627+
height: 1.15,
628+
fontWeight: FontWeight.w300,
629+
),
630+
const VerticalSpacing(16, 0),
631+
const VerticalSpacing(0, 0),
632+
null,
633+
),
634+
sizeSmall: const TextStyle(fontSize: 9),
635+
),
636+
embedBuilders: [...defaultEmbedBuildersWeb],
637+
);
638+
}
639+
```
640+
641+
We are using the `platformService` we mentioned earlier
642+
to check if the platform is **web** or not.
643+
644+
As you can see, the parameters are quite similar
645+
to the previous assignment (meant only for mobile devices),
646+
except the `embedBuilders` parameter,
647+
which uses the `defaultEmbedBuildersWeb`.
648+
This variable is not yet defined, so we shall do this right now!
649+
650+
651+
#### 4.3.1 Creating web embeds
652+
653+
As noted in `flutter-quill`'s documentation
654+
(https://github.com/singerdmx/flutter-quill/tree/master#web),
655+
we need to define web embeds so Quill Editor works properly.
656+
657+
658+
659+
- toolbar next
660+

0 commit comments

Comments
 (0)