|
27 | 27 | - [4. Adding the `Quill` editor](#4-adding-the-quill-editor)
|
28 | 28 | - [4.1 Instantiating `QuillEditor`](#41-instantiating-quilleditor)
|
29 | 29 | - [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) |
30 | 32 |
|
31 | 33 |
|
32 | 34 | # Why? 🤷
|
@@ -588,4 +590,71 @@ For this, we get the text offset from the `controller`
|
588 | 590 | and use it to set the text selection to the whole text.
|
589 | 591 | We then set the `_selectionType` back to `none`,
|
590 | 592 | 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