Skip to content
This repository was archived by the owner on Feb 20, 2025. It is now read-only.

关于组件cta使用中会删除掉container_cta_close的Token元素的问题 #312

Open
Cyanss opened this issue Dec 21, 2023 · 0 comments

Comments

@Cyanss
Copy link

Cyanss commented Dec 21, 2023

单独使用cta组件测试 如下:

:::cta

**cta left**

{.cta-left}

---

- cta right 1。 {.cta-li-1}
- cta right 2。 {.cta-li-2}

{.cta-right}

:::

输出:

<div class=" cta">
    <div class="number cta-left">
        <p><strong>cta left</strong></p>
    </div>
    <div class="benefit">
        <ul class="cta-right">
            <li class="cta-li-1">cta right 1。 </li>
            <li class="cta-li-2">cta right 2。 </li>
        </ul>
    </div>

预期输出:

<div class=" cta">
    <div class="number cta-left">
        <p><strong>cta left</strong></p>
    </div>
    <div class="benefit">
        <ul class="cta-right">
            <li class="cta-li-1">cta right 1。 </li>
            <li class="cta-li-2">cta right 2。 </li>
        </ul>
    </div>
</div>

    其实这个问题在cta组件单独使用时,是没有问题的,似乎是浏览器会自动补全缺失的div闭合标签,当我在使用嵌套的时候,这个问题就很致命。

嵌套使用columncta组件测试 如下:

::::column {.vertical-align}

:::cta {.column-1}

**cta left**

{.cta-left}

---

- cta right 1。 {.cta-li-1}
- cta right 2。 {.cta-li-2}

{.cta-right}

:::

----

column 2 test

{.column-2}

::::

输出:

<div class="vertical-align grid">
    <div class="column column-2">
        <div class="column-1 cta">
            <div class="number cta-left">
                <p><strong>cta left</strong></p>
            </div>
            <div class="benefit">
                <ul class="cta-right">
                    <li class="cta-li-1">cta right 1。 </li>
                    <li class="cta-li-2">cta right 2。 </li>
                </ul>
            </div>
            <hr />
            <p>column 2 test</p>
        </div>
    </div>

预期输出:

<div class="vertical-align grid">
    <div class="column">
        <div class="column-1 cta">
            <div class="number cta-left">
                <p><strong>cta left</strong></p>
            </div>
            <div class="benefit">
                <ul class="cta-right">
                    <li class="cta-li-1">cta right 1。 </li>
                    <li class="cta-li-2">cta right 2。 </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column column-2">
        <p>column 2 test</p>
    </div>
</div>

    经过分别测试了columncta组件,发现问题出在cta组件的最后删除并插入Token元素时,会将父级容器的闭合节点container_cta_closeToken删除掉。

cta.js#L80

        ……
        // 分组完成
        const divNumber = getOpenToken('div', level - 1);
        divNumber.attrPush(['class', 'number']);
        tokens.splice(imgStart, imgEnd - imgStart + 1, divNumber, ...img, getCloseToken('div', level - 1));

        const divToken = getOpenToken('div', level - 1);
        divToken.attrPush(['class', 'benefit']);
80 >      tokens.splice(ctxStart + 2, ctxEnd - ctxStart + 3, divToken, ...context, getCloseToken('div', level - 1));
        return state;

        ……

    本次测试中context中存储的原始Token元素数量为15,ctxStart的值为8,ctxEnd的值为22,ctxStart + 2 的值为10,ctxEnd - ctxStart + 3的值为17,其中为什么删除开始位置是ctxStart + 2 ,是因为前面插入了divNumberopenclose两个Token元素,而删除数量ctxEnd - ctxStart + 3不太明白什么意思,按照个人理解删除数量应该是context中存储的元素数量,将ctxEnd - ctxStart + 3改为context.length可暂时修复,暂时未遇到其他可能因这个改动产生的其他BUG。

解决方法:

修改cta.js#L80代码

        ……
        // 分组完成
        const divNumber = getOpenToken('div', level - 1);
        divNumber.attrPush(['class', 'number']);
        tokens.splice(imgStart, imgEnd - imgStart + 1, divNumber, ...img, getCloseToken('div', level - 1));

        const divToken = getOpenToken('div', level - 1);
        divToken.attrPush(['class', 'benefit']);
80 >      tokens.splice(ctxStart + 2, context.length, divToken, ...context, getCloseToken('div', level - 1));
        return state;

        ……
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant