使用 draft-js 和 draft-convert 渲染列表项的开始和结束列表标签

Question

我正在使用 draft-js@0.11.7 和 draft-convert@2.2.12

我试过以下三种方法：

      if (block.type === 'ordered-list-item') {
        switch (block.depth) {
          case 1:
            return {
              start: `<li className="list-inside list-loweralpha indent-6">`,
              end: '</li>',
              nest: '<ol>',
              nestStart: '<ol>',
              nestEnd: '</ol>',
            };
          case 2:
            return (
              <ol>
                <li className="list-inside list-lowerroman indent-12">{block.text}</li>
              </ol>
            );
          default:
            return <li className="list-inside list-decimal" />;
        }
    }

这是输出：

这是DOM:

如您所见：

默认（嵌套长度 0）呈现 <li> 但不呈现 <ol> 或 </ol>，这意味着每个后续列表将在最后一个 <li> 之后继续编号顺序在 DOM。如果我手头有一个 <ul> 它不会从 1 开始。
第一个嵌套级别正确呈现 <ol> 和 </ol> 标签，但删除了我的样式。
第二个嵌套级别为每个块呈现一个 <ol><li></li></ol>，这意味着每个块的编号重置。

我只是想模仿左侧 DraftJS 编辑器中的功能。如果我删除 convertToHTML 部分中的任何列表块检查，我的列表将在 dom 中正确呈现，但没有样式并且没有要点（list-style-type css 属性).

Answer 1

其实我已经找到了解决办法。

方法 1 是正确呈现 DOM 元素的首选解决方案，但样式仅适用于 style=""，不适用于 className=""。

draft-js 块类型的工作 return 是：

        return {
          start: `<li 
                     style="
                       list-style-position: inside;
                       list-style-type: lower-alpha;
                       text-indent: 1.5rem;"
                   >`,
          end: '</li>',
          nest: '<ol>',
          nestStart: '<ol>',
          nestEnd: '</ol>',
        };

列表现在按预期呈现：

使用 draft-js 和 draft-convert 渲染列表项的开始和结束列表标签

Render open and closing list tags for list items using draft-js and draft-convert

reactjs

tailwind-css

wysiwyg

draftjs

react-draft-wysiwyg

这是输出：

这是DOM: