@modusoperandi/licit 1.4.3 → 1.4.6

package/patchParagraphElements.js.flow

@@ -1,20 +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));
-    }
-  }
-}
+// @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));
+    }
+  }
+}

package/patchStyleElements.js.flow

@@ -1,197 +1,197 @@
-// @flow
-
-import toCSSColor from './ui/toCSSColor.js';
-import { toCSSLineSpacing } from '@modusoperandi/licit-ui-commands';
-
-const LIST_ITEM_PSEUDO_ELEMENT_BEFORE = /li:+before/;
-const NODE_NAME_SELECTOR = /^[a-zA-Z]+\d*$/;
-const PSEUDO_ELEMENT_ANY = /:+[a-z]+/;
-
-//  Assume these className from Google doc has less specificity.
-const WEAK_CLASS_SELECTOR = /\.title/;
-
-type SelectorTextToCSSText = {
-  afterContent: ?string,
-  beforeContent: ?string,
-  cssText: string,
-  selectorText: string,
-};
-
-export const ATTRIBUTE_CSS_BEFORE_CONTENT = 'data-attribute-css-before-content';
-
-// Node name only selector has less priority, we'll handle it
-// separately
-
-export default function patchStyleElements(doc: Document): void {
-  const els = Array.from(doc.querySelectorAll('style'));
-  if (!els.length) {
-    return;
-  }
-
-  const selectorTextToCSSTexts = [];
-
-  els.forEach((styleEl: any) => {
-    const sheet = styleEl.sheet;
-    if (!sheet) {
-      // TODO: Find out why the browser does not support this.
-      console.error('styleEl.sheet undefined', styleEl);
-      return;
-    }
-    const cssRules = sheet.cssRules;
-    if (!cssRules) {
-      // TODO: Find out why the browser does not support this.
-      console.error('sheet.cssRules undefined', sheet);
-      return;
-    }
-
-    Array.from(cssRules).forEach((rule, cssRuleIndex) => {
-      const selectorText = String(rule.selectorText || '');
-      if (!selectorText) {
-        // This could be `CSSImportRule.` created by @import().
-        // ignore it.
-        return;
-      }
-
-      if (!rule.styleMap) {
-        // TODO: Find out why the browser does not support this.
-        console.error('rule.styleMap undefined', rule);
-        return;
-      }
-      let cssText = '';
-      rule.styleMap.forEach((cssStyleValue, key) => {
-        let cssStyleValueStr = String(cssStyleValue);
-        // e.g. rules['color'] = 'red'.
-        if (key === 'color') {
-          const color = toCSSColor(cssStyleValueStr);
-          if (!color) {
-            return;
-          }
-        } else if (key === 'background-color') {
-          const color = toCSSColor(cssStyleValueStr);
-          if (!color) {
-            return;
-          }
-        } else if (key === 'line-height') {
-          cssStyleValueStr = toCSSLineSpacing(cssStyleValueStr);
-        }
-        if (cssStyleValueStr) {
-          cssText += `${key}: ${cssStyleValueStr};`;
-        }
-      });
-      if (selectorText.indexOf(',') > -1) {
-        selectorText
-          .split('.')
-          .trim()
-          .forEach((st) => {
-            buildSelectorTextToCSSText(selectorTextToCSSTexts, st, cssText);
-          });
-      } else {
-        buildSelectorTextToCSSText(
-          selectorTextToCSSTexts,
-          selectorText,
-          cssText
-        );
-      }
-    });
-  });
-
-  // Sort selector by
-  selectorTextToCSSTexts
-    .sort(sortBySpecificity)
-    .reduce(buildElementToCSSTexts.bind(null, doc), new Map())
-    .forEach(applyInlineStyleSheetCSSTexts);
-}
-
-function buildElementToCSSTexts(
-  doc: Document,
-  elementToCSSTexts: Map<HTMLElement, Array<string>>,
-  bag: SelectorTextToCSSText
-): Map<HTMLElement, Array<string>> {
-  const { selectorText, cssText, beforeContent } = bag;
-  const els = Array.from(doc.querySelectorAll(selectorText));
-
-  els.forEach((el) => {
-    const style = el.style;
-    if (!style || !(el instanceof HTMLElement)) {
-      return;
-    }
-    if (cssText) {
-      const cssTexts = elementToCSSTexts.get(el) || [];
-      cssTexts.push(cssText);
-      elementToCSSTexts.set(el, cssTexts);
-    }
-    if (beforeContent) {
-      // This simply adds the custom attribute 'data-before-content' to element,
-      // developer must handle his attribute via NodeSpec separately if needed.
-      el.setAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT, beforeContent);
-    }
-  });
-  return elementToCSSTexts;
-}
-
-function sortBySpecificity(
-  one: SelectorTextToCSSText,
-  two: SelectorTextToCSSText
-): number {
-  // This is just the naive implementation of sorting selectors by css
-  // specificity.
-  // 1. NodeName selectors has less priority.
-  let aa = NODE_NAME_SELECTOR.test(one.selectorText);
-  let bb = NODE_NAME_SELECTOR.test(two.selectorText);
-  if (aa && !bb) {
-    return -1;
-  }
-
-  if (!aa && bb) {
-    return 1;
-  }
-
-  // Assume both are className selector.
-  // Assume these className from Google doc has less specificity.
-  aa = WEAK_CLASS_SELECTOR.test(one.selectorText);
-  bb = WEAK_CLASS_SELECTOR.test(two.selectorText);
-  if (aa && !bb) {
-    return -1;
-  }
-  if (!aa && bb) {
-    return 1;
-  }
-  return 0;
-}
-
-function buildSelectorTextToCSSText(
-  result: Array<SelectorTextToCSSText>,
-  selectorText: string,
-  cssText: string
-): void {
-  let afterContent;
-  let beforeContent;
-
-  if (LIST_ITEM_PSEUDO_ELEMENT_BEFORE.test(selectorText)) {
-    // Workaround to extract the list style content from HTML generated by
-    // Google.
-    // This converts `content:"\0025a0  "` to `\0025a0`
-    beforeContent = cssText.replace(/^content:\s*"\s*/, '').replace(/";*$/, '');
-    selectorText = selectorText.replace(/:+before/, '');
-    cssText = '';
-  } else if (PSEUDO_ELEMENT_ANY.test(selectorText)) {
-    // TODO: Handle this later.
-    return;
-  }
-
-  result.push({
-    selectorText,
-    cssText,
-    afterContent,
-    beforeContent,
-  });
-}
-
-function applyInlineStyleSheetCSSTexts(
-  cssTexts: Array<string>,
-  el: HTMLElement
-): void {
-  if (cssTexts.length) {
-    el.style.cssText = cssTexts.join(';') + ';' + el.style.cssText;
-  }
-}
+// @flow
+
+import toCSSColor from './ui/toCSSColor.js';
+import { toCSSLineSpacing } from '@modusoperandi/licit-ui-commands';
+
+const LIST_ITEM_PSEUDO_ELEMENT_BEFORE = /li:+before/;
+const NODE_NAME_SELECTOR = /^[a-zA-Z]+\d*$/;
+const PSEUDO_ELEMENT_ANY = /:+[a-z]+/;
+
+//  Assume these className from Google doc has less specificity.
+const WEAK_CLASS_SELECTOR = /\.title/;
+
+type SelectorTextToCSSText = {
+  afterContent: ?string,
+  beforeContent: ?string,
+  cssText: string,
+  selectorText: string,
+};
+
+export const ATTRIBUTE_CSS_BEFORE_CONTENT = 'data-attribute-css-before-content';
+
+// Node name only selector has less priority, we'll handle it
+// separately
+
+export default function patchStyleElements(doc: Document): void {
+  const els = Array.from(doc.querySelectorAll('style'));
+  if (!els.length) {
+    return;
+  }
+
+  const selectorTextToCSSTexts = [];
+
+  els.forEach((styleEl: any) => {
+    const sheet = styleEl.sheet;
+    if (!sheet) {
+      // TODO: Find out why the browser does not support this.
+      console.error('styleEl.sheet undefined', styleEl);
+      return;
+    }
+    const cssRules = sheet.cssRules;
+    if (!cssRules) {
+      // TODO: Find out why the browser does not support this.
+      console.error('sheet.cssRules undefined', sheet);
+      return;
+    }
+
+    Array.from(cssRules).forEach((rule, cssRuleIndex) => {
+      const selectorText = String(rule.selectorText || '');
+      if (!selectorText) {
+        // This could be `CSSImportRule.` created by @import().
+        // ignore it.
+        return;
+      }
+
+      if (!rule.styleMap) {
+        // TODO: Find out why the browser does not support this.
+        console.error('rule.styleMap undefined', rule);
+        return;
+      }
+      let cssText = '';
+      rule.styleMap.forEach((cssStyleValue, key) => {
+        let cssStyleValueStr = String(cssStyleValue);
+        // e.g. rules['color'] = 'red'.
+        if (key === 'color') {
+          const color = toCSSColor(cssStyleValueStr);
+          if (!color) {
+            return;
+          }
+        } else if (key === 'background-color') {
+          const color = toCSSColor(cssStyleValueStr);
+          if (!color) {
+            return;
+          }
+        } else if (key === 'line-height') {
+          cssStyleValueStr = toCSSLineSpacing(cssStyleValueStr);
+        }
+        if (cssStyleValueStr) {
+          cssText += `${key}: ${cssStyleValueStr};`;
+        }
+      });
+      if (selectorText.indexOf(',') > -1) {
+        selectorText
+          .split('.')
+          .trim()
+          .forEach((st) => {
+            buildSelectorTextToCSSText(selectorTextToCSSTexts, st, cssText);
+          });
+      } else {
+        buildSelectorTextToCSSText(
+          selectorTextToCSSTexts,
+          selectorText,
+          cssText
+        );
+      }
+    });
+  });
+
+  // Sort selector by
+  selectorTextToCSSTexts
+    .sort(sortBySpecificity)
+    .reduce(buildElementToCSSTexts.bind(null, doc), new Map())
+    .forEach(applyInlineStyleSheetCSSTexts);
+}
+
+function buildElementToCSSTexts(
+  doc: Document,
+  elementToCSSTexts: Map<HTMLElement, Array<string>>,
+  bag: SelectorTextToCSSText
+): Map<HTMLElement, Array<string>> {
+  const { selectorText, cssText, beforeContent } = bag;
+  const els = Array.from(doc.querySelectorAll(selectorText));
+
+  els.forEach((el) => {
+    const style = el.style;
+    if (!style || !(el instanceof HTMLElement)) {
+      return;
+    }
+    if (cssText) {
+      const cssTexts = elementToCSSTexts.get(el) || [];
+      cssTexts.push(cssText);
+      elementToCSSTexts.set(el, cssTexts);
+    }
+    if (beforeContent) {
+      // This simply adds the custom attribute 'data-before-content' to element,
+      // developer must handle his attribute via NodeSpec separately if needed.
+      el.setAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT, beforeContent);
+    }
+  });
+  return elementToCSSTexts;
+}
+
+function sortBySpecificity(
+  one: SelectorTextToCSSText,
+  two: SelectorTextToCSSText
+): number {
+  // This is just the naive implementation of sorting selectors by css
+  // specificity.
+  // 1. NodeName selectors has less priority.
+  let aa = NODE_NAME_SELECTOR.test(one.selectorText);
+  let bb = NODE_NAME_SELECTOR.test(two.selectorText);
+  if (aa && !bb) {
+    return -1;
+  }
+
+  if (!aa && bb) {
+    return 1;
+  }
+
+  // Assume both are className selector.
+  // Assume these className from Google doc has less specificity.
+  aa = WEAK_CLASS_SELECTOR.test(one.selectorText);
+  bb = WEAK_CLASS_SELECTOR.test(two.selectorText);
+  if (aa && !bb) {
+    return -1;
+  }
+  if (!aa && bb) {
+    return 1;
+  }
+  return 0;
+}
+
+function buildSelectorTextToCSSText(
+  result: Array<SelectorTextToCSSText>,
+  selectorText: string,
+  cssText: string
+): void {
+  let afterContent;
+  let beforeContent;
+
+  if (LIST_ITEM_PSEUDO_ELEMENT_BEFORE.test(selectorText)) {
+    // Workaround to extract the list style content from HTML generated by
+    // Google.
+    // This converts `content:"\0025a0  "` to `\0025a0`
+    beforeContent = cssText.replace(/^content:\s*"\s*/, '').replace(/";*$/, '');
+    selectorText = selectorText.replace(/:+before/, '');
+    cssText = '';
+  } else if (PSEUDO_ELEMENT_ANY.test(selectorText)) {
+    // TODO: Handle this later.
+    return;
+  }
+
+  result.push({
+    selectorText,
+    cssText,
+    afterContent,
+    beforeContent,
+  });
+}
+
+function applyInlineStyleSheetCSSTexts(
+  cssTexts: Array<string>,
+  el: HTMLElement
+): void {
+  if (cssTexts.length) {
+    el.style.cssText = cssTexts.join(';') + ';' + el.style.cssText;
+  }
+}

