@modusoperandi/licit 1.0.4 → 1.0.7

package/patchMathElements.js.flow

@@ -1,60 +1,58 @@
-// @flow
-
-import queryString from 'query-string';
-import url from 'url';
-export default function patchMathElements(doc: Document): void {
-  Array.from(doc.querySelectorAll('img')).forEach(patchGoogleEquationElement);
-}
-
-// See https://developers.google.com/chart/image/docs/chart_params#gcharts_cht
-const PARAM_CHART_CHART_TYPE = 'cht';
-const 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: HTMLElement): void {
-  const { ownerDocument, parentElement } = el;
-  if (!ownerDocument || !parentElement) {
-    return;
-  }
-  const src = el.getAttribute('src');
-  const content = getGoogleEquationContent(src);
-  if (!content) {
-    return;
-  }
-
-  // Replace `<img src="..." />` with `<math data-latex="..." />`.
-  // Note that this requires the schema to support `MathNodeSpec`.
-  const math = ownerDocument.createElement('math');
-  math.setAttribute('data-latex', content);
-  parentElement.insertBefore(math, el);
-  parentElement.removeChild(el);
-}
-
-function getGoogleEquationContent(src: ?string): ?string {
-  if (!src) {
-    return null;
-  }
-  const { host, pathname, query } = url.parse(src);
-  if (host !== 'www.google.com' || pathname !== '/chart') {
-    return null;
-  }
-
-  const params = queryString.parse(query);
-  const chartType = params[PARAM_CHART_CHART_TYPE];
-  const 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;
-}
+// @flow
+
+export default function patchMathElements(doc: Document): void {
+  Array.from(doc.querySelectorAll('img')).forEach(patchGoogleEquationElement);
+}
+
+// See https://developers.google.com/chart/image/docs/chart_params#gcharts_cht
+const PARAM_CHART_CHART_TYPE = 'cht';
+const 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: HTMLElement): void {
+  const { ownerDocument, parentElement } = el;
+  if (!ownerDocument || !parentElement) {
+    return;
+  }
+  const src = el.getAttribute('src');
+  const content = getGoogleEquationContent(src);
+  if (!content) {
+    return;
+  }
+
+  // Replace `<img src="..." />` with `<math data-latex="..." />`.
+  // Note that this requires the schema to support `MathNodeSpec`.
+  const math = ownerDocument.createElement('math');
+  math.setAttribute('data-latex', content);
+  parentElement.insertBefore(math, el);
+  parentElement.removeChild(el);
+}
+
+function getGoogleEquationContent(src: ?string): ?string {
+  if (!src) {
+    return null;
+  }
+  const { host, pathname, query } = new URL(src);
+  if (host !== 'www.google.com' || pathname !== '/chart') {
+    return null;
+  }
+
+  const params = new URL(query);
+  const chartType = params[PARAM_CHART_CHART_TYPE];
+  const 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.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

@@ -64,7 +64,7 @@ export default function patchStyleElements(doc) {
         }
       });
       if (selectorText.indexOf(',') > -1) {
-        selectorText.split(/\s*,\s*/).forEach(function (st) {
+        selectorText.split('.').trim().forEach(function (st) {
           buildSelectorTextToCSSText(selectorTextToCSSTexts, st, cssText);
         });
       } else {

package/patchStyleElements.js.flow

@@ -1,196 +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(/\s*,\s*/).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

@@ -1,5 +1,4 @@
-import { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
-import convertToCSSPTValue from './convertToCSSPTValue.js';
+import convertToCSSPTValue, { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
 import toHexColor from './ui/toHexColor.js';
 export default function patchTableElements(doc) {
   Array.from(doc.querySelectorAll('td')).forEach(patchTableCell);
@@ -25,7 +24,7 @@ function patchTableCell(tdElement) {
     spans.some(function (spanElement) {
       var retVal = true;
       var spanStyle = spanElement.style;
-      if (!spanStyle || !spanStyle.backgroundColor) {
+      if (!(spanStyle !== null && spanStyle !== void 0 && spanStyle.backgroundColor)) {
         retVal = false;
       } else {
         var spanBgColor = toHexColor(spanStyle.backgroundColor);