Блог

Я работаю над проектом Prismic React, В котором мне нужна функциональность для отображения всплывающей подсказки из редактора расширенного текста, которая, как ожидается, будет отображаться из вложенных тегов в редакторе расширенного текста. Небольшая помощь будет нам очень полезна.

Это та функциональность, которую я хочу, но не указано, сколько раз и где нам нужно показывать эту вещь во всем проекте:

Вы можете использовать пользовательский HTMLSerializer и библиотеку подсказок. Вот пример, где я использовал react-tooltip ссылку (npm)

Сериализатор обнаружит текст и заключит его в тег абзаца; затем он будет использовать метку data-for в качестве атрибутов id и и само содержимое всплывающей подсказки в <ReactTooltip /> компоненте.

 import React from 'react'
import { Elements } from 'prismic-reactjs'
import ReactTooltip from 'react-tooltip'

export const htmlSerializer = function (type, children, element, content) {
  switch (type) {
    case Elements.label:
      const label = children.data.label ? children.data.label : ''
      console.log(content.join(''))
      return (
        <span>
          <p data-tip data-for={label}>
            {content.join('')}
          </p>
          <ReactTooltip id={label} place="top" effect="solid">
            {label}
          </ReactTooltip>
        </span>
      )

      // ... here goes the rest of your HTML serializer confguration
    default:
      return null
  }
}

 

После этого я передал его в свое расширенное текстовое поле.

 import { htmlSerializer } from '../utils/htmlSerializer'

<RichText render={document.data.text_field} htmlSerializer={htmlSerializer} />
 

Тогда вам просто нужно будет оформить его так, как вам нравится. Вот предварительный просмотр того, как выглядит компонент: