react web highlight

React Web Highlighter ? ️

Una biblioteca de front-end de texto resaltado en rico texto que admite el almacenamiento persistente y la restauración del texto resaltado

---

0. Casos en línea

Haz clic en mí, haz clic en mí

1. Inspiración

Muchas gracias por las ideas proporcionadas en los siguientes dos artículos:

"Escritura destacado" e "Insertar notas" - más que solo puntos de conocimiento front -end

¿Cómo usar JS para implementar la función de notas en línea de "resaltar las palabras"? ? ️

2. Instalación

npm i react-web-highlighter

yarn add react-web-highlighter

3. Cómo usar

 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. Ejemplo

Un ejemplo de uso más complejo, consulte el ejemplo de demostración del repositorio (en la carpeta de example )

Instalación y ejecución de demostración (actualmente usando TSDX):

1. Directorio de la raíz del proyecto:

 yarn

2. Directorio de ejemplo:

 yarn

3. Directorio de la raíz del proyecto:

 yarn start

4. Directorio de ejemplo:

 yarn start

5. Visita: http: // localhost: 1234

---

5. Descripción del parámetro del componente TextHighlight

• Propiedades del componente TextHighlight

  Nombre de parámetro	tipo	describir	¿Es necesario	valor predeterminado
  plantilla	string	Cadena HTML de texto rico	Sí	--
  valor	INoteTextHighlightInfo[]	Datos de selección resaltados	No	--
  nombre de etiqueta	string	Nombre de la etiqueta HTML para envolver texto resaltado	No	span
  onadd	(data:INoteTextHighlightInfo)=>any	La devolución de llamada activada al agregar una nueva selección	No	--
  encendido	(data:INoteTextHighlightInfo[])=>any	La devolución de llamada activada cuando se selecciona una selección existente (debido a que la selección se superpondrá, los parámetros son una lista de matriz, que devolverá todos los nodos que marcan la selección seleccionada actualmente)	No	--
  listón	string	Valor único para cada datos	No	id
  modos	IModeProps[]	Utilizado para distinguir entre tipos y diferentes tipos para establecer estilos	No	--

• Atributo de tipo INoteTextHighlightInfo :

  Nombre de parámetro	tipo	describir	¿Es necesario
  lista	INoteTextHighlightInfoItem[]	Datos de selección	Sí
  texto	string	Datos de texto seleccionados en la selección	Sí
  modo	string	Tipo de datos actual (por ejemplo: notas, líneas de dibujo, etc.)	No

• Atributo de tipo INoteTextHighlightInfoItem :

  Nombre de parámetro	tipo	describir	¿Es necesario
  nivel	number[]	Datos de nivel de selección, profundizar en la capa de nodo de texto seleccionado por capa de acuerdo con el nodo superior	Sí
  comenzar	number	Compensación del nodo de texto de inicio seleccionado actualmente	Sí
  fin	string	Compensación del nodo de texto final seleccionado actualmente	Sí
  texto	string	El texto seleccionado por el nodo de texto actual	Sí

• Propiedades de tipo IModeProps :

  Nombre de parámetro	tipo	describir	¿Es necesario
  modo	string	tipo	Sí
  nombre de clase	string	Se utiliza para establecer el nombre de clase del tipo actual	Sí

5.1 Descripción del parámetro de componente de la barra de herramientas

La barra de herramientas debe existir como elemento infantil de TexThighlight

Nombre de parámetro	tipo	describir	¿Es necesario	valor predeterminado
mascarilla	boolean	Si mostrar la capa de máscara	No	verdadero
visible	boolean	Se utiliza para controlar la pantalla oculta de ventanas emergentes	No	FALSO
autoclosable	boolean	Haga clic para activar el tubo automáticamente	No	verdadero
wrapClassname	string	Estilo establecido	No	-
oncancel	function	Apagar la devolución de llamada	No	-
niños	ReactNode	Subelementos dentro de la ventana emergente	No	-

6. Método

Método setSelectRange :

Nombre de parámetro	tipo	describir	¿Es necesario
nodo	INoteTextHighlightInfo	Métodos para establecer la selección de texto nativo	Sí

7. TODO

1. Escribir casos de prueba
2. Mejorar la lógica interactiva