[BUG-Web] Cursor is acting weird and not in the right position and also the newline command

[AscentionOne]

Hi @tneotia,

First of all, this is a great package after I try several functionalities. I am planning to adopt this package into my flutter web project. However, I found some weird effects on the editor. I will separate it into different bug reports.

I am running the project with the command you recommend flutter run --web-renderer html

I found when setting hint: 'Your text here...', in the HtmlEditorOptions(). Initially when navigating to the edit page. The hint test sometimes will show correctly but sometimes will not. See below.

Secondly, is that when clicking on the editing area. The cursor is below the hint text. Shouldn't it be on the same line of hint text? When I hit the backspace it will then appear at the start and the same line as hint text. Then when I clear the hint text and typed in some characters and hit enter to go to the new line. The character will move slightly lower. Which is not in the correct position.

Thank you for the great effort in creating this package. 😁

[tneotia]

Hi there. Thanks for your bug reports. Here is what I have to say:

1. (For hint text) - never seen this happen before. I will do some testing later today to figure out why this is happening.
2. (Cursor below hint text) - Unfortunately this is just an issue with the library I use for the editor. You can see on their website it has the same behavior - https://summernote.org/getting-started/#without-bootstrap - I use the "without bootstrap" version so try clicking on their example and you will see the same behavior. However, it is possible to fix this, see [BUG]click the editor then cursor is at second line #24 (comment).
3. (Clear hint text and then press enter) - This is also an issue with the library I use for the editor. By default it sets the initial text inside to <p><br/></p> for various reasons, which is why the cursor appears 1 line lower than the hint. When you backspace all the way it removes all that, but then when you start typing again it will put that HTML back at the top. This causes that slight jump down in the cursor position.

I really wish I could fix some of these issues but that can't happen unless I write my own WYSIWYG editor in HTML and JavaScript, something which I don't have the expertise or time for at the moment. Maybe some day :)

Hopefully the solution for your second issue is helpful, and I will look into the first one.

[AscentionOne]

@tneotia Thank you for the detailed explanation. I totally understand how much effort it takes to write a WYSIWYG by yourself. This is why I am also looking for a package to support my project. This package is great, to be honest.

I am also currently working on using IFrame in the web application. I use the platformViewRegistry function provide in your package and also found some StackOverflow questions about iframe that you had answered.

Can I ask several questions about what I have using IFrameElement and HtmlElementView?

1. Why is the website in the HtmlElementView reload when resizing the web page? It's like what you mention in the package when building with canvasKit however html will not.
2. How to know when will the Iframe is fully loaded? Like the onLoad() function in this package? I would like to insert some DOM elements into Iframe.

Thanks a lot!

[tneotia]

Thank you so much, I appreciate the kind words!

Here are the answers to your questions:

1. I don't know the technical details behind this but it is due to how Flutter was rendering the elements in CanvasKit. This has been fixed on the master branch of Flutter, so you can use CanvasKit freely and the iframe will not reload.
2. You can see here where I set a function to run when the iframe is loaded. It is simply a parameter you can set when creating the IframeElement() class.

Hope this helps you.

[AscentionOne]

@tneotia Thank you for the answer. I am currently on stable channel. Will you recommend I switch to master or wait until it make into stable? 😀

[tneotia]

Will you recommend I switch to master or wait until it make into stable?

It is honestly up to you... of course master will have more bugs than stable but you have the added (huge) benefit of being able to use CanvasKit. Personally I use either beta or dev channels for my production app and this package. If you are currently in your testing phase and have not released to the public, then master should be fine to use. I would not recommend it for distributing to users, though.

It may be 1-2 months before the feature makes it to stable, which is why I like to use beta & dev just so I can use these features within a few weeks rather than a few months.

By the way would you be able to share your HtmlEditor configuration so I can test the first issue with the hint disappearing? I will have some time later today.

[AscentionOne]

This is my HtmlEditor setup. It is pretty simple. I am not sure if it is the navigation cause that effect. I am using auto_route package for navigation by the way. It needs a bit of setup, but I think using simple navigation should be able to test.

Expanded(
            child: HtmlEditor(
              controller: controller,
              htmlEditorOptions: HtmlEditorOptions(
                hint: 'Your text here...',
                shouldEnsureVisible: true,
                // initialText: "<p><b>text</b> content initial, if any</p>",
              ),
              htmlToolbarOptions: HtmlToolbarOptions(),
              callbacks: Callbacks(onInit: () => controller.setFullScreen()),
            ),
          ),