@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/pm-plugins/table-local-id.ts

@@ -21,197 +21,193 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 
 interface TableLocalIdPluginState {
-  // One time parse for initial load with existing tables without localIds
-  parsedForLocalIds: boolean;
+	// One time parse for initial load with existing tables without localIds
+	parsedForLocalIds: boolean;
 }
 
 const pluginKey = new PluginKey<TableLocalIdPluginState>('tableLocalIdPlugin');
-const getPluginState = (
-  state: EditorState,
-): TableLocalIdPluginState | undefined | null =>
-  state && pluginKey.getState(state);
+const getPluginState = (state: EditorState): TableLocalIdPluginState | undefined | null =>
+	state && pluginKey.getState(state);
 
 /**
  * Ensures uniqueness of `localId`s on tables being created or edited
  */
 const createPlugin = (dispatch: Dispatch) =>
-  new SafePlugin<TableLocalIdPluginState>({
-    key: pluginKey,
-    state: {
-      init() {
-        return {
-          parsedForLocalIds: false,
-        };
-      },
-      apply(tr, pluginState) {
-        const meta = tr.getMeta(pluginKey);
-        if (meta) {
-          const keys = Object.keys(meta) as Array<
-            keyof TableLocalIdPluginState
-          >;
-          const changed = keys.some((key) => {
-            return pluginState[key] !== meta[key];
-          });
-
-          if (changed) {
-            const newState = { ...pluginState, ...meta };
-
-            dispatch(pluginKey, newState);
-            return newState;
-          }
-        }
-
-        return pluginState;
-      },
-    },
-    view: () => {
-      return {
-        /**
-         * Utilise the update cycle for _one_ scan through an initial doc
-         * to ensure existing tables without IDs get them when this plugin is
-         * enabled.
-         *
-         * This entire block can be skipped if we simply remove the `checkIsAddingTable`
-         * check in appendTransaction, but that comes with 2 cons:
-         *
-         * 1. require a transaction before we actually add the local IDs
-         * 2. ever slightly more unncessary checks
-         *
-         * Finally, this never happens in practice when utilising this in
-         * confluence, as the collab/synchrony initialisation process will
-         * trigger a transaction which adds tables, and thus this plugin will
-         * add/dedupe the necessary IDs. But general usage of the editor
-         * without collab should still solve for IDs.
-         */
-        update(editorView) {
-          const { state } = editorView;
-          const pluginState = getPluginState(state);
-          if (!pluginState) {
-            return;
-          }
-          const parsed = pluginState.parsedForLocalIds;
-          if (parsed) {
-            return;
-          }
-
-          const { table } = state.schema.nodes;
-          rafSchedule(() => {
-            const tr = editorView.state.tr;
-            let tableIdWasAdded = false;
-            editorView.state.doc.descendants((node, pos) => {
-              const isTable = node.type === table;
-              const localId = node.attrs.localId;
-              if (isTable && !localId) {
-                tableIdWasAdded = true;
-                tr.setNodeMarkup(pos, undefined, {
-                  ...node.attrs,
-                  localId: uuid.generate(),
-                });
-                return false;
-              }
-              /**
-               * Otherwise continue traversing, we can encounter tables nested in
-               * expands/bodiedExtensions
-               */
-              return true;
-            });
-            if (tableIdWasAdded) {
-              tr.setMeta('addToHistory', false);
-              editorView.dispatch(tr);
-            }
-          })();
-
-          editorView.dispatch(
-            state.tr.setMeta(pluginKey, {
-              parsedForLocalIds: true,
-            }),
-          );
-        },
-      };
-    },
-    appendTransaction: (transactions, _oldState, newState) => {
-      let modified = false;
-      const tr = newState.tr;
-      const { table } = newState.schema.nodes;
-
-      const addedTableNodes: Set<ProsemirrorNode> = new Set();
-      const addedTableNodePos: Map<ProsemirrorNode, number> = new Map();
-      const localIds: Set<string> = new Set();
-
-      transactions.forEach((transaction) => {
-        if (!transaction.docChanged) {
-          return;
-        }
-
-        // Don't interfere with cut as it clashes with fixTables & we don't need
-        // to handle any extra cut cases in this plugin
-        const uiEvent = transaction.getMeta('uiEvent');
-        if (uiEvent === 'cut') {
-          return;
-        }
-
-        /** Get the tables we are adding and their position */
-        for (const step of transaction.steps) {
-          if (!stepHasSlice(step)) {
-            continue;
-          }
-
-          step.slice.content.descendants((node) => {
-            if (node.type === table) {
-              addedTableNodes.add(node);
-            }
-
-            return true;
-          });
-        }
-      });
-
-      if (!addedTableNodes.size) {
-        return;
-      }
-
-      // Get the existing localIds on the page
-      newState.doc.descendants((node, pos) => {
-        // Skip if this is position of added table
-        if (addedTableNodes.has(node)) {
-          addedTableNodePos.set(node, pos);
-          return false;
-        }
-
-        if (node.type !== table) {
-          return true;
-        }
-
-        localIds.add(node.attrs.localId);
-
-        // can't have table within a table
-        return false;
-      });
-
-      // If the added nodes have duplicate id, generate a new one
-      for (const node of addedTableNodes) {
-        if (!node.attrs.localId || localIds.has(node.attrs.localId)) {
-          const pos = addedTableNodePos.get(node);
-
-          if (pos === undefined) {
-            continue;
-          }
-
-          tr.setNodeMarkup(pos, undefined, {
-            ...node.attrs,
-            localId: uuid.generate(),
-          });
-
-          modified = true;
-        }
-      }
-
-      if (modified) {
-        return tr;
-      }
-
-      return;
-    },
-  });
+	new SafePlugin<TableLocalIdPluginState>({
+		key: pluginKey,
+		state: {
+			init() {
+				return {
+					parsedForLocalIds: false,
+				};
+			},
+			apply(tr, pluginState) {
+				const meta = tr.getMeta(pluginKey);
+				if (meta) {
+					const keys = Object.keys(meta) as Array<keyof TableLocalIdPluginState>;
+					const changed = keys.some((key) => {
+						return pluginState[key] !== meta[key];
+					});
+
+					if (changed) {
+						const newState = { ...pluginState, ...meta };
+
+						dispatch(pluginKey, newState);
+						return newState;
+					}
+				}
+
+				return pluginState;
+			},
+		},
+		view: () => {
+			return {
+				/**
+				 * Utilise the update cycle for _one_ scan through an initial doc
+				 * to ensure existing tables without IDs get them when this plugin is
+				 * enabled.
+				 *
+				 * This entire block can be skipped if we simply remove the `checkIsAddingTable`
+				 * check in appendTransaction, but that comes with 2 cons:
+				 *
+				 * 1. require a transaction before we actually add the local IDs
+				 * 2. ever slightly more unncessary checks
+				 *
+				 * Finally, this never happens in practice when utilising this in
+				 * confluence, as the collab/synchrony initialisation process will
+				 * trigger a transaction which adds tables, and thus this plugin will
+				 * add/dedupe the necessary IDs. But general usage of the editor
+				 * without collab should still solve for IDs.
+				 */
+				update(editorView) {
+					const { state } = editorView;
+					const pluginState = getPluginState(state);
+					if (!pluginState) {
+						return;
+					}
+					const parsed = pluginState.parsedForLocalIds;
+					if (parsed) {
+						return;
+					}
+
+					const { table } = state.schema.nodes;
+					rafSchedule(() => {
+						const tr = editorView.state.tr;
+						let tableIdWasAdded = false;
+						editorView.state.doc.descendants((node, pos) => {
+							const isTable = node.type === table;
+							const localId = node.attrs.localId;
+							if (isTable && !localId) {
+								tableIdWasAdded = true;
+								tr.setNodeMarkup(pos, undefined, {
+									...node.attrs,
+									localId: uuid.generate(),
+								});
+								return false;
+							}
+							/**
+							 * Otherwise continue traversing, we can encounter tables nested in
+							 * expands/bodiedExtensions
+							 */
+							return true;
+						});
+						if (tableIdWasAdded) {
+							tr.setMeta('addToHistory', false);
+							editorView.dispatch(tr);
+						}
+					})();
+
+					editorView.dispatch(
+						state.tr.setMeta(pluginKey, {
+							parsedForLocalIds: true,
+						}),
+					);
+				},
+			};
+		},
+		appendTransaction: (transactions, _oldState, newState) => {
+			let modified = false;
+			const tr = newState.tr;
+			const { table } = newState.schema.nodes;
+
+			const addedTableNodes: Set<ProsemirrorNode> = new Set();
+			const addedTableNodePos: Map<ProsemirrorNode, number> = new Map();
+			const localIds: Set<string> = new Set();
+
+			transactions.forEach((transaction) => {
+				if (!transaction.docChanged) {
+					return;
+				}
+
+				// Don't interfere with cut as it clashes with fixTables & we don't need
+				// to handle any extra cut cases in this plugin
+				const uiEvent = transaction.getMeta('uiEvent');
+				if (uiEvent === 'cut') {
+					return;
+				}
+
+				/** Get the tables we are adding and their position */
+				for (const step of transaction.steps) {
+					if (!stepHasSlice(step)) {
+						continue;
+					}
+
+					step.slice.content.descendants((node) => {
+						if (node.type === table) {
+							addedTableNodes.add(node);
+						}
+
+						return true;
+					});
+				}
+			});
+
+			if (!addedTableNodes.size) {
+				return;
+			}
+
+			// Get the existing localIds on the page
+			newState.doc.descendants((node, pos) => {
+				// Skip if this is position of added table
+				if (addedTableNodes.has(node)) {
+					addedTableNodePos.set(node, pos);
+					return false;
+				}
+
+				if (node.type !== table) {
+					return true;
+				}
+
+				localIds.add(node.attrs.localId);
+
+				// can't have table within a table
+				return false;
+			});
+
+			// If the added nodes have duplicate id, generate a new one
+			for (const node of addedTableNodes) {
+				if (!node.attrs.localId || localIds.has(node.attrs.localId)) {
+					const pos = addedTableNodePos.get(node);
+
+					if (pos === undefined) {
+						continue;
+					}
+
+					tr.setNodeMarkup(pos, undefined, {
+						...node.attrs,
+						localId: uuid.generate(),
+					});
+
+					modified = true;
+				}
+			}
+
+			if (modified) {
+				return tr;
+			}
+
+			return;
+		},
+	});
 
 export { createPlugin };

