@atlaskit/editor-plugin-insert-block 0.2.17 → 0.2.19

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -0,0 +1,104 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import tableSelectorPopup, { TABLE_SELECTOR_BUTTON_GAP, TABLE_SELECTOR_BUTTON_SIZE } from './table-selector-popup';
+var TABLE_SELECTOR_PADDING_TOP = 8;
+var TABLE_SELECTOR_PADDING_SIDE = 10;
+var DEFAULT_TABLE_SELECTOR_ROWS = 5;
+var DEFAULT_TABLE_SELECTOR_COLS = 10;
+var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+var tableSelectorPopupWrapperStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")"),
+  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
+});
+export var TableSelectorPopup = function TableSelectorPopup(props) {
+  var _useState = useState({
+      col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+      maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var tablePopupRef = useRef(null);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  var handleMouseMove = useCallback(function (e) {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    var tablePopup = tablePopupRef.current;
+    var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
+      left = _tablePopup$getBoundi.left,
+      top = _tablePopup$getBoundi.top;
+
+    // Mouse position on popup
+    var selectedWidth = e.clientX - left;
+    var selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    var 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
+    if (selectedGridCols < 1) {
+      selectedGridCols = 1;
+    }
+    if (selectedGridCols > size.maxCol) {
+      selectedGridCols = size.maxCol;
+    }
+    if (selectedGridRows < 1) {
+      selectedGridRows = 1;
+    }
+    if (selectedGridRows > size.maxRow) {
+      selectedGridRows = size.maxRow;
+    }
+    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
+      setSize({
+        col: selectedGridCols,
+        row: selectedGridRows,
+        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+        maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+      });
+    }
+  }, [size, setSize]);
+  useEffect(function () {
+    var unbind = bind(window, {
+      type: 'mousemove',
+      listener: handleMouseMove
+    });
+    return unbind;
+  }, [handleMouseMove]);
+  return jsx(Popup, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    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
+  })));
+};
+export default TableSelectorPopup;

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -0,0 +1,102 @@
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { Stack } from '@atlaskit/primitives';
+export var TABLE_SELECTOR_BUTTON_GAP = 2;
+export var TABLE_SELECTOR_BUTTON_SIZE = 17;
+var selectedButtonStyles = css({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+});
+var buttonStyles = css({
+  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  border: "1px solid ".concat("var(--ds-border, #091e4224)"),
+  backgroundColor: "var(--ds-background-input, #ffffff)",
+  borderRadius: '3px',
+  cursor: 'pointer',
+  display: 'block',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+    border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+  }
+});
+var selectionSizeTextStyles = css({
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+var TableSelectorButton = function TableSelectorButton(_ref) {
+  var row = _ref.row,
+    col = _ref.col,
+    isActive = _ref.isActive,
+    _onClick = _ref.onClick,
+    label = _ref.label;
+  return jsx("button", {
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: function onClick() {
+      return _onClick(row, col);
+    },
+    "aria-label": label
+  });
+};
+var createArray = function createArray(maxCols, maxRows) {
+  var arr = [];
+  for (var i = 1; i < maxRows + 1; i++) {
+    for (var j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+var gridWrapperStyles = function gridWrapperStyles(_ref2) {
+  var maxCols = _ref2.maxCols,
+    maxRows = _ref2.maxRows;
+  return css({
+    display: 'grid',
+    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
+    gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
+    gap: "".concat("var(--ds-space-025, ".concat("".concat(TABLE_SELECTOR_BUTTON_GAP, "px"), ")"))
+  });
+};
+var TableSelectorPopup = function TableSelectorPopup(_ref3) {
+  var maxCols = _ref3.maxCols,
+    maxRows = _ref3.maxRows,
+    onSelection = _ref3.onSelection,
+    selectedCol = _ref3.selectedCol,
+    selectedRow = _ref3.selectedRow,
+    intl = _ref3.intl;
+  var buttons = useMemo(function () {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  return jsx(Stack, null, jsx("div", {
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    gridWrapperStyles({
+      maxCols: maxCols,
+      maxRows: maxRows
+    })
+  }, buttons.map(function (_ref4, index) {
+    var col = _ref4.col,
+      row = _ref4.row;
+    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return jsx(TableSelectorButton, {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: "".concat(intl.formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
+    });
+  })), jsx("span", {
+    css: selectionSizeTextStyles
+  }, "".concat(selectedRow, " x ").concat(selectedCol)));
+};
+export default injectIntl(TableSelectorPopup);

package/dist/types/ui/ToolbarInsertBlock/index.d.ts

@@ -3,11 +3,16 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { Props, State } from './types';
-export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisabled, }: {
+    isTableSelectorOpen: boolean;
+    isButtonDisabled: boolean | undefined;
+}) => import("@emotion/react").SerializedStyles;
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private plusButtonRef?;
+    private tableButtonRef;
+    private tableSelectorButtonRef;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -20,6 +25,11 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiButtonRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
+    private toggleTableSelector;
+    private renderTableSelectorPopup;
+    private handleSelectedTableSize;
+    private handleTableSelectorPressEscape;
+    private handleTableSelectorClickOutside;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { OnTableSizeSelection } from './table-selector-popup';
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -0,0 +1,25 @@
+import type { SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts

@@ -3,11 +3,16 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { Props, State } from './types';
-export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisabled, }: {
+    isTableSelectorOpen: boolean;
+    isButtonDisabled: boolean | undefined;
+}) => import("@emotion/react").SerializedStyles;
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private plusButtonRef?;
+    private tableButtonRef;
+    private tableSelectorButtonRef;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -20,6 +25,11 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiButtonRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
+    private toggleTableSelector;
+    private renderTableSelectorPopup;
+    private handleSelectedTableSize;
+    private handleTableSelectorPressEscape;
+    private handleTableSelectorClickOutside;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { OnTableSizeSelection } from './table-selector-popup';
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -0,0 +1,25 @@
+import type { SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-insert-block",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "Insert block plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^76.36.0",
+    "@atlaskit/editor-common": "^76.39.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-block-type": "^3.0.0",
     "@atlaskit/editor-plugin-code-block": "^0.1.0",
@@ -42,7 +42,7 @@
     "@atlaskit/editor-plugin-expand": "^0.4.0",
     "@atlaskit/editor-plugin-extension": "^0.5.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-hyperlink": "^0.7.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
     "@atlaskit/editor-plugin-image-upload": "^0.2.0",
     "@atlaskit/editor-plugin-layout": "^0.1.0",
     "@atlaskit/editor-plugin-media": "^0.11.0",
@@ -52,17 +52,19 @@
     "@atlaskit/editor-plugin-quick-insert": "^0.2.0",
     "@atlaskit/editor-plugin-rule": "^0.1.0",
     "@atlaskit/editor-plugin-status": "^0.2.0",
-    "@atlaskit/editor-plugin-table": "^5.7.0",
+    "@atlaskit/editor-plugin-table": "^5.8.0",
     "@atlaskit/editor-plugin-tasks-and-decisions": "^0.2.0",
     "@atlaskit/editor-plugin-type-ahead": "^0.9.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/primitives": "^1.16.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "bind-event-listener": "^2.1.1",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0"
   },