verbb / vizy

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

Misaligned tags for overlapping marks #245

Closed barnslig closed 10 months ago

barnslig commented 10 months ago

Describe the bug

Hi,

there seems to be an issue with overlapping marks producing incorrect HTML.

The issue is already fixed in ueberdosis/tiptap-php v1.3.0. However, it seems that it needs to be merged manually into Vizy, because updating tiptap-php does not solve the issue.

Related issues and PRs:

Possibly affected function that needs to be fixed: https://github.com/verbb/vizy/blob/69b8c7221f7c5d0a8e26e0d1d6b2bbbbac45e788/src/services/Nodes.php#L114-L152

Best regards

Steps to reproduce

Manual issue reproduction:

  1. Create a link within a Vizy field
  2. Create a text selection that overlaps linked and non-linked text
  3. Turn it italic

Example JSON from .getRawNodes():

[{"type":"paragraph","attrs":[],"content":[{"type":"text","text":"Lorem "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https:\/\/google.com","target":"","class":null}}],"text":"ipsum dolor "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https:\/\/google.com","target":"","class":null}},{"type":"italic"}],"text":"sit amet"},{"type":"text","marks":[{"type":"italic"}],"text":", "},{"type":"text","text":"consectetur."}]}]

Rendered invalid HTML from Vizy:

<p>Lorem <a href="https://google.com">ipsum dolor </a><a href="https://google.com"><em>sit amet</a>, </em>consectetur.</p>

Expected HTML, rendered via tiptap-php:

<p>Lorem <a href="https://google.com">ipsum dolor <em>sit amet</em></a><em>, </em>consectetur.</p>

Craft CMS version

Craft Pro 4.4.17

Plugin version

2.1.8

Multi-site?

No response

Additional context

No response

engram-design commented 10 months ago

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-4 as 2.1.8"

engram-design commented 10 months ago

Fixed in 2.1.9