@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,274 @@
+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';
+let isBreakoutEnabled;
+let isFullWidthModeEnabled;
+let wasFullWidthModeEnabled;
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI) => {
+  var _window;
+
+  isBreakoutEnabled = breakoutEnabled;
+  isFullWidthModeEnabled = fullWidthModeEnabled;
+  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
+  const state = createPluginState(dispatch, {
+    pluginConfig,
+    insertColumnButtonIndex: undefined,
+    insertRowButtonIndex: undefined,
+    isFullWidthModeEnabled,
+    isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
+    isHeaderColumnEnabled: false,
+    ...defaultTableSelection
+  });
+  let elementContentRects = {};
+  const observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(entries => {
+    entries.forEach(entry => {
+      if (!entry.target.id) {
+        return;
+      }
+
+      elementContentRects[entry.target.id] = entry.contentRect;
+    });
+  }) : undefined;
+  const tableCellNodeview = pluginConfig.tableCellOptimization ? {
+    tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer),
+    tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer)
+  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+
+  const invalidTableIds = [];
+  let editorViewRef = null;
+
+  const getCurrentEditorState = () => {
+    const editorView = editorViewRef;
+
+    if (!editorView) {
+      return null;
+    }
+
+    return editorView.state;
+  };
+
+  return new SafePlugin({
+    state: state,
+    key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      const tr = transactions.find(tr => tr.getMeta('uiEvent') === 'cut');
+
+      function reportInvalidTableCellSpanAttrs(invalidNodeAttr) {
+        if (invalidTableIds.find(id => 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: `${invalidNodeAttr.attribute}: ${invalidNodeAttr.reason}`,
+            tableLocalId: invalidNodeAttr.tableLocalId,
+            spanValue: invalidNodeAttr.spanValue
+          }
+        });
+      }
+
+      if (tr) {
+        // "fixTables" removes empty rows as we don't allow that in schema
+        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI);
+        return fixTables(updatedTr) || updatedTr;
+      }
+
+      if (transactions.find(tr => tr.docChanged)) {
+        return fixTables(newState.tr, reportInvalidTableCellSpanAttrs);
+      }
+    },
+    view: editorView => {
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      editorViewRef = editorView;
+      return {
+        update: view => {
+          const {
+            state,
+            dispatch
+          } = view;
+          const {
+            selection
+          } = state;
+          const pluginState = getPluginState(state);
+          let tableRef;
+          let tableNode;
+
+          if (pluginState.editorHasFocus) {
+            const 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) {
+            const {
+              $cursor
+            } = state.selection;
+
+            if ($cursor) {
+              // Only update bold when it's a cursor
+              const tableCellHeader = findParentNodeOfType(state.schema.nodes.tableHeader)(state.selection);
+
+              if (tableCellHeader) {
+                addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
+              }
+            }
+          }
+        },
+        destroy: () => {
+          if (observer) {
+            observer.disconnect();
+          }
+        }
+      };
+    },
+    props: {
+      transformPasted(slice) {
+        const editorState = getCurrentEditorState();
+
+        if (!editorState) {
+          return slice;
+        }
+
+        const {
+          schema
+        } = editorState; // 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: ({
+        state,
+        dispatch
+      }, _pos, event) => {
+        const 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) {
+          const targetClassList = event.target.classList;
+
+          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON)) {
+            return true;
+          }
+        }
+
+        return false;
+      },
+      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
+        const {
+          tableHeader
+        } = view.state.schema.nodes;
+        const domRef = findParentDomRefOfType(tableHeader, view.domAtPos.bind(view))(view.state.selection);
+        const maybeTr = closestElement(domRef, 'tr');
+        return maybeTr ? maybeTr.classList.contains('sticky') : false;
+      },
+      handleTextInput: ({
+        state,
+        dispatch
+      }, from, to, text) => {
+        const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
+
+        if (tr.selectionSet) {
+          dispatch(tr);
+          return true;
+        }
+
+        return false;
+      },
+      nodeViews: { //temporary flag to test tableCell optimisation
+        ...tableCellNodeview,
+        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+          isBreakoutEnabled,
+          isFullWidthModeEnabled,
+          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
+    }
+  });
+};

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

@@ -0,0 +1,46 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { handleDocOrSelectionChanged } from '../handlers';
+import reducer from '../reducer';
+import { pluginKey } from './plugin-key';
+export const {
+  createPluginState,
+  createCommand,
+  getPluginState
+} = pluginFactory(pluginKey, reducer, {
+  mapping: (tr, pluginState) => {
+    if (tr.docChanged) {
+      let updatedTargetCell = {};
+
+      if (pluginState.targetCellPosition) {
+        const {
+          pos,
+          deleted
+        } = tr.mapping.mapResult(pluginState.targetCellPosition);
+        updatedTargetCell = {
+          targetCellPosition: deleted ? undefined : pos
+        };
+      }
+
+      let updatedTablePos = {};
+
+      if (pluginState.tablePos) {
+        const {
+          pos,
+          deleted
+        } = tr.mapping.mapResult(pluginState.tablePos, -1);
+        updatedTablePos = {
+          tablePos: deleted ? undefined : pos
+        };
+      }
+
+      return { ...pluginState,
+        ...updatedTargetCell,
+        ...updatedTablePos
+      };
+    }
+
+    return pluginState;
+  },
+  onDocChanged: handleDocOrSelectionChanged,
+  onSelectionChanged: handleDocOrSelectionChanged
+});

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

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

package/dist/es2019/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 const tableSafariDelayedDomSelectionSyncingWorkaroundKey = new PluginKey('tableSafariDelayedDomSelectionSyncingWorkaround');
+export const 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
+  let prevMouseDownDone = null;
+  return new SafePlugin({
+    key: tableSafariDelayedDomSelectionSyncingWorkaroundKey,
+    props: {
+      handleDOMEvents: {
+        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(() => {
+            // 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/es2019/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.js

@@ -0,0 +1,106 @@
+/**
+ * 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 const tableSafariDeleteCompositionTextIssueWorkaroundKey = new PluginKey('tableSafariDeleteCompositionTextIssueWorkaround');
+export const createPlugin = () => {
+  return new SafePlugin({
+    key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
+    state: {
+      init: () => ({
+        renderSpan: false,
+        decorations: DecorationSet.empty
+      }),
+      apply: (tr, value) => {
+        const renderSpan = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
+
+        if (typeof renderSpan === 'undefined') {
+          return value;
+        }
+
+        let decorations;
+
+        if (renderSpan) {
+          // Find position of the first text node in case it has multiple text nodes created by Japanese IME
+          const {
+            $from
+          } = tr.selection;
+          const pos = $from.before($from.depth);
+          const spanDecoration = Decoration.widget(pos, () => {
+            const spanElement = document.createElement('span');
+            return spanElement;
+          });
+          decorations = DecorationSet.create(tr.doc, [spanDecoration]);
+        } else {
+          decorations = DecorationSet.empty;
+        }
+
+        return {
+          renderSpan,
+          decorations
+        };
+      }
+    },
+    props: {
+      decorations: state => tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state).decorations,
+      handleDOMEvents: {
+        beforeinput: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
+            return false;
+          }
+
+          const range = selection.getRangeAt(0);
+          const {
+            startContainer,
+            endContainer,
+            endOffset,
+            startOffset
+          } = range;
+          /**
+           * 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) {
+            const {
+              tr
+            } = view.state;
+            tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
+            view.dispatch(tr);
+          }
+
+          return false;
+        },
+        input: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection) {
+            return false;
+          }
+
+          const {
+            tr
+          } = view.state;
+          tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+};

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

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

package/dist/es2019/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/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

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