react web highlight

React Web Highlighter ? ️

Um rico texto destacou a biblioteca de front-end que suporta armazenamento persistente e restauração do texto destacado

---

0. Casos online

Clique em mim Clique em mim

1. Inspiração

Muito obrigado pelas idéias fornecidas nos dois artigos a seguir:

"Scribinging Highlight" e "Insert Notes" - mais do que apenas pontos de conhecimento do front -end

Como usar o JS para implementar a função de notas on -line de "destacando palavras"? ? ️

2. Instalação

npm i react-web-highlighter

yarn add react-web-highlighter

3. Como 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. Exemplo

Um exemplo de uso mais complexo, confira o exemplo demo do repositório (na pasta example )

Instalação de demonstração e corrida (atualmente usando o TSDX):

1. Diretório raiz do projeto:

 yarn

2. Exemplo de diretório:

 yarn

3. Diretório raiz do projeto:

 yarn start

4. Exemplo de diretório:

 yarn start

5. Visite: http: // localhost: 1234

---

5. Descrição do parâmetro do componente TextHighlight

• Propriedades do componente TextHighlight

  Nome do parâmetro	tipo	descrever	É necessário	valor padrão
  modelo	string	String html de texto rico	sim	--
  valor	INoteTextHighlightInfo[]	Dados de seleção destacados	não	--
  tagname	string	Nome da tag html para embrulhar texto destacado	não	span
  onadd	(data:INoteTextHighlightInfo)=>any	Retorno de chamada acionado ao adicionar uma nova seleção	não	--
  ONUPDATE	(data:INoteTextHighlightInfo[])=>any	O retorno de chamada acionado quando uma seleção existente é selecionada (como a seleção se sobrepõe, os parâmetros são uma lista de matrizes, que retornará todos os nós que marcarão a seleção atualmente selecionada)	não	--
  Rowkey	string	Valor exclusivo para cada dados	não	id
  modos	IModeProps[]	Usado para distinguir entre tipos e tipos diferentes para definir estilos	não	--

• Atributo INoteTextHighlightInfo :

  Nome do parâmetro	tipo	descrever	É necessário
  lista	INoteTextHighlightInfoItem[]	Dados de seleção	sim
  texto	string	Dados de texto selecionados na seleção	sim
  modo	string	Tipo de dados atual (por exemplo: notas, linhas de desenho, etc.)	não

• INoteTextHighlightInfoItem Atributo:

  Nome do parâmetro	tipo	descrever	É necessário
  nível	number[]	Dados do nível de seleção, perfure até a camada de nó de texto selecionada por camada de acordo com o nó superior	sim
  começar	number	Offset do nó de texto inicial atualmente selecionado	sim
  fim	string	Offset do nó de texto final atualmente selecionado	sim
  texto	string	O texto selecionado pelo nó de texto atual	sim

• Propriedades do tipo IModeProps :

  Nome do parâmetro	tipo	descrever	É necessário
  modo	string	tipo	sim
  ClassName	string	Usado para definir o nome da classe do tipo atual	sim

5.1 Descrição do parâmetro do componente da barra de ferramentas

A barra de ferramentas precisa existir como um elemento filho do texthighlight

Nome do parâmetro	tipo	descrever	É necessário	valor padrão
máscara	boolean	Se deve exibir a camada de máscara	não	verdadeiro
visível	boolean	Usado para controlar a tela escondida das janelas pop-up	não	falso
Autoclosable	boolean	Clique para acionar o tubo automaticamente	não	verdadeiro
WrapClassName	string	Definir estilo	não	-
ONCANCEL	function	Defina o retorno de chamada	não	-
crianças	ReactNode	Sub-elementos dentro da janela pop-up	não	-

6. Método

Método setSelectRange :

Nome do parâmetro	tipo	descrever	É necessário
nó	INoteTextHighlightInfo	Métodos para definir a seleção de texto nativo	sim

7. TODO

1. Escreva casos de teste
2. Melhorar a lógica interativa