@modusoperandi/licit 0.14.18 → 1.0.1

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@modusoperandi/licit",
-  "version": "0.14.18",
+  "version": "1.0.1",
+  "type": "module",
   "subversion": "1",
   "description": "Rich text editor built with React and ProseMirror",
-  "main": "dist/index.js",
-  "style": "dist/styles.css",
+  "main": "index.js",
+  "style": "styles.css",
+  "types": "index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MO-Movia/licit.git"
@@ -19,16 +21,15 @@
     "build:fonts": "mkdirp ./dist/fonts && cp -r fonts/* dist/fonts",
     "build:babel": "babel src --out-dir dist",
     "build:flow": "flow-copy-source -v -i '**/__tests__/**' src dist",
-    "build:dist": "npm run build:clean && npm run build:babel && npm run build:flow && npm run build:css && npm run build:fonts && npm run build:bom",
+    "build:dist": "npm run build:clean && npm run build:babel && npm run build:flow && npm run build:css && npm run build:fonts && npm run build:bom && cp src/*.d.ts dist/",
     "build:licit": "node utils/build_bin.js",
     "ci:bom": "cyclonedx-npm --ignore-npm-errors --short-PURLs --output-format XML --output-file dist/bom.xml",
-    "ci:build": "npm run build:clean && npm run build:babel && npm run build:flow && npm run build:css && npm run build:fonts && npm run build:bom",
+    "ci:build": "npm run build:clean && npm run build:babel && npm run build:flow && npm run build:css && npm run build:fonts && npm run build:bom && copyfiles --up 1 \"src/**/*.d.ts\" dist/ && copyfiles --up 1 \"src/**/*.css\" dist && copyfiles package.json dist",
     "flow": "flow --show-all-errors",
     "lint:css": "stylelint \"**/*.css\"",
     "lint:js": "eslint \"src/**/*.js\" \"licit/**/*.js\"",
     "lint": "npm run lint:css & npm run lint:js",
     "start": "node scripts/webserver.js",
-    "prepare": "npm run build:dist",
     "prebuild:style-service-docker": "node utils/build_customstyle_server.js",
     "build:style-service-docker": "docker build . -f style-service.Dockerfile -t style-service:latest"
   },
@@ -56,24 +57,25 @@
     "@babel/preset-react": "^7.18.6",
     "@cyclonedx/cyclonedx-npm": "^1.11.0",
     "babel-jest": "^29.2.0",
-    "babel-loader": "8.2.5",
-    "babel-plugin-flow-react-proptypes": "26.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "clean-webpack-plugin": "4.0.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-flow-react-proptypes": "^26.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "6.7.3",
+    "css-loader": "^6.9.1",
+    "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.25.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.1.2",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "^7.33.2",
     "exports-loader": "^1.1.0",
     "file-loader": "^6.2.0",
-    "flow-bin": "0.128.0",
-    "flow-copy-source": "2.0.9",
-    "flow-webpack-plugin": "1.2.0",
-    "html-loader": "1.1.0",
+    "flow-bin": "^0.228.0",
+    "flow-copy-source": "^2.0.9",
+    "flow-webpack-plugin": "^1.2.0",
+    "html-loader": "^1.1.0",
     "html-webpack-inline-source-plugin": "1.0.0-beta.2",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
@@ -83,39 +85,47 @@
     "jest-prosemirror": "^1.0.3",
     "jest-sonar-reporter": "^2.0.0",
     "lint-staged": "^13.0.3",
-    "mkdirp": "^1.0.4",
+    "mkdirp": "^3.0.1",
     "prettier": "^2.1.2",
     "stylelint": "^15.6.0",
     "stylelint-config-standard": "^33.0.0",
-    "stylelint-prettier": "^2.0.0",
+    "stylelint-prettier": "^3.0.0",
     "terser-webpack-plugin": "^3.1.0",
     "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.11.1",
