1148030615 / easy-marker

A library for marking text in html

easy-marker

easy-marker is a library for marking text in html. An example is as follows:

Install

npm i easy-marker

Usage

import EasyMarker from 'easy-marker'

const easyMarker = new EasyMarker
const container = document.querySelector('xxxx')
easyMarker.create(container)

API

• EasyMarker
  • new EasyMarker(options)
  • instance
    • .create(containerElement, [scrollContainerElement], [excludeElements])
    • .getSelectText() ⇒ string
    • .highlightLine(selection, [id], [meta])
    • .highlightLines(lines)
    • .cancelHighlightLine(id) ⇒ boolean
    • .onHighlightLineClick(cb)
    • .onSelectStatusChange(cb)
    • .registerEventHook(cb)
    • .destroy()
  • static
    • .create(containerElement, [scrollContainerElement], [excludeElements]) ⇒ EasyMarker
  • inner
    • ~menuClickHandler : function
    • ~highlightLineClickHandler : function

new EasyMarker(options)

Creates an instance of EasyMarker.

Param	Type	Description
options	Object	options
options.menuItems	Array.<Object>	menu item option
options.menuItems[].text	string	menu text
options.menuItems[].handler	menuClickHandler	menu item click handler
options.menuTopOffset	number | string	the offset from the top of the menu relative screen, default 0.
options.menuStyle	Object	the menu style
options.menuStyle.menu	Object	the menu style
options.menuStyle.triangle	Object	the triangle style
options.menuStyle.item	Object	the sub menu style
options.disableTapHighlight	Object	disable highlight when tap
options.cursor	Object	cursor config
options.cursor.same	Object	whether the cursor is in the same direction

Example

const em = new EasyMarker({
  menuTopOffset:'2rem',
  menuItems: [
    {
      text: '划线笔记',
      handler: function (data) {
        console.log('划线笔记', data, this)
        this.highlightLine(data,1)
      }
    },
    {
      text: '分享',
      handler: (data) => {console.log('分享',data)}
    },
    {
      text: '复制',
      handler: (data) => {console.log('分享',data)}
    }
  ]
 )

 em.create(document.querySelector('.article-body'),
   document.body,
   document.querySelectorAll('.article-body>:not(.text)')

easyMarker.create(containerElement, [scrollContainerElement], [excludeElements])

Initialization

Kind: instance method of EasyMarker

Param	Type	Description
containerElement	HTMLElement	container element
[scrollContainerElement]	HTMLElement	scroll container element
[excludeElements]	Array.<HTMLElement>	not included elements

easyMarker.getSelectText() ⇒ string

Get the selected text

Kind: instance method of EasyMarker

easyMarker.highlightLine(selection, [id], [meta])

Highlight the lines between the specified nodes

Kind: instance method of EasyMarker

Param	Type	Description
selection	Object	selection
selection.anchorNode	Node	start node
selection.anchorOffset	number	start node's text offset
selection.focusNode	Node	end node
selection.focusOffset	number	start node's text offset
[id]	*	line id
[meta]	*	meta information

Example

const id = 2;
const selection = {
  anchorNode: textNodeA,
  anchorOffset: 1,
  focusNode: textNodeB,
  focusOffset: 2
};
const meta = { someKey: 'someValue' };
em.highlightLine(selection, id, meta);

easyMarker.highlightLines(lines)

Highlight multiple lines

Kind: instance method of EasyMarker

Param	Type
lines	Array.<Object>
[lines[].id]	*
[lines[].meta]	*
lines[].selection	Object
lines[].selection.anchorNode	Node
lines[].selection.anchorOffset	number
lines[].selection.focusNode	Node
lines[].selection.focusOffset	number

Example

const id = 2;
const selection = {
  anchorNode: textNodeA,
  anchorOffset: 1,
  focusNode: textNodeB,
  focusOffset: 2
};
const meta = { someKey: 'someValue' };
em.highlightLines([{selection, id, meta}]);

easyMarker.cancelHighlightLine(id) ⇒ boolean

Cancel highlight

Kind: instance method of EasyMarker

Param	Type	Description
id	*	line ID

easyMarker.onHighlightLineClick(cb)

Highlight line click handler

Kind: instance method of EasyMarker

Param	Type
cb	highlightLineClickHandler

easyMarker.onSelectStatusChange(cb)

Select status changing callback

Kind: instance method of EasyMarker

Param	Type
cb	function

easyMarker.registerEventHook(cb)

Register event hook

Kind: instance method of EasyMarker

Param	Type
cb	*

easyMarker.destroy()

Destroy instance

Kind: instance method of EasyMarker

EasyMarker.create(containerElement, [scrollContainerElement], [excludeElements]) ⇒ EasyMarker

Initialization factory

Kind: static method of EasyMarker

Param	Type	Description
containerElement	HTMLElement	container element
[scrollContainerElement]	HTMLElement	scroll container element
[excludeElements]	Array.<HTMLElement>	not included elements

EasyMarker~menuClickHandler : function

Menu item click handler

Kind: inner typedef of EasyMarker

Param	Type	Description
selection	Object	selection
selection.anchorNode	Node	start node
selection.anchorOffset	number	start node's text offset
selection.focusNode	Node	end node
selection.focusOffset	number	start node's text offset

EasyMarker~highlightLineClickHandler : function

Menu item click handler

Kind: inner typedef of EasyMarker

Param	Type	Description
id	*	line ID
meta	*	meta information
selection	Object	selection
selection.anchorNode	Node	start node
selection.anchorOffset	number	start node's text offset
selection.focusNode	Node	end node
selection.focusOffset	number	start node's text offset