1

尝试用纯Draft.js 实现类似的东西：

隐藏块的 Gmail 用户界面

更准确地说，我希望通过单击三点图标来编辑和扩展这些隐藏的原始消息块

所以，经过一番研究，我发现有自定义块渲染和自定义块组件，所以我试图用 OriginalMessage 组件扩展 blockRenderMap：

const OriginalMessage = ({ children }) => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpanded = () => setExpanded(!expanded);

  return (
    <div>
      <span style={{ display: 'inline-block', padding: 4 }} onClick={toggleExpanded}>
        ...
      </span>
      {children}
    </div>
  );
};

const blockRenderMap = Immutable.Map({
  original: {
    element: 'original',
    wrapper: <OriginalMessage />,
  },
});

const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

...


// rendering the Editor

<Editor
  ...
  blockRenderMap={extendedBlockRenderMap}
/>

所以，这些可能是工作代码，想法是 - 我需要将以下 HTML 解析为相应且可识别的块：

<p>For example, this is a template that every new email has</p>
<p>Here we have a signature</p>
<original>A lot of HTML here that includes previous messages blockquotes etc</original>

我用来html-to-draftjs将这个 html 解析成块：

const blocksFromHTML = htmlToDraft(content, nodeName => {
  if (nodeName === 'original') {
    return {
      type: 'original',
      mutability: 'MUTABLE',
      data: {},
    };
  }
});

// setting new State

const newEditorState = EditorState.createWithContent(
  ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap,
  ),
  decorator,
);

setEditorState(newEditorState);

但是当我检查假设有original类型的块时，类型是unstyled.

问题是 - 如何让编辑器将<original>标签识别为需要自定义呈现的块？

顺便说一句，不确定这是解决问题的正确方法 - 任何帮助或建议表示赞赏。谢谢！

4

1 回答 1

0

Document.execCommand()从头开始使用和编写自己的组件。然后你就可以为所欲为。看看这个解决你的问题的例子，https://codepen.io/Nagibaba/pen/oNBQXgp

于 2021-04-21T11:30:42.697 回答