@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -0,0 +1,278 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { findParentDomRefOfType, findParentNodeOfType } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { browser } from '@atlaskit/editor-common/utils';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
+import { createTableView } from '../nodeviews/table';
+import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
+import { fixTables, replaceSelectedTable } from '../transforms';
+import { TableCssClassName as ClassName } from '../types';
+import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { defaultTableSelection } from './default-table-selection';
+import { createPluginState, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import TableCellNodeView from '../nodeviews/tableCell';
+import { transformSliceRemoveCellBackgroundColor, transformSliceToRemoveColumnsWidths, transformSliceToAddTableHeaders } from '../commands/misc';
+import { transformSliceToRemoveOpenLayoutNodes } from '@atlaskit/editor-common/transforms';
+import { transformSliceToRemoveOpenExpand } from '@atlaskit/editor-common/transforms';
+import { transformSliceToRemoveOpenBodiedExtension } from '@atlaskit/editor-common/transforms';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
+import { isHeaderRowRequired } from '../utils/paste';
+var isBreakoutEnabled;
+var isFullWidthModeEnabled;
+var wasFullWidthModeEnabled;
+export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI) {
+  var _window;
+
+  isBreakoutEnabled = breakoutEnabled;
+  isFullWidthModeEnabled = fullWidthModeEnabled;
+  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
+  var state = createPluginState(dispatch, _objectSpread({
+    pluginConfig: pluginConfig,
+    insertColumnButtonIndex: undefined,
+    insertRowButtonIndex: undefined,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
+    isHeaderColumnEnabled: false
+  }, defaultTableSelection));
+  var elementContentRects = {};
+  var observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (!entry.target.id) {
+        return;
+      }
+
+      elementContentRects[entry.target.id] = entry.contentRect;
+    });
+  }) : undefined;
+  var tableCellNodeview = pluginConfig.tableCellOptimization ? {
+    tableCell: function tableCell(node, view, getPos) {
+      return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
+    },
+    tableHeader: function tableHeader(node, view, getPos) {
+      return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
+    }
+  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+
+  var invalidTableIds = [];
+  var editorViewRef = null;
+
+  var getCurrentEditorState = function getCurrentEditorState() {
+    var editorView = editorViewRef;
+
+    if (!editorView) {
+      return null;
+    }
+
+    return editorView.state;
+  };
+
+  return new SafePlugin({
+    state: state,
+    key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var tr = transactions.find(function (tr) {
+        return tr.getMeta('uiEvent') === 'cut';
+      });
+
+      function reportInvalidTableCellSpanAttrs(invalidNodeAttr) {
+        if (invalidTableIds.find(function (id) {
+          return id === invalidNodeAttr.tableLocalId;
+        })) {
+          return;
+        }
+
+        invalidTableIds.push(invalidNodeAttr.tableLocalId);
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_DOCUMENT_ENCOUNTERED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            nodeType: invalidNodeAttr.nodeType,
+            reason: "".concat(invalidNodeAttr.attribute, ": ").concat(invalidNodeAttr.reason),
+            tableLocalId: invalidNodeAttr.tableLocalId,
+            spanValue: invalidNodeAttr.spanValue
+          }
+        });
+      }
+
+      if (tr) {
+        // "fixTables" removes empty rows as we don't allow that in schema
+        var updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI);
+        return fixTables(updatedTr) || updatedTr;
+      }
+
+      if (transactions.find(function (tr) {
+        return tr.docChanged;
+      })) {
+        return fixTables(newState.tr, reportInvalidTableCellSpanAttrs);
+      }
+    },
+    view: function view(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      editorViewRef = editorView;
+      return {
+        update: function update(view) {
+          var state = view.state,
+              dispatch = view.dispatch;
+          var selection = state.selection;
+          var pluginState = getPluginState(state);
+          var tableRef;
+          var tableNode;
+
+          if (pluginState.editorHasFocus) {
+            var parent = findParentDomRefOfType(state.schema.nodes.table, domAtPos)(selection);
+
+            if (parent) {
+              tableRef = parent.querySelector('table') || undefined;
+            }
+
+            tableNode = findTable(state.selection);
+          }
+
+          if (pluginState.tableRef !== tableRef) {
+            setTableRef(tableRef)(state, dispatch);
+          }
+
+          if (pluginState.tableNode !== tableNode) {
+            updateResizeHandles(tableRef);
+          }
+
+          if (pluginState.editorHasFocus && pluginState.tableRef) {
+            var _ref = state.selection,
+                $cursor = _ref.$cursor;
+
+            if ($cursor) {
+              // Only update bold when it's a cursor
+              var tableCellHeader = findParentNodeOfType(state.schema.nodes.tableHeader)(state.selection);
+
+              if (tableCellHeader) {
+                addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
+              }
+            }
+          }
+        },
+        destroy: function destroy() {
+          if (observer) {
+            observer.disconnect();
+          }
+        }
+      };
+    },
+    props: {
+      transformPasted: function transformPasted(slice) {
+        var editorState = getCurrentEditorState();
+
+        if (!editorState) {
+          return slice;
+        }
+
+        var schema = editorState.schema; // if we're pasting to outside a table or outside a table
+        // header, ensure that we apply any table headers to the first
+        // row of content we see, if required
+
+        if (!insideTable(editorState) && isHeaderRowRequired(editorState)) {
+          slice = transformSliceToAddTableHeaders(slice, schema);
+        }
+
+        slice = transformSliceToFixHardBreakProblemOnCopyFromCell(slice, schema); // We do this separately, so it also applies to drag/drop events
+        // This needs to go before `transformSliceToRemoveOpenExpand`
+
+        slice = transformSliceToRemoveOpenLayoutNodes(slice, schema); // If a partial paste of expand, paste only the content
+        // This needs to go before `transformSliceToRemoveOpenTable`
+
+        slice = transformSliceToRemoveOpenExpand(slice, schema);
+        /** If a partial paste of table, paste only table's content */
+
+        slice = transformSliceToRemoveOpenTable(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        slice = transformSliceToCorrectEmptyTableCells(slice, schema);
+
+        if (!pluginConfig.allowColumnResizing) {
+          slice = transformSliceToRemoveColumnsWidths(slice, schema);
+        } // If we don't allow background on cells, we need to remove it
+        // from the paste slice
+
+
+        if (!pluginConfig.allowBackgroundColor) {
+          slice = transformSliceRemoveCellBackgroundColor(slice, schema);
+        }
+
+        return slice;
+      },
+      handleClick: function handleClick(_ref2, _pos, event) {
+        var state = _ref2.state,
+            dispatch = _ref2.dispatch;
+        var decorationSet = decorationsPluginKey.getState(state);
+
+        if (findControlsHoverDecoration(decorationSet).length) {
+          clearHoverSelection()(state, dispatch);
+        } // ED-6069: workaround for Chrome given a regression introduced in prosemirror-view@1.6.8
+        // Returning true prevents that updateSelection() is getting called in the commit below:
+        // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
+
+
+        if (browser.chrome && event.target) {
+          var targetClassList = event.target.classList;
+
+          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON)) {
+            return true;
+          }
+        }
+
+        return false;
+      },
+      handleScrollToSelection: function handleScrollToSelection(view) {
+        // when typing into a sticky header cell, we don't want to scroll
+        // back to the top of the table if the user has already scrolled down
+        var tableHeader = view.state.schema.nodes.tableHeader;
+        var domRef = findParentDomRefOfType(tableHeader, view.domAtPos.bind(view))(view.state.selection);
+        var maybeTr = closestElement(domRef, 'tr');
+        return maybeTr ? maybeTr.classList.contains('sticky') : false;
+      },
+      handleTextInput: function handleTextInput(_ref3, from, to, text) {
+        var state = _ref3.state,
+            dispatch = _ref3.dispatch;
+        var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
+
+        if (tr.selectionSet) {
+          dispatch(tr);
+          return true;
+        }
+
+        return false;
+      },
+      nodeViews: _objectSpread(_objectSpread({}, tableCellNodeview), {}, {
+        table: function table(node, view, getPos) {
+          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+            isBreakoutEnabled: isBreakoutEnabled,
+            isFullWidthModeEnabled: isFullWidthModeEnabled,
+            wasFullWidthModeEnabled: wasFullWidthModeEnabled
+          }, getEditorContainerWidth, getEditorFeatureFlags);
+        }
+      }),
+      handleDOMEvents: {
+        focus: handleFocus,
+        blur: handleBlur,
+        mousedown: handleMouseDown,
+        mouseover: whenTableInFocus(handleMouseOver),
+        mouseleave: whenTableInFocus(handleMouseLeave),
+        mouseout: whenTableInFocus(handleMouseOut),
+        mousemove: whenTableInFocus(handleMouseMove(getEditorFeatureFlags), elementContentRects),
+        click: whenTableInFocus(handleClick)
+      },
+      handleTripleClick: handleTripleClick
+    }
+  });
+};

