diff --git a/README.md b/README.md index 3e71a6c..cb2e093 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,8 @@ - [4. Adding the `Quill` editor](#4-adding-the-quill-editor) - [4.1 Instantiating `QuillEditor`](#41-instantiating-quilleditor) - [4.2 Defining triple click selection behaviour](#42-defining-triple-click-selection-behaviour) + - [4.3 Reassigning `quillEditor` on web platforms](#43-reassigning-quilleditor-on-web-platforms) + - [4.3.1 Creating web embeds](#431-creating-web-embeds) # Why? 🤷‍ @@ -588,4 +590,71 @@ For this, we get the text offset from the `controller` and use it to set the text selection to the whole text. We then set the `_selectionType` back to `none`, so on the next click, -the selection loops back to nothing. \ No newline at end of file +the selection loops back to nothing. + + +### 4.3 Reassigning `quillEditor` on web platforms + +In order for our editor to work on the web, +we need to make a few changes to the `quillEditor` variable. +Because of this, +we are going to reassign a new `QuillEditor` instance +to it on web platforms. + +Go back to `_buildEditor()` and continue where we left off. +Add the following line under the `quillEditor` variable instantiation. + +```dart + if (widget.platformService.isWebPlatform()) { + quillEditor = QuillEditor( + controller: _controller!, + scrollController: ScrollController(), + scrollable: true, + focusNode: _focusNode, + autoFocus: false, + readOnly: false, + placeholder: 'Add content', + expands: false, + padding: EdgeInsets.zero, + onTapUp: (details, p1) { + return _onTripleClickSelection(); + }, + customStyles: DefaultStyles( + h1: DefaultTextBlockStyle( + const TextStyle( + fontSize: 32, + color: Colors.black, + height: 1.15, + fontWeight: FontWeight.w300, + ), + const VerticalSpacing(16, 0), + const VerticalSpacing(0, 0), + null, + ), + sizeSmall: const TextStyle(fontSize: 9), + ), + embedBuilders: [...defaultEmbedBuildersWeb], + ); + } +``` + +We are using the `platformService` we mentioned earlier +to check if the platform is **web** or not. + +As you can see, the parameters are quite similar +to the previous assignment (meant only for mobile devices), +except the `embedBuilders` parameter, +which uses the `defaultEmbedBuildersWeb`. +This variable is not yet defined, so we shall do this right now! + + +#### 4.3.1 Creating web embeds + +As noted in `flutter-quill`'s documentation +(https://github.com/singerdmx/flutter-quill/tree/master#web), +we need to define web embeds so Quill Editor works properly. + + + +- toolbar next +