easy-marker: A JavaScript repository from 罗辑思维 | 得到App - 罗辑思维

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
- static
  - .create(containerElement, [scrollContainerElement], options) ⇒ 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[].type	`string`	menu type 'select'(Show menu only when selected) 'highlight' (Show menu only when click highlight)
options.menuItems[].iconName	`Array.<string>`	menu icon class
options.menuItems[].style	`Object`	menu item style
options.menuItems[].iconStyle	`Object`	menu item icon style
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.menuStyle.icon	`Object`	the sub menu icon style
options.disableTapHighlight	`boolean`	disable highlight when tap
options.cursor	`Object`	cursor config
options.cursor.color	`string`	cursor color
options.cursor.same	`boolean`	whether the cursor is in the same direction
options.mask	`Object`	mask config
options.mask.color	`string`	mask color
options.highlight	`Object`	highlight config
options.highlight.color	`string`	highlight color
options.scrollSpeedLevel	`number`	The speed of scrolling when touching bottom, default 4
options.scrollOffsetBottom	`number` \| `string`	triggering scrolling, distance from the bottom, default 100
options.markdownOptions	`Object`	Customize options about the mapping relations between HTML and Markdown
options.regions	`Array.<Object>`	In region mode, all region info
options.regions[].text	`string`	region text
options.regions[].top	`number`	region top
options.regions[].left	`number`	region left
options.regions[].width	`number`	region width
options.regions[].height	`number`	region height
options.disableSelect	`boolean`	disabled select

Example

// A simple example
const em = new EasyMarker({
  menuTopOffset: '2rem',
  menuItems: [
    {
      text: '划线笔记',
      id: 1
    },
    {
      text: '分享',
      style: {
        backgroundColor: '#407ff2',
        paddingLeft: '0.5rem'
      },
      id: 2
    },
    {
      text: '复制',
      id: 3
    }
  ],
 )

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

// a markdown example
const em = new EasyMarker({
menuTopOffset:'2rem',
scrollSpeedLevel: 6,
scrollOffsetBottom: '1.5rem',
  menuItems: [
    {
      text: '划线笔记',
      id: 1,
      iconName:'iconfont icon-mark'
    },
    {
      text: '分享',
      style: {
        backgroundColor: '#407ff2',
        paddingLeft: '0.5rem'
      },
      id: 2,
      iconName:'iconfont icon-share'
    },
    {
      text: '复制',
      id: 3,
      iconName:'iconfont icon-copy'
    }
  ],
// Not required
 markdownOptions: {
  H1: text => `\n# ${text}\n\n`,
  H2: text => `\n## ${text}\n\n`,
  H3: text => `\n### ${text}\n\n`,
  H4: text => `\n#### ${text}\n\n`,
  H5: text => `\n##### ${text}\n\n`,
  H6: text => `\n###### ${text}\n\n`,
  P: text => `${text}\n\n`,
  FIGCAPTION: text => `${text}\n\n`,
  STRONG: text => `**${text}**`,
  B: text => `**${text}**`,
  EM: text => `*${text}*`,
  I: text => `*${text}*`,
  S: text => `~~${text}~~`,
  INS: text => `++${text}++`,
  // IMG
  // option.alt: IMG alt
  // option.src: IMG src
  // option.width: IMG width
  // option.height: IMG height
  IMG: option => `![${option.alt}](${option.src}?size=${option.width}x${option.height})\n`,
  // UL
  // option.listLevel: List nesting level
  UL: (text, option) => {
    if (option.listLevel > 1) {
      return `\n${text}`
    }
    return `\n${text}\n`
  },
  // OL
  // option.listLevel: List nesting level
  OL: (text, option) => {
    if (option.listLevel > 1) {
      return `\n${text}`
    }
    return `\n${text}\n`
  },
  // LI
  // option.type: parentNode nodeName,
  // option.isLastOne: Whether the last item in the list
  // option.itemLevel: List nesting level
  // option.hasChild: Is the node has child node
  // option.index: The index in the list
  LI: (text, option) => {
    let spaceString = ''
    for (let i = 1; i < option.itemLevel; i++) { spaceString += '    ' }
    let endString = '\n'
    if (option.hasChild || option.isLastOne) {
      endString = ''
    }
    if (option.type === 'UL') { return `${spaceString}- ${text}${endString}` }
    return `${spaceString}${option.index}. ${text}${endString}`
  },
 }
})

em.create(document.querySelector('.article-body'), document.body)
em.onMenuClick((id, data) => {
  console.log('You click the menu!');
  console.log(id, data);
});

// A Region example

const em = new EasyMarker({
 regions: texts,
 menuTopOffset: '120px',
 scrollSpeedLevel: 6,
 scrollOffsetBottom: '1.5rem',
 mask: {
   color: '#407ff2',
 },
 menuStyle: {
   menu: {},
   item: {
     fontSize: '15px',
     padding: '0px 10px',
     lineHeight: '30px',
   },
   triangle: {},
 },
 menuItems: [
   {
     text: '划线',
     type: 'select',
     iconName: 'iconfont mark',
     id: '302',
     style: {
       backgroundColor: 'yellow',
       paddingLeft: '1rem',
     },
     iconStyle: {
       background: 'green',
     },
   },
   {
     text: '删除划线',
     type: 'highlight',
     iconName: 'iconfont icon-delete',
     id: '302',
   },
   {
     id: 222,
     text: '复制',
     iconName: 'iconfont icon-copy',
   },
  ],
});

em.onMenuClick(function (id, data) {
  console.log('You click the menu!', id, data);
});

em.onSelectStatusChange((val) => {
  console.log('onSelectStatusChange', val);
});

em.create(document.body);