-    "write-file-webpack-plugin": "4.5.1"
+    "write-file-webpack-plugin": "^4.5.1"
   },
   "dependencies": {
-    "@modusoperandi/licit-ui-commands": "^0.1.17",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
     "body-parser": "^1.19.0",
+    "browserkeymap": "^2.0.2",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "flatted": "^3.1.0",
     "flow-typed": "^3.3.1",
     "formidable": "^1.2.2",
-    "invariant": "2.2.4",
+    "invariant": "^2.2.4",
     "jquery": "^3.5.1",
-    "katex": "0.11.1",
+    "katex": "^0.11.1",
     "mv": "^2.1.1",
-    "node-mathquill": "0.10.2",
-    "prosemirror-collab": "1.2.2",
-    "prosemirror-dev-tools": "3.0.2",
-    "prosemirror-tables": "1.2.5",
-    "query-string": "6.13.1",
-    "resize-observer-polyfill": "1.5.1",
-    "smooth-scroll-into-view-if-needed": "1.1.28",
+    "node-mathquill": "^0.10.2",
+    "prosemirror-collab": "^1.3.1",
+    "prosemirror-tables": "^1.2.5",
+    "query-string": "^6.13.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "smooth-scroll-into-view-if-needed": "^1.1.28",
+    "style-loader": "^3.3.3",
     "url": "^0.11.0"
   },
