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. 示例

一個更複雜的使用示例，請查看倉庫的DEMO 示例（在example文件夾中）

DEMO 安裝運行（當前使用的是tsdx）:

1. 項目根目錄：

 yarn

2. example 目錄：

 yarn

3. 項目根目錄：

 yarn start

4. example 目錄：

 yarn start

5. 訪問： http://localhost:1234

---

5. TextHighlight組件參數說明

• TextHighlight組件屬性

  參數名	類型	描述	是否必須	預設值
  template	string	富文本HTML 字符串	是	--
  value	INoteTextHighlightInfo[]	高亮的選區數據	否	--
  tagName	string	用於包裹高亮文本的HTML 標籤名	否	span
  onAdd	(data:INoteTextHighlightInfo)=>any	新增選區時觸發的回調	否	--
  onUpdate	(data:INoteTextHighlightInfo[])=>any	選中已存在的選區時觸發的回調(由於選區會有重疊，所以參數為數組列表，會返回當前標記當前選中選區的所有節點)	否	--
  rowKey	string	每條數據的唯一值	否	id
  modes	IModeProps[]	用於區分類型與不同類型設置樣式	否	--

• INoteTextHighlightInfo類型屬性:

  參數名	類型	描述	是否必須
  list	INoteTextHighlightInfoItem[]	選區數據	是
  text	string	選區選中的文本數據	是
  mode	string	當前數據類型（例如：筆記，畫線等）	否

• INoteTextHighlightInfoItem類型屬性:

  參數名	類型	描述	是否必須
  level	number[]	選區層級數據，依據頂級節點一層層下鑽到選中文本節點	是
  start	number	當前選中的開始文本節點的偏移量	是
  end	string	當前選中的結束文本節點的偏移量	是
  text	string	當前文本節點選中的文本	是

• IModeProps類型屬性:

  參數名	類型	描述	是否必須
  mode	string	類型	是
  className	string	用於設置當前類型的類名	是

5.1 ToolBar 組件參數說明

ToolBar 需作為TextHighlight 的子元素存在

參數名	類型	描述	是否必須	預設值
mask	boolean	是否顯示遮罩層	否	true
visible	boolean	用於控制彈窗的顯示隱藏	否	false
autoClosable	boolean	點擊自動觸發管	否	true
wrapClassName	string	設置樣式	否	--
onCancel	function	設置關閉的回調	否	--
children	ReactNode	彈窗內部的子元素	否	--

6. 方法

setSelectRange方法:

參數名	類型	描述	是否必須
node	INoteTextHighlightInfo	用於設置原生選中文本的方法	是

7. TODO

1. 編寫測試用例
2. 完善交互邏輯