{"id":18898488,"url":"https://github.com/luojilab/easy-marker","last_synced_at":"2025-04-05T19:09:33.075Z","repository":{"id":43096109,"uuid":"130812127","full_name":"luojilab/easy-marker","owner":"luojilab","description":" A library for marking text in html","archived":false,"fork":false,"pushed_at":"2022-06-06T10:15:32.000Z","size":964,"stargazers_count":325,"open_issues_count":13,"forks_count":54,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-29T18:07:55.337Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luojilab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-24T07:12:36.000Z","updated_at":"2025-03-04T09:32:47.000Z","dependencies_parsed_at":"2022-08-12T10:20:13.519Z","dependency_job_id":null,"html_url":"https://github.com/luojilab/easy-marker","commit_stats":null,"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luojilab%2Feasy-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luojilab%2Feasy-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luojilab%2Feasy-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luojilab%2Feasy-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luojilab","download_url":"https://codeload.github.com/luojilab/easy-marker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386263,"owners_count":20930618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript"],"created_at":"2024-11-08T08:42:54.482Z","updated_at":"2025-04-05T19:09:33.031Z","avatar_url":"https://github.com/luojilab.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## easy-marker\n\n`easy-marker` is a library for marking text in html. An example is as follows:\n\n![demo](./demo.gif)\n\n## Install\n\n```bash\nnpm i easy-marker\n```\n\n## Usage\n\n```js\nimport EasyMarker from 'easy-marker';\n\nconst easyMarker = new EasyMarker();\nconst container = document.querySelector('xxxx');\neasyMarker.create(container);\n```\n\n## API\n\n- [EasyMarker](#EasyMarker)\n  - [new EasyMarker(options)](#new_EasyMarker_new)\n  - _instance_\n    - [.create(containerElement, [scrollContainerElement], options)](#EasyMarker+create)\n    - [.highlightLine(selection, [id], [meta])](#EasyMarker+highlightLine)\n    - [.highlightLines(lines)](#EasyMarker+highlightLines)\n    - [.cancelHighlightLine(id)](#EasyMarker+cancelHighlightLine) ⇒ \u003ccode\u003eboolean\u003c/code\u003e\n    - [.onHighlightLineClick(cb)](#EasyMarker+onHighlightLineClick)\n    - [.onSelectStatusChange(cb)](#EasyMarker+onSelectStatusChange)\n    - [.onMenuClick(cb)](#EasyMarker+onMenuClick)\n    - [.registerEventHook(cb)](#EasyMarker+registerEventHook)\n    - [.destroy()](#EasyMarker+destroy)\n  - _static_\n    - [.create(containerElement, [scrollContainerElement], options)](#EasyMarker.create) ⇒ [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n  - _inner_\n    - [~menuClickHandler](#EasyMarker..menuClickHandler) : \u003ccode\u003efunction\u003c/code\u003e\n    - [~highlightLineClickHandler](#EasyMarker..highlightLineClickHandler) : \u003ccode\u003efunction\u003c/code\u003e\n\n\u003ca name=\"new_EasyMarker_new\"\u003e\u003c/a\u003e\n\n### new EasyMarker(options)\n\nCreates an instance of EasyMarker.\n\n| Param                         | Type                                       | Description                                                                                        |\n| ----------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------- |\n| options                       | \u003ccode\u003eObject\u003c/code\u003e                        | options                                                                                            |\n| options.menuItems             | \u003ccode\u003eArray.\u0026lt;Object\u0026gt;\u003c/code\u003e          | menu item option                                                                                   |\n| options.menuItems[].text      | \u003ccode\u003estring\u003c/code\u003e                        | menu text                                                                                          |\n| options.menuItems[].type      | \u003ccode\u003estring\u003c/code\u003e                        | menu type 'select'(Show menu only when selected) 'highlight' (Show menu only when click highlight) |\n| options.menuItems[].iconName  | \u003ccode\u003eArray.\u0026lt;string\u0026gt;\u003c/code\u003e          | menu icon class                                                                                    |\n| options.menuItems[].style     | \u003ccode\u003eObject\u003c/code\u003e                        | menu item style                                                                                    |\n| options.menuItems[].iconStyle | \u003ccode\u003eObject\u003c/code\u003e                        | menu item icon style                                                                               |\n| options.menuTopOffset         | \u003ccode\u003enumber\u003c/code\u003e \\| \u003ccode\u003estring\u003c/code\u003e | the offset from the top of the menu relative screen, default 0.                                    |\n| options.menuStyle             | \u003ccode\u003eObject\u003c/code\u003e                        | the menu style                                                                                     |\n| options.menuStyle.menu        | \u003ccode\u003eObject\u003c/code\u003e                        | the menu style                                                                                     |\n| options.menuStyle.triangle    | \u003ccode\u003eObject\u003c/code\u003e                        | the triangle style                                                                                 |\n| options.menuStyle.item        | \u003ccode\u003eObject\u003c/code\u003e                        | the sub menu style                                                                                 |\n| options.menuStyle.icon        | \u003ccode\u003eObject\u003c/code\u003e                        | the sub menu icon style                                                                            |\n| options.disableTapHighlight   | \u003ccode\u003eboolean\u003c/code\u003e                       | disable highlight when tap                                                                         |\n| options.cursor                | \u003ccode\u003eObject\u003c/code\u003e                        | cursor config                                                                                      |\n| options.cursor.color          | \u003ccode\u003estring\u003c/code\u003e                        | cursor color                                                                                       |\n| options.cursor.same           | \u003ccode\u003eboolean\u003c/code\u003e                       | whether the cursor is in the same direction                                                        |\n| options.mask                  | \u003ccode\u003eObject\u003c/code\u003e                        | mask config                                                                                        |\n| options.mask.color            | \u003ccode\u003estring\u003c/code\u003e                        | mask color                                                                                         |\n| options.highlight             | \u003ccode\u003eObject\u003c/code\u003e                        | highlight config                                                                                   |\n| options.highlight.color       | \u003ccode\u003estring\u003c/code\u003e                        | highlight color                                                                                    |\n| options.scrollSpeedLevel      | \u003ccode\u003enumber\u003c/code\u003e                        | The speed of scrolling when touching bottom, default 4                                             |\n| options.scrollOffsetBottom    | \u003ccode\u003enumber\u003c/code\u003e \\| \u003ccode\u003estring\u003c/code\u003e | triggering scrolling, distance from the bottom, default 100                                        |\n| options.markdownOptions       | \u003ccode\u003eObject\u003c/code\u003e                        | Customize options about the mapping relations between HTML and Markdown                            |\n| options.regions               | \u003ccode\u003eArray.\u0026lt;Object\u0026gt;\u003c/code\u003e          | In region mode, all region info                                                                    |\n| options.regions[].text        | \u003ccode\u003estring\u003c/code\u003e                        | region text                                                                                        |\n| options.regions[].top         | \u003ccode\u003enumber\u003c/code\u003e                        | region top                                                                                         |\n| options.regions[].left        | \u003ccode\u003enumber\u003c/code\u003e                        | region left                                                                                        |\n| options.regions[].width       | \u003ccode\u003enumber\u003c/code\u003e                        | region width                                                                                       |\n| options.regions[].height      | \u003ccode\u003enumber\u003c/code\u003e                        | region height                                                                                      |\n| options.disableSelect         | \u003ccode\u003eboolean\u003c/code\u003e                       | disabled select                                                                                    |\n\n**Example**\n\n```js\n// A simple example\nconst em = new EasyMarker({\n  menuTopOffset: '2rem',\n  menuItems: [\n    {\n      text: '划线笔记',\n      id: 1\n    },\n    {\n      text: '分享',\n      style: {\n        backgroundColor: '#407ff2',\n        paddingLeft: '0.5rem'\n      },\n      id: 2\n    },\n    {\n      text: '复制',\n      id: 3\n    }\n  ],\n )\n\n em.create(document.querySelector('.article-body'),\n   document.body,\n   document.querySelectorAll('.article-body\u003e:not(.text)')\n\n// a markdown example\nconst em = new EasyMarker({\nmenuTopOffset:'2rem',\nscrollSpeedLevel: 6,\nscrollOffsetBottom: '1.5rem',\n  menuItems: [\n    {\n      text: '划线笔记',\n      id: 1,\n      iconName:'iconfont icon-mark'\n    },\n    {\n      text: '分享',\n      style: {\n        backgroundColor: '#407ff2',\n        paddingLeft: '0.5rem'\n      },\n      id: 2,\n      iconName:'iconfont icon-share'\n    },\n    {\n      text: '复制',\n      id: 3,\n      iconName:'iconfont icon-copy'\n    }\n  ],\n// Not required\n markdownOptions: {\n  H1: text =\u003e `\\n# ${text}\\n\\n`,\n  H2: text =\u003e `\\n## ${text}\\n\\n`,\n  H3: text =\u003e `\\n### ${text}\\n\\n`,\n  H4: text =\u003e `\\n#### ${text}\\n\\n`,\n  H5: text =\u003e `\\n##### ${text}\\n\\n`,\n  H6: text =\u003e `\\n###### ${text}\\n\\n`,\n  P: text =\u003e `${text}\\n\\n`,\n  FIGCAPTION: text =\u003e `${text}\\n\\n`,\n  STRONG: text =\u003e `**${text}**`,\n  B: text =\u003e `**${text}**`,\n  EM: text =\u003e `*${text}*`,\n  I: text =\u003e `*${text}*`,\n  S: text =\u003e `~~${text}~~`,\n  INS: text =\u003e `++${text}++`,\n  // IMG\n  // option.alt: IMG alt\n  // option.src: IMG src\n  // option.width: IMG width\n  // option.height: IMG height\n  IMG: option =\u003e `![${option.alt}](${option.src}?size=${option.width}x${option.height})\\n`,\n  // UL\n  // option.listLevel: List nesting level\n  UL: (text, option) =\u003e {\n    if (option.listLevel \u003e 1) {\n      return `\\n${text}`\n    }\n    return `\\n${text}\\n`\n  },\n  // OL\n  // option.listLevel: List nesting level\n  OL: (text, option) =\u003e {\n    if (option.listLevel \u003e 1) {\n      return `\\n${text}`\n    }\n    return `\\n${text}\\n`\n  },\n  // LI\n  // option.type: parentNode nodeName,\n  // option.isLastOne: Whether the last item in the list\n  // option.itemLevel: List nesting level\n  // option.hasChild: Is the node has child node\n  // option.index: The index in the list\n  LI: (text, option) =\u003e {\n    let spaceString = ''\n    for (let i = 1; i \u003c option.itemLevel; i++) { spaceString += '    ' }\n    let endString = '\\n'\n    if (option.hasChild || option.isLastOne) {\n      endString = ''\n    }\n    if (option.type === 'UL') { return `${spaceString}- ${text}${endString}` }\n    return `${spaceString}${option.index}. ${text}${endString}`\n  },\n }\n})\n\nem.create(document.querySelector('.article-body'), document.body)\nem.onMenuClick((id, data) =\u003e {\n  console.log('You click the menu!');\n  console.log(id, data);\n});\n\n// A Region example\n\nconst em = new EasyMarker({\n regions: texts,\n menuTopOffset: '120px',\n scrollSpeedLevel: 6,\n scrollOffsetBottom: '1.5rem',\n mask: {\n   color: '#407ff2',\n },\n menuStyle: {\n   menu: {},\n   item: {\n     fontSize: '15px',\n     padding: '0px 10px',\n     lineHeight: '30px',\n   },\n   triangle: {},\n },\n menuItems: [\n   {\n     text: '划线',\n     type: 'select',\n     iconName: 'iconfont mark',\n     id: '302',\n     style: {\n       backgroundColor: 'yellow',\n       paddingLeft: '1rem',\n     },\n     iconStyle: {\n       background: 'green',\n     },\n   },\n   {\n     text: '删除划线',\n     type: 'highlight',\n     iconName: 'iconfont icon-delete',\n     id: '302',\n   },\n   {\n     id: 222,\n     text: '复制',\n     iconName: 'iconfont icon-copy',\n   },\n  ],\n});\n\nem.onMenuClick(function (id, data) {\n  console.log('You click the menu!', id, data);\n});\n\nem.onSelectStatusChange((val) =\u003e {\n  console.log('onSelectStatusChange', val);\n});\n\nem.create(document.body);\n```\n\n\u003ca name=\"EasyMarker+create\"\u003e\u003c/a\u003e\n\n### easyMarker.create(containerElement, [scrollContainerElement], options)\n\nInitialization\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                    | Type                     | Description                            |\n| ------------------------ | ------------------------ | -------------------------------------- |\n| containerElement         | \u003ccode\u003eHTMLElement\u003c/code\u003e | container element                      |\n| [scrollContainerElement] | \u003ccode\u003eHTMLElement\u003c/code\u003e | scroll container element               |\n| options                  | \u003ccode\u003eObject\u003c/code\u003e      | options                                |\n| options.includeElements  | \u003ccode\u003eObject\u003c/code\u003e      | included elements                      |\n| options.excludeElements  | \u003ccode\u003eObject\u003c/code\u003e      | not included elements, Higher priority |\n\n\u003ca name=\"EasyMarker+highlightLine\"\u003e\u003c/a\u003e\n\n### easyMarker.highlightLine(selection, [id], [meta])\n\nHighlight the lines between the specified nodes\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                  | Type                | Description              |\n| ---------------------- | ------------------- | ------------------------ |\n| selection              | \u003ccode\u003eObject\u003c/code\u003e | selection                |\n| selection.anchorNode   | \u003ccode\u003eNode\u003c/code\u003e   | start node               |\n| selection.anchorOffset | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n| selection.focusNode    | \u003ccode\u003eNode\u003c/code\u003e   | end node                 |\n| selection.focusOffset  | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n| [id]                   | \u003ccode\u003e\\*\u003c/code\u003e     | line id                  |\n| [meta]                 | \u003ccode\u003e\\*\u003c/code\u003e     | meta information         |\n\n**Example**\n\n```js\nconst id = 2;\nconst selection = {\n  anchorNode: textNodeA,\n  anchorOffset: 1,\n  focusNode: textNodeB,\n  focusOffset: 2,\n};\nconst meta = { someKey: 'someValue' };\nem.highlightLine(selection, id, meta);\n```\n\n\u003ca name=\"EasyMarker+highlightLines\"\u003e\u003c/a\u003e\n\n### easyMarker.highlightLines(lines)\n\nHighlight multiple lines\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                          | Type                              |\n| ------------------------------ | --------------------------------- |\n| lines                          | \u003ccode\u003eArray.\u0026lt;Object\u0026gt;\u003c/code\u003e |\n| [lines[].id]                   | \u003ccode\u003e\\*\u003c/code\u003e                   |\n| [lines[].meta]                 | \u003ccode\u003e\\*\u003c/code\u003e                   |\n| lines[].selection              | \u003ccode\u003eObject\u003c/code\u003e               |\n| lines[].selection.anchorNode   | \u003ccode\u003eNode\u003c/code\u003e                 |\n| lines[].selection.anchorOffset | \u003ccode\u003enumber\u003c/code\u003e               |\n| lines[].selection.focusNode    | \u003ccode\u003eNode\u003c/code\u003e                 |\n| lines[].selection.focusOffset  | \u003ccode\u003enumber\u003c/code\u003e               |\n\n**Example**\n\n```js\nconst id = 2;\nconst selection = {\n  anchorNode: textNodeA,\n  anchorOffset: 1,\n  focusNode: textNodeB,\n  focusOffset: 2,\n};\nconst meta = { someKey: 'someValue' };\nem.highlightLines([{ selection, id, meta }]);\n```\n\n\u003ca name=\"EasyMarker+cancelHighlightLine\"\u003e\u003c/a\u003e\n\n### easyMarker.cancelHighlightLine(id) ⇒ \u003ccode\u003eboolean\u003c/code\u003e\n\nCancel highlight\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param | Type            | Description |\n| ----- | --------------- | ----------- |\n| id    | \u003ccode\u003e\\*\u003c/code\u003e | line ID     |\n\n\u003ca name=\"EasyMarker+onHighlightLineClick\"\u003e\u003c/a\u003e\n\n### easyMarker.onHighlightLineClick(cb)\n\nHighlight line click handler\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param | Type                                                                             |\n| ----- | -------------------------------------------------------------------------------- |\n| cb    | [\u003ccode\u003ehighlightLineClickHandler\u003c/code\u003e](#EasyMarker..highlightLineClickHandler) |\n\n\u003ca name=\"EasyMarker+onSelectStatusChange\"\u003e\u003c/a\u003e\n\n### easyMarker.onSelectStatusChange(cb)\n\nSelect status changing callback\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param | Type                  |\n| ----- | --------------------- |\n| cb    | \u003ccode\u003efunction\u003c/code\u003e |\n\n\u003ca name=\"EasyMarker+onMenuClick\"\u003e\u003c/a\u003e\n\n### easyMarker.onMenuClick(cb)\n\nmenu item click handler\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param | Type                                                           |\n| ----- | -------------------------------------------------------------- |\n| cb    | [\u003ccode\u003emenuClickHandler\u003c/code\u003e](#EasyMarker..menuClickHandler) |\n\n\u003ca name=\"EasyMarker+registerEventHook\"\u003e\u003c/a\u003e\n\n### easyMarker.registerEventHook(cb)\n\nRegister event hook\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param | Type            |\n| ----- | --------------- |\n| cb    | \u003ccode\u003e\\*\u003c/code\u003e |\n\n\u003ca name=\"EasyMarker+destroy\"\u003e\u003c/a\u003e\n\n### easyMarker.destroy()\n\nDestroy instance\n\n**Kind**: instance method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)  \n\u003ca name=\"EasyMarker.create\"\u003e\u003c/a\u003e\n\n### EasyMarker.create(containerElement, [scrollContainerElement], options) ⇒ [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\nInitialization factory\n\n**Kind**: static method of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                    | Type                     | Description                            |\n| ------------------------ | ------------------------ | -------------------------------------- |\n| containerElement         | \u003ccode\u003eHTMLElement\u003c/code\u003e | container element                      |\n| [scrollContainerElement] | \u003ccode\u003eHTMLElement\u003c/code\u003e | scroll container element               |\n| options                  | \u003ccode\u003eObject\u003c/code\u003e      | options                                |\n| options.includeElements  | \u003ccode\u003eObject\u003c/code\u003e      | included elements                      |\n| options.excludeElements  | \u003ccode\u003eObject\u003c/code\u003e      | not included elements, Higher priority |\n\n\u003ca name=\"EasyMarker..menuClickHandler\"\u003e\u003c/a\u003e\n\n### EasyMarker~menuClickHandler : \u003ccode\u003efunction\u003c/code\u003e\n\nMenu item click handler\n\n**Kind**: inner typedef of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                  | Type                | Description              |\n| ---------------------- | ------------------- | ------------------------ |\n| id                     | \u003ccode\u003e\\*\u003c/code\u003e     | menu ID                  |\n| selection              | \u003ccode\u003eObject\u003c/code\u003e | selection                |\n| selection.anchorNode   | \u003ccode\u003eNode\u003c/code\u003e   | start node               |\n| selection.anchorOffset | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n| selection.focusNode    | \u003ccode\u003eNode\u003c/code\u003e   | end node                 |\n| selection.focusOffset  | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n\n\u003ca name=\"EasyMarker..highlightLineClickHandler\"\u003e\u003c/a\u003e\n\n### EasyMarker~highlightLineClickHandler : \u003ccode\u003efunction\u003c/code\u003e\n\nMenu item click handler\n\n**Kind**: inner typedef of [\u003ccode\u003eEasyMarker\u003c/code\u003e](#EasyMarker)\n\n| Param                  | Type                | Description              |\n| ---------------------- | ------------------- | ------------------------ |\n| id                     | \u003ccode\u003e\\*\u003c/code\u003e     | line ID                  |\n| meta                   | \u003ccode\u003e\\*\u003c/code\u003e     | meta information         |\n| selection              | \u003ccode\u003eObject\u003c/code\u003e | selection                |\n| selection.anchorNode   | \u003ccode\u003eNode\u003c/code\u003e   | start node               |\n| selection.anchorOffset | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n| selection.focusNode    | \u003ccode\u003eNode\u003c/code\u003e   | end node                 |\n| selection.focusOffset  | \u003ccode\u003enumber\u003c/code\u003e | start node's text offset |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluojilab%2Feasy-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluojilab%2Feasy-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluojilab%2Feasy-marker/lists"}