@contentful/field-editor-rich-text 2.0.0-next.31 → 2.0.0-next.32

package/dist/field-editor-rich-text.esm.js

@@ -2,7 +2,7 @@ import React__default, { createContext, useContext, useMemo, createElement, useE
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, getChildren as getChildren$1, someNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
+import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
@@ -26,7 +26,7 @@ import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodeP
 import isPlainObject from 'is-plain-obj';
 import { createParagraphPlugin as createParagraphPlugin$1 } from '@udecode/plate-paragraph';
 import { createSelectOnBackspacePlugin as createSelectOnBackspacePlugin$1 } from '@udecode/plate-select';
-import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR, ELEMENT_TD, insertTable, getEmptyRowNode, getEmptyCellNode, deleteRow, deleteColumn, deleteTable, onKeyDownTable as onKeyDownTable$1, getTableCellEntry, createTablePlugin as createTablePlugin$1, withTable } from '@udecode/plate-table';
+import { ELEMENT_TABLE, ELEMENT_TR, getEmptyRowNode, ELEMENT_TD, ELEMENT_TH, getEmptyCellNode, insertTable, deleteRow, deleteColumn, deleteTable, onKeyDownTable as onKeyDownTable$1, getTableCellEntry, createTablePlugin as createTablePlugin$1, withTable } from '@udecode/plate-table';
 import { toContentfulDocument, toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
 import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
 import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
@@ -5621,210 +5621,6 @@ function SlashCommandsPalette(_ref2) {
   }, /*#__PURE__*/createElement(Card, null, /*#__PURE__*/createElement(Text$1, null, "Slash commands are temporarily unavailable.")));
 }
 
