Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于组件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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant