@plannotator/web-highlighter 0.8.0

package/example/index.js

@@ -0,0 +1,214 @@
+import './index.css';
+import './my.css';
+import Highlighter from '../src/index';
+import LocalStore from './local.store';
+
+const highlighter = new Highlighter({
+    wrapTag: 'i',
+    exceptSelectors: ['.my-remove-tip', 'pre', 'code']
+});
+highlighter.setOption({
+    style: {
+        className: 'yellow-highlight',
+    },
+});
+const store = new LocalStore();
+const log = console.log.bind(console, '[highlighter]');
+
+/**
+ * create a delete tip
+ */
+const createTag = (top, left, id) => {
+    const $span = document.createElement('span');
+    $span.style.left = `${left - 20}px`;
+    $span.style.top = `${top - 25}px`;
+    $span.dataset['id'] = id;
+    $span.textContent = 'delete';
+    $span.classList.add('my-remove-tip');
+    document.body.appendChild($span);
+};
+
+/**
+ * toggle auto highlighting & button status
+ */
+const switchAuto = auto => {
+    auto === 'on' ? highlighter.run() : highlighter.stop();
+    const $btn = document.getElementById('js-highlight');
+    if (auto === 'on') {
+        $btn.classList.add('disabled');
+        $btn.setAttribute('disabled', true);
+    }
+    else {
+        $btn.classList.remove('disabled');
+        $btn.removeAttribute('disabled');
+    }
+};
+
+const switchColor = color => highlighter.setOption({
+    style: {
+        className: color === 'yellow'
+            ? 'yellow-highlight'
+            : 'blue-highlight',
+    },
+});
+
+function getPosition($node) {
+    let offset = {
+        top: 0,
+        left: 0
+    };
+    while ($node) {
+        offset.top += $node.offsetTop;
+        offset.left += $node.offsetLeft;
+        $node = $node.offsetParent;
+    }
+
+    return offset;
+}
+
+/**
+ * highlighter event listener
+ */
+highlighter
+    .on(Highlighter.event.CLICK, ({id}) => {
+        log('click -', id);
+    })
+    .on(Highlighter.event.HOVER, ({id}) => {
+        log('hover -', id);
+        highlighter.addClass('highlight-wrap-hover', id);
+    })
+    .on(Highlighter.event.HOVER_OUT, ({id}) => {
+        log('hover out -', id);
+        highlighter.removeClass('highlight-wrap-hover', id);
+    })
+    .on(Highlighter.event.CREATE, ({sources}) => {
+        log('create -', sources);
+        sources.forEach(s => {
+            const position = getPosition(highlighter.getDoms(s.id)[0]);
+            createTag(position.top, position.left, s.id);
+        });
+        sources = sources.map(hs => ({hs}));
+        store.save(sources);
+    })
+    .on(Highlighter.event.REMOVE, ({ids}) => {
+        log('remove -', ids);
+        ids.forEach(id => store.remove(id));
+    });
+
+/**
+ * FIXME: avoid re-highlighting the existing selection
+ */
+// function getIds(selected) {
+//     if (!selected || !selected.$node || !selected.$node.parentNode) {
+//         return [];
+//     }
+//     return [
+//         highlighter.getIdByDom(selected.$node.parentNode),
+//         ...highlighter.getExtraIdByDom(selected.$node.parentNode)
+//     ].filter(i => i)
+// }
+// function getIntersection(arrA, arrB) {
+//     const record = {};
+//     const intersection = [];
+//     arrA.forEach(i => record[i] = true);
+//     arrB.forEach(i => record[i] && intersection.push(i) && (record[i] = false));
+//     return intersection;
+// }
+// highlighter.hooks.Render.SelectedNodes.tap((id, selectedNodes) => {
+//     selectedNodes = selectedNodes.filter(n => n.$node.textContent);
+//     if (selectedNodes.length === 0) {
+//         return [];
+//     }
+
+//     const candidates = selectedNodes.slice(1).reduce(
+//         (left, selected) => getIntersection(left, getIds(selected)),
+//         getIds(selectedNodes[0])
+//     );
+//     for (let i = 0; i < candidates.length; i++) {
+//         if (highlighter.getDoms(candidates[i]).length === selectedNodes.length) {
+//             return [];
+//         }
+//     }
+
+//     return selectedNodes;
+// });
+
+highlighter.hooks.Serialize.Restore.tap(
+    source =>  log('Serialize.Restore hook -', source)
+);
+
+highlighter.hooks.Serialize.RecordInfo.tap(() => {
+    const extraInfo = Math.random().toFixed(4);
+    log('Serialize.RecordInfo hook -', extraInfo)
+    return extraInfo;
+});
+
+/**
+ * retrieve from local store
+ */
+const storeInfos =  store.getAll();
+storeInfos.forEach(
+    ({hs}) => highlighter.fromStore(hs.startMeta, hs.endMeta, hs.text, hs.id, hs.extra)
+);
+
+let autoStatus;
+document.querySelectorAll('[name="auto"]').forEach($n => {
+    if ($n.checked) {
+        autoStatus = $n.value;
+    }
+});
+switchAuto(autoStatus);
+
+let colorStatus = 'yellow';
+document.addEventListener('click', e => {
+    const $ele = e.target;
+
+    // delete highlight
+    if ($ele.classList.contains('my-remove-tip')) {
+        const id = $ele.dataset.id;
+        log('*click remove-tip*', id);
+        highlighter.removeClass('highlight-wrap-hover', id);
+        highlighter.remove(id);
+        $ele.parentNode.removeChild($ele);
+    }
+    // toggle auto highlighting switch
+    else if ($ele.getAttribute('name') === 'auto') {
+        const val = $ele.value;
+        if (autoStatus !== val) {
+            switchAuto(val);
+            autoStatus = val;
+        }
+    }
+    // toggle highlighting color
+    else if ($ele.getAttribute('name') === 'color') {
+        const val = $ele.value;
+        if (colorStatus !== val) {
+            switchColor(val);
+            colorStatus = val;
+        }
+    }
+    // highlight range manually
+    else if ($ele.id === 'js-highlight') {
+        const selection = window.getSelection();
+        if (selection.isCollapsed) {
+            return;
+        }
+        highlighter.fromRange(selection.getRangeAt(0));
+        window.getSelection().removeAllRanges();
+    }
+});
+
+let hoveredTipId;
+document.addEventListener('mouseover', e => {
+    const $ele = e.target;
+    // toggle highlight hover state
+    if ($ele.classList.contains('my-remove-tip') && hoveredTipId !== $ele.dataset.id) {
+        hoveredTipId = $ele.dataset.id;
+        highlighter.removeClass('highlight-wrap-hover');
+        highlighter.addClass('highlight-wrap-hover', hoveredTipId);
+    }
+    else if (!$ele.classList.contains('my-remove-tip') && !$ele.classList.contains('highlight-mengshou-wrap')) {
+        highlighter.removeClass('highlight-wrap-hover', hoveredTipId);
+        hoveredTipId = null;
+    }
+});

package/example/local.store.js

@@ -0,0 +1,72 @@
+class LocalStore {
+    constructor(id) {
+        this.key = id !== undefined ? `highlight-mengshou-${id}` : 'highlight-mengshou';
+    }
+
+    storeToJson() {
+        const store = localStorage.getItem(this.key);
+        let sources;
+        try {
+            sources = JSON.parse(store) || [];
+        }
+        catch (e) {
+            sources = [];
+        }
+        return sources;
+    }
+
+    jsonToStore(stores) {
+        localStorage.setItem(this.key, JSON.stringify(stores));
+    }
+
+    save(data) {
+        const stores = this.storeToJson();
+        const map = {};
+        stores.forEach((store, idx) => map[store.hs.id] = idx);
+
+        if (!Array.isArray(data)) {
+            data = [data];
+        }
+
+        data.forEach(store => {
+            // update
+            if (map[store.hs.id] !== undefined) {
+                stores[map[store.hs.id]] = store;
+            }
+            // append
+            else {
+                stores.push(store);
+            }
+        })
+        this.jsonToStore(stores);
+    }
+
+    forceSave(store) {
+        const stores = this.storeToJson();
+        stores.push(store);
+        this.jsonToStore(stores);
+    }
+
+    remove(id) {
+        const stores = this.storeToJson();
+        let index = null;
+        for (let i = 0; i < stores.length; i++) {
+            if (stores[i].hs.id === id) {
+                index = i;
+                break;
+            }
+        }
+        stores.splice(index, 1);
+        this.jsonToStore(stores);
+    }
+
+    getAll() {
+        return this.storeToJson();
+    }
+
+    removeAll() {
+        this.jsonToStore([]);
+    }
+}
+
+export default LocalStore;

