verbb / vizy

A flexible visual editor for Craft CMS
Other
44 stars 8 forks source link

Space Insertion Edge Case? #66

Closed kerns closed 2 years ago

kerns commented 3 years ago

Description Not sure if this is a bug or just a quirk I need to handle by trimming the output. But in this instance the last word Autofarm has italics applied to the word but not the punctuation. A space is inserted at some point in the assembly process.

Additional info

Additional context

Screen Shot 2021-08-12 at 13 29 36 Screen Shot 2021-08-12 at 13 28 50 Screen Shot 2021-08-12 at 13 29 05
engram-design commented 3 years ago

Shouldn't be something you need to handle, that's strange behaviour. I can't seem to immediately replicate it on my end.

image

image

bavodeclercq commented 2 years ago

Had a similar problem. A link followed by text in bold resulted in removing the space between them. My issue was solved by removing the spaceless tag in my code.

engram-design commented 2 years ago

Can't seem to replicate this (again). Are you able to send through the column for the element and Vizy field?

Go to content in your database, and filter the elementId by the entry that you were adding content for the Vizy field to. Find the column field_myVizyField_xxxxxx and send through the JSON in that column.

bavodeclercq commented 2 years ago

[{"type":"paragraph","attrs":{"textAlign":"start"},"content":[{"type":"text","text":"Github "},{"type":"text","marks":[{"type":"bold"}],"text":"Vizy"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"italic"}],"text":"test"}]}]

image image image

engram-design commented 2 years ago

Ah, I did miss you saying you're using the {% spaceless %} Twig tag - I'm not sure if @kerns is also using that. That's a tricky situation, and is kind of how that Twig tag works, removing spaces from HTML.

Using just raw Twig (without Vizy involved at all) take the following HTML examples.

<p>Github <strong>Vizy</strong> <em>test</em></p>

Produces: Github Vizy test

{% apply spaceless %}
    <p>Github <strong>Vizy</strong> <em>test</em></p>
{% endapply %}

Produces: Github Vizytest

I'm not sure if there's anything we can do about that, as that's just how Twig's spaceless filter works. It's curious that it doesn't remove the space between Github <strong> but it likely looks at two tags </strong> <em> and applies that.

In addition, this exact issue happens with other rich text editors (Redactor, CKEditor), so it's not a problem unique to Vizy. As such, closing for the moment (unless @kerns original issue is different, not using the spaceless filter).