@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -6,109 +6,97 @@ import { injectIntl } from 'react-intl-next';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import {
-  findTable,
-  isTableSelected,
-  selectTable,
-} from '@atlaskit/editor-tables/utils';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 
 import type { CornerControlProps } from './types';
 
-class CornerControlComponent extends Component<
-  CornerControlProps & WrappedComponentProps,
-  any
-> {
-  render() {
-    const {
-      isInDanger,
-      tableRef,
-      isHeaderColumnEnabled,
-      isHeaderRowEnabled,
-      intl: { formatMessage },
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const isActive = this.isActive();
+class CornerControlComponent extends Component<CornerControlProps & WrappedComponentProps, any> {
+	render() {
+		const {
+			isInDanger,
+			tableRef,
+			isHeaderColumnEnabled,
+			isHeaderRowEnabled,
+			intl: { formatMessage },
+		} = this.props;
+		if (!tableRef) {
+			return null;
+		}
+		const isActive = this.isActive();
 
-    return (
-      <div
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className={classnames(ClassName.CORNER_CONTROLS, {
-          active: isActive,
-          sticky: this.props.stickyTop !== undefined,
-        })}
-        style={{
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top:
-            this.props.stickyTop !== undefined
-              ? `${this.props.stickyTop}px`
-              : undefined,
-        }}
-        contentEditable={false}
-      >
-        <button
-          aria-label={formatMessage(messages.cornerControl)}
-          type="button"
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-          className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
-            danger: isActive && isInDanger,
-          })}
-          onClick={this.selectTable}
-          onMouseOver={this.hoverTable}
-          onMouseOut={this.clearHoverSelection}
-        />
+		return (
+			<div
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+				className={classnames(ClassName.CORNER_CONTROLS, {
+					active: isActive,
+					sticky: this.props.stickyTop !== undefined,
+				})}
+				style={{
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined,
+				}}
+				contentEditable={false}
+			>
+				<button
+					aria-label={formatMessage(messages.cornerControl)}
+					type="button"
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+					className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+						danger: isActive && isInDanger,
+					})}
+					onClick={this.selectTable}
+					onMouseOver={this.hoverTable}
+					onMouseOut={this.clearHoverSelection}
+				/>
 
-        {!isHeaderRowEnabled && (
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-          <div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-            <div className={ClassName.CONTROLS_INSERT_MARKER} />
-          </div>
-        )}
-        {!isHeaderColumnEnabled && (
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-          <div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-            <div className={ClassName.CONTROLS_INSERT_MARKER} />
-          </div>
-        )}
-      </div>
-    );
-  }
+				{!isHeaderRowEnabled && (
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+					<div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
+						{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
+						<div className={ClassName.CONTROLS_INSERT_MARKER} />
+					</div>
+				)}
+				{!isHeaderColumnEnabled && (
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+					<div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
+						{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
+						<div className={ClassName.CONTROLS_INSERT_MARKER} />
+					</div>
+				)}
+			</div>
+		);
+	}
 
-  private isActive = () => {
-    const { editorView, hoveredRows, isResizing } = this.props;
-    const { selection } = editorView.state;
-    const table = findTable(selection);
-    if (!table) {
-      return false;
-    }
-    return (
-      isTableSelected(selection) ||
-      (hoveredRows &&
-        hoveredRows.length === TableMap.get(table.node).height &&
-        !isResizing)
-    );
-  };
+	private isActive = () => {
+		const { editorView, hoveredRows, isResizing } = this.props;
+		const { selection } = editorView.state;
+		const table = findTable(selection);
+		if (!table) {
+			return false;
+		}
+		return (
+			isTableSelected(selection) ||
+			(hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing)
+		);
+	};
 
-  private clearHoverSelection = () => {
-    const { state, dispatch } = this.props.editorView;
-    clearHoverSelection()(state, dispatch);
-  };
+	private clearHoverSelection = () => {
+		const { state, dispatch } = this.props.editorView;
+		clearHoverSelection()(state, dispatch);
+	};
 
-  private selectTable = () => {
-    const { state, dispatch } = this.props.editorView;
-    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-  };
+	private selectTable = () => {
+		const { state, dispatch } = this.props.editorView;
+		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+	};
 
-  private hoverTable = () => {
-    const { state, dispatch } = this.props.editorView;
-    hoverTable()(state, dispatch);
-  };
+	private hoverTable = () => {
+		const { state, dispatch } = this.props.editorView;
+		hoverTable()(state, dispatch);
+	};
 }
 
 export const CornerControls = injectIntl(CornerControlComponent);

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -7,11 +7,7 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import {
-  findTable,
-  isTableSelected,
-  selectTable,
-} from '@atlaskit/editor-tables/utils';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 
 import { clearHoverSelection } from '../../../commands';
 import type { TablePlugin } from '../../../plugin';
