open-index/open-npm huggingface dataset:
npm package: @hocgin/marks
Description: A React Marks
Latest version: 0.0.17

# @hocgin/marks

> 文本标注

## 草稿

```js

let [list, {save, remove}] = useMarksStorage();

let {mark, unmark, unmarkAll} = useMarksSelector({
  el,
  defaultValue: list,
  onMarked: (item) => {
    save(item);
  },
  onUnMarked: (item) => {
    remove(item.uid);
  }
});

let uid = mark([{text, offset, storeRenderOther}])

unmark(uid)


```

## 依赖或参考 lib

### incubator-annotator

> Pkg: https://github.com/apache/incubator-annotator
> Demo: https://annotator.apache.org/demo/
> Demo.Source: https://github.com/apache/incubator-annotator/blob/b52460a94ea91587ea96ecb77debc827d71b2920/web/index.js

### js-mark

> Pkg: https://github.com/BigCoal/js-mark
> Demo: http://webviews.cn/js-mark/

### mark.js

> Pkg: https://github.com/julkue/mark.js
> Demo: https://www.cnblogs.com/yangyukeke/p/17730681.html

### 参考资料

- [完整代码](https://www.cnblogs.com/yangyukeke/p/17730681.html)
- https://juejin.cn/post/6854573210638221320
# react-mark
npm package: @hocgin/selector-cursor
Description: A react library developed with dumi
Latest version: 0.0.3

# @hocgin/selector-cursor

> 可视化光标元素选择器

- 代码来源: https://github.com/GoogleChromeLabs/ProjectVisBug
- 演示地址: https://hocgin.github.io/selector-cursor/components/selector-cursor

### 使用方式

```jsx
import {useSelectable} from '@hocgin/selector-cursor';

export default () => {
  let selectable = useSelectable();

  return <div>
    <h1>hello world</h1>
    <p>hello world <a id='hocgin' href="https://logspot.hocgin.top">link</a></p>
    <p>hello world</p>
    <hr />
    <h1>control</h1>
    <vis-bug>
      <button onClick={(e) => selectable.disconnect()}>disconnect</button>
      <button onClick={(e) => selectable.connect()}>connect</button>
      <button onClick={selectable.unselect_all}>unselect_all</button>
      <button onClick={() => {
        let elements = selectable.selection();
        alert(`selectable element size:` + elements.length);
      }}>selection
      </button>
      <button onClick={() => {
        let link = document.getElementById("hocgin");
        if (!link) return;
        selectable.select(link)
      }}>select #hocgin
      </button>
    </vis-bug>
  </div>;
}
```