When use Bold and italic in link it is duplicate the link text

[taher-k5]

Describe the bug

When I am use Bold and italic in link it is duplicate the link text. I have using renderHtml() for render content in frontend

Steps to reproduce

1. Add link in vizy field
2. Apply bold or Italic style on it.
3. Check frontend.

Craft CMS version

4.7.4

Plugin version

2.1.16

Multi-site?

No

Additional context

No response

[engram-design]

Can you show me your exact Twig code to render the field content? I'm not seeing this duplication, but it's an easy thing to do if you're custom-rendering nodes, which is why I ask.

{{ entry.vizyField.renderHtml() }}

Results in:

<p>Here is some <strong><em>bold and italic</em></strong> content</p>

[taher-k5]

Yes It's apply on P tag that is working fine. but when you select link and apply bold on it. it will create a new bold text not apply on link. It is because of marks. Paragraph file

<p class="text-base font-normal leading-8 mb-10">
    {% for nodeContent in node.content %}
        {% for mark in nodeContent.marks %}
            {% if mark.type == 'link' %}
                <a class="link text-light-blue" href="{{ mark.attrs.href }}">{{ nodeContent.text }}</a>
            {% elseif mark.type == 'bold' %}
                <strong>{{ nodeContent.text }}</strong>
            {% elseif mark.type == 'italic' %}
                <em>{{ nodeContent.text }}</em>
            {% elseif mark.type == 'textStyle' %}
                <span>{{ nodeContent.text }}</span>
            {% elseif mark.type == 'underline' %}
                <u>{{ nodeContent.text }}</u>
            {% elseif mark.type == 'superscript' %}
                <sup>{{ nodeContent.text }}</sup>
            {% elseif mark.type == 'subscript' %}
                <sub>{{ nodeContent.text }}</sub>
            {% elseif mark.type == 'strike' %}
                <strike>{{ nodeContent.text }}</strike>
            {% elseif mark.type == 'code' %}
                <code>{{ nodeContent.text }}</code>
            {% endif %}
        {% else %}
            {% include '_components/redactor' with { content: nodeContent.text } %}
        {% endfor %}
    {% endfor %}
</p>

<p class="text-base font-normal leading-8 mb-10"><a class="link text-light-blue" href="test.link">Test content</a><strong>Test content</strong><em>Test content</em><em>and beyond!”</em></p>

[engram-design]

Still fine me.

<p>Here is some <strong><em>bold and italic</em></strong> content</p>
<p><a href="https://google.com">Here is some <strong><em>bold and italic</em></strong> content</a></p>

But if you're custom rendering (I thought you mentioned just using renderHtml()?) then you need to cater for multiple marks inside a node. This really means you have to loop through each mark, output the start tag, output the content of the node, and then output the end tag.

<p class="text-base font-normal leading-8 mb-10">
    {% for nodeContent in node.content %}
        {% for mark in nodeContent.marks %}
            {% if mark.type == 'link' %}
                <a {{ attr(mark.attrs) }}>
            {% elseif mark.type == 'bold' %}
                <strong>
            {% elseif mark.type == 'italic' %}
                <em>
            {% endif %}
        {% endfor %}

        {{ nodeContent.text }}

        {% for mark in nodeContent.marks %}
            {% if mark.type == 'link' %}
                </a>
            {% elseif mark.type == 'bold' %}
                </strong>
            {% elseif mark.type == 'italic' %}
                </em>
            {% endif %}
        {% endfor %}
    {% endfor %}
</p>

Also refer to https://github.com/verbb/vizy/issues/283

[taher-k5]

Thank you mate @engram-design. Can you please mention this in your doc https://github.com/verbb/vizy/issues/283