@@ -20,108 +16,105 @@ import { TableCssClassName as ClassName } from '../../../types';
 import type { CornerControlProps } from './types';
 
 const DragCornerControlsComponent = ({
-  editorView,
-  isInDanger,
-  isResizing,
-  intl: { formatMessage },
+	editorView,
+	isInDanger,
+	isResizing,
+	intl: { formatMessage },
 }: CornerControlProps & WrappedComponentProps) => {
-  const handleOnClick = () => {
-    const { state, dispatch } = editorView;
-    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-  };
-
-  const handleMouseOut = () => {
-    const { state, dispatch } = editorView;
-    clearHoverSelection()(state, dispatch);
-  };
-
-  const isActive = useMemo(() => {
-    const { selection } = editorView.state;
-    const table = findTable(selection);
-    if (!table) {
-      return false;
-    }
-    return isTableSelected(selection);
-  }, [editorView.state]);
-
-  if (isResizing) {
-    return null;
-  }
-
-  return (
-    <button
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className={classnames(ClassName.DRAG_CORNER_BUTTON, {
-        active: isActive,
-        danger: isActive && isInDanger,
-      })}
-      aria-label={formatMessage(messages.cornerControl)}
-      type="button"
-      onClick={handleOnClick}
-      onMouseOut={handleMouseOut}
-      contentEditable={false}
-    >
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-      <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
-    </button>
-  );
+	const handleOnClick = () => {
+		const { state, dispatch } = editorView;
+		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+	};
+
+	const handleMouseOut = () => {
+		const { state, dispatch } = editorView;
+		clearHoverSelection()(state, dispatch);
+	};
+
+	const isActive = useMemo(() => {
+		const { selection } = editorView.state;
+		const table = findTable(selection);
+		if (!table) {
+			return false;
+		}
+		return isTableSelected(selection);
+	}, [editorView.state]);
+
+	if (isResizing) {
+		return null;
+	}
+
+	return (
+		<button
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className={classnames(ClassName.DRAG_CORNER_BUTTON, {
+				active: isActive,
+				danger: isActive && isInDanger,
+			})}
+			aria-label={formatMessage(messages.cornerControl)}
+			type="button"
+			onClick={handleOnClick}
+			onMouseOut={handleMouseOut}
+			contentEditable={false}
+		>
+			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
+			<div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
+		</button>
+	);
 };
 
 const DragCornerControlsComponentWithSelection = ({
-  editorView,
-  isInDanger,
-  isResizing,
-  intl: { formatMessage },
-  api,
-}: CornerControlProps &
-  WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-  const { selectionState } = useSharedPluginState(api, ['selection']);
-
-  const handleOnClick = () => {
-    const { state, dispatch } = editorView;
-    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-  };
-
-  const handleMouseOut = () => {
-    const { state, dispatch } = editorView;
-    clearHoverSelection()(state, dispatch);
-  };
-  const isActive = useMemo(() => {
-    if (!selectionState?.selection) {
-      return;
-    }
-    const table = findTable(selectionState.selection);
-    if (!table) {
-      return false;
-    }
-    return isTableSelected(selectionState.selection);
-  }, [selectionState]);
-
-  if (isResizing) {
-    return null;
-  }
-
-  return (
-    <button
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className={classnames(ClassName.DRAG_CORNER_BUTTON, {
-        active: isActive,
-        danger: isActive && isInDanger,
-      })}
-      aria-label={formatMessage(messages.cornerControl)}
-      type="button"
-      onClick={handleOnClick}
-      onMouseOut={handleMouseOut}
-      contentEditable={false}
-    >
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-      <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
-    </button>
-  );
+	editorView,
+	isInDanger,
+	isResizing,
+	intl: { formatMessage },
+	api,
+}: CornerControlProps & WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
+	const { selectionState } = useSharedPluginState(api, ['selection']);
+
+	const handleOnClick = () => {
+		const { state, dispatch } = editorView;
+		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+	};
+
+	const handleMouseOut = () => {
+		const { state, dispatch } = editorView;
+		clearHoverSelection()(state, dispatch);
+	};
+	const isActive = useMemo(() => {
+		if (!selectionState?.selection) {
+			return;
+		}
+		const table = findTable(selectionState.selection);
+		if (!table) {
+			return false;
+		}
+		return isTableSelected(selectionState.selection);
+	}, [selectionState]);
+
+	if (isResizing) {
+		return null;
+	}
+
+	return (
+		<button
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className={classnames(ClassName.DRAG_CORNER_BUTTON, {
+				active: isActive,
+				danger: isActive && isInDanger,
+			})}
+			aria-label={formatMessage(messages.cornerControl)}
+			type="button"
+			onClick={handleOnClick}
+			onMouseOut={handleMouseOut}
+			contentEditable={false}
+		>
+			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
+			<div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
+		</button>
+	);
 };
 