package/patchTableElements.js.flow

@@ -1,88 +1,88 @@
-// @flow
-import convertToCSSPTValue, { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
-import toHexColor from './ui/toHexColor.js';
-
-export default function patchTableElements(doc: Document): void {
-  Array.from(doc.querySelectorAll('td')).forEach(patchTableCell);
-  Array.from(doc.querySelectorAll('tr[style^=height]')).forEach(patchTableRow);
-}
-
-// The height of each line: ~= 21px
-const LINE_HEIGHT_PT_VALUE = 15.81149997;
-
-// Workaround to patch HTML from Google Doc that Table Cells will apply
-// its background colr to all its inner <span />.
-function patchTableCell(tdElement: HTMLElement): void {
-  const { style } = tdElement;
-  if (!style) {
-    return;
-  }
-  const { backgroundColor, width } = style;
-  if (backgroundColor) {
-    const tdBgColor = toHexColor(backgroundColor);
-    const selector = 'span[style*=background-color]';
-    const spans = Array.from(tdElement.querySelectorAll(selector));
-    spans.some((spanElement) => {
-      let retVal = true;
-      const spanStyle = spanElement.style;
-      if (!spanStyle?.backgroundColor) {
-        retVal = false;
-      } else {
-        const spanBgColor = toHexColor(spanStyle.backgroundColor);
-        if (spanBgColor === tdBgColor) {
-          // The span has the same bg color as the cell does, erase its bg color.
-          spanStyle.backgroundColor = '';
-        }
-      }
-      return retVal;
-    });
-  }
-
-  if (width) {
-    const ptValue = convertToCSSPTValue(width);
-    if (!ptValue) {
-      return;
-    }
-    const pxValue = ptValue * PT_TO_PX_RATIO;
-    // Attribute "data-colwidth" is defined at 'prosemirror-tables';
-    tdElement.setAttribute('data-colwidth', String(Math.round(pxValue)));
-  }
-}
-
-// Workaround to support "height" in table row by inject empty <p /> to
-// create space for the height.
-function patchTableRow(trElement: HTMLElement): void {
-  const doc = trElement.ownerDocument;
-  if (!doc) {
-    return;
-  }
-  const height = trElement.style.height;
-  if (!height) {
-    return;
-  }
-  const firstCell = trElement.querySelector('td, th');
-  if (!firstCell) {
-    return;
-  }
-  const ptValue = convertToCSSPTValue(height);
-  if (!ptValue) {
-    return;
-  }
-
-  const pEls = firstCell.querySelectorAll('p');
-  const heightNeeded = ptValue - LINE_HEIGHT_PT_VALUE * pEls.length;
-  if (heightNeeded < 0) {
-    return;
-  }
-  let pElsNeeded = Math.round(heightNeeded / LINE_HEIGHT_PT_VALUE);
-  if (pElsNeeded <= 0) {
-    return;
-  }
-  const frag = doc.createDocumentFragment();
-  const line = doc.createElement('p');
-  while (pElsNeeded > 0) {
-    pElsNeeded--;
-    frag.appendChild(line.cloneNode(false));
-  }
-  firstCell.appendChild(frag);
-}
+// @flow
+import convertToCSSPTValue, { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
+import toHexColor from './ui/toHexColor.js';
+
+export default function patchTableElements(doc: Document): void {
+  Array.from(doc.querySelectorAll('td')).forEach(patchTableCell);
+  Array.from(doc.querySelectorAll('tr[style^=height]')).forEach(patchTableRow);
+}
+
+// The height of each line: ~= 21px
+const LINE_HEIGHT_PT_VALUE = 15.81149997;
+
+// Workaround to patch HTML from Google Doc that Table Cells will apply
+// its background colr to all its inner <span />.
+function patchTableCell(tdElement: HTMLElement): void {
+  const { style } = tdElement;
+  if (!style) {
+    return;
+  }
+  const { backgroundColor, width } = style;
+  if (backgroundColor) {
+    const tdBgColor = toHexColor(backgroundColor);
+    const selector = 'span[style*=background-color]';
+    const spans = Array.from(tdElement.querySelectorAll(selector));
+    spans.some((spanElement) => {
+      let retVal = true;
+      const spanStyle = spanElement.style;
+      if (!spanStyle?.backgroundColor) {
+        retVal = false;
+      } else {
+        const spanBgColor = toHexColor(spanStyle.backgroundColor);
+        if (spanBgColor === tdBgColor) {
+          // The span has the same bg color as the cell does, erase its bg color.
+          spanStyle.backgroundColor = '';
+        }
+      }
+      return retVal;
+    });
+  }
+
+  if (width) {
+    const ptValue = convertToCSSPTValue(width);
+    if (!ptValue) {
+      return;
+    }
+    const pxValue = ptValue * PT_TO_PX_RATIO;
+    // Attribute "data-colwidth" is defined at 'prosemirror-tables';
+    tdElement.setAttribute('data-colwidth', String(Math.round(pxValue)));
+  }
+}
+
+// Workaround to support "height" in table row by inject empty <p /> to
+// create space for the height.
+function patchTableRow(trElement: HTMLElement): void {
+  const doc = trElement.ownerDocument;
+  if (!doc) {
+    return;
+  }
+  const height = trElement.style.height;
+  if (!height) {
+    return;
+  }
+  const firstCell = trElement.querySelector('td, th');
+  if (!firstCell) {
+    return;
+  }
+  const ptValue = convertToCSSPTValue(height);
+  if (!ptValue) {
+    return;
+  }
+
+  const pEls = firstCell.querySelectorAll('p');
+  const heightNeeded = ptValue - LINE_HEIGHT_PT_VALUE * pEls.length;
+  if (heightNeeded < 0) {
+    return;
+  }
+  let pElsNeeded = Math.round(heightNeeded / LINE_HEIGHT_PT_VALUE);
+  if (pElsNeeded <= 0) {
+    return;
+  }
+  const frag = doc.createDocumentFragment();
+  const line = doc.createElement('p');
+  while (pElsNeeded > 0) {
+    pElsNeeded--;
+    frag.appendChild(line.cloneNode(false));
+  }
+  firstCell.appendChild(frag);
+}