package/dist/esm/plugins/table/pm-plugins/plugin-factory.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { handleDocOrSelectionChanged } from '../handlers';
+import reducer from '../reducer';
+import { pluginKey } from './plugin-key';
+
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+  mapping: function mapping(tr, pluginState) {
+    if (tr.docChanged) {
+      var updatedTargetCell = {};
+
+      if (pluginState.targetCellPosition) {
+        var _tr$mapping$mapResult = tr.mapping.mapResult(pluginState.targetCellPosition),
+            pos = _tr$mapping$mapResult.pos,
+            deleted = _tr$mapping$mapResult.deleted;
+
+        updatedTargetCell = {
+          targetCellPosition: deleted ? undefined : pos
+        };
+      }
+
+      var updatedTablePos = {};
+
+      if (pluginState.tablePos) {
+        var _tr$mapping$mapResult2 = tr.mapping.mapResult(pluginState.tablePos, -1),
+            _pos = _tr$mapping$mapResult2.pos,
+            _deleted = _tr$mapping$mapResult2.deleted;
+
+        updatedTablePos = {
+          tablePos: _deleted ? undefined : _pos
+        };
+      }
+
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), updatedTargetCell), updatedTablePos);
+    }
+
+    return pluginState;
+  },
+  onDocChanged: handleDocOrSelectionChanged,
+  onSelectionChanged: handleDocOrSelectionChanged
+}),
+    createPluginState = _pluginFactory.createPluginState,
+    createCommand = _pluginFactory.createCommand,
+    getPluginState = _pluginFactory.getPluginState;
+
+export { createPluginState, createCommand, getPluginState };