-export const DragCornerControlsWithSelection = injectIntl(
-  DragCornerControlsComponentWithSelection,
-);
+export const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
 
 export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/src/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,5 +1,2 @@
 export { CornerControls } from './ClassicCornerControls';
-export {
-  DragCornerControls,
-  DragCornerControlsWithSelection,
-} from './DragCornerControls';
+export { DragCornerControls, DragCornerControlsWithSelection } from './DragCornerControls';

package/src/ui/TableFloatingControls/CornerControls/types.ts

@@ -1,12 +1,12 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 export type CornerControlProps = {
-  editorView: EditorView;
-  tableRef?: HTMLTableElement;
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  hoveredRows?: number[];
-  isHeaderColumnEnabled?: boolean;
-  isHeaderRowEnabled?: boolean;
-  stickyTop?: number;
+	editorView: EditorView;
+	tableRef?: HTMLTableElement;
+	isInDanger?: boolean;
+	isResizing?: boolean;
+	hoveredRows?: number[];
+	isHeaderColumnEnabled?: boolean;
+	isHeaderRowEnabled?: boolean;
+	stickyTop?: number;
 };

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -10,59 +10,59 @@ import { CornerControls } from './CornerControls';
 import { RowControls } from './RowControls';
 
 type FloatingControlsWithSelectionProps = {
-  editorView: EditorView;
-  tableRef: HTMLTableElement;
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  isHeaderRowEnabled?: boolean;
-  isHeaderColumnEnabled?: boolean;
-  hoveredRows?: number[];
-  stickyTop?: number;
-  hoverRows: (rows: number[]) => void;
-  selectRow: (row: number, expand: boolean) => void;
-  tableActive: boolean;
-  api?: ExtractInjectionAPI<TablePlugin>;
+	editorView: EditorView;
+	tableRef: HTMLTableElement;
+	isInDanger?: boolean;
+	isResizing?: boolean;
+	isHeaderRowEnabled?: boolean;
+	isHeaderColumnEnabled?: boolean;
+	hoveredRows?: number[];
+	stickyTop?: number;
+	hoverRows: (rows: number[]) => void;
+	selectRow: (row: number, expand: boolean) => void;
+	tableActive: boolean;
+	api?: ExtractInjectionAPI<TablePlugin>;
 };
 
 export const FloatingControlsWithSelection = ({
-  editorView,
-  tableRef,
-  isInDanger,
-  isResizing,
-  isHeaderRowEnabled,
-  isHeaderColumnEnabled,
-  hoveredRows,
-  stickyTop,
-  hoverRows,
-  selectRow,
-  tableActive,
-  api,
+	editorView,
+	tableRef,
+	isInDanger,
+	isResizing,
+	isHeaderRowEnabled,
+	isHeaderColumnEnabled,
+	hoveredRows,
+	stickyTop,
+	hoverRows,
+	selectRow,
+	tableActive,
+	api,
 }: FloatingControlsWithSelectionProps) => {
-  const { selectionState } = useSharedPluginState(api, ['selection']);
+	const { selectionState } = useSharedPluginState(api, ['selection']);
 
-  return (
-    <>
-      <CornerControls
-        editorView={editorView}
-        tableRef={tableRef}
-        isInDanger={isInDanger}
-        isResizing={isResizing}
-        isHeaderRowEnabled={isHeaderRowEnabled}
-        isHeaderColumnEnabled={isHeaderColumnEnabled}
-        hoveredRows={hoveredRows}
-        stickyTop={tableActive ? stickyTop : undefined}
-      />
-      <RowControls
-        selection={selectionState?.selection}
-        editorView={editorView}
-        tableRef={tableRef}
-        hoverRows={hoverRows}
-        hoveredRows={hoveredRows}
-        isInDanger={isInDanger}
-        isResizing={isResizing}
-        selectRow={selectRow}
-        stickyTop={tableActive ? stickyTop : undefined}
-      />
-    </>
-  );
+	return (
+		<>
+			<CornerControls
+				editorView={editorView}
+				tableRef={tableRef}
+				isInDanger={isInDanger}
+				isResizing={isResizing}
+				isHeaderRowEnabled={isHeaderRowEnabled}
+				isHeaderColumnEnabled={isHeaderColumnEnabled}
+				hoveredRows={hoveredRows}
+				stickyTop={tableActive ? stickyTop : undefined}
+			/>
+			<RowControls
+				selection={selectionState?.selection}
+				editorView={editorView}
+				tableRef={tableRef}
+				hoverRows={hoverRows}
+				hoveredRows={hoveredRows}
+				isInDanger={isInDanger}
+				isResizing={isResizing}
+				selectRow={selectRow}
+				stickyTop={tableActive ? stickyTop : undefined}
+			/>
+		</>
+	);
 };