react web highlight

React Web Highlighter ? ️

Богатый текст подчеркнута библиотека фронтальных примечаний, которая поддерживает постоянное хранение и восстановление выделенного текста

---

0. Случаи онлайн

Нажмите меня, нажмите меня

1. Вдохновение

Большое спасибо за идеи, представленные в следующих двух статьях:

«Списки для выделения» и «вставить заметки» - больше, чем просто фронтальные знания

Как использовать JS для реализации функции онлайн -заметок «выделения слов»? ? ️

2. Установка

npm i react-web-highlighter

yarn add react-web-highlighter

3. Как использовать

 import React , { useCallback , useMemo , useState } from "react" ;
import TextHighlight from 'react-web-highlighter' ;

/** Tip: 如果划线木有效果，看看样式是否有添加 */

const template = "<p>我就是一段文本，想记录点什么，然而却又不知道从何时记录起，那就只能默默的埋藏在心底，生根发芽...</p>" ;

const App = ( ) => {
  const [ data , setState ] = useState < any > ( [ ] ) ;

  const modes = useMemo ( ( ) => {
    return [
      {
        className : "huaxian" ,
        mode : "huaxian" ,
        name : "划线" ,
      } ,
    ] ;
  } , [ ] ) ;

  const onAdd = useCallback (
    ( selectText ) => {
      const d = {
        ... selectText ,
        mode : 'huaxian' ,
        id : Math . random ( ) . toString ( ) . slice ( 2 )
      } ;
      data . push ( d ) ;
      setState ( [ ... data ] ) ;
    } ,
    [ data ]
  ) ;

  const onUpdate = useCallback (
    ( list = [ ] ) => {
      setState ( ( d : any ) => d ) ;
    } ,
    [ setState ]
  ) ;

  return (
    < TextHighlight
      value = { data }
      template = { template }
      modes = { modes }
      onAdd = { onAdd }
      onUpdate = { onUpdate }
    />
  ) ;
} ;

export default App ; 

4. Пример

Более сложный пример использования, ознакомьтесь с демо -примером репозитория (в папке example )

Демонстрационная установка и работа (в настоящее время используя TSDX):

1. Проект root каталог:

 yarn

2. Пример каталог:

 yarn

3. Проект root каталог:

 yarn start

4. Пример каталог:

 yarn start

5. Посетите: http: // localhost: 1234

---

5. Описание параметра компонента TextHighlight

• TextHighlight Componties Properties

  Имя параметра	тип	описывать	Это необходимо	значение по умолчанию
  шаблон	string	Богатый текст html строка	да	--
  ценить	INoteTextHighlightInfo[]	Выделенные данные о выборе	нет	--
  TAGNAME	string	Html -метр имя тега для обертывания. Выделенный текст	нет	span
  Onadd	(data:INoteTextHighlightInfo)=>any	Обратный вызов, запускаемый при добавлении нового выбора	нет	--
  onupdate	(data:INoteTextHighlightInfo[])=>any	Обратный вызов, запускаемый при выборе существующего выбора (поскольку выбор будет перекрываться, параметры являются списком массива, который вернет все узлы, которые отмечают выбранное в настоящее время выбор)	нет	--
  Роуки	string	Уникальное значение для каждого данных	нет	id
  режимы	IModeProps[]	Используется для различения типов и различных типов для установки стилей	нет	--

• INoteTextHighlightInfo Атрибут типа:

  Имя параметра	тип	описывать	Это необходимо
  список	INoteTextHighlightInfoItem[]	Данные о выборе	да
  текст	string	Выбранные текстовые данные в выборе	да
  режим	string	Текущий тип данных (например: примечания, линии рисования и т. Д.)	нет

• INoteTextHighlightInfoItem Тип Атрибут:

  Имя параметра	тип	описывать	Это необходимо
  уровень	number[]	Данные уровня выбора, просверлитесь до выбранного слоя текстовых узлов по слою в соответствии с верхним узлом	да
  начинать	number	Смещение выбранного в настоящее время начало текстового узла	да
  конец	string	Смещение выбранного в настоящее время конечного текстового узла	да
  текст	string	Текст, выбранный текущим текстовым узлом	да

• Свойства типа IModeProps :

  Имя параметра	тип	описывать	Это необходимо
  режим	string	тип	да
  классное имя	string	Используется для установки имени класса текущего типа	да

5.1 Описание параметра компонента панели инструментов

Панель инструментов должна существовать как дочерний элемент Texthighlight

Имя параметра	тип	описывать	Это необходимо	значение по умолчанию
маска	boolean	Отображать слой маски	нет	истинный
видимый	boolean	Используется для управления дисплеем, скрытым от всплывающих окон	нет	ЛОЖЬ
Автокламбируется	boolean	Нажмите, чтобы автоматически запустить трубку	нет	истинный
wrapclassname	string	Стиль установки	нет	-
Oncancel	function	Отправить обратный вызов	нет	-
дети	ReactNode	Субэлементы внутри всплывающего окна	нет	-

6. Метод

Метод setSelectRange :

Имя параметра	тип	описывать	Это необходимо
узел	INoteTextHighlightInfo	Методы установки собственного выбора текста	да

7. Тодо

1. Напишите тестовые примеры
2. Улучшить интерактивную логику