+  "peerDependencies": {
+    "@modusoperandi/licit-ui-commands": "^1.0.0",
+    "prosemirror-collab": "^1.2.2",
+    "prosemirror-tables": "^1.2.5"
+  },
+  "overrides": {
+    "semver": "^7.5.2"
+  },
   "importSort": {
     ".js": {
       "parser": "babylon",
@@ -138,4 +148,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/patchAnchorElements.js

@@ -0,0 +1,29 @@
+import { ATTRIBUTE_BOOKMARK_ID, ATTRIBUTE_BOOKMARK_VISIBLE } from './BookmarkNodeSpec.js';
+var BLOCK_NODE_NAME_PATTERN = /(P|H1|H2|H3|H4|H5|H6)/;
+export default function patchAnchorElements(doc) {
+  Array.from(doc.querySelectorAll('a[id]')).forEach(patchAnchorElement);
+}
+function patchAnchorElement(node) {
+  var id = node.id;
+  if (id && node.childElementCount === 0) {
+    // This looks like a bookmark generated from Google Doc, will render
+    // this as BookmarkNode.
+    node.setAttribute(ATTRIBUTE_BOOKMARK_ID, id);
+
+    // Google Doc always inject anchor links before <table />.
+    //   <a id="t.3060ecccc199a88a1e4cc1252769f957b88f2207"></a>
+    //   <a id="t.0"></a>
+    //   <table class="c23">
+    // and these anchor link should not be visible.
+    var visible = node.id.indexOf('t.') !== 0;
+    visible && node.setAttribute(ATTRIBUTE_BOOKMARK_VISIBLE, 'true');
+  }
+  var nextNode = node.nextElementSibling;
+  if (!nextNode) {
+    return;
+  }
+  // If this is next to a block element, make that block element the bookmark.
+  if (BLOCK_NODE_NAME_PATTERN.test(nextNode.nodeName)) {
+    nextNode.insertBefore(node, nextNode.firstChild);
+  }
+}

package/patchAnchorElements.js.flow

@@ -0,0 +1,38 @@
+// @flow
+
+import {
+  ATTRIBUTE_BOOKMARK_ID,
+  ATTRIBUTE_BOOKMARK_VISIBLE,
+} from './BookmarkNodeSpec.js';
+
+const BLOCK_NODE_NAME_PATTERN = /(P|H1|H2|H3|H4|H5|H6)/;
+
+export default function patchAnchorElements(doc: Document): void {
+  Array.from(doc.querySelectorAll('a[id]')).forEach(patchAnchorElement);
+}
+
+function patchAnchorElement(node: HTMLElement): void {
+  const { id } = node;
+  if (id && node.childElementCount === 0) {
+    // This looks like a bookmark generated from Google Doc, will render
+    // this as BookmarkNode.
+    node.setAttribute(ATTRIBUTE_BOOKMARK_ID, id);
+
+    // Google Doc always inject anchor links before <table />.
+    //   <a id="t.3060ecccc199a88a1e4cc1252769f957b88f2207"></a>
+    //   <a id="t.0"></a>
+    //   <table class="c23">
+    // and these anchor link should not be visible.
+    const visible = node.id.indexOf('t.') !== 0;
+
+    visible && node.setAttribute(ATTRIBUTE_BOOKMARK_VISIBLE, 'true');
+  }
+  const nextNode = node.nextElementSibling;
+  if (!nextNode) {
+    return;
+  }
+  // If this is next to a block element, make that block element the bookmark.
+  if (BLOCK_NODE_NAME_PATTERN.test(nextNode.nodeName)) {
+    nextNode.insertBefore(node, nextNode.firstChild);
+  }
+}

package/patchBreakElements.js

@@ -0,0 +1,20 @@
+export default function patchBreakElements(doc) {
+  // This is a workaround to handle HTML converted from DraftJS that
+  // `<div><span><br /></span><div>` becomes `<p><br /><br /></p>`.
+  // Block with single `<br />` inside should be collapsed into `<p />`.
+  var selector = 'div > span:only-child > br:only-child';
+  Array.from(doc.querySelectorAll(selector)).forEach(patchBreakElement);
+}
+function patchBreakElement(brElement) {
+  var ownerDocument = brElement.ownerDocument,
+    parentElement = brElement.parentElement;
+  if (!ownerDocument || !parentElement) {
+    return;
+  }
+  var div = brElement.parentElement && brElement.parentElement.parentElement;
+  if (!div) {
+    return;
+  }
+  var pp = ownerDocument.createElement('p');
+  div.parentElement && div.parentElement.replaceChild(pp, div);
+}

package/patchElementInlineStyles.js

@@ -0,0 +1,65 @@
+import hyphenize from './hyphenize.js';
+var BLOCK_TAG_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,li'.replace(/\w+/g, function (m) {
+  return "".concat(m, "[style]");
+});
+export default function patchElementInlineStyles(doc) {
+  // Ensure that inline-styles can be correctly translated as inline marks.
+  // Workaround to patch inline styles added to block tags.
+  var bEls = Array.from(doc.querySelectorAll(BLOCK_TAG_SELECTOR));
+  bEls.forEach(patchBlockElement);
+}
+var NODE_TYPE_TEXT = 3;
+var NODE_TYPE_ELEMENT = 1;
+var INLINE_STYLE_NAMES = ['backgroundColor', 'color', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'textDecoration', 'textIndent'];
+var INLINE_ELEMENT_NODE_NAMES = new Set(['A', 'B', 'EM', 'I', 'SPAN', 'STRONG', 'U']);
+function patchBlockElement(el) {
+  INLINE_STYLE_NAMES.forEach(function (name) {
+    return patchBlockElementStyle(el, name);
+  });
+}
+
+// Move the specified inline style of the element to its child nodes. This
+// assumes that its child nodes are inline elements.
+function patchBlockElementStyle(el, inlineStyleName) {
+  var element = el;
+  var elementStyle = element.style;
+  var value = elementStyle && elementStyle[inlineStyleName];
+  if (inlineStyleName === 'textIndent' && value) {
+    // This is the workaround to fix the issue that people with mix both
+    // text-indent and margin-left together.
+    // For instance, `margin-left: -100px` and `text-indent: 100px` shall
+    // offset each other.
+    var marginLeft = elementStyle.marginLeft || '';
+    if (value === '-' + marginLeft || marginLeft === '-' + value) {
+      elementStyle.marginLeft = '';
+      elementStyle.textIndent = '';
+    }
+  }
+  if (!value) {
+    return;
+  }
+
+  // Remove the style.
+  elementStyle[inlineStyleName] = '';
+  var childNodes = Array.from(element.childNodes);
+  childNodes.forEach(function (node) {
+    var nodeType = node.nodeType,
+      style = node.style,
+      nodeName = node.nodeName,
+      ownerDocument = node.ownerDocument,
+      parentElement = node.parentElement;
+    if (nodeType === NODE_TYPE_ELEMENT) {
+      if (INLINE_ELEMENT_NODE_NAMES.has(nodeName)) {
+        var cssText = "".concat(hyphenize(inlineStyleName), ": ").concat(value, ";") + style.cssText;
+        style.cssText = cssText;
+      }
+    } else if (nodeType === NODE_TYPE_TEXT) {
+      if (ownerDocument && parentElement) {
+        var span = ownerDocument.createElement('span');
+        span.style[inlineStyleName] = value;
+        parentElement.insertBefore(span, node);
+        span.appendChild(node);
+      }
+    }
+  });
+}