package/example/my.css

@@ -0,0 +1,119 @@
+h1:first-child {
+    color: #3c86c7;
+    padding-bottom: 0;
+}
+
+h1 + blockquote {
+    box-shadow: inset 5px 0 #ddd;
+}
+
+h1 + blockquote p {
+    margin-top: 10px;
+    color: #aaa;
+    margin-bottom: 40px;
+}
+
+main .highlight-wrap-hover {
+    background: #f7aaaa;
+}
+
+.my-remove-tip {
+    box-sizing: border-box;
+    position: absolute;
+    border: 1px solid #fff;
+    border-radius: 3px;
+    height: 20px;
+    width: 40px;
+    color: #fff;
+    background: #444;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+    line-height: 18px;
+    overflow: visible;
+}
+
+.my-remove-tip::after {
+    content: '';
+    position: absolute;
+    left: 16px;
+    bottom: -4px;
+    border-color: #444 transparent transparent;
+    border-width: 4px 4px 0;
+    border-style: solid;
+    height: 0;
+    width: 0;
+}
+
+.op-panel {
+    box-sizing: border-box;
+    padding: 1px 5px 6px 8px;
+    position: fixed;
+    top: 50px;
+    left: 15px;
+    background: rgba(0, 0, 0, .1);
+    border-radius: 3px;
+    border: 1px dashed #aaa;
+}
+
+.op-panel a {
+    position: absolute;
+    right: 10px;
+    bottom: 12px;
+    height: 18px;
+    width: 18px;
+    opacity: .7;
+}
+
+.op-panel a:hover {
+    opacity: 1;
+}
+
+.op-panel svg {
+    height: 18px;
+    width: 18px;
+}
+
+.op-panel input[type="radio"] {
+    opacity: 1;
+    width: auto;
+    position: static;
+    line-height: normal;
+    height: 15px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+.op-panel .op-name {
+    margin-right: 0;
+}
+
+.op-panel label {
+    font-size: 12px;
+    margin-right: 2px;
+}
+
+.op-panel .op-btn {
+    display: block;
+    font-size: 12px;
+}
+
+.op-panel .op-btn.disabled {
+    cursor: not-allowed;
+}
+
+@media screen and (max-width: 1150px) {
+    main {
+        padding: 0 15px;
+        overflow-x: hidden;
+    }
+
+    .op-panel {
+        right: 5vw;
+        bottom: 5vh;
+        left: auto;
+        top: auto;
+        background-color: rgba(0, 0, 0, .9);
+        color: #fff;
+    }
+}

package/example/tpl.html

@@ -0,0 +1,59 @@
+<!-- htmlcs-disable -->
+<!DOCTYPE html>
+<html lang="zh-Hans">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="keywords" content="highlighter,tool,lib,website,frontend">
+        <meta name="description" content="Web Highlighter is a mini tool for highlighting website text. This page shows what it is and how to use it.">
+        <style>
+            main {
+                max-width: 760px;
+                margin: 20px auto;
+            }
+
+            img {
+                max-width: 100%;
+            }
+
+            .yellow-highlight {
+                background-color: #FF9;
+            }
+
+            .blue-highlight {
+                background-color: #9FF;
+            }
+        </style>
+        <title>Web Highlighter: a mini tool for highlighting website text</title>
+    </head>
+    <body>
+        <main>
+            {{$markdown}}
+        </main>
+        <script>
+            void function () {
+                var img = document.getElementsByTagName('main')[0].getElementsByTagName('img')[0];
+                img.onerror = function() {
+                    document.getElementById('js-title').setAttribute('style', 'display: block');
+                };
+            }();
+        </script>
+        <section class="op-panel">
+            <div>
+                <label class="op-name">auto-highlight：</label>
+                <label><input name="auto" type="radio" value="on" checked />enabled</label>
+                <label><input name="auto" type="radio" value="off" />disabled</label>
+            </div>
+            <div>
+                <label class="op-color">color：</label>
+                <label><input name="color" type="radio" value="yellow" checked />yellow</label>
+                <label><input name="color" type="radio" value="blue" />blue</label>
+            </div>
+            <button class="op-btn disabled" id="js-highlight" disabled >highlight manually</button>
+            <a href="https://github.com/alienzhou/web-highlighter" target="_blank">
+                <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1555513182711" class="icon" style="" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1456" xmlns:xlink="http://www.w3.org/1999/xlink" width="131.125" height="128"><defs><style type="text/css"></style></defs><path d="M524.979332 0C234.676191 0 0 234.676191 0 524.979332c0 232.068678 150.366597 428.501342 358.967656 498.035028 26.075132 5.215026 35.636014-11.299224 35.636014-25.205961 0-12.168395-0.869171-53.888607-0.869171-97.347161-146.020741 31.290159-176.441729-62.580318-176.441729-62.580318-23.467619-60.841976-58.234462-76.487055-58.234463-76.487055-47.804409-32.15933 3.476684-32.15933 3.476685-32.15933 53.019436 3.476684 80.83291 53.888607 80.83291 53.888607 46.935238 79.963739 122.553122 57.365291 152.97411 43.458554 4.345855-33.897672 18.252593-57.365291 33.028501-70.402857-116.468925-12.168395-239.022047-57.365291-239.022047-259.012982 0-57.365291 20.860106-104.300529 53.888607-140.805715-5.215026-13.037566-23.467619-66.926173 5.215027-139.067372 0 0 44.327725-13.906737 144.282399 53.888607 41.720212-11.299224 86.917108-17.383422 131.244833-17.383422s89.524621 6.084198 131.244833 17.383422C756.178839 203.386032 800.506564 217.29277 800.506564 217.29277c28.682646 72.1412 10.430053 126.029806 5.215026 139.067372 33.897672 36.505185 53.888607 83.440424 53.888607 140.805715 0 201.64769-122.553122 245.975415-239.891218 259.012982 19.121764 16.514251 35.636014 47.804409 35.636015 97.347161 0 70.402857-0.869171 126.898978-0.869172 144.282399 0 13.906737 9.560882 30.420988 35.636015 25.205961 208.601059-69.533686 358.967656-265.96635 358.967655-498.035028C1049.958663 234.676191 814.413301 0 524.979332 0z" fill="#191717" p-id="1457"></path><path d="M199.040177 753.571326c-0.869171 2.607513-5.215026 3.476684-8.691711 1.738342s-6.084198-5.215026-4.345855-7.82254c0.869171-2.607513 5.215026-3.476684 8.691711-1.738342s5.215026 5.215026 4.345855 7.82254z m-6.953369-4.345856M219.900283 777.038945c-2.607513 2.607513-7.82254 0.869171-10.430053-2.607514-3.476684-3.476684-4.345855-8.691711-1.738342-11.299224 2.607513-2.607513 6.953369-0.869171 10.430053 2.607514 3.476684 4.345855 4.345855 9.560882 1.738342 11.299224z m-5.215026-5.215027M240.760389 807.459932c-3.476684 2.607513-8.691711 0-11.299224-4.345855-3.476684-4.345855-3.476684-10.430053 0-12.168395 3.476684-2.607513 8.691711 0 11.299224 4.345855 3.476684 4.345855 3.476684 9.560882 0 12.168395z m0 0M269.443034 837.011749c-2.607513 3.476684-8.691711 2.607513-13.906737-1.738342-4.345855-4.345855-6.084198-10.430053-2.607513-13.037566 2.607513-3.476684 8.691711-2.607513 13.906737 1.738342 4.345855 3.476684 5.215026 9.560882 2.607513 13.037566z m0 0M308.555733 853.526c-0.869171 4.345855-6.953369 6.084198-13.037566 4.345855-6.084198-1.738342-9.560882-6.953369-8.691711-10.430053 0.869171-4.345855 6.953369-6.084198 13.037566-4.345855 6.084198 1.738342 9.560882 6.084198 8.691711 10.430053z m0 0M351.145116 857.002684c0 4.345855-5.215026 7.82254-11.299224 7.82254-6.084198 0-11.299224-3.476684-11.299224-7.82254s5.215026-7.82254 11.299224-7.82254c6.084198 0 11.299224 3.476684 11.299224 7.82254z m0 0M391.126986 850.049315c0.869171 4.345855-3.476684 8.691711-9.560882 9.560882-6.084198 0.869171-11.299224-1.738342-12.168395-6.084197-0.869171-4.345855 3.476684-8.691711 9.560881-9.560882 6.084198-0.869171 11.299224 1.738342 12.168396 6.084197z m0 0" fill="#191717" p-id="1458"></path></svg>
+            </a>
+        </section>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@plannotator/web-highlighter",
+  "version": "0.8.0",
+  "description": "A no-runtime dependency lib for text highlighting & persistence on any website. Fork with selection fixes.",
+  "main": "dist/web-highlighter.min.js",
+  "module": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "browser": "dist/web-highlighter.min.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./dist/web-highlighter.min.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint \"src/**/*.ts\" --fix",
+    "test": "mocha -r ts-node/register -r tsconfig-paths/register test/**.spec.ts",
+    "coverage": "nyc -r lcov -e .ts -x \"test/**/*.ts\" npm run test",
+    "serve-example": "http-server example/static",
+    "serve": "http-server -p 8081 ./dist",
+    "watch": "webpack --config ./config/webpack.config.prod.js --watch",
+    "build-example": "target=example node script/build.js",
+    "static": "run-p watch serve",
+    "start": "node script/dev.js",
+    "build:types": "tscpaths -p tsconfig.json -s ./src -o ./dist",
+    "build:code": "target=dist node script/build.js",
+    "build": "run-s build:code build:types",
+    "prepublishOnly": "run-s lint build test"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && npm run test"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.ts": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
+  "homepage": "https://github.com/backnotprop/web-highlighter",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backnotprop/web-highlighter"
+  },
+  "keywords": [
+    "text",
+    "highlight",
+    "web",
+    "persistence",
+    "lightweight",
+    "selection",
+    "range"
+  ],
+  "author": "alienzhou <alienzhou16@163.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/chai": "^4.2.11",
+    "@types/jsdom": "^16.2.3",
+    "@types/jsdom-global": "^3.0.2",
+    "@types/mocha": "^7.0.2",
+    "@types/node": "^14.18.63",
+    "@types/sinon": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
+    "better-opn": "^1.0.0",
+    "chai": "^4.2.0",
+    "chalk": "^2.4.2",
+    "clean-webpack-plugin": "^1.0.0",
+    "coveralls": "^3.1.0",
+    "css-loader": "^1.0.1",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "fs-extra": "^7.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "http-server": "^0.11.1",
+    "husky": "^4.3.8",
+    "jsdom": "^16.2.2",
+    "jsdom-global": "^3.0.2",
+    "lint-staged": "^10.5.3",
+    "mocha": "^7.1.2",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^15.0.1",
+    "prettier": "^2.2.1",
+    "showdown": "^1.9.0",
+    "sinon": "^9.0.2",
+    "style-loader": "^0.23.1",
+    "text-replace-html-webpack-plugin": "^1.0.3",
+    "ts-loader": "^5.3.0",
+    "ts-node": "^8.10.1",
+    "tsconfig-paths": "^3.9.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
+    "tscpaths": "0.0.9",
+    "typescript": "^4.1.3",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": ">=3.1.11",
+    "webpack-merge": "^4.1.4"
+  }
+}

