EDITOR LOADING ISSUE

[truly6ve]

Describe the bug
The editor is working all fine and is very good in all respects. The only issue I am facing right now is; When I navigate to the page where this editor is, it doesn't load most of the time. I may need to go back and re-open the page. This is what I have to try most of the time as 70% it doesn't load.

As you can see in the first image it is loaded properly but in the second image, it is not loading the contents area of the Editor.

I am trying this in Chrome and my Flutter version is: 2.8.1.

Hope to hear from you soon regarding its solution.

Screenshots

[tneotia]

Is there anything of note in the logs when this happens? Seems like the HTML element iframe doesn't initialize properly?

[truly6ve]

Hi,

Thank you for your reply.

The following message appears when the editor is not loaded properly:

===========================================
TypeError: Cannot read properties of undefined (reading 'setAttribute')
at handleMessage (about:srcdoc:59:68)

===========================================

And the below message appears every time when the page is loaded.

===========================================

Height of Platform View type: [ehCS4r2mA-19sw==] may not be set. Defaulting to height: 100%.
Set style.height to any appropriate value to stop this message.
Width of Platform View type: [ehCS4r2mA-19sw==] may not be set. Defaulting to width: 100%.
Set style.width to any appropriate value to stop this message.

===========================================

[truly6ve]

Hi,

Below is the detail of how the code is used:

final HtmlEditorController htmlEditingController = HtmlEditorController();
===Getting data from APIs:
**__htmlEditingController.setText(emailTemplate['email_body']);**

and the Editor settings is as below:

HtmlEditor( htmlEditorOptions: const HtmlEditorOptions( hint: 'Your text here...', shouldEnsureVisible: true), htmlToolbarOptions: const HtmlToolbarOptions( toolbarType: ToolbarType.nativeGrid, defaultToolbarButtons: [ StyleButtons(), FontSettingButtons(fontSizeUnit: false), FontButtons(clearAll: false), ColorButtons(), ListButtons(listStyles: false), ParagraphButtons( textDirection: false, lineHeight: false, caseConverter: false), InsertButtons( picture: true, video: false, audio: false, table: true, hr: true, otherFile: false), ]), controller: _htmlEditingController),

[sscast]

I noticed the same problem.. At the beginning it was always okay in browsers on a computer, but not okay in browsers on my phone. Now on computer it shows the same problem.

Also I've been wondering how to set a height for the editor, it doesn't seem allowing that?

[mduccc]

Same problem on the Chrome browser

flutter doctor -v
[✓] Flutter (Channel stable, 2.10.0, on macOS 12.2 21D49 darwin-arm, locale en-US)
    • Flutter version 2.10.0 at /Users/mducc1412/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f105a6ca7 (9 days ago), 2022-02-01 14:15:42 -0800
    • Engine revision 776efd2034
    • Dart version 2.16.0
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/mducc1412/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.34.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[sscast]

Hi,

Thank you for your reply.

The following message appears when the editor is not loaded properly:

=========================================== TypeError: Cannot read properties of undefined (reading 'setAttribute') at handleMessage (about:srcdoc:59:68)

===========================================

And the below message appears every time when the page is loaded.

===========================================

Height of Platform View type: [ehCS4r2mA-19sw==] may not be set. Defaulting to height: 100%. Set style.height to any appropriate value to stop this message. Width of Platform View type: [ehCS4r2mA-19sw==] may not be set. Defaulting to width: 100%. Set style.width to any appropriate value to stop this message.

===========================================

Hi @tneotia, It's similar error for me too. Is it because somewhere the return value is null/nil? I don't know how to debug Javascript. :( Hope you know how to fix it.

TypeError: undefined is not an object (evaluating 'document.getElementsByClassName('note-editable')[0].setAttribute')
handleMessage — about:srcdoc:76

Thanks.

[tneotia]

Apologies, I have been extremely busy recently having started a new job, and currently don't have much time to look into this. I will see if I can find a solution in the near future.

[reke592]

possible because of CSP header

[truly6ve]

possible because of CSP header

Sorry, what's CSP?

[reke592]

Content security policy, in the package there is an IFrame that loads the editor, on my case I encountered the same issue when I tried to render the index.html in backend to inject some meta-tags, I need to include the script-src 'self' 'unsafe-inline' to load the editor.

[ervindobri]

Currently facing the same issue on Chrome. Flutter 2.10.4, latest version of package. No html renderer

[ZdenekKrcal]

Hi guys, I have the same issues. :-(. It is not possible to use it for the web now because of that.

Maybe it would be better to have editor written in dart but I don't know if it is possible.

[tneotia]

#219 may fix this issue, but unfortunately it has merge conflicts and a change that needs to be removed before I can merge it.

[tdh8316]

I'm facing the same problem on all of the available browsers.

[truly6ve]

Hi,

I have fixed it. Simply set "autoAdjustHeight" as "false" and it'll fix the issue.

                           HtmlEditor(
                              htmlEditorOptions: const HtmlEditorOptions(
                              autoAdjustHeight: false,
                              hint: 'Your text here...',
                              shouldEnsureVisible: true),

[truly6ve]

It is sorted ...

[boziyoung]

hi @truly6ve, i am running my app in flutter for web, it still raises this error

` Flutter (Channel stable, 2.10.1, on Microsoft Windows [Version 10.0.19044.1706], locale zh-CN)
• Flutter version 2.10.1 at D:\Program Files\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision db747aa133 (3 months ago), 2022-02-09 13:57:35 -0600
• Engine revision ab46186b24
• Dart version 2.16.1
• DevTools version 2.9.2

[X] Android toolchain - develop for Android devices
X ANDROID_HOME = D:\Downloads\platform-tools_r31.0.3-windows\platform-tools
but Android SDK not found at this location.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.1706]
• Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.54
• Edge (web) • edge • web-javascript • Microsoft Edge 101.0.1210.47

[√] HTTP Host Availability
• All required HTTP hosts are available`

my code :
child: HtmlEditor( controller: controller, htmlEditorOptions: const HtmlEditorOptions( autoAdjustHeight: false, hint: 'Your text here...', shouldEnsureVisible: true),

[reke592]

still having issue with CSP headers

[acheronian]

Having the same issue, csp generator detected multiple inline style-src resources. Could we reopen the ticket or should we create a new one?

still having issue with CSP headers