[BUG] Attempt to set font using execCommand is erroring Flutter Web
indyfmn opened this issue ยท 3 comments
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:
- Clone the repository.
- Update
pubspec.yaml
of theexample
to add a dependency override -flutter_colorpicker: ^0.5.0
- Update
main.dart
to add -controller.execCommand('fontName', argument: 'Courier New');
in theonInit
of the Callbacks. - Run the application with Chrome (Web) as the target.
- Once the page loads, enter any character in the editor.
- 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
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.
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.
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 :)