package/dist/esm/plugins/table/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('tablePlugin');

package/dist/esm/plugins/table/pm-plugins/safari-delayed-dom-selection-syncing-workaround.js

@@ -0,0 +1,66 @@
+import { PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export var tableSafariDelayedDomSelectionSyncingWorkaroundKey = new PluginKey('tableSafariDelayedDomSelectionSyncingWorkaround');
+export var createPlugin = function createPlugin() {
+  // From a review of the prosemirror-view source code,
+  // the only places where a view relies on the presence
+  // of view.mouseDown are;
+  //   - when checking it's presence in selectionToDOM
+  //     to delay drag selections
+  //   - to ensure it is cleaned up when the mouseup
+  //     event is not fired in a previous mousedown event
+  // Because we are manually wiping the view.mouseDown,
+  // we manage this custom cleanup ourselves
+  var prevMouseDownDone = null;
+  return new SafePlugin({
+    key: tableSafariDelayedDomSelectionSyncingWorkaroundKey,
+    props: {
+      handleDOMEvents: {
+        mousedown: function mousedown(view) {
+          // Workaround issue in safari where table selections
+          //  do not work correctly since prosemirror delayed
+          // DOM selection syncing during pointer drag.
+          //
+          // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+          // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
+          // https://github.com/ProseMirror/prosemirror-view/pull/116
+          // This fix removes the selectionToDOM from the view
+          // prior to selectionToDOM being called.
+          // selectionToDOM checks if there is an "active"
+          // mouseDown, and if so, it delays running logic
+          // which causes the table selections issue.
+          // The handleDOMEvents are called before ProseMirror
+          // events fired on the editable DOM element.
+          // This means the view.mouseView will not yet be
+          // created when the mousedown event starts.
+          // https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
+          //
+          // Because selectionToDOM is only added to the script
+          // tasks queue following the mousedown event, we can
+          // prepend a task which will clear the mouseDown from
+          // the view. We do this using a setTimout with no
+          // interval.
+          if (prevMouseDownDone) {
+            // avoid memory leaks when the mouseup event is not fired
+            // in a previous mousedown event
+            prevMouseDownDone();
+          }
+
+          setTimeout(function () {
+            // the ts-ignores here are required due to the
+            // view.mouseDown being an internal which is
+            // not part of the views type signature
+            // @ts-ignore
+            if (view.mouseDown) {
+              // @ts-ignore
+              prevMouseDownDone = view.mouseDown.done.bind(view.mouseDown); // @ts-ignore
+
+              view.mouseDown = null;
+            }
+          });
+          return false;
+        }
+      }
+    }
+  });
+};

package/dist/esm/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.js

@@ -0,0 +1,102 @@
+/**
+ * Fix an issue that composition text replacement in Safari removes empty nodes during text composition text deletion.
+ * https://github.com/ProseMirror/prosemirror/issues/934
+ * We will remove this plugin when Webkit fix the problem itself.
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+export var tableSafariDeleteCompositionTextIssueWorkaroundKey = new PluginKey('tableSafariDeleteCompositionTextIssueWorkaround');
+export var createPlugin = function createPlugin() {
+  return new SafePlugin({
+    key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
+    state: {
+      init: function init() {
+        return {
+          renderSpan: false,
+          decorations: DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, value) {
+        var renderSpan = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
+
+        if (typeof renderSpan === 'undefined') {
+          return value;
+        }
+
+        var decorations;
+
+        if (renderSpan) {
+          // Find position of the first text node in case it has multiple text nodes created by Japanese IME
+          var $from = tr.selection.$from;
+          var pos = $from.before($from.depth);
+          var spanDecoration = Decoration.widget(pos, function () {
+            var spanElement = document.createElement('span');
+            return spanElement;
+          });
+          decorations = DecorationSet.create(tr.doc, [spanDecoration]);
+        } else {
+          decorations = DecorationSet.empty;
+        }
+
+        return {
+          renderSpan: renderSpan,
+          decorations: decorations
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state).decorations;
+      },
+      handleDOMEvents: {
+        beforeinput: function beforeinput(view, event) {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          var selection = window.getSelection();
+
+          if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
+            return false;
+          }
+
+          var range = selection.getRangeAt(0);
+          var startContainer = range.startContainer,
+              endContainer = range.endContainer,
+              endOffset = range.endOffset,
+              startOffset = range.startOffset;
+          /**
+           * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
+           * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.
+           * The condition here checks to see if the entire text node is about to be swapped inside of an element
+           */
+
+          if (startContainer.nodeType === Node.TEXT_NODE && startContainer === endContainer && startOffset === 0 && endOffset === startContainer.length) {
+            var tr = view.state.tr;
+            tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
+            view.dispatch(tr);
+          }
+
+          return false;
+        },
+        input: function input(view, event) {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          var selection = window.getSelection();
+
+          if (!selection) {
+            return false;
+          }
+
+          var tr = view.state.tr;
+          tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+};

