@atlaskit/editor-common 103.11.2 → 103.12.0

package/dist/es2019/ui/TableSelector/index.js

@@ -0,0 +1,265 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '../../ui-react';
+import Popup from '../Popup';
+import tableSelectorPopup, { TABLE_SELECTOR_BUTTON_GAP, TABLE_SELECTOR_BUTTON_SIZE } from './table-selector';
+const TABLE_SELECTOR_PADDING_TOP = 8;
+const TABLE_SELECTOR_PADDING_SIDE = 10;
+const DEFAULT_TABLE_SELECTOR_ROWS = 5;
+const DEFAULT_TABLE_SELECTOR_COLS = 10;
+const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+const DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
+const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+const initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
+const tableSelectorPopupWrapperStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`,
+  padding: `${`var(--ds-space-100, ${`${TABLE_SELECTOR_PADDING_TOP}px`})`} ${TABLE_SELECTOR_PADDING_SIDE}px`
+});
+export const TableSelectorPopup = props => {
+  const [size, setSize] = useState({
+    ...initialSizeState,
+    ...props.defaultSize
+  });
+  const tablePopupRef = useRef(null);
+  // If popup opened by keyboard enable keyboard mode
+  const isKeyboardMode = useRef(props.isOpenedByKeyboard);
+  const enableKeyboardMode = useCallback(() => {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  const disableKeyboardMode = useCallback(() => {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  const handleMouseMove = useCallback(e => {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    disableKeyboardMode();
+    const tablePopup = tablePopupRef.current;
+    const {
+      left,
+      top
+    } = tablePopup.getBoundingClientRect();
+
+    // Mouse position on popup
+    const selectedWidth = e.clientX - left;
+    const selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    let selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    let selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    // Keep the selected rows and columns within the defined bounds
+    let gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
+    if (selectedGridCols < 1) {
+      selectedGridCols = 1;
+    }
+    if (selectedGridCols > size.maxCol) {
+      selectedGridCols = size.maxCol;
+    }
+    if (selectedGridRows < 1) {
+      selectedGridRows = 1;
+    }
+
+    // Expand grid when row selection is greater than the default grid size
+    if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS && selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      gridRows = selectedGridRows + 1;
+    }
+    if (selectedGridRows >= DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+      gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+    }
+    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
+      setSize({
+        col: selectedGridCols,
+        row: selectedGridRows,
+        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+        maxRow: gridRows
+      });
+    }
+  }, [disableKeyboardMode, size, setSize]);
+  const decreasingSequence = (maxNumber, prevNumber) => {
+    let nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  const getMaxRow = (prevSize, eventKey) => {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        const moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        const moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowRight':
+        const moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        const increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+
+        // Decrease popup size for wrap around to selection 1 x 1
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.col === DEFAULT_TABLE_SELECTOR_COLS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (increaseMaxRow) {
+          return prevSize.maxRow + 1;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  const handleInitialButtonFocus = useCallback(() => {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  const handleKeyDown = useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event => {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        return {
+          ...prevSize,
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        return {
+          ...prevSize,
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const getRow = (prevRow, prevCol) => {
+          const row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return {
+          ...prevSize,
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const moveToLastRow = prevSize.row === 1;
+        return {
+          ...prevSize,
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+  }, [enableKeyboardMode, setSize]);
+  useEffect(() => {
+    let unbind;
+    const target = props.allowOutsideSelection ? window : tablePopupRef.current;
+    if (target) {
+      unbind = bind(target, {
+        type: 'mousemove',
+        listener: handleMouseMove
+      });
+    }
+    return unbind;
+  }, [handleMouseMove, props.allowOutsideSelection, tablePopupRef]);
+  return jsx(Popup, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    onUnmount: props.onUnmount,
+    zIndex: akEditorMenuZIndex
+  }, jsx("div", {
+    css: tableSelectorPopupWrapperStyles,
+    ref: tablePopupRef
+  }, jsx(TableSelectorWithListeners, {
+    handleClickOutside: props.handleClickOutside,
+    handleEscapeKeydown: props.handleEscapeKeydown,
+    maxCols: size.maxCol,
+    maxRows: size.maxRow,
+    onSelection: props.onSelection,
+    selectedCol: size.col,
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
+  })));
+};
+export default TableSelectorPopup;

package/dist/es2019/ui/TableSelector/table-selector.js

@@ -0,0 +1,154 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useContext, useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Stack } from '@atlaskit/primitives';
+import { B100 } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { toolbarInsertBlockMessages as messages } from '../../messages';
+import { OutsideClickTargetRefContext } from '../../ui-react';
+export const TABLE_SELECTOR_BUTTON_GAP = 2;
+export const TABLE_SELECTOR_BUTTON_SIZE = 17;
+const selectedButtonStyles = css({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: `1px solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
+});
+const buttonStyles = css({
+  height: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
+  width: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
+  border: `1px solid ${"var(--ds-border, #091e4224)"}`,
+  backgroundColor: "var(--ds-background-input, #ffffff)",
+  borderRadius: '3px',
+  cursor: 'pointer',
+  display: 'block',
+  '&:focus': {
+    outline: 'none',
+    border: `1px solid ${`var(--ds-border-focused, ${B100})`}`,
+    boxShadow: `0 0 0 0.5px ${`var(--ds-border-focused, ${B100})`}`
+  }
+});
+const selectionSizeTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+const TableSelectorButton = ({
+  row,
+  col,
+  isActive,
+  onClick,
+  label,
+  onKeyDown,
+  isFocused,
+  handleInitialButtonFocus
+}) => {
+  const btnRef = useRef(null);
+  useEffect(() => {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus({
+          preventScroll: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker') ? true : undefined
+        });
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  const handleFocus = col === 1 && row === 1 ? () => handleInitialButtonFocus() : undefined;
+  return jsx("button", {
+    type: "button",
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: () => onClick(row, col),
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
+  });
+};
+const createArray = (maxCols, maxRows) => {
+  const arr = [];
+  for (let i = 1; i < maxRows + 1; i++) {
+    for (let j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+const gridWrapperStyles = ({
+  maxCols,
+  maxRows
+}) => css({
+  display: 'grid',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gridTemplateRows: `repeat(${maxRows}, 1fr)`,
+  gap: `${`var(--ds-space-025, ${`${TABLE_SELECTOR_BUTTON_GAP}px`})`}`
+});
+const TableSelectorPopup = ({
+  maxCols,
+  maxRows,
+  onSelection,
+  selectedCol,
+  selectedRow,
+  onKeyDown,
+  isFocused,
+  handleInitialButtonFocus,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const buttons = useMemo(() => {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return jsx(Stack, {
+    ref: setOutsideClickTargetRef
+  }, jsx("div", {
+    "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    gridWrapperStyles({
+      maxCols: maxCols,
+      maxRows: maxRows
+    })
+  }, buttons.map(({
+    col,
+    row
+  }, index) => {
+    const isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
+    const isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return jsx(TableSelectorButton
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: `${formatMessage(messages.tableSizeSelectorButton, {
+        numberOfColumns: col,
+        numberOfRows: row
+      })}`,
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
+    });
+  })), jsx("span", {
+    css: selectionSizeTextStyles,
+    "aria-hidden": true
+  }, `${selectedCol} x ${selectedRow}`));
+};
+export default injectIntl(TableSelectorPopup);

package/dist/es2019/ui/WidthProvider/index.js

@@ -74,6 +74,7 @@ export const WidthProvider = ({
       if (!isMountedRef.current) {
         return;
       }
+      widthRef.current = nextWidth;
       setWidth(nextWidth);
     });
   }, []);

package/dist/es2019/ui/index.js

@@ -42,4 +42,5 @@ export { ToolbarDropdownWrapper } from './Toolbar/DropdownWrapper';
 export { ToolbarExpandIcon } from './Toolbar/ExpandIcon';
 export { ToolbarSeparator } from './Toolbar/Separator';
 export { default as DropList } from './DropList';
-export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
+export { default as TableSelectorPopup } from './TableSelector';

package/dist/es2019/utils/get-dom-ref-from-selection.js

@@ -0,0 +1,32 @@
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+export const getDomRefFromSelection = (view, actionSubjectId, dispatchAnalyticsEvent) => {
+  try {
+    const domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      // If element is not a paragraph, we need to find the closest paragraph parent
+      if (domRef.nodeName !== 'P') {
+        const paragraphRef = domRef.closest('p');
+        if (paragraphRef) {
+          return paragraphRef;
+        }
+      }
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: actionSubjectId,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};

package/dist/esm/analytics/types/enums.js

@@ -427,6 +427,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["PICKER_TABLE_SIZE"] = "tableSizePicker";
   ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "103.11.2";
+var packageVersion = "103.12.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "103.11.2";
+var packageVersion = "103.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005