Осадка JS. Завершите пользовательский тег HTML пользовательским компонентом - PullRequest
Новая
       27

Осадка JS. Завершите пользовательский тег HTML пользовательским компонентом

0 голосов
/ 19 июня 2020

Пытаюсь реализовать что-то подобное с pure Draft. js:

Gmail UI for hidden blocks

Чтобы быть более точным, я хочу чтобы эти скрытые блоки исходного сообщения были доступны для редактирования и расширения, щелкнув значок с тремя точками

Итак, после некоторого исследования я обнаружил, что есть Custom Block Rendering и Пользовательские компоненты блока , поэтому я пытаюсь расширить blockRenderMap с помощью компонента OriginalMessage: 

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> как блок, который необходимо отрендерить?

кстати, не уверен, что это правильный подход к решению проблемы - любая помощь или совет е оценили. Спасибо!

...