Text selection detection and media queries for wysiwyg editor leading to unwanted/confusing results

[hayden-t]

VvvebJs/libs/builder/builder.js

Line 629 in 078fe4f

if ((selection.baseNode && selection.baseNode.nextSibling == null && selection.baseNode.previousSibling == null

im using firefox and if you double click a text section, to show the little style editor that appears above your content, and change any setting there it just wraps the text in a span, even if you select the whole text, and if you change it again, it just inject another span inside the first span, on and on.

for me selection.baseNode just always is undefined, when i think it uses the common alias selection.anchorNode instead but as well as this the calculation of a selection length doesnt work

Also using the wysiwyg styler doesnt take into account if you are in mobile/tablet view or desktop.

You can force it to always apply the inline style editor changes to the parent element by setting this line to 0

VvvebJs/libs/builder/builder.js

Line 627 in 078fe4f

if (selection.rangeCount > 0) {

it just means any style applied will apply to the whole element regardless of selection

Also any edits via this toolbar are not counted in mediaqueries (tablet/mobile) view, leading to confusion as this is not mentioned, you could disable the toolbar completely and do everythign via the left panel by commenting out this line

VvvebJs/libs/builder/builder.js

Line 799 in 078fe4f

document.getElementById("wysiwyg-editor").style.display = "block";

i guess though there are different needs for different things, and really you might need to create links, bold words or colors within a text element this way, otherwise you would need a way to insert spans within existing elements another way , which you could do

So you sort of need it, and i think i might instead actually just remove font size from the toolbar so that theres no confusions, that way anything in the toolbar is not really mobile/desktop specific.

Here is my minimal toolbar for just working on inline text (ps you have to style hide the buttons, not html comment them out otherwise you get js errors expecting them

VvvebJs/editor.html

Line 511 in 078fe4f

<div id="wysiwyg-editor" class="default-editor">

[hayden-t]

here is an example in the standard editor where if you select a word and bold it, then click bold again, it doesnt toggle it off, it just keep injecting bold spans, so theres no way to remove it

[hayden-t]

i worked out this fix to correct the selection detection, not sure if its a firefox/browser specific thing so now i dont get the span injection loop #441

[hayden-t]

ive also added this as i feel you should always be selecting the element that the cursor is in, as the wysiwyg editor is wrapping elements around it, element selection should follow this #442

[hayden-t]

i also proposed the removal/hiding of the font size selector given the current situation #443
"this conflicts with mobile view / media queries, as as changes via wysiwyg editor doesnt take into affect mobile/tablet view, and because they are inline media queries wont be able to affect them."