-function insertTableAndFocusFirstCell(editor) {
-  insertTable(editor, {
-    header: true
-  });
-  replaceEmptyParagraphWithTable(editor);
-}
-function isTableActive(editor) {
-  var tableElements = [ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR, ELEMENT_TD];
-  return tableElements.some(function (el) {
-    return isBlockSelected(editor, el);
-  });
-}
-function isTableHeaderEnabled(editor) {
-  var tableItem = getAbove(editor, {
-    match: {
-      type: BLOCKS.TABLE
-    }
-  });
-
-  if (!tableItem) {
-    return false;
-  }
-
-  var firstRow = getChildren$1(tableItem)[0];
-
-  if (!firstRow) {
-    return false;
-  }
-
-  return getChildren$1(firstRow).every(function (_ref) {
-    var node = _ref[0];
-    return node.type === BLOCKS.TABLE_HEADER_CELL;
-  });
-}
-function replaceEmptyParagraphWithTable(editor) {
-  var tablePath = getAncestorPathFromSelection(editor);
-  if (!tablePath || isFirstChild(tablePath)) return;
-  var previousPath = Path.previous(tablePath);
-  if (!previousPath) return;
-
-  var _Editor$nodes = Editor.nodes(editor, {
-    at: previousPath,
-    match: function match(node) {
-      return node.type === BLOCKS.PARAGRAPH;
-    }
-  }),
-      nodes = _Editor$nodes[0];
-
-  if (!nodes) return;
-  var previousNode = nodes[0];
-  var isPreviousNodeTextEmpty = isAncestorEmpty(editor, previousNode);
-
-  if (isPreviousNodeTextEmpty) {
-    // Switch table with previous empty paragraph
-    Transforms.moveNodes(editor, {
-      at: tablePath,
-      to: previousPath
-    }); // Remove previous paragraph that now is under the table
-
-    Transforms.removeNodes(editor, {
-      at: tablePath
-    });
-  }
-}
-/**
- * Returns the number of cells in a given row vs the table width
- *
- * Note: We should only get different table rows cell counts in between
- * normalization cycles.
- */
-
-var getNoOfMissingTableCellsInRow = function getNoOfMissingTableCellsInRow(editor, _ref2) {
-  var rowPath = _ref2[1];
-  var parent = getParent(editor, rowPath); // This is ensured by normalization. The error is here just in case
-
-  if (!parent) {
-    throw new Error('table rows must be wrapped in a table node');
-  }
-
-  var tablePath = parent[1]; // The longest table row determines its width
-
-  var tableWidth = Math.max.apply(Math, Array.from(Node.children(editor, tablePath)).map(function (_ref3) {
-    var path = _ref3[1];
-    return Array.from(Node.children(editor, path)).length;
-  }));
-  var rowWidth = Array.from(Node.children(editor, rowPath)).length;
-  return tableWidth - rowWidth;
-};
-var createEmptyTableCells = function createEmptyTableCells(count) {
-  var emptyTableCell = {
-    type: BLOCKS.TABLE_CELL,
-    data: {},
-    children: [{
-      type: BLOCKS.PARAGRAPH,
-      data: {},
-      children: [{
-        text: ''
-      }]
-    }]
-  };
-  return new Array(count).fill(emptyTableCell);
-};
-var isNotEmpty = function isNotEmpty(editor, _ref4) {
-  var path = _ref4[1];
-  return Array.from(Node.children(editor, path)).length !== 0;
-};
-var isTable = function isTable(node) {
-  return Element.isElement(node) && node.type === BLOCKS.TABLE;
-};
-
-function hasTables(nodes) {
-  return nodes.some(function (_ref) {
-    var type = _ref.type;
-    return type === BLOCKS.TABLE;
-  });
-}
-
-var isTableHeaderCell = function isTableHeaderCell(_ref2) {
-  var type = _ref2.type;
-  return type === BLOCKS.TABLE_HEADER_CELL;
-};
-
-var isTableCellOrHeader = function isTableCellOrHeader(node) {
-  return Element.isElement(node) && [BLOCKS.TABLE_HEADER_CELL, BLOCKS.TABLE_CELL].includes(node.type);
-};
-
-function hasHeadersOutsideFirstRow(nodes) {
-  return nodes.filter(function (_ref3) {
-    var type = _ref3.type;
-    return type === BLOCKS.TABLE;
-  }).flatMap(function (_ref4) {
-    var children = _ref4.children;
-    return children.slice(1);
-  }).some(function (_ref5) {
-    var children = _ref5.children;
-    return children.some(isTableHeaderCell);
-  });
-}
-
-function trackInvalidTableCellChildren(editor, table) {
-  var cells = table.children.flatMap(function (row) {
-    var _row$children;
-
-    return (_row$children = row.children) != null ? _row$children : [];
-  }).filter(isTableCellOrHeader); // get invalid direct children
-
-  var invalidNodeTypes = cells.flatMap(function (cell) {
-    // Only paragraphs are allowed inside tables at the moment
-    return cell.children.filter(function (node) {
-      return Element.isElement(node) && node.type !== BLOCKS.PARAGRAPH;
-    }).map(function (node) {
-      return node.type;
-    });
-  });
-
-  for (var _iterator = _createForOfIteratorHelperLoose(new Set(invalidNodeTypes)), _step; !(_step = _iterator()).done;) {
-    var _editor$tracking;
-
-    var nodeType = _step.value;
-    (_editor$tracking = editor.tracking) == null ? void 0 : _editor$tracking.onViewportAction('invalidTablePaste', {
-      nodeType: nodeType
-    });
-  }
-}
-
-function addTableTrackingEvents(editor) {
-  var insertData = editor.insertData;
-
-  editor.insertData = function (data) {
-    var html = data.getData('text/html');
-
-    if (html) {
-      var markupBefore = editor.children;
-      insertData(data);
-      var markupAfter = editor.children;
-      setTimeout(function () {
-        if (hasTables(markupBefore)) return;
-
-        if (hasTables(markupAfter)) {
-          editor.tracking.onViewportAction('paste', {
-            tablePasted: true,
-            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
-          });
-        }
-      }, 1);
-    } else {
-      insertData(data);
-    }
-  };
-
-  var insertFragment = editor.insertFragment;
-
-  editor.insertFragment = function (fragment) {
-    var tables = fragment.filter(isTable);
-
-    for (var _iterator2 = _createForOfIteratorHelperLoose(tables), _step2; !(_step2 = _iterator2()).done;) {
-      var table = _step2.value;
-      trackInvalidTableCellChildren(editor, table);
-    }
-
-    return insertFragment(fragment);
-  };
-}
-
 var addRow = function addRow(editor, getNextRowPath) {
   if (someNode(editor, {
     match: {
@@ -5944,6 +5740,116 @@ var setHeader = function setHeader(editor, enable) {
   });
 };
 
+function insertTableAndFocusFirstCell(editor) {
+  insertTable(editor, {
+    header: true
+  });
+  replaceEmptyParagraphWithTable(editor);
+}
+function isTableActive(editor) {
+  var tableElements = [ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR, ELEMENT_TD];
+  return tableElements.some(function (el) {
+    return isBlockSelected(editor, el);
+  });
+}
+function isTableHeaderEnabled(editor) {
+  var tableItem = getAbove(editor, {
+    match: {
+      type: BLOCKS.TABLE
+    }
+  });
+
+  if (!tableItem) {
+    return false;
+  }
+
+  var firstRow = getChildren$1(tableItem)[0];
+
+  if (!firstRow) {
+    return false;
+  }
+
+  return getChildren$1(firstRow).every(function (_ref) {
+    var node = _ref[0];
+    return node.type === BLOCKS.TABLE_HEADER_CELL;
+  });
+}
+function replaceEmptyParagraphWithTable(editor) {
+  var tablePath = getAncestorPathFromSelection(editor);
+  if (!tablePath || isFirstChild(tablePath)) return;
+  var previousPath = Path.previous(tablePath);
+  if (!previousPath) return;
+
+  var _Editor$nodes = Editor.nodes(editor, {
+    at: previousPath,
+    match: function match(node) {
+      return node.type === BLOCKS.PARAGRAPH;
+    }
+  }),
+      nodes = _Editor$nodes[0];
+
+  if (!nodes) return;
+  var previousNode = nodes[0];
+  var isPreviousNodeTextEmpty = isAncestorEmpty(editor, previousNode);
+
+  if (isPreviousNodeTextEmpty) {
+    // Switch table with previous empty paragraph
+    Transforms.moveNodes(editor, {
+      at: tablePath,
+      to: previousPath
+    }); // Remove previous paragraph that now is under the table
+
+    Transforms.removeNodes(editor, {
+      at: tablePath
+    });
+  }
+}
+/**
+ * Returns the number of cells in a given row vs the table width
+ *
+ * Note: We should only get different table rows cell counts in between
+ * normalization cycles.
+ */
+
+var getNoOfMissingTableCellsInRow = function getNoOfMissingTableCellsInRow(editor, _ref2) {
+  var rowPath = _ref2[1];
+  var parent = getParent(editor, rowPath); // This is ensured by normalization. The error is here just in case
+
+  if (!parent) {
+    throw new Error('table rows must be wrapped in a table node');
+  }
+
+  var tablePath = parent[1]; // The longest table row determines its width
+
+  var tableWidth = Math.max.apply(Math, Array.from(Node.children(editor, tablePath)).map(function (_ref3) {
+    var path = _ref3[1];
+    return Array.from(Node.children(editor, path)).length;
+  }));
+  var rowWidth = Array.from(Node.children(editor, rowPath)).length;
+  return tableWidth - rowWidth;
+};
+var createEmptyTableCells = function createEmptyTableCells(count) {
+  var emptyTableCell = {
+    type: BLOCKS.TABLE_CELL,
+    data: {},
+    children: [{
+      type: BLOCKS.PARAGRAPH,
+      data: {},
+      children: [{
+        text: ''
+      }]
+    }]
+  };
+  return new Array(count).fill(emptyTableCell);
+};
+var isNotEmpty = function isNotEmpty(editor, _ref4) {
+  var path = _ref4[1];
+  return Array.from(Node.children(editor, path)).length !== 0;
+};
+var isTable = function isTable(node) {
+  return Element.isElement(node) && node.type === BLOCKS.TABLE;
+};
+
 var styles$i = {
   topRight: /*#__PURE__*/css({
     position: 'absolute',
@@ -6067,7 +5973,7 @@ var Cell = function Cell(props) {
 };
 
 var _templateObject$8;
-var style$4 = /*#__PURE__*/css(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  font-weight: ", ";\n  text-align: left;\n  min-width: 48px;\n  position: relative;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray200, tokens.gray400, tokens.fontWeightNormal);
+var style$4 = /*#__PURE__*/css(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-clip: padding-box;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  font-weight: ", ";\n  text-align: left;\n  min-width: 48px;\n  position: relative;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray200, tokens.gray400, tokens.fontWeightNormal);
 var HeaderCell = function HeaderCell(props) {
   var isSelected = useSelected();
   return /*#__PURE__*/createElement("th", Object.assign({}, props.attributes, props.element.data, {
@@ -6214,6 +6120,72 @@ var onKeyDownTable = function onKeyDownTable(editor, plugin) {
   };
 };
 
+function hasTables(nodes) {
+  return nodes.some(function (_ref) {
+    var type = _ref.type;
+    return type === BLOCKS.TABLE;
+  });
+}
+
+var isTableHeaderCell = function isTableHeaderCell(_ref2) {
+  var type = _ref2.type;
+  return type === BLOCKS.TABLE_HEADER_CELL;
+};
+
+function hasHeadersOutsideFirstRow(nodes) {
+  return nodes.filter(function (_ref3) {
+    var type = _ref3.type;
+    return type === BLOCKS.TABLE;
+  }).flatMap(function (_ref4) {
+    var children = _ref4.children;
+    return children.slice(1);
+  }).some(function (_ref5) {
+    var children = _ref5.children;
+    return children.some(isTableHeaderCell);
+  });
+}
+
+function addTableTrackingEvents(editor) {
+  var insertData = editor.insertData;
+
+  editor.insertData = function (data) {
+    var html = data.getData('text/html');
+
+    if (html) {
+      var markupBefore = editor.children;
+      insertData(data);
+      var markupAfter = editor.children;
+      setTimeout(function () {
+        if (hasTables(markupBefore)) return;
+
+        if (hasTables(markupAfter)) {
+          editor.tracking.onViewportAction('paste', {
+            tablePasted: true,
+            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
+          });
+        }
+      }, 1);
+    } else {
+      insertData(data);
+    }
+  };
+}
+var withInvalidCellChildrenTracking = function withInvalidCellChildrenTracking(transformer) {
+  return function (editor, childEntry) {
+    var node = childEntry[0];
+
+    if (Element.isElement(node)) {
+      var _editor$tracking;
+
+      (_editor$tracking = editor.tracking) == null ? void 0 : _editor$tracking.onViewportAction('invalidTablePaste', {
+        nodeType: node.type
+      });
+    }
+
+    return transformer(editor, childEntry);
+  };
+};
+
 var createTablePlugin = function createTablePlugin() {
   var _overrideByKey;
 
@@ -6287,14 +6259,14 @@ var createTablePlugin = function createTablePlugin() {
       component: HeaderCell,
       normalizer: [{
         validChildren: CONTAINERS[BLOCKS.TABLE_HEADER_CELL],
-        transform: transformParagraphs
+        transform: withInvalidCellChildrenTracking(transformParagraphs)
       }]
     }, _overrideByKey[ELEMENT_TD] = {
       type: BLOCKS.TABLE_CELL,
       component: Cell,
       normalizer: [{
         validChildren: CONTAINERS[BLOCKS.TABLE_CELL],
-        transform: transformParagraphs
+        transform: withInvalidCellChildrenTracking(transformParagraphs)
       }]
     }, _overrideByKey)
   });
@@ -6558,6 +6530,43 @@ var actionOrigin = {
   VIEWPORT: 'viewport-interaction',
   COMMAND_PALETTE: 'command-palette'
 };
+
+function getPastingSource(data) {
+  var textHtml = data.getData('text/html');
+  var doc = new DOMParser().parseFromString(textHtml, 'text/html');
+
+  if (doc.querySelector('[id*="docs-internal-guid"]')) {
+    return 'Google Docs';
+  }
+
+  if (doc.querySelector('google-sheets-html-origin') || doc.querySelector('[data-sheets-value]')) {
+    return 'Google Spreadsheets';
+  }
+
+  if (doc.querySelector('meta[content*="Microsoft Excel"]')) {
+    return 'Microsoft Excel';
+  }
+
+  if (doc.querySelector('meta[content*="Microsoft Word"]')) {
+    return 'Microsoft Word';
+  } // TODO: MS Word Online doesn't give us specific tags, we might need to have a closer look at its tracking result since we are using generic values to identify it
+
+
+  if (doc.querySelector('[style*="Arial_MSFontService"]') && (doc.querySelector('.TextRun') || doc.querySelector('.OutlineElement'))) {
+    return 'Microsoft Word Online';
+  }
+
+  if (doc.querySelector('meta[content="Cocoa HTML Writer"]')) {
+    return 'Apple Notes';
+  }
+
+  if (doc.querySelector('[style*="Slack-Lato, Slack-Fractions"]')) {
+    return 'Slack';
+  }
+
+  return '';
+}
+
 var createTrackingPlugin = function createTrackingPlugin(onAction) {
   var trackingActions = {
     onViewportAction: function onViewportAction(actionName, data) {
@@ -6613,11 +6622,18 @@ var createTrackingPlugin = function createTrackingPlugin(onAction) {
           var characterCountBefore = getCharacterCount(editor);
           setTimeout(function () {
             var characterCountAfter = getCharacterCount(editor);
-            trackingActions.onShortcutAction('paste', {
+            var payload = {
               characterCountAfter: characterCountAfter,
               characterCountBefore: characterCountBefore,
               characterCountSelection: characterCountSelection
-            });
+            };
+            var source = getPastingSource(data);
+
+            if (source) {
+              payload.source = source;
+            }
+
+            trackingActions.onShortcutAction('paste', payload);
           });
         }