package/src/pm-plugins/table-resizing/commands.ts

@@ -13,105 +13,92 @@ import type { ResizeState } from './utils';
 import { evenAllColumnsWidths, isClickNear } from './utils';
 
 export const evenColumns =
-  ({
-    resizeState,
-    table,
-    start,
-    event,
-  }: {
-    resizeState: ResizeState;
-    table: PMNode;
-    start: number;
-    event: MouseEvent;
-  }): Command =>
-  (state, dispatch) => {
-    if (!isTableSelected(state.selection)) {
-      return false;
-    }
+	({
+		resizeState,
+		table,
+		start,
+		event,
+	}: {
+		resizeState: ResizeState;
+		table: PMNode;
+		start: number;
+		event: MouseEvent;
+	}): Command =>
+	(state, dispatch) => {
+		if (!isTableSelected(state.selection)) {
+			return false;
+		}
 
-    // double click detection logic
-    // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
-    const { lastClick } = getPluginState(state);
-    const now = Date.now();
-    if (
-      lastClick &&
-      now - lastClick.time < 500 &&
-      isClickNear(event, lastClick)
-    ) {
-      const newState = evenAllColumnsWidths(resizeState);
-      setLastClick(null, (tr) =>
-        updateColumnWidths(newState, table, start)(tr),
-      )(state, dispatch);
+		// double click detection logic
+		// Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
+		const { lastClick } = getPluginState(state);
+		const now = Date.now();
+		if (lastClick && now - lastClick.time < 500 && isClickNear(event, lastClick)) {
+			const newState = evenAllColumnsWidths(resizeState);
+			setLastClick(null, (tr) => updateColumnWidths(newState, table, start)(tr))(state, dispatch);
 
-      return true;
-    }
+			return true;
+		}
 
-    setLastClick({ x: event.clientX, y: event.clientY, time: now })(
-      state,
-      dispatch,
-    );
+		setLastClick({ x: event.clientX, y: event.clientY, time: now })(state, dispatch);
 
-    return false;
-  };
+		return false;
+	};
 
 export const distributeColumnsWidths =
