react-web-highlighter v0.0.6

0. 在线案例

点我点我

1. 灵感

公司需要做前端文书划线编辑等功能，木得法子， GO GO GO !

非常感谢如下两篇文章提供的思路：

「划线高亮」和「插入笔记」—— 不止是前端知识点

✨ 如何用 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 组件参数说明

INoteTextHighlightInfo 属性:

INoteTextHighlightInfoItem 属性:

IModeProps 属性:

5.1 ToolBar 组件参数说明

ToolBar 需作为 TextHighlight 的子元素存在

6. 方法

setSelectRange 方法: | 参数名 | 类型 | 描述 | 是否必须 | | --------- | -------- | ---------------------- | -------- | | node | INoteTextHighlightInfo | 用于设置原生选中文本的方法 | 是 |

7. TODO

1. 编写测试用例
2. 完善交互逻辑