Summernote editor placeholder does not show

[StevenM]

======== TEMPLATE BUG FORM ========

Wappler Version : 3.7.8
Operating System : OSX 11.2.1
Server Model: Node
Database Type: MYSQL
Hosting Type: Docker

Expected behavior

What do you think should happen?

The placeholder text should show

Actual behavior

Placeholder text does not initial show, however, if you place the cursor in the text area and then hit the delete button the placeholder text shows.

How to reproduce

1. Create a form and add in a summernote text area
2. Add placeholder text
3. Show the form in the browser
4. No placeholder text shown
5. Click inside the text area
6. Select the delete button and the placeholder text appears.

Video:

summernoteerror

On clicking the delete button as shown in the previous biutton the summernote style changes as shown in the video here:

display block SN

[Teodor]

Hello,
This seems to happen because the summernote scripts adds <p><br></p> in the textarea when it loads. Not sure if we can improve this behavior or will this be easy to fix, i see many bug reports about this in summernote github:

If no text, there is auto added <p><br></p>

empty para should be empty

[patrick]

Is it possible that you have some whitespace character in the value.

The <p><br></p> is indeed added in an empty editor, but this is also detected as being empty and a placeholder should be shown. But <p> <br></p> will not show a placeholder, the space character is seen as content.

[patrick]

Please test following update.

dmxAppConnect.zip (22.6 KB)

[StevenM]

Tried the new file and just got a blank page in the browser. Looked ok in Wappler. except it started to throw errors:

I have reverted but now getting mediumEditor is not defined error - how do I get rid of this without removing ref to medium?

before I swapped out the file no errors and everything was working as expected.

[patrick]

Did you also change something on the page? If you just swapped the file and then reverted the old one it should just work again.

mediumEditor is not defined error normally happens when the medium editor include is missing or was loaded after dmxMediumEditor.js.

[StevenM]

Hi @patrick

I initially just installed the new file and started to get the error and when I removed it it was still there.

I have removed all reference in the Layout page and content page include and then added a new textarea and turned into medium and ow I just get the warning “Unknown component found! medium-editor” when I turn on App Connect Mode

But when I refresh the Wappler Design view the warning goes away.

I have also tried creating a new page and adding in the medium editor and I get the “not defined”

I might just remove it completely.

[Teodor]

There must be something messed with your page includes, missing includes or missing comments. Not sure why do you have medium editor on the same page where you are using summernote?
I suggest to double check what exactly have you removed from the main page and what has left on the content page, as there may be old comments/includes left or you removed too much from the parent page.

As for the initial issue, i tested the latest update from Patrick, replaced the existing dmxAppConnect.js file an i can confirm it fixes the problem.

[StevenM]

I tried reinstalling Wappler and starting with a new page, different project and just couldn’t get it to work and just created more errors.

Maybe I replaced the file wrong, but just relaced the file and worked in Wappler but just showed a blank page in the browser.

Medium was on the page because I removed summernote to see if I could use Medium instead. But It just threw errors in Wappler even though it worked in the browser.

I will stick with Summernote and for now just hard code a place holder until an official fix is released.

[Teodor]

@StevenM

until an official fix is released.

The “official fix” is already posted in the topic. It will bundled with Wappler tomorrow, so no difference, the same file will be added in your project.

[StevenM]

Well what can I tell you?? I replaced this file and It breaks my app as described. Unless there are special instructions for replacing the file? Lets see how everyone else using Summernote fairs.

[Teodor]

Nothing special about replacing the file. You just replace the existing file in the “dmxAppConnect” folder and that’s all.
The errors you posted have nothing to do with it, they show wrong/missing includes on the main page or components used on the content page without their includes available on the main page.
I tested this on an existing site and on a new site, both NodeJS sites with content pages based on layouts. The fix Patrick provided works perfectly fine.

[StevenM]

Ok I will completely remove summernote (all includes) and reinstall and check all the includes and check dev console and see how we go.

[Teodor]

The easiest way is to just add it on a blank new page inside a form and test

[StevenM]

OK.

I removed everything from the app to do with summernote.

This is the errors before the file update and all is ok, apart from a missing .min.js file.

This is the app after the update and results in a blank page in the browser and has a new error:

[StevenM]

Relates to this bit of code:

this.$placeholder.parentNode.insertBefore(this.input, this.$placeholder);

[Teodor]

The second error is related to the datepicker component, not to summernote.
What content do you have on your page exactly?

EDIT: I was able to reproduce this, when adding the datepicker on the page. We will check this error.

[StevenM]

A form

with a datepicker x 2 yes (one I am using for start date and 1 for end date).

Basic form check boxes and radio buttons.

Its not an issue at all with the current version of Wappler works as expected!!

The error only occurs with this new file!

[Teodor]

I was able to reproduce this with a datepicker on the page. Seems the fix for summernote caused some issues with the datepicker, so we will fix it for today’s update.
Thanks for reporting this and great that you noticed it, as i missed this in my tests