-  (newResizeState: ResizeState, table: ContentNodeWithPos): Command =>
-  (state, dispatch) => {
-    if (dispatch) {
-      const tr = updateColumnWidths(
-        newResizeState,
-        table.node,
-        table.start,
-      )(state.tr);
-      tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-        name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
-      });
-      stopResizing(tr)(state, dispatch);
-    }
+	(newResizeState: ResizeState, table: ContentNodeWithPos): Command =>
+	(state, dispatch) => {
+		if (dispatch) {
+			const tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+			tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+				name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
+			});
+			stopResizing(tr)(state, dispatch);
+		}
 
-    return true;
-  };
+		return true;
+	};
 
 export const setResizeHandlePos = (resizeHandlePos: number | null) =>
-  createCommand({
-    type: 'SET_RESIZE_HANDLE_POSITION',
-    data: {
-      resizeHandlePos,
-    },
-  });
+	createCommand({
+		type: 'SET_RESIZE_HANDLE_POSITION',
+		data: {
+			resizeHandlePos,
+		},
+	});
 
 export const stopResizing = (tr?: Transaction) =>
-  createCommand(
-    {
-      type: 'STOP_RESIZING',
-    },
-    (originalTr) => (tr || originalTr).setMeta('scrollIntoView', false),
-  );
+	createCommand(
+		{
+			type: 'STOP_RESIZING',
+		},
+		(originalTr) => (tr || originalTr).setMeta('scrollIntoView', false),
+	);
 
 export const setDragging = (
-  dragging: { startX: number; startWidth: number } | null,
-  tr?: Transaction,
+	dragging: { startX: number; startWidth: number } | null,
+	tr?: Transaction,
 ) =>
-  createCommand(
-    {
-      type: 'SET_DRAGGING',
-      data: {
-        dragging,
-      },
-    },
-    (originalTr) => tr || originalTr,
-  );
+	createCommand(
+		{
+			type: 'SET_DRAGGING',
+			data: {
+				dragging,
+			},
+		},
+		(originalTr) => tr || originalTr,
+	);
 
 export const setLastClick = (
-  lastClick: { x: number; y: number; time: number } | null,
-  transform?: (tr: Transaction) => Transaction,
+	lastClick: { x: number; y: number; time: number } | null,
+	transform?: (tr: Transaction) => Transaction,
 ) =>
-  createCommand(
-    {
-      type: 'SET_LAST_CLICK',
-      data: {
-        lastClick,
-      },
-    },
-    transform,
-  );
+	createCommand(
+		{
+			type: 'SET_LAST_CLICK',
+			data: {
+				lastClick,
+			},
+		},
+		transform,
+	);