react web highlight

React Web Highlighter ? ️

Une bibliothèque frontale de notes riches sur le texte qui prend en charge le stockage et la restauration persistants du texte mis en évidence

---

0. Cas en ligne

Cliquez sur moi cliquez sur moi

1. Inspiration

Merci beaucoup pour les idées fournies dans les deux articles suivants:

"Scribing Highlight" et "Insérer des notes" - plus que des points de connaissance frontaux

Comment utiliser JS pour implémenter la fonction des notes en ligne de "mettre en évidence les mots"? ? ️

2. Installation

npm i react-web-highlighter

yarn add react-web-highlighter

3. Comment utiliser

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

Un exemple d'utilisation plus complexe, consultez l'exemple de démonstration du référentiel (dans l' example de dossier)

Installation et fonctionnement de la démonstration (en utilisant actuellement TSDX):

1. Répertoire des racines du projet:

 yarn

2. Exemple de répertoire:

 yarn

3. Répertoire des racines du projet:

 yarn start

4. Exemple de répertoire:

 yarn start

5. Visite: http: // localhost: 1234

---

5. Description du paramètre du composant TextHighlight

• Propriétés des composants TextHighlight

  Nom du paramètre	taper	décrire	Est-ce nécessaire	valeur par défaut
  modèle	string	Texte riche HTML String	Oui	--
  valeur	INoteTextHighlightInfo[]	Données de sélection en surbrillance	Non	--
  tagname	string	Nom de la balise HTML pour l'enveloppe sur le texte en surbrillance	Non	span
  ondadd	(data:INoteTextHighlightInfo)=>any	Rappel déclenché lors de l'ajout d'une nouvelle sélection	Non	--
  ondupdate	(data:INoteTextHighlightInfo[])=>any	Le rappel a déclenché lorsqu'une sélection existante est sélectionnée (car la sélection se chevauchera, les paramètres sont une liste de tableaux, qui renverra tous les nœuds qui marquent la sélection actuellement sélectionnée)	Non	--
  clé en tête	string	Valeur unique pour chaque données	Non	id
  modes	IModeProps[]	Utilisé pour distinguer les types et différents types pour définir des styles	Non	--

• Attribut de type INoteTextHighlightInfo :

  Nom du paramètre	taper	décrire	Est-ce nécessaire
  liste	INoteTextHighlightInfoItem[]	Données de sélection	Oui
  texte	string	Données de texte sélectionnées dans la sélection	Oui
  mode	string	Type de données actuel (par exemple: notes, lignes de dessin, etc.)	Non

• INoteTextHighlightInfoItem Type Attribut:

  Nom du paramètre	taper	décrire	Est-ce nécessaire
  niveau	number[]	Données de niveau de sélection, percez vers la couche de nœud de texte sélectionné par calque en fonction du nœud supérieur	Oui
  commencer	number	Décalage du nœud de texte de démarrage actuellement sélectionné	Oui
  fin	string	Décalage du nœud de texte final actuellement sélectionné	Oui
  texte	string	Le texte sélectionné par le nœud de texte actuel	Oui

• Propriétés de type IModeProps :

  Nom du paramètre	taper	décrire	Est-ce nécessaire
  mode	string	taper	Oui
  nom de classe	string	Utilisé pour définir le nom de classe du type actuel	Oui

5.1 Description du paramètre du composant de la barre d'outils

La barre d'outils doit exister en tant qu'élément enfant de Texthighlight

Nom du paramètre	taper	décrire	Est-ce nécessaire	valeur par défaut
masque	boolean	S'il faut afficher la couche de masque	Non	vrai
visible	boolean	Utilisé pour contrôler l'affichage caché des fenêtres contextuelles	Non	FAUX
autoclosable	boolean	Cliquez automatiquement pour déclencher le tube	Non	vrai
wrapClassName	string	Style	Non	-
oncancel	function	Déclencher un rappel	Non	-
enfants	ReactNode	Sous-éléments à l'intérieur de la fenêtre contextuelle	Non	-

6. Méthode

Méthode setSelectRange :

Nom du paramètre	taper	décrire	Est-ce nécessaire
nœud	INoteTextHighlightInfo	Méthodes pour définir la sélection de texte native	Oui

7. TODO

1. Écrire des cas de test
2. Améliorer la logique interactive