@modusoperandi/licit 0.14.17 → 1.0.0

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

package/patchStyleElements.js

@@ -0,0 +1,152 @@
+import toCSSColor from './ui/toCSSColor.js';
+import { toCSSLineSpacing } from '@modusoperandi/licit-ui-commands';
+var LIST_ITEM_PSEUDO_ELEMENT_BEFORE = /li:+before/;
+var NODE_NAME_SELECTOR = /^[a-zA-Z]+\d*$/;
+var PSEUDO_ELEMENT_ANY = /:+[a-z]+/;
+
+//  Assume these className from Google doc has less specificity.
+var WEAK_CLASS_SELECTOR = /\.title/;
+export var 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) {
+  var els = Array.from(doc.querySelectorAll('style'));
+  if (!els.length) {
+    return;
+  }
+  var selectorTextToCSSTexts = [];
+  els.forEach(function (styleEl) {
+    var sheet = styleEl.sheet;
+    if (!sheet) {
+      // TODO: Find out why the browser does not support this.
+      console.error('styleEl.sheet undefined', styleEl);
+      return;
+    }
+    var 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(function (rule, cssRuleIndex) {
+      var 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;
+      }
+      var cssText = '';
+      rule.styleMap.forEach(function (cssStyleValue, key) {
+        var cssStyleValueStr = String(cssStyleValue);
+        // e.g. rules['color'] = 'red'.
+        if (key === 'color') {
+          var color = toCSSColor(cssStyleValueStr);
+          if (!color) {
+            return;
+          }
+        } else if (key === 'background-color') {
+          var _color = toCSSColor(cssStyleValueStr);
+          if (!_color) {
+            return;
+          }
+        } else if (key === 'line-height') {
+          cssStyleValueStr = toCSSLineSpacing(cssStyleValueStr);
+        }
+        if (cssStyleValueStr) {
+          cssText += "".concat(key, ": ").concat(cssStyleValueStr, ";");
+        }
+      });
+      if (selectorText.indexOf(',') > -1) {
+        selectorText.split(/\s*,\s*/).forEach(function (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, elementToCSSTexts, bag) {
+  var selectorText = bag.selectorText,
+    cssText = bag.cssText,
+    beforeContent = bag.beforeContent;
+  var els = Array.from(doc.querySelectorAll(selectorText));
+  els.forEach(function (el) {
+    var style = el.style;
+    if (!style || !(el instanceof HTMLElement)) {
+      return;
+    }
+    if (cssText) {
+      var 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, two) {
+  // This is just the naive implementation of sorting selectors by css
+  // specificity.
+  // 1. NodeName selectors has less priority.
+  var aa = NODE_NAME_SELECTOR.test(one.selectorText);
+  var 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, selectorText, cssText) {
+  var afterContent;
+  var 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: selectorText,
+    cssText: cssText,
+    afterContent: afterContent,
+    beforeContent: beforeContent
+  });
+}
+function applyInlineStyleSheetCSSTexts(cssTexts, el) {
+  if (cssTexts.length) {
+    el.style.cssText = cssTexts.join(';') + ';' + el.style.cssText;
+  }
+}

package/patchStyleElements.js.flow

@@ -0,0 +1,196 @@
+// @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<any, any>())
+    .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

@@ -0,0 +1,86 @@
+import { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
+import convertToCSSPTValue from './convertToCSSPTValue.js';
+import toHexColor from './ui/toHexColor.js';
+export default function patchTableElements(doc) {
+  Array.from(doc.querySelectorAll('td')).forEach(patchTableCell);
+  Array.from(doc.querySelectorAll('tr[style^=height]')).forEach(patchTableRow);
+}
+
+// The height of each line: ~= 21px
+var 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) {
+  var style = tdElement.style;
+  if (!style) {
+    return;
+  }
+  var backgroundColor = style.backgroundColor,
+    width = style.width;
+  if (backgroundColor) {
+    var tdBgColor = toHexColor(backgroundColor);
+    var selector = 'span[style*=background-color]';
+    var spans = Array.from(tdElement.querySelectorAll(selector));
+    spans.some(function (spanElement) {
+      var retVal = true;
+      var spanStyle = spanElement.style;
+      if (!spanStyle || !spanStyle.backgroundColor) {
+        retVal = false;
+      } else {
+        var 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) {
+    var ptValue = convertToCSSPTValue(width);
+    if (!ptValue) {
+      return;
+    }
+    var 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) {
+  var doc = trElement.ownerDocument;
+  if (!doc) {
+    return;
+  }
+  var height = trElement.style.height;
+  if (!height) {
+    return;
+  }
+  var firstCell = trElement.querySelector('td, th');
+  if (!firstCell) {
+    return;
+  }
+  var ptValue = convertToCSSPTValue(height);
+  if (!ptValue) {
+    return;
+  }
+  var pEls = firstCell.querySelectorAll('p');
+  var heightNeeded = ptValue - LINE_HEIGHT_PT_VALUE * pEls.length;
+  if (heightNeeded < 0) {
+    return;
+  }
+  var pElsNeeded = Math.round(heightNeeded / LINE_HEIGHT_PT_VALUE);
+  if (pElsNeeded <= 0) {
+    return;
+  }
+  var frag = doc.createDocumentFragment();
+  var line = doc.createElement('p');
+  while (pElsNeeded > 0) {
+    pElsNeeded--;
+    frag.appendChild(line.cloneNode(false));
+  }
+  firstCell.appendChild(frag);
+}

package/patchTableElements.js.flow

@@ -0,0 +1,89 @@
+// @flow
+import { PT_TO_PX_RATIO } from './convertToCSSPTValue.js';
+import convertToCSSPTValue 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 || !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);
+}

package/rebaseDocWithSteps.js

@@ -0,0 +1,25 @@
+import { Step } from 'prosemirror-transform';
+import EditorSchema from './EditorSchema';
+export default function rebaseDocWithSteps(clientID, docJSON, stepsJSON) {
+  return new Promise(function (resolve, reject) {
+    // TODO: Move this into a separate server request.
+    var docNode = EditorSchema.nodeFromJSON(docJSON);
+    var steps = stepsJSON.map(function (step) {
+      var result = Step.fromJSON(EditorSchema, step);
+      result.clientID = clientID;
+      return result;
+    });
+    steps.forEach(function (step) {
+      var result = step.apply(docNode);
+      docNode = result.doc;
+    });
+    var newDocJSON = docNode.toJSON();
+    var newStepsJSON = steps.map(function (step) {
+      return step.toJSON();
+    });
+    resolve({
+      docJSON: newDocJSON,
+      stepsJSON: newStepsJSON
+    });
+  });
+}

package/sanitizeURL.js

@@ -0,0 +1,10 @@
+var HTTP_PREFIX = /^http(s?):*\/\//i;
+export default function sanitizeURL(url) {
+  if (!url) {
+    return 'http://';
+  }
+  if (HTTP_PREFIX.test(url)) {
+    return url;
+  }
+  return 'http://' + url;
+}