Summernote TextArea Console Error / Display Issue

[scott]

OS info

• Operating System : Mac OSX 23.2.0
• Wappler Version : 6.1.2
• NodeJS Version : 16

Problem description

Summernote Lite not displaying correctly in Wappler or on local development
…

Steps to reproduce

1. Create an update modal.

2. Add Summernote Lite Text Area to replace regular Text Area. (note: static value added to show the issue in step three.)
   

3. In design view, it shows a small text area followed by a larger text area, but the Summernote Lite menu bar does not display.
   

   

As noted in Summernote add all language, css, script and cdn files in main layout, a massive amount of .js and .css files are added to the layout page. These appear to be a mix of Bootstrap 4 and 5 files along with language files.

In Console, the following error appears:

[Hyperbytes]

Interesting, you have a summernote lite input, and a Bootstrap 4 error.
Which version of bootstrap are you using?
Is it loaded on your page?

[famousmag]

Maybe is related with the selected theme?

Summernote Input Unreadable in Dark Mode

I can’t recreate this locally. What Summernote theme is selected on your page? Also what version of Summernote do you have on your site? For me, with the theme set to Bootstrap 5 it works fine on dark mode: [Screenshot 2024-01-26 at 9.12.16]

[Hyperbytes]

Although,from memory, summernote often showed bs4 tooltip.errors bur didn’t effect functionality.
BS5 version is much better.

[scott]

As far as I know, I have Bootstrap 5.

[Hyperbytes]

From you original post you are showing a summenote lite input, if BS5 then change to bootstrap in the properties panel. Error is probably because it is looking for BS 4 files and you are BS5

[scott]

I saw @brad’s post in Summernote Input Unreadable in Dark Mode but did not think it was related.

Perhaps the BS5 version is only available in Beta? I am on Stable.

I tried both the Lite and BS4 listed.

[Hyperbytes]

maybe, the error undoubtedly comes form an incompatibility with summernote and BS4.
guess the solution is switch to beta or wait for it to become full release

[brad]

Yes, I am on beta channels. I also used Summernote, not Summernote Lite.

[scott]

I made the leap and turned on Beta. It appears to fix the issue.

[Cameron_Burnett]

I’m nearing the end of the tutorial and I’ve got the same issue except without the errors mentioned previously (I’ll post what I have below but it doesn’t seem critical). Version 6.5 and Bootstrap 5. If I open it in any web browser I get the first picture, with the 2 text areas in “Description”. Somehow my developer tools in Chrome set itself to Responsive mode, and so by chance I discovered that Summernote works (2nd picture) when viewing it in that manner, I guess being emulated as a tablet or something (I get a black dot instead of the normal cursor).

I don’t know if I’m making sense with my description. It doesn’t work through the browser normally, but it does work with developer tools open as it’s running in tablet mode which is somehow different.

The only errors are 12x of this same one.

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

Responsive mode (see top of picture)

<div class="form-group mb-3 row">
    <label for="inp_description" class="col-sm-2 col-form-label">Description</label>
    <div class="col-sm-10">
        <textarea id="editor1" name="description" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','imageFile']],['view',['fullscreen','codeview','help']]]" dmx-bind:value="conn_single_page.data.query.description" dmx-plugin:file="{imageUrl:'/api/admin/pagedata/images/summernote_upload'}"></textarea>
    </div>
</div>

Thanks,
Cameron