package/patchElementInlineStyles.js.flow

@@ -0,0 +1,92 @@
+// @flow
+
+import hyphenize from './hyphenize.js';
+
+const BLOCK_TAG_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,li'.replace(
+  /\w+/g,
+  (m) => `${m}[style]`
+);
+
+export default function patchElementInlineStyles(doc: Document): void {
+  // Ensure that inline-styles can be correctly translated as inline marks.
+  // Workaround to patch inline styles added to block tags.
+  const bEls = Array.from(doc.querySelectorAll(BLOCK_TAG_SELECTOR));
+  bEls.forEach(patchBlockElement);
+}
+
+const NODE_TYPE_TEXT = 3;
+const NODE_TYPE_ELEMENT = 1;
+const INLINE_STYLE_NAMES = [
+  'backgroundColor',
+  'color',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'textDecoration',
+  'textIndent',
+];
+
+const INLINE_ELEMENT_NODE_NAMES = new Set([
+  'A',
+  'B',
+  'EM',
+  'I',
+  'SPAN',
+  'STRONG',
+  'U',
+]);
+
+function patchBlockElement(el: HTMLElement): void {
+  INLINE_STYLE_NAMES.forEach((name) => patchBlockElementStyle(el, name));
+}
+
+// Move the specified inline style of the element to its child nodes. This
+// assumes that its child nodes are inline elements.
+function patchBlockElementStyle(
+  el: HTMLElement,
+  inlineStyleName: string
+): void {
+  const element: any = el;
+  const elementStyle = element.style;
+  const value = elementStyle && elementStyle[inlineStyleName];
+
+  if (inlineStyleName === 'textIndent' && value) {
+    // This is the workaround to fix the issue that people with mix both
+    // text-indent and margin-left together.
+    // For instance, `margin-left: -100px` and `text-indent: 100px` shall
+    // offset each other.
+    const marginLeft = elementStyle.marginLeft || '';
+    if (value === '-' + marginLeft || marginLeft === '-' + value) {
+      elementStyle.marginLeft = '';
+      elementStyle.textIndent = '';
+    }
+  }
+
+  if (!value) {
+    return;
+  }
+
+  // Remove the style.
+  elementStyle[inlineStyleName] = '';
+
+  const childNodes = Array.from(element.childNodes);
+  childNodes.forEach((node) => {
+    const { nodeType, style, nodeName, ownerDocument, parentElement } = node;
+
+    if (nodeType === NODE_TYPE_ELEMENT) {
+      if (INLINE_ELEMENT_NODE_NAMES.has(nodeName)) {
+        const cssText =
+          `${hyphenize(inlineStyleName)}: ${value};` + style.cssText;
+        style.cssText = cssText;
+      }
+    } else if (nodeType === NODE_TYPE_TEXT) {
+      if (ownerDocument && parentElement) {
+        const span: any = ownerDocument.createElement('span');
+        span.style[inlineStyleName] = value;
+        parentElement.insertBefore(span, node);
+        span.appendChild(node);
+      }
+    }
+  });
+}

package/patchListElements.js