package/dist/esm/plugins/table/pm-plugins/sticky-headers/commands.js

@@ -0,0 +1,17 @@
+import { createCommand } from './plugin-state';
+export var updateStickyState = function updateStickyState(rowState) {
+  return createCommand({
+    name: 'UPDATE',
+    state: rowState
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+export var removeStickyState = function removeStickyState(pos) {
+  return createCommand({
+    name: 'REMOVE',
+    pos: pos
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};

package/dist/esm/plugins/table/pm-plugins/sticky-headers/index.js

@@ -0,0 +1,5 @@
+export { createPlugin } from './plugin';
+export { pluginKey } from './plugin-key';
+export { findStickyHeaderForTable } from './util';
+export { updateStickyState, removeStickyState } from './commands';
+export { TableRowNodeView } from './nodeviews/tableRow';

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

@@ -0,0 +1,34 @@
+export var getTree = function getTree(tr) {
+  // pm renders into tbody, owned by react
+  var tbody = tr.parentElement;
+
+  if (!tbody) {
+    return null;
+  } // rendered by react
+
+
+  var table = tbody.parentElement;
+
+  if (!table) {
+    return null;
+  } // rendered by react
+
+
+  var wrapper = table.parentElement;
+
+  if (!wrapper) {
+    return null;
+  }
+
+  return {
+    wrapper: wrapper,
+    table: table
+  };
+};
+export var getTop = function getTop(element) {
+  if (!element || element instanceof Window) {
+    return 0;
+  }
+
+  return element.getBoundingClientRect().top;
+};