@modusoperandi/licit 0.14.18 → 1.0.1

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

package/splitListItem.js

@@ -0,0 +1,170 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import uuid from './ui/uuid.js';
+import { Fragment, Schema } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { Transform, canSplit } from 'prosemirror-transform';
+import { LIST_ITEM, ORDERED_LIST, BULLET_LIST, PARAGRAPH } from './NodeNames.js';
+import { findParentNodeOfType } from 'prosemirror-utils';
+
+// Splits a list item by the current cursor's position.
+// Some examples:
+//
+// - split before item's text:
+//   - before:
+//     1. <cursor>AA
+//     2. BB
+//     3. CC
+//   - after:
+//     1. <cursor>
+//     2. AA
+//     3. BB
+//     4. CC
+//
+// - split between item's text:
+//   - before:
+//     1. AA
+//     2. B<cursor>B
+//     3. CC
+//   - after:
+//     1. AA
+//     2. B
+//     3. B
+//     4. CC
+//
+// - split after item's text:
+//   - before:
+//     1. AA
+//     2. BB<cursor>
+//     3. CC
+//   - after:
+//     1. AA
+//     2. BB
+//     3. <cursor>
+//     4. CC
+//
+// - split at item with empty content:
+//   - before:
+//     1. AA
+//     2. <cursor>
+//     3. CC
+//   - after:
+//     1. AA
+//     <cursor>
+//     2. BB
+//     3. CC
+//
+export default function splitListItem(tr, schema) {
+  var nodeType = schema.nodes[LIST_ITEM];
+  if (!nodeType) {
+    return tr;
+  }
+  var _tr = tr,
+    selection = _tr.selection;
+  if (!selection) {
+    return tr;
+  }
+  var $from = selection.$from,
+    $to = selection.$to,
+    node = selection.node;
+  if (node && node.isBlock || $from.depth < 2 || !$from.sameParent($to)) {
+    return tr;
+  }
+  var grandParent = $from.node(-1);
+  if (grandParent.type !== nodeType) {
+    return tr;
+  }
+  if ($from.parent.content.size == 0) {
+    // In an empty list item.
+    return splitEmptyListItem(tr, schema);
+  }
+  var nextType = $to.pos == $from.end() ? grandParent.contentMatchAt($from.indexAfter(-1)).defaultType : null;
+  tr = tr["delete"]($from.pos, $to.pos);
+  var types = nextType && [null, {
+    type: nextType
+  }];
+  if (!canSplit(tr.doc, $from.pos, 2, types)) {
+    return tr;
+  }
+  return tr.split($from.pos, 2, types);
+}
+
+// Splits an item with empty content:
+//   - before:
+//     1. AA
+//     2. <cursor>
+//     3. CC
+//   - after:
+//     1. AA
+//     <cursor>
+//     2. BB
+//     3. CC
+function splitEmptyListItem(tr, schema) {
+  var listItemType = schema.nodes[LIST_ITEM];
+  var orderedListType = schema.nodes[ORDERED_LIST];
+  var bulletListType = schema.nodes[BULLET_LIST];
+  var paragraphType = schema.nodes[PARAGRAPH];
+  if (!listItemType || !paragraphType) {
+    // Schema does not support the nodes expected.
+    return tr;
+  }
+  var listItemFound = findParentNodeOfType(listItemType)(tr.selection);
+  if (!listItemFound || listItemFound.node.textContent !== '') {
+    // Cursor is not inside an empty list item.
+    return tr;
+  }
+  var listFound = orderedListType && findParentNodeOfType(orderedListType)(tr.selection) || bulletListType && findParentNodeOfType(bulletListType)(tr.selection);
+  if (!listFound) {
+    // Cursor isn't inside an list.
+    return tr;
+  }
+  var $listItemPos = tr.doc.resolve(listItemFound.pos);
+  var listItemIndex = $listItemPos.index($listItemPos.depth);
+  var listFoundNode = listFound.node;
+  if (listFoundNode.childCount < 3 || listItemIndex < 1 || listItemIndex >= listFoundNode.childCount - 1) {
+    // - The list must have at least three list items
+    // - The cursor must be after the first list item and before the last list
+    //   item.
+    // If both conditions don't match, bails out, which will remove the empty
+    // item.
+    return tr;
+  }
+
+  // Find the name of the current list to split. If the name isn't available,
+  // assigns a new name.
+  var name = listFoundNode.attrs.name;
+  if (!name) {
+    name = uuid();
+    tr = tr.setNodeMarkup(listFound.pos, listFoundNode.type, _objectSpread(_objectSpread({}, listFoundNode.attrs), {}, {
+      name: name
+    }), listFoundNode.marks);
+  }
+
+  // We'll split the list into two lists.
+  // the first list contains the items before the cursor, and the second
+  // list contains the items after the cursor and the second list will "follow"
+  // the first list by sharing the same counter variable.
+  var sliceFrom = listItemFound.pos + listItemFound.node.nodeSize;
+  var sliceTo = listFound.pos + listFound.node.nodeSize - 1;
+  var slicedItems = tr.doc.slice(sliceFrom, sliceTo, false);
+  var deleteFrom = listItemFound.pos;
+  var deleteTo = listFound.pos + listFound.node.nodeSize;
+  tr = tr["delete"](deleteFrom, deleteTo);
+  var sourceListNode = listFound.node;
+  var listAttrs = _objectSpread({}, sourceListNode.attrs);
+  if (orderedListType === sourceListNode.type) {
+    listAttrs.counterReset = 'none';
+    listAttrs.following = name;
+  }
+  var insertFrom = deleteFrom + 1;
+  var listNode = sourceListNode.type.create(listAttrs, slicedItems.content);
+  tr = tr.insert(insertFrom, listNode);
+  var paragraph = paragraphType.create({}, Fragment.empty);
+  tr = tr.insert(insertFrom, paragraph);
+  tr = tr.setSelection(TextSelection.create(tr.doc, insertFrom));
+  return tr;
+}