@atlaskit/editor-plugin-insert-block 18.0.5 → 18.1.0

package/dist/esm/ui/registered-insert-menu/RegisteredInsertMenuList.js

@@ -0,0 +1,196 @@
+/* RegisteredInsertMenuList.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./RegisteredInsertMenuList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { Box } from '@atlaskit/primitives/compiled';
+import { RegisteredInsertMenuItem } from './RegisteredInsertMenuItem';
+var ESTIMATED_ROW_HEIGHT = 56;
+var MENU_FOOTER_HEIGHT = 52;
+var MENU_SEARCH_HEIGHT = 64;
+var LIST_WIDTH = 350;
+var listAriaProps = {
+  // @ts-expect-error react-virtualized forwards null to omit its grid-only default; its types exclude null.
+  'aria-readonly': null
+};
+var styles = {
+  footer: "_1rjc1b66 _1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+};
+export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
+  var _model$root$component, _model$root;
+  var editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    listId = _ref.listId,
+    listLabel = _ref.listLabel,
+    maxHeight = _ref.maxHeight,
+    menuOpenId = _ref.menuOpenId,
+    model = _ref.model,
+    onClose = _ref.onClose,
+    onItemHover = _ref.onItemHover,
+    onRenderedItemsChange = _ref.onRenderedItemsChange,
+    selectedItemIndex = _ref.selectedItemIndex,
+    surfaceContext = _ref.surfaceContext;
+  var Root = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : React.Fragment;
+  var listRef = useRef(null);
+  var rows = useMemo(function () {
+    return model.sections.flat();
+  }, [model.sections]);
+  var cache = useMemo(function () {
+    return new CellMeasurerCache({
+      defaultHeight: ESTIMATED_ROW_HEIGHT,
+      fixedWidth: true
+    });
+  }, []);
+  var itemIndexByRowIndex = useMemo(function () {
+    var indexes = new Map();
+    var itemIndex = 0;
+    rows.forEach(function (registration, rowIndex) {
+      if (registration.type === 'menu-item') {
+        indexes.set(rowIndex, itemIndex++);
+      }
+    });
+    return indexes;
+  }, [rows]);
+  var selectedRowIndex = useMemo(function () {
+    var _iterator = _createForOfIteratorHelper(itemIndexByRowIndex),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _slicedToArray(_step.value, 2),
+          rowIndex = _step$value[0],
+          itemIndex = _step$value[1];
+        if (itemIndex === selectedItemIndex) {
+          return rowIndex;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return -1;
+  }, [itemIndexByRowIndex, selectedItemIndex]);
+  var rowKeySignature = useMemo(function () {
+    return rows.map(function (_ref2) {
+      var key = _ref2.key,
+        type = _ref2.type;
+      return "".concat(type, ":").concat(key);
+    }).join('\0');
+  }, [rows]);
+  useLayoutEffect(function () {
+    var _listRef$current, _listRef$current2;
+    cache.clearAll();
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights();
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToPosition(0);
+  }, [cache, rowKeySignature]);
+  var onRowsRendered = useCallback(function (_ref3) {
+    var _indexes$, _indexes;
+    var overscanStartIndex = _ref3.overscanStartIndex,
+      overscanStopIndex = _ref3.overscanStopIndex;
+    var indexes = _toConsumableArray(itemIndexByRowIndex).filter(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        rowIndex = _ref5[0];
+      return rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex;
+    }).map(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        itemIndex = _ref7[1];
+      return itemIndex;
+    });
+    onRenderedItemsChange({
+      startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
+      stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
+    });
+  }, [itemIndexByRowIndex, onRenderedItemsChange]);
+  var renderRow = useCallback(function (_ref8) {
+    var _registration$compone;
+    var index = _ref8.index,
+      key = _ref8.key,
+      parent = _ref8.parent,
+      style = _ref8.style;
+    var registration = rows[index];
+    if (!registration) {
+      return null;
+    }
+    var itemIndex = itemIndexByRowIndex.get(index);
+    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/React.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment, null, null)) : /*#__PURE__*/React.createElement("div", {
+      onMouseMove: function onMouseMove() {
+        return onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0);
+      }
+    }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
+      editorView: editorView,
+      id: "".concat(listId, "-").concat(itemIndex),
+      isOffline: isOffline,
+      isSelected: itemIndex === selectedItemIndex,
+      menuOpenId: menuOpenId,
+      onClose: onClose,
+      registration: registration,
+      surfaceContext: surfaceContext
+    }));
+    return /*#__PURE__*/React.createElement(CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, function (_ref9) {
+      var registerChild = _ref9.registerChild;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(element) {
+          return registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined);
+        },
+        "data-index": index
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: style
+      }, rowContent);
+    });
+  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemHover, rows, selectedItemIndex, surfaceContext]);
+  var footerItemIndex = itemIndexByRowIndex.size;
+  var listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  var onFooterItemHover = useCallback(function () {
+    return onItemHover(footerItemIndex);
+  }, [footerItemIndex, onItemHover]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Box, {
+    "aria-label": listLabel,
+    id: listId,
+    role: "listbox"
+  }, rows.length > 0 && /*#__PURE__*/React.createElement(List
+  // eslint-disable-next-line react/jsx-props-no-spreading -- Omits the library's grid-only ARIA default without declaring it on the group role.
+  , _extends({}, listAriaProps, {
+    tabIndex: null,
+    containerRole: "presentation",
+    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    overscanRowCount: 3,
+    onRowsRendered: onRowsRendered,
+    ref: listRef,
+    role: "group",
+    rowCount: rows.length,
+    rowHeight: cache.rowHeight,
+    rowRenderer: renderRow,
+    scrollToAlignment: "auto",
+    scrollToIndex: selectedRowIndex,
+    width: LIST_WIDTH
+  })), model.footer && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.footer,
+    onMouseMove: onFooterItemHover
+  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
+    editorView: editorView,
+    id: "".concat(listId, "-").concat(footerItemIndex),
+    isOffline: isOffline,
+    isSelected: footerItemIndex === selectedItemIndex,
+    menuOpenId: menuOpenId,
+    onClose: onClose,
+    registration: model.footer,
+    surfaceContext: surfaceContext
+  }))));
+};

