luojilab/easy-marker

import EasyMarker from 'easy-marker';

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

// 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);

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

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