@modusoperandi/licit 0.14.18 → 1.0.0

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;
+}

package/patchListElements.js.flow

@@ -0,0 +1,276 @@
+// @flow
+
+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: Document): void {
+  // 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.
+const CHAR_BULLET = '\u25cf';
+const CHAR_CIRCLE = '\u25cb';
+const CHAR_SQUARE = '\u25a0';
+const CHAR_BOX = '\u274f';
+const CHAR_ZERO_SPACE = '\u200B';
+const INLINE_NODE_NAME_PATTERN = /^(#text)|(A|SPAN|B|STRONG)$/;
+
+function patchListElementsElement(listElement: HTMLElement): void {
+  // If the children of `listElement` all have teh same marginLeft, assume
+  // it to be indented.
+  let marginLeft = undefined;
+  let beforeContent = undefined;
+  const { parentElement, children } = listElement;
+
+  // 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
+  ) {
+    const tt = parentElement.ownerDocument.createTextNode(CHAR_ZERO_SPACE);
+    parentElement.insertBefore(tt, listElement);
+  }
+
+  Array.from(children).forEach((listItemElement) => {
+    const { style } = listItemElement;
+    patchPaddingStyle(listItemElement);
+
+    const bc = listItemElement.getAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT) || '';
+    if (beforeContent === undefined) {
+      beforeContent = bc;
+    }
+    if (beforeContent !== bc) {
+      beforeContent = null;
+    }
+
+    const ml = (style && style.marginLeft) || '';
+    if (marginLeft === undefined) {
+      marginLeft = ml;
+    }
+
+    if (ml !== marginLeft) {
+      marginLeft = null;
+    }
+  });
+
+  if (marginLeft) {
+    const indent = convertMarginLeftToIndentValue(marginLeft);
+    if (indent) {
+      listElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
+    }
+  }
+
+  if (beforeContent) {
+    beforeContent = String(beforeContent);
+    let 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: HTMLElement): void {
+  const { style, childNodes } = listItemElement;
+  const { paddingTop, paddingBottom, lineHeight } = style;
+  if (
+    !EMPTY_CSS_VALUE.has(paddingBottom) &&
+    !EMPTY_CSS_VALUE.has(paddingTop) &&
+    !EMPTY_CSS_VALUE.has(lineHeight)
+  ) {
+    return;
+  }
+
+  const doc = listItemElement.ownerDocument;
+  const frag = doc.createDocumentFragment();
+  let contentIsInline = true;
+
+  Array.from(childNodes).forEach((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.
+    const pEl = doc.createElement('p');
+    Object.assign(pEl.style, {
+      lineHeight,
+      paddingBottom,
+      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: Document): void {
+  const selector = 'li > ol, li > ul';
+  const els = Array.from(doc.querySelectorAll(selector));
+  const htmlMutator = new HTMLMutator(doc);
+
+  els.forEach((list) => {
+    const indent = findIndentLevel(list);
+    list.setAttribute('data-indent', String(indent));
+
+    const parentListItem = nullthrows(list.parentElement);
+    const parentList = nullthrows(parentListItem.parentElement);
+    const parentListNodeName = parentList.nodeName.toLowerCase();
+    const isLast = parentList.lastElementChild === parentListItem;
+    const style = parentList.getAttribute('style') || '';
+
+    // The parent list will be split into two lists and the second list should
+    // follow the first list.
+    const 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(`<\/${parentListNodeName}>`, list);
+    // Open a new list after list.
+    htmlMutator.insertHTMLAfter(
+      `<${parentListNodeName}
+          style="${style}"
+          class="${parentList.className}"
+          ${ATTRIBUTE_COUNTER_RESET}="none"
+          ${ATTRIBUTE_FOLLOWING}="${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: Element): number {
+  let indent = 0;
+  let currentEl = el.parentElement;
+  while (currentEl) {
+    const { nodeName } = currentEl;
+    if (nodeName === 'OL' || nodeName === 'UL') {
+      indent++;
+    } else if (nodeName !== 'LI') {
+      break;
+    }
+    currentEl = currentEl.parentElement;
+  }
+  return indent;
+}

package/patchMathElements.js

@@ -0,0 +1,59 @@
+import queryString from 'query-string';
+import url from 'url';
+export default function patchMathElements(doc) {
+  Array.from(doc.querySelectorAll('img')).forEach(patchGoogleEquationElement);
+}
+
+// See https://developers.google.com/chart/image/docs/chart_params#gcharts_cht
+var PARAM_CHART_CHART_TYPE = 'cht';
+var PARAM_CHART_LABEL = 'chl';
+
+// Google Doc exports math equation content as single image element that loads
+// its content from google. For example:
+//   <img src="https://www.google.com/chart?cht=tx&amp;c...p;chl=m%E2%88%A0C" />
+// Unfortunately, such image often fails to load because its url contains the
+// value that the Google Chart API does not support.
+// The workaround is to use KaTex (https://katex.org/) whoch supports a broader
+// set of characters that can be safely converted into math quations.
+
+function patchGoogleEquationElement(el) {
+  var ownerDocument = el.ownerDocument,
+    parentElement = el.parentElement;
+  if (!ownerDocument || !parentElement) {
+    return;
+  }
+  var src = el.getAttribute('src');
+  var content = getGoogleEquationContent(src);
+  if (!content) {
+    return;
+  }
+
+  // Replace `<img src="..." />` with `<math data-latex="..." />`.
+  // Note that this requires the schema to support `MathNodeSpec`.
+  var math = ownerDocument.createElement('math');
+  math.setAttribute('data-latex', content);
+  parentElement.insertBefore(math, el);
+  parentElement.removeChild(el);
+}
+function getGoogleEquationContent(src) {
+  if (!src) {
+    return null;
+  }
+  var _url$parse = url.parse(src),
+    host = _url$parse.host,
+    pathname = _url$parse.pathname,
+    query = _url$parse.query;
+  if (host !== 'www.google.com' || pathname !== '/chart') {
+    return null;
+  }
+  var params = queryString.parse(query);
+  var chartType = params[PARAM_CHART_CHART_TYPE];
+  var label = params[PARAM_CHART_LABEL];
+
+  // Google exports math equation as a special chart with plan text only
+  // contents.
+  if (chartType !== 'tx' || !label) {
+    return null;
+  }
+  return label;
+}

package/patchParagraphElements.js

@@ -0,0 +1,13 @@
+import { ATTRIBUTE_INDENT, convertMarginLeftToIndentValue } from './ParagraphNodeSpec.js';
+export default function patchParagraphElements(doc) {
+  Array.from(doc.querySelectorAll('p')).forEach(patchParagraphElement);
+}
+function patchParagraphElement(pElement) {
+  var marginLeft = pElement.style.marginLeft;
+  if (marginLeft) {
+    var indent = convertMarginLeftToIndentValue(marginLeft);
+    if (indent) {
+      pElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
+    }
+  }
+}

package/patchParagraphElements.js.flow

@@ -0,0 +1,20 @@
+// @flow
+
+import {
+  ATTRIBUTE_INDENT,
+  convertMarginLeftToIndentValue,
+} from './ParagraphNodeSpec.js';
+
+export default function patchParagraphElements(doc: Document): void {
+  Array.from(doc.querySelectorAll('p')).forEach(patchParagraphElement);
+}
+
+function patchParagraphElement(pElement: HTMLElement): void {
+  const { marginLeft } = pElement.style;
+  if (marginLeft) {
+    const indent = convertMarginLeftToIndentValue(marginLeft);
+    if (indent) {
+      pElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
+    }
+  }
+}