package/dist/esm/ui/toolbar-components.js

@@ -6,6 +6,8 @@ import { resolveToolbarConfig } from './toolbar-components/config-resolver';
 import { EmojiButton } from './toolbar-components/EmojiButton';
 import { ImageButton } from './toolbar-components/ImageButton';
 import { InsertButton } from './toolbar-components/InsertButton';
+import { RegisteredInsertButton } from './registered-insert-menu/RegisteredInsertButton';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { LayoutButton } from './toolbar-components/LayoutButton';
 import { MediaButton } from './toolbar-components/MediaButton';
 import { MentionButton } from './toolbar-components/MentionButton';
@@ -256,7 +258,9 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
     var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
       return function () {
-        return /*#__PURE__*/React.createElement(InsertButton, {
+        return isExperimentEnabled('platform_editor_slash_command') ? /*#__PURE__*/React.createElement(RegisteredInsertButton, {
+          api: api
+        }) : /*#__PURE__*/React.createElement(InsertButton, {
           api: api,
           breakpoint: breakpoint,
           toolbarConfig: config,

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

@@ -27,6 +27,7 @@ import type { TablePlugin } from '@atlaskit/editor-plugin-table';
 import type { TasksAndDecisionsPlugin } from '@atlaskit/editor-plugin-tasks-and-decisions';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 export type InsertBlockPluginDependencies = [
     TypeAheadPlugin,
     OptionalPlugin<TablePlugin>,
@@ -54,7 +55,8 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<ContextPanelPlugin>,
     OptionalPlugin<ConnectivityPlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 type PluginToolbarComponentsConfig<T extends string> = {
     [componentName in T]?: PluginToolbarComponentConfig;

package/dist/types/ui/ToolbarInsertBlock/block-insert-element-browser.d.ts

@@ -8,6 +8,7 @@ type SimpleEventHandler<T> = (event?: T) => void;
 export interface BlockInsertElementBrowserProps {
     disabled: boolean;
     editorView: EditorView;
+    isEditorOffline?: boolean;
     isFullPageAppearance?: boolean;
     items: BlockMenuItem[];
     label: string;

package/dist/types/ui/ToolbarInsertBlock/block-insert-menu.d.ts

@@ -7,6 +7,7 @@ import type { BlockMenuItem } from './create-items';
 export interface BlockInsertMenuProps {
     disabled: boolean;
     editorView: EditorView;
+    isEditorOffline?: boolean;
     isFullPageAppearance?: boolean;
     items: BlockMenuItem[];
     label: string;

package/dist/types/ui/registered-insert-menu/RegisteredInsertButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { InsertBlockPlugin } from '../../insertBlockPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+};
+/**
+ * The toolbar owns its popup lifecycle, but renders the same registered items
+ * and menu model as slash command.
+ */
+export declare const RegisteredInsertButton: ({ api }: Props) => React.JSX.Element | null;
+export {};

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RegisterComponent } from '@atlaskit/editor-ui-control-model/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type Props = {
+    components: RegisterComponent[];
+    editorView: EditorView;
+    isOffline: boolean;
+    onClose: () => void;
+    onSelect: () => void;
+};
+export declare const RegisteredInsertMenu: ({ components, editorView, isOffline, onClose, onSelect, }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuContent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { InsertBlockPlugin } from '../../insertBlockPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    editorView: EditorView;
+    isOffline: boolean;
+    onClose: () => void;
+    onDismiss: () => void;
+    onSelect: () => void;
+    target?: HTMLElement | null;
+};
+export declare const RegisteredInsertMenuContent: ({ api, editorView, isOffline, onClose, onDismiss, onSelect, target, }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SurfaceContext, RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type Props = {
+    editorView: EditorView;
+    id: string;
+    isOffline: boolean;
+    isSelected: boolean;
+    menuOpenId: symbol;
+    onClose: () => void;
+    registration: RegisterMenuItem;
+    surfaceContext: SurfaceContext;
+};
+export declare const RegisteredInsertMenuItem: ({ editorView, id, isOffline, isSelected, menuOpenId, onClose, registration, surfaceContext, }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuList.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { QuickInsertMenuModel } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type Props = {
+    editorView: EditorView;
+    isOffline: boolean;
+    listId: string;
+    listLabel: string;
+    maxHeight: number;
+    menuOpenId: symbol;
+    model: QuickInsertMenuModel;
+    onClose: () => void;
+    onItemHover: (index: number) => void;
+    onRenderedItemsChange: (range: {
+        startIndex: number;
+        stopIndex: number;
+    }) => void;
+    selectedItemIndex: number;
+    surfaceContext: SurfaceContext;
+};
+export declare const RegisteredInsertMenuList: ({ editorView, isOffline, listId, listLabel, maxHeight, menuOpenId, model, onClose, onItemHover, onRenderedItemsChange, selectedItemIndex, surfaceContext, }: Props) => React.JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "18.0.5",
+	"version": "18.1.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,6 +22,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
+		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^17.0.0",
 		"@atlaskit/editor-plugin-block-type": "^21.0.0",
 		"@atlaskit/editor-plugin-code-block": "^19.0.0",
@@ -48,16 +49,21 @@
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^20.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^14.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^18.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^11.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
-		"@atlaskit/editor-shared-styles": "^4.1.0",
+		"@atlaskit/editor-shared-styles": "^4.2.0",
 		"@atlaskit/editor-toolbar": "^2.6.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
+		"@atlaskit/editor-ui-control-model": "^2.9.0",
 		"@atlaskit/emoji": "^72.3.0",
 		"@atlaskit/icon": "^37.6.0",
 		"@atlaskit/icon-lab": "^7.8.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/tmp-editor-statsig": "^184.0.0",
-		"@atlaskit/tokens": "^16.11.0",
+		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/textfield": "^10.2.0",
+		"@atlaskit/tmp-editor-statsig": "^186.0.0",
+		"@atlaskit/tokens": "^16.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -66,7 +72,7 @@
 		"react-virtualized": "^9.22.6"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^121.2.0",
+		"@atlaskit/editor-common": "^121.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"