Medium Editor Textarea HTML Value Issue

Wappler General Bugs
#1

Wappler Version : 1.9.7
Operating System : Windows 10

Expected behavior

Binding value to a medium editor text area should result in HTML exactly as it was saved from it.

Actual behavior

The value bound is loosing a space, which leads to failure of a validation between textarea’a value and original value from DB.
When focus is moved to the editor, the space gets added automatically, okay-ing the validation.

How to reproduce

Value from medium editor is stored in he DB as: <p >Hello World</p>
Notice the space in opening p tag. This is default behaviour.
Setup a medium text editor and save value to DB to check this.

Add a medium editor textarea on the page.
Set dmx-bind:value of the editor to value from DB.
Set a validation comparing values of editor & DB on another element
for eg: set a p with dmx-bind:value="db.value == mediumedit.value ? 'OK' : 'NO'"
On page load, you will see the p says ‘NO’, but as soon as you click/focus the editor, it will turn to ‘OK’.

Medium editor producing <p > instead of <p>
#2

@Teodor / @patrick any views on how to fix this?

#3

That is indeed a strange behavior of the medium editor. It is the DOM that is removing the space and medium editor adding it. Have no workaround for this, I don’t know why medium editor adds that extra space.

#4

:fearful:
Was really hoping to get a workaround/fix.

Are you sure this cannot be fixed in medium editor? I think the space is leftover after removing the class attribute. If that can be fixed when setting editor value to textarea, wouldn’t it resolve the issue?

#5

This is certainly an unfortunate bug. I’m not quite clear about the validation issue, but would removing the space when the data was entered help? Eg you could use something like:
{{$_POST.myfield.replace(" >", ">")}}
when inserting the data - as a workaround (but quite a nuisance to have to use this method for all inserts and updates).

#6

I can do that, but the issue is that once the medium editor gets focus, the value on page becomes <p >.
So if the value in DB does not have that space <p>, the validation will work only until the editor gets focus.

So this needs to be resolved at the core. When medium editor creates the value for textarea, the space should be removed.

#7

That’s tricky. I hope it can be fixed. I suppose it’s particularly difficult fixing third-party software.

#8

So for the time being, I have applied a JS fix. In my case, I have a JS event suitable to execute the code so that the medium editor HTML is updated with the class medium-editor-is-selected.

setTimeout(function(){ $('[id^=medium-editor]').first().find('p').addClass('medium-editor-is-selected');}, 500);

So how this works is the jQuery selector [id^=medium-editor], selects all elements in the page which start with the ID medium-editor. The ID for medium editor element has a random number associated, hence the wild-card selector.
And then selects the first element and adds the class to its first p element.

In my case, I just need to fix one medium editor at a time. So this works for me (with some additional code).
If you need to do this to all medium editors on the page, make use of each() (more info here) instead of first().