[BUG] Attempt to set font using execCommand is erroring Flutter Web

[indyfmn]

Description

When trying to set the default font in the editor in the example application running on a Chrome browser, the font in the editor is not updated. Errors are seen in the IDE and Chrome Inspector.

To Reproduce

Steps to reproduce the behaviour:

1. Clone the repository.
2. Update pubspec.yaml of the example to add a dependency override - flutter_colorpicker: ^0.5.0
3. Update main.dart to add - controller.execCommand('fontName', argument: 'Courier New'); in the onInit of the Callbacks.
4. Run the application with Chrome (Web) as the target.
5. Once the page loads, enter any character in the editor.
6. Observe error in IDE & Chrome Inspector.

Expected behaviour

As per issue #93, if the default font is set for the editor, the editor should set the default font. I have tried the code changes with sans-serif, Times New Roman but no luck; I am seeing the same issue.

Screenshots

IDE -

Chrome Inspector -

Log Traces

IDE -

💪 Running with sound null safety 💪
Debug service listening on ws://127.0.0.1:64372/09CKqth2IIQ=/ws
Height of Platform View type: [9lPxiIN7KK12vg==] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [9lPxiIN7KK12vg==] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
done
Error: Unexpected null value.
    at Object.throw_ [as throw] (http://localhost:64325/dart_sdk.js:5061:11)
    at Object.nullCheck (http://localhost:64325/dart_sdk.js:5388:30)
    at http://localhost:64325/packages/html_editor_enhanced/src/html_editor_controller_unsupported.dart.lib.js:8408:18
    at Object._checkAndCall (http://localhost:64325/dart_sdk.js:5268:16)
    at Object.dcall (http://localhost:64325/dart_sdk.js:5273:17)
    at http://localhost:64325/dart_sdk.js:101824:100

Chrome Inspector -

Uncaught Error: Unexpected null value.
    at Object.throw_ [as throw] (errors.dart:251)
    at Object.nullCheck (operations.dart:528)
    at html_editor_widget_web.dart:661
    at Object._checkAndCall (operations.dart:334)
    at Object.dcall (operations.dart:339)
    at html_dart2js.dart:37308

Environment

Here is the output from flutter doctor -

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.5.0-5.3.pre, on macOS 11.5.2 20G95 darwin-x64, locale en-AU)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.1)
[✓] VS Code (version 1.60.0)
[✓] Connected device (2 available)

Additional context

I need to set the line height and the default font in the editor instead of offering the user Style options.

[indyfmn]

To everyone in the html-editor-enhanced team - Thank you so much for your work on this package. Without, I couldn't have thought of building a Web application using Flutter where a Rich Text Editor is definitely needed.

[tneotia]

Hi there, I am pushing an update soon. The way to do this is to use the onFocus callback:

onFocus: () {
                if (controller.characterCount == 0) {
                  controller.execCommand('fontName', argument: 'Courier New');
                }
                print('editor focused');
              }

Note: this will not work until the 2.3.0 release is pushed out. Expect it within the next hour or so :)

[indyfmn]

Thank you @tneotia 🙏

[timsedev]

Hey @tneotia ,

Dont think this:

onFocus: () {
                if (controller.characterCount == 0) {
                  controller.execCommand('fontName', argument: 'Courier New');
                }
                print('editor focused');
              }

Works anymore