package/script/build.js

@@ -0,0 +1,17 @@
+const convert = require('./convet-md');
+if (process.env.target === 'example') {
+    convert();
+}
+
+const webpack = require('webpack');
+const configPath = process.env.target === 'example' ? '../config/webpack.config.example.js' : '../config/webpack.config.prod.js';
+const config = require(configPath);
+webpack(config, (err, stats) => {
+    if (err || stats.hasErrors() || stats.hasWarnings()) {
+        console.log(err);
+        console.log(stats.toJson({colors: true}).errors)
+        process.exit(1);
+    }
+    console.log(stats.toString({colors: true}));
+    process.exit(0);
+});

package/script/convet-md.js

@@ -0,0 +1,25 @@
+const showdown = require('showdown');
+const path = require('path');
+const chalk = require('chalk');
+const paths = require('../config/paths');
+const fs = require('fs-extra');
+const g = chalk.green;
+
+const log = (...args) => console.log.apply(console, [g('[convert]'), ...args.map(s => g(s))]);
+
+module.exports = function () {
+    const mdPath = path.resolve(paths.basePath, 'README.md');
+
+    log(mdPath, '-', 'converting...');
+
+    const md = fs.readFileSync(mdPath, 'utf-8');
+    showdown.setFlavor('github');
+    const converter = new showdown.Converter();
+    const html = converter.makeHtml(md);
+    const tpl = fs.readFileSync(paths.exampleTplPath, 'utf-8');
+    fs.outputFileSync(paths.exampleMdPath, tpl.replace(/{{\$markdown}}/, html), 'utf-8');
+
+    log(mdPath, '-', 'convert md to html success!');
+}
+
+process.argv[1] === __filename && module.exports();