@@ -0,0 +1,228 @@
+import HTMLMutator from './HTMLMutator.js';
+import nullthrows from 'nullthrows';
+import uuid from './ui/uuid.js';
+import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec.js';
+import { ATTRIBUTE_INDENT, EMPTY_CSS_VALUE, convertMarginLeftToIndentValue } from './ParagraphNodeSpec.js';
+import { ATTRIBUTE_COUNTER_RESET, ATTRIBUTE_FOLLOWING } from './OrderedListNodeSpec.js';
+import { ATTRIBUTE_CSS_BEFORE_CONTENT } from './patchStyleElements.js';
+export default function patchListElements(doc) {
+  // In Google Doc, lists are exported as indented
+  // (e.g. style="margin-left: 48pt") list elements which is the default DOM
+  // structure that `czi-prosemirror` supports. However, other doc providers
+  // (e.g Office 365) may export lists as nested list elements that can't
+  // be rendered properly.
+  // Before proceeding further, it needs to convert the nested list elements
+  // into indented list elements.
+  liftNestedListElements(doc);
+  Array.from(doc.querySelectorAll('ol, ul')).forEach(patchListElementsElement);
+}
+
+// This assumes that every 36pt maps to one indent level.
+var CHAR_BULLET = "\u25CF";
+var CHAR_CIRCLE = "\u25CB";
+var CHAR_SQUARE = "\u25A0";
+var CHAR_BOX = "\u274F";
+var CHAR_ZERO_SPACE = "\u200B";
+var INLINE_NODE_NAME_PATTERN = /^(#text)|(A|SPAN|B|STRONG)$/;
+function patchListElementsElement(listElement) {
+  // If the children of `listElement` all have teh same marginLeft, assume
+  // it to be indented.
+  var marginLeft = undefined;
+  var beforeContent = undefined;
+  var parentElement = listElement.parentElement,
+    children = listElement.children;
+
+  // A workaround to patch the issue when <ul /> or <ol /> is pasted as the
+  // first child of <body />, its first <li /> somehow can't be wrapped
+  // with the list. The hack is to prepend zero-width-space character
+  // before the list.
+  if (parentElement && parentElement.nodeName === 'BODY' && parentElement.firstChild === listElement) {
+    var tt = parentElement.ownerDocument.createTextNode(CHAR_ZERO_SPACE);
+    parentElement.insertBefore(tt, listElement);
+  }
+  Array.from(children).forEach(function (listItemElement) {
+    var style = listItemElement.style;
+    patchPaddingStyle(listItemElement);
+    var bc = listItemElement.getAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT) || '';
+    if (beforeContent === undefined) {
+      beforeContent = bc;
+    }
+    if (beforeContent !== bc) {
+      beforeContent = null;
+    }
+    var ml = style && style.marginLeft || '';
+    if (marginLeft === undefined) {
+      marginLeft = ml;
+    }
+    if (ml !== marginLeft) {
+      marginLeft = null;
+    }
+  });
+  if (marginLeft) {
+    var indent = convertMarginLeftToIndentValue(marginLeft);
+    if (indent) {
+      listElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
+    }
+  }
+  if (beforeContent) {
+    beforeContent = String(beforeContent);
+    var listStyleType;
+    switch (true) {
+      case beforeContent.indexOf(CHAR_BULLET) > -1:
+        listStyleType = 'disc';
+        break;
+      case beforeContent.indexOf(CHAR_CIRCLE) > -1:
+        listStyleType = 'circle';
+        break;
+      case beforeContent.indexOf(CHAR_SQUARE) > -1:
+        listStyleType = 'square';
+        break;
+      case beforeContent.indexOf(CHAR_BOX) > -1:
+        listStyleType = 'box';
+        break;
+      case beforeContent.indexOf('lower-latin') > -1:
+        listStyleType = 'lower-latin';
+        break;
+      case beforeContent.indexOf('upper-latin') > -1:
+        listStyleType = 'upper-latin';
+        break;
+      case beforeContent.indexOf('lower-roman') > -1:
+        listStyleType = 'lower-roman';
+        break;
+      case beforeContent.indexOf('upper-roman') > -1:
+        listStyleType = 'upper-roman';
+        break;
+      case beforeContent.indexOf('-') > -1:
+        listStyleType = 'dash';
+        break;
+      default:
+        console.log('unknown list style type', beforeContent);
+        break;
+    }
+    if (listStyleType) {
+      listElement.setAttribute(ATTRIBUTE_LIST_STYLE_TYPE, listStyleType);
+    }
+  }
+}
+
+// This moves the styles of <li /> into its content <p />.
+function patchPaddingStyle(listItemElement) {
+  var style = listItemElement.style,
+    childNodes = listItemElement.childNodes;
+  var paddingTop = style.paddingTop,
+    paddingBottom = style.paddingBottom,
+    lineHeight = style.lineHeight;
+  if (!EMPTY_CSS_VALUE.has(paddingBottom) && !EMPTY_CSS_VALUE.has(paddingTop) && !EMPTY_CSS_VALUE.has(lineHeight)) {
+    return;
+  }
+  var doc = listItemElement.ownerDocument;
+  var frag = doc.createDocumentFragment();
+  var contentIsInline = true;
+  Array.from(childNodes).forEach(function (cn) {
+    contentIsInline = contentIsInline && INLINE_NODE_NAME_PATTERN.test(cn.nodeName);
+    frag.appendChild(cn);
+  });
+  if (contentIsInline) {
+    // Wrap all inline content with <p /> with the padding style applied.
+    var pEl = doc.createElement('p');
+    Object.assign(pEl.style, {
+      lineHeight: lineHeight,
+      paddingBottom: paddingBottom,
+      paddingTop: paddingTop
+    });
+    pEl.appendChild(frag);
+    listItemElement.appendChild(pEl);
+  } else {
+    // Unable to patch the style.
+    listItemElement.appendChild(frag);
+  }
+}
+
+// This converts all nested list elements into indented list elements.
+// For instance,
+// == UI ==
+// 1. AA
+//   1. BB
+//   2. BB
+// 2. AA
+// == DOM Structure (Before) ==
+// <ol> <!-- Parent List -->
+//   <li>
+//     AA
+//     <ol> <!-- Child (nested) List -->
+//       <li>BB</li>
+//       <li>BB</li>
+//     </ol>
+//   </li>
+//   <li> AA</li>
+// </ol>
+// == DOM Structure (After) ==
+// <ol name="x">
+//   <li>AA</li>
+// </ol>
+// <ol data-indent="1">
+//   <li>BB</li>
+//   <li>BB</li>
+// </ol>
+// <ol data-following="x" data-counter-reset-"none">
+//   <li>AA</li>
+// </ol>
+function liftNestedListElements(doc) {
+  var selector = 'li > ol, li > ul';
+  var els = Array.from(doc.querySelectorAll(selector));
+  var htmlMutator = new HTMLMutator(doc);
+  els.forEach(function (list) {
+    var indent = findIndentLevel(list);
+    list.setAttribute('data-indent', String(indent));
+    var parentListItem = nullthrows(list.parentElement);
+    var parentList = nullthrows(parentListItem.parentElement);
+    var parentListNodeName = parentList.nodeName.toLowerCase();
+    var isLast = parentList.lastElementChild === parentListItem;
+    var style = parentList.getAttribute('style') || '';
+
+    // The parent list will be split into two lists and the second list should
+    // follow the first list.
+    var followingName = parentList.getAttribute('name') || uuid();
+    parentList.setAttribute('name', followingName);
+
+    // Stub HTML snippets that will lift the list.
+
+    // Before:
+    // <ol>
+    //   <li>
+    //     AAA
+    //     <ol><li>BBB</li></ol>
+    //   </li>
+    //   <li>CCC</li>
+    // </ol>
+    // After:
+    // <ol><li>AAA</li></ol>
+    // <ol><li>BBB</li></ol>
+    // <ol><li>CCC</li></ol>
+
+    // Close the parent list before the list.
+    htmlMutator.insertHTMLBefore("</".concat(parentListNodeName, ">"), list);
+    // Open a new list after list.
+    htmlMutator.insertHTMLAfter("<".concat(parentListNodeName, "\n          style=\"").concat(style, "\"\n          class=\"").concat(parentList.className, "\"\n          ").concat(ATTRIBUTE_COUNTER_RESET, "=\"none\"\n          ").concat(ATTRIBUTE_FOLLOWING, "=\"").concat(followingName, "\">"), list);
+    if (isLast) {
+      // The new list after list is an empty list, comment it out.
+      htmlMutator.insertHTMLAfter('<!--', list).insertHTMLAfter('-->', parentList);
+    }
+  });
+  htmlMutator.execute();
+}
+function findIndentLevel(el) {
+  var indent = 0;
+  var currentEl = el.parentElement;
+  while (currentEl) {
+    var _currentEl = currentEl,
+      nodeName = _currentEl.nodeName;
+    if (nodeName === 'OL' || nodeName === 'UL') {
+      indent++;
+    } else if (nodeName !== 'LI') {
+      break;
+    }
+    currentEl = currentEl.parentElement;
+  }
+  return indent;
+}