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

package/dist/field-editor-rich-text.cjs.development.js

@@ -5449,6 +5449,295 @@ var createSelectOnBackspacePlugin = function createSelectOnBackspacePlugin() {
   });
 };
 
+function getCaretTopPoint() {
+  var sel = document.getSelection();
+  if (!sel) return;
+  var r = sel.getRangeAt(0);
+  var rect;
+  var r2; // supposed to be textNode in most cases
+  // but div[contenteditable] when empty
+
+  var node = r.startContainer;
+  var offset = r.startOffset;
+
+  if (offset > 0) {
+    // new range, don't influence DOM state
+    r2 = document.createRange();
+    r2.setStart(node, offset - 1);
+    r2.setEnd(node, offset); // https://developer.mozilla.org/en-US/docs/Web/API/range.getBoundingClientRect
+    // IE9, Safari?(but look good in Safari 8)
+
+    rect = r2.getBoundingClientRect();
+    return {
+      left: rect.right,
+      top: rect.top
+    }; // @ts-expect-error
+  } else if (offset < node.length) {
+    r2 = document.createRange(); // similar but select next on letter
+
+    r2.setStart(node, offset);
+    r2.setEnd(node, offset + 1);
+    rect = r2.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top
+    };
+  } else {
+    // textNode has length
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
+    // @ts-expect-error
+    rect = node.getBoundingClientRect(); // @ts-expect-error
+
+    var styles = getComputedStyle(node);
+    var lineHeight = parseInt(styles.lineHeight);
+    var fontSize = parseInt(styles.fontSize); // roughly half the whitespace... but not exactly
+
+    var delta = (lineHeight - fontSize) / 2;
+    return {
+      left: rect.left,
+      top: rect.top + delta
+    };
+  }
+}
+function closePanel(editorId) {
+  document.dispatchEvent(new CustomEvent('close-rte-palette-commands', {
+    detail: {
+      editorId: editorId
+    }
+  }));
+}
+function openPanel(editorId) {
+  document.dispatchEvent(new CustomEvent('open-rte-palette-commands', {
+    detail: {
+      editorId: editorId
+    }
+  }));
+}
+
+// import debounce from 'lodash/debounce';
+var SLASH_COMMANDS_PLUGIN_KEY = 'SlashCommands'; // TODO: Explore a solution using marks and ReactDOM.createPortal to activate the commands panel
+
+function createSlashCommandsPlugin() {
+  return {
+    key: SLASH_COMMANDS_PLUGIN_KEY,
+    type: SLASH_COMMANDS_PLUGIN_KEY,
+    handlers: {
+      onClick: function onClick(editor) {
+        return function () {
+          closePanel(editor.id);
+        };
+      },
+      onKeyDown: function onKeyDown(editor) {
+        return function (event) {
+          closePanel(editor.id);
+
+          if (event.key === '/') {
+            openPanel(editor.id);
+          }
+        };
+      }
+    }
+  };
+}
+
+var style$2 = {
+  container: function container(_ref) {
+    var top = _ref.top,
+        left = _ref.left;
+    return emotion.css({
+      position: 'fixed',
+      top: top - 14,
+      left: left + 10,
+      zIndex: 1,
+      boxShadow: '0 5px 15px rgba(0, 0, 0, 0.15)',
+      borderRadius: '8px',
+      userSelect: 'none'
+    });
+  }
+};
+function SlashCommandsPalette(_ref2) {
+  var editorId = _ref2.editorId;
+
+  var _React$useState = React.useState(null),
+      position = _React$useState[0],
+      setPosition = _React$useState[1];
+
+  var _React$useState2 = React.useState(false),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1]; // The user is not annoyed every time they type `/`
+
+
+  var MAX_TRIES = 3;
+
+  var _React$useState3 = React.useState(0),
+      currentTries = _React$useState3[0],
+      setCurrentTries = _React$useState3[1];
+
+  React.useEffect(function () {
+    function handler(event) {
+      if (editorId !== event.detail.editorId) return;
+      var topLeft = getCaretTopPoint();
+      if (!topLeft) return;
+      setPosition(topLeft);
+      setIsOpen(true);
+      setCurrentTries(function (curr) {
+        return curr + 1;
+      });
+    }
+
+    document.addEventListener('open-rte-palette-commands', handler);
+    return function () {
+      document.removeEventListener('open-rte-palette-commands', handler);
+    };
+  }, [editorId]);
+  React.useEffect(function () {
+    function handler(event) {
+      if (editorId !== event.detail.editorId) return;
+      closePanel();
+    }
+
+    document.addEventListener('close-rte-palette-commands', handler);
+    return function () {
+      return document.removeEventListener('close-rte-palette-commands', handler);
+    };
+  }, [editorId]);
+  React.useEffect(function () {
+    if (!isOpen) return;
+
+    function handler() {
+      closePanel();
+    }
+
+    window.addEventListener('resize', handler);
+    window.addEventListener('scroll', handler, true);
+    return function () {
+      window.removeEventListener('resize', handler);
+      window.removeEventListener('scroll', handler, true);
+    };
+  }, [isOpen]);
+
+  function closePanel() {
+    setIsOpen(false);
+    setPosition(null);
+  }
+
+  if (!isOpen || !position || currentTries > MAX_TRIES) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style$2.container(position),
+    "data-test-id": "rte-slash-commands"
+  }, /*#__PURE__*/React.createElement(f36Components.Card, null, /*#__PURE__*/React.createElement(f36Components.Text, null, "Slash commands are temporarily unavailable.")));
+}
+
+function insertTableAndFocusFirstCell(editor) {
+  plateTable.insertTable(editor, {
+    header: true
+  });
+  replaceEmptyParagraphWithTable(editor);
+}
+function isTableActive(editor) {
+  var tableElements = [plateTable.ELEMENT_TABLE, plateTable.ELEMENT_TH, plateTable.ELEMENT_TR, plateTable.ELEMENT_TD];
+  return tableElements.some(function (el) {
+    return isBlockSelected(editor, el);
+  });
+}
+function isTableHeaderEnabled(editor) {
+  var tableItem = plateCore.getAbove(editor, {
+    match: {
+      type: Contentful.BLOCKS.TABLE
+    }
+  });
+
+  if (!tableItem) {
+    return false;
+  }
+
+  var firstRow = plateCore.getChildren(tableItem)[0];
+
+  if (!firstRow) {
+    return false;
+  }
+
+  return plateCore.getChildren(firstRow).every(function (_ref) {
+    var node = _ref[0];
+    return node.type === Contentful.BLOCKS.TABLE_HEADER_CELL;
+  });
+}
+function replaceEmptyParagraphWithTable(editor) {
+  var tablePath = getAncestorPathFromSelection(editor);
+  if (!tablePath || plateCore.isFirstChild(tablePath)) return;
+  var previousPath = slate.Path.previous(tablePath);
+  if (!previousPath) return;
+
+  var _Editor$nodes = slate.Editor.nodes(editor, {
+    at: previousPath,
+    match: function match(node) {
+      return node.type === Contentful.BLOCKS.PARAGRAPH;
+    }
+  }),
+      nodes = _Editor$nodes[0];
+
+  if (!nodes) return;
+  var previousNode = nodes[0];
+  var isPreviousNodeTextEmpty = plateCore.isAncestorEmpty(editor, previousNode);
+
+  if (isPreviousNodeTextEmpty) {
+    // Switch table with previous empty paragraph
+    slate.Transforms.moveNodes(editor, {
+      at: tablePath,
+      to: previousPath
+    }); // Remove previous paragraph that now is under the table
+
+    slate.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 = plateCore.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(slate.Node.children(editor, tablePath)).map(function (_ref3) {
+    var path = _ref3[1];
+    return Array.from(slate.Node.children(editor, path)).length;
+  }));
+  var rowWidth = Array.from(slate.Node.children(editor, rowPath)).length;
+  return tableWidth - rowWidth;
+};
+var createEmptyTableCells = function createEmptyTableCells(count) {
+  var emptyTableCell = {
+    type: Contentful.BLOCKS.TABLE_CELL,
+    data: {},
+    children: [{
+      type: Contentful.BLOCKS.PARAGRAPH,
+      data: {},
+      children: [{
+        text: ''
+      }]
+    }]
+  };
+  return new Array(count).fill(emptyTableCell);
+};
+var isNotEmpty = function isNotEmpty(editor, _ref4) {
+  var path = _ref4[1];
+  return Array.from(slate.Node.children(editor, path)).length !== 0;
+};
+var isTable = function isTable(node) {
+  return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
+};
+
 function hasTables(nodes) {
   return nodes.some(function (_ref) {
     var type = _ref.type;
@@ -5461,6 +5750,10 @@ var isTableHeaderCell = function isTableHeaderCell(_ref2) {
   return type === Contentful.BLOCKS.TABLE_HEADER_CELL;
 };
 
+var isTableCellOrHeader = function isTableCellOrHeader(node) {
+  return slate.Element.isElement(node) && [Contentful.BLOCKS.TABLE_HEADER_CELL, Contentful.BLOCKS.TABLE_CELL].includes(node.type);
+};
+
 function hasHeadersOutsideFirstRow(nodes) {
   return nodes.filter(function (_ref3) {
     var type = _ref3.type;
@@ -5474,6 +5767,32 @@ function hasHeadersOutsideFirstRow(nodes) {
   });
 }
 
+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 slate.Element.isElement(node) && node.type !== Contentful.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;
 
@@ -5498,6 +5817,19 @@ function addTableTrackingEvents(editor) {
       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) {
@@ -5619,116 +5951,6 @@ var setHeader = function setHeader(editor, enable) {
   });
 };
 
-function insertTableAndFocusFirstCell(editor) {
-  plateTable.insertTable(editor, {
-    header: true
-  });
-  replaceEmptyParagraphWithTable(editor);
-}
-function isTableActive(editor) {
-  var tableElements = [plateTable.ELEMENT_TABLE, plateTable.ELEMENT_TH, plateTable.ELEMENT_TR, plateTable.ELEMENT_TD];
-  return tableElements.some(function (el) {
-    return isBlockSelected(editor, el);
-  });
-}
-function isTableHeaderEnabled(editor) {
-  var tableItem = plateCore.getAbove(editor, {
-    match: {
-      type: Contentful.BLOCKS.TABLE
-    }
-  });
-
-  if (!tableItem) {
-    return false;
-  }
-
-  var firstRow = plateCore.getChildren(tableItem)[0];
-
-  if (!firstRow) {
-    return false;
-  }
-
-  return plateCore.getChildren(firstRow).every(function (_ref) {
-    var node = _ref[0];
-    return node.type === Contentful.BLOCKS.TABLE_HEADER_CELL;
-  });
-}
-function replaceEmptyParagraphWithTable(editor) {
-  var tablePath = getAncestorPathFromSelection(editor);
-  if (!tablePath || plateCore.isFirstChild(tablePath)) return;
-  var previousPath = slate.Path.previous(tablePath);
-  if (!previousPath) return;
-
-  var _Editor$nodes = slate.Editor.nodes(editor, {
-    at: previousPath,
-    match: function match(node) {
-      return node.type === Contentful.BLOCKS.PARAGRAPH;
-    }
-  }),
-      nodes = _Editor$nodes[0];
-
-  if (!nodes) return;
-  var previousNode = nodes[0];
-  var isPreviousNodeTextEmpty = plateCore.isAncestorEmpty(editor, previousNode);
-
-  if (isPreviousNodeTextEmpty) {
-    // Switch table with previous empty paragraph
-    slate.Transforms.moveNodes(editor, {
-      at: tablePath,
-      to: previousPath
-    }); // Remove previous paragraph that now is under the table
-
-    slate.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 = plateCore.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(slate.Node.children(editor, tablePath)).map(function (_ref3) {
-    var path = _ref3[1];
-    return Array.from(slate.Node.children(editor, path)).length;
-  }));
-  var rowWidth = Array.from(slate.Node.children(editor, rowPath)).length;
-  return tableWidth - rowWidth;
-};
-var createEmptyTableCells = function createEmptyTableCells(count) {
-  var emptyTableCell = {
-    type: Contentful.BLOCKS.TABLE_CELL,
-    data: {},
-    children: [{
-      type: Contentful.BLOCKS.PARAGRAPH,
-      data: {},
-      children: [{
-        text: ''
-      }]
-    }]
-  };
-  return new Array(count).fill(emptyTableCell);
-};
-var isNotEmpty = function isNotEmpty(editor, _ref4) {
-  var path = _ref4[1];
-  return Array.from(slate.Node.children(editor, path)).length !== 0;
-};
-var isTable = function isTable(node) {
-  return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
-};
-
 var styles$i = {
   topRight: /*#__PURE__*/emotion.css({
     position: 'absolute',
@@ -5843,38 +6065,38 @@ var TableActions = function TableActions() {
 };
 
 var _templateObject$7;
-var style$2 = /*#__PURE__*/emotion.css(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  min-width: 48px;\n  position: relative;\n  vertical-align: top;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray400);
+var style$3 = /*#__PURE__*/emotion.css(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  min-width: 48px;\n  position: relative;\n  vertical-align: top;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray400);
 var Cell = function Cell(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("td", Object.assign({}, props.attributes, props.element.data, {
-    className: style$2
+    className: style$3
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$8;
-var style$3 = /*#__PURE__*/emotion.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.fontWeightMedium);
+var style$4 = /*#__PURE__*/emotion.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 HeaderCell = function HeaderCell(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("th", Object.assign({}, props.attributes, props.element.data, {
-    className: style$3
+    className: style$4
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$9;
-var style$4 = /*#__PURE__*/emotion.css(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n\n  &:hover td {\n    background-color: transparent !important;\n  }\n"])), tokens.gray400);
+var style$5 = /*#__PURE__*/emotion.css(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n\n  &:hover td {\n    background-color: transparent !important;\n  }\n"])), tokens.gray400);
 var Row = function Row(props) {
   return /*#__PURE__*/React.createElement("tr", Object.assign({}, props.attributes, {
-    className: style$4
+    className: style$5
   }), props.children);
 };
 
 var _templateObject$a;
-var style$5 = /*#__PURE__*/emotion.css(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 1.5em;\n  border-collapse: collapse;\n  border-radius: 5px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  width: 100%;\n  table-layout: fixed;\n  overflow: hidden;\n"])), tokens.gray400);
+var style$6 = /*#__PURE__*/emotion.css(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 1.5em;\n  border-collapse: collapse;\n  border-radius: 5px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  width: 100%;\n  table-layout: fixed;\n  overflow: hidden;\n"])), tokens.gray400);
 var Table = function Table(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-block-type": Contentful.BLOCKS.TABLE
   }, /*#__PURE__*/React.createElement("table", Object.assign({
-    className: style$5
+    className: style$6
   }, props.attributes), /*#__PURE__*/React.createElement("tbody", null, props.children)));
 };
 
@@ -5890,18 +6112,20 @@ var Table = function Table(props) {
  */
 
 var trimUnnecessaryTableWrapper = function trimUnnecessaryTableWrapper(node) {
+  var _node$children, _row$children;
+
   if (!slate.Element.isElement(node)) {
     return [node];
   } // must be a table with a single row
 
 
-  if (node.type !== Contentful.BLOCKS.TABLE || node.children.length !== 1) {
+  if (node.type !== Contentful.BLOCKS.TABLE || ((_node$children = node.children) == null ? void 0 : _node$children.length) !== 1) {
     return [node];
   }
 
   var row = node.children[0]; // the row must contain a single cell
 
-  if (row.children.length !== 1) {
+  if ((row == null ? void 0 : (_row$children = row.children) == null ? void 0 : _row$children.length) !== 1) {
     return [node];
   }
 
@@ -6457,7 +6681,7 @@ var getPlugins = function getPlugins(sdk, onAction) {
   return [// AST must come after the HTML deserializer
   plateCore.createDeserializeHtmlPlugin(), plateCore.createDeserializeAstPlugin(), plateSerializerDocx.createDeserializeDocxPlugin(), // Tracking - This should come first so all plugins below will have access to `editor.tracking`
   createTrackingPlugin(onAction), // Global / Global shortcuts
-  createDragAndDropPlugin(), // Block Elements
+  createDragAndDropPlugin(), createSlashCommandsPlugin(), // Block Elements
   createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createMarksPlugin(), // Other
@@ -6935,7 +7159,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
     isDisabled: props.isDisabled
-  }))))));
+  })), /*#__PURE__*/React__default.createElement(SlashCommandsPalette, {
+    editorId: id
+  })))));
 };
 
 var RichTextEditor = function RichTextEditor(props) {