package/script/dev.js

@@ -0,0 +1,22 @@
+const opn = require('better-opn');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+
+const convert = require('./convet-md');
+convert();
+
+const config = require('../config/webpack.config.dev.js');
+const serverConfig = require('../config/server.config.js');
+
+WebpackDevServer.addDevServerEntrypoints(config, serverConfig);
+const compiler = webpack(config);
+const {port, host} = serverConfig;
+
+const devServer = new WebpackDevServer(compiler, serverConfig);
+devServer.listen(port, host, err => {
+    if (err) {
+        return console.log(err);
+    }
+    console.log('Starting the development server...\n');
+    opn(`http://${host}:${port}`);
+});

package/src/data/cache.ts

@@ -0,0 +1,57 @@
+import EventEmitter from '@src/util/event.emitter';
+import type HighlightSource from '@src/model/source';
+import { ERROR } from '@src/types';
+
+class Cache extends EventEmitter {
+    private _data: Map<string, HighlightSource> = new Map();
+
+    get data() {
+        return this.getAll();
+    }
+
+    set data(map) {
+        throw ERROR.CACHE_SET_ERROR;
+    }
+
+    save(source: HighlightSource | HighlightSource[]): void {
+        if (!Array.isArray(source)) {
+            this._data.set(source.id, source);
+
+            return;
+        }
+
+        source.forEach(s => this._data.set(s.id, s));
+    }
+
+    get(id: string): HighlightSource {
+        return this._data.get(id);
+    }
+
+    remove(id: string): void {
+        this._data.delete(id);
+    }
+
+    getAll(): HighlightSource[] {
+        const list: HighlightSource[] = [];
+
+        for (const pair of this._data) {
+            list.push(pair[1]);
+        }
+
+        return list;
+    }
+
+    removeAll(): string[] {
+        const ids: string[] = [];
+
+        for (const pair of this._data) {
+            ids.push(pair[0]);
+        }
+
+        this._data = new Map();
+
+        return ids;
+    }
+}
+
+export default Cache;