@atlaskit/editor-plugin-list 15.0.1 → 15.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-list
 
+## 15.0.2
+
+### Patch Changes
+
+- [`7087f393ec725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7087f393ec725) -
+  Add the categorized registered Quick Insert browse experience with representative native elements
+- Updated dependencies
+
 ## 15.0.1
 
 ### Patch Changes

package/dist/cjs/listPlugin.js

@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
@@ -22,6 +23,7 @@ var _main = require("./pm-plugins/main");
 var _find = require("./pm-plugins/utils/find");
 var _selection = require("./pm-plugins/utils/selection");
 var _ui = require("./ui");
+var _getListQuickInsertComponents = require("./ui/quick-insert/getListQuickInsertComponents");
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 
@@ -43,6 +45,13 @@ var listPlugin = exports.listPlugin = function listPlugin(_ref) {
     var _api$blockMenu;
     api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents((0, _ui.getListComponents)(api));
   }
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getListQuickInsertComponents.getListQuickInsertComponents)({
+      api: api
+    }));
+  }
   return {
     name: 'list',
     actions: {
@@ -103,7 +112,7 @@ var listPlugin = exports.listPlugin = function listPlugin(_ref) {
         }
       }];
     },
-    pluginsOptions: {
+    pluginsOptions: isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
         return [{

package/dist/cjs/ui/quick-insert/ListQuickInsertMenuItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ListQuickInsertMenuItem = exports.ListQuickInsertMenuItem = function ListQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    type = _ref.type;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var isOrdered = type === 'ordered';
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    var schema = editorView.state.schema;
+    var listNode = isOrdered ? schema.nodes.orderedList : schema.nodes.bulletList;
+    var actionSubjectId = isOrdered ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET;
+    var tr = insert(listNode.createChecked({}, schema.nodes.listItem.createChecked({}, schema.nodes.paragraph.createChecked())));
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.LIST,
+      actionSubjectId: actionSubjectId,
+      attributes: {
+        inputMethod: source
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api, isOrdered]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: isOrdered ? /*#__PURE__*/_react.default.createElement(_quickInsert.IconListNumber, null) : /*#__PURE__*/_react.default.createElement(_quickInsert.IconList, null),
+    onSelect: onSelect,
+    shortcut: (0, _keymaps.tooltip)(isOrdered ? _keymaps.toggleOrderedList : _keymaps.toggleBulletList),
+    title: formatMessage(isOrdered ? _messages.listMessages.orderedList : _messages.listMessages.unorderedList)
+  });
+};

package/dist/cjs/ui/quick-insert/getListQuickInsertComponents.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListQuickInsertComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _ListQuickInsertMenuItem = require("./ListQuickInsertMenuItem");
+var getListQuickInsertComponents = exports.getListQuickInsertComponents = function getListQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    item: _keys.UNORDERED_LIST_MENU_ITEM,
+    type: 'unordered'
+  }, {
+    item: _keys.ORDERED_LIST_MENU_ITEM,
+    type: 'ordered'
+  }].map(function (_ref2) {
+    var item = _ref2.item,
+      type = _ref2.type;
+    return {
+      key: item.key,
+      type: item.type,
+      parents: [{
+        key: _keys.TEXT_FORMATTING_SECTION.key,
+        type: _keys.TEXT_FORMATTING_SECTION.type,
+        rank: _rank.TEXT_FORMATTING_SECTION_RANK[item.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_ListQuickInsertMenuItem.ListQuickInsertMenuItem, {
+          api: api,
+          type: type
+        });
+      }
+    };
+  });
+};

package/dist/es2019/listPlugin.js

@@ -4,6 +4,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { toggleBulletList, toggleOrderedList, tooltip } from '@atlaskit/editor-common/keymaps';
 import { listMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleBulletList as toggleBulletListCommand, toggleOrderedList as toggleOrderedListCommand } from './pm-plugins/commands';
@@ -17,6 +18,7 @@ import { createPlugin, pluginKey as listPluginKey } from './pm-plugins/main';
 import { findRootParentListNode } from './pm-plugins/utils/find';
 import { isInsideListItem } from './pm-plugins/utils/selection';
 import { getListComponents } from './ui';
+import { getListQuickInsertComponents } from './ui/quick-insert/getListQuickInsertComponents';
 
 /*
   Toolbar buttons to bullet and ordered list can be found in
@@ -37,6 +39,13 @@ export const listPlugin = ({
     var _api$blockMenu;
     api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getListComponents(api));
   }
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getListQuickInsertComponents({
+      api
+    }));
+  }
   return {
     name: 'list',
     actions: {
@@ -95,7 +104,7 @@ export const listPlugin = ({
         }
       }];
     },
-    pluginsOptions: {
+    pluginsOptions: isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: ({
         formatMessage
       }) => {

package/dist/es2019/ui/quick-insert/ListQuickInsertMenuItem.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { toggleBulletList, toggleOrderedList, tooltip } from '@atlaskit/editor-common/keymaps';
+import { listMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+export const ListQuickInsertMenuItem = ({
+  api,
+  type
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const isOrdered = type === 'ordered';
+  const onSelect = useCallback(({
+    editorView,
+    insert,
+    source
+  }) => {
+    var _api$analytics;
+    const {
+      schema
+    } = editorView.state;
+    const listNode = isOrdered ? schema.nodes.orderedList : schema.nodes.bulletList;
+    const actionSubjectId = isOrdered ? ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER : ACTION_SUBJECT_ID.FORMAT_LIST_BULLET;
+    const tr = insert(listNode.createChecked({}, schema.nodes.listItem.createChecked({}, schema.nodes.paragraph.createChecked())));
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.LIST,
+      actionSubjectId,
+      attributes: {
+        inputMethod: source
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api, isOrdered]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: isOrdered ? /*#__PURE__*/React.createElement(IconListNumber, null) : /*#__PURE__*/React.createElement(IconList, null),
+    onSelect: onSelect,
+    shortcut: tooltip(isOrdered ? toggleOrderedList : toggleBulletList),
+    title: formatMessage(isOrdered ? messages.orderedList : messages.unorderedList)
+  });
+};

package/dist/es2019/ui/quick-insert/getListQuickInsertComponents.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ORDERED_LIST_MENU_ITEM, TEXT_FORMATTING_SECTION, UNORDERED_LIST_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { TEXT_FORMATTING_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { ListQuickInsertMenuItem } from './ListQuickInsertMenuItem';
+export const getListQuickInsertComponents = ({
+  api
+}) => [{
+  item: UNORDERED_LIST_MENU_ITEM,
+  type: 'unordered'
+}, {
+  item: ORDERED_LIST_MENU_ITEM,
+  type: 'ordered'
+}].map(({
+  item,
+  type
+}) => ({
+  key: item.key,
+  type: item.type,
+  parents: [{
+    key: TEXT_FORMATTING_SECTION.key,
+    type: TEXT_FORMATTING_SECTION.type,
+    rank: TEXT_FORMATTING_SECTION_RANK[item.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(ListQuickInsertMenuItem, {
+    api: api,
+    type: type
+  })
+}));

package/dist/esm/listPlugin.js

@@ -4,6 +4,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { toggleBulletList, toggleOrderedList, tooltip } from '@atlaskit/editor-common/keymaps';
 import { listMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleBulletList as toggleBulletListCommand, toggleOrderedList as toggleOrderedListCommand } from './pm-plugins/commands';
@@ -17,6 +18,7 @@ import { createPlugin, pluginKey as listPluginKey } from './pm-plugins/main';
 import { findRootParentListNode } from './pm-plugins/utils/find';
 import { isInsideListItem } from './pm-plugins/utils/selection';
 import { getListComponents } from './ui';
+import { getListQuickInsertComponents } from './ui/quick-insert/getListQuickInsertComponents';
 
 /*
   Toolbar buttons to bullet and ordered list can be found in
@@ -36,6 +38,13 @@ export var listPlugin = function listPlugin(_ref) {
     var _api$blockMenu;
     api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getListComponents(api));
   }
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getListQuickInsertComponents({
+      api: api
+    }));
+  }
   return {
     name: 'list',
     actions: {
@@ -96,7 +105,7 @@ export var listPlugin = function listPlugin(_ref) {
         }
       }];
     },
-    pluginsOptions: {
+    pluginsOptions: isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
         return [{

package/dist/esm/ui/quick-insert/ListQuickInsertMenuItem.js

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { toggleBulletList, toggleOrderedList, tooltip } from '@atlaskit/editor-common/keymaps';
+import { listMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+export var ListQuickInsertMenuItem = function ListQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    type = _ref.type;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var isOrdered = type === 'ordered';
+  var onSelect = useCallback(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    var schema = editorView.state.schema;
+    var listNode = isOrdered ? schema.nodes.orderedList : schema.nodes.bulletList;
+    var actionSubjectId = isOrdered ? ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER : ACTION_SUBJECT_ID.FORMAT_LIST_BULLET;
+    var tr = insert(listNode.createChecked({}, schema.nodes.listItem.createChecked({}, schema.nodes.paragraph.createChecked())));
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.LIST,
+      actionSubjectId: actionSubjectId,
+      attributes: {
+        inputMethod: source
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api, isOrdered]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: isOrdered ? /*#__PURE__*/React.createElement(IconListNumber, null) : /*#__PURE__*/React.createElement(IconList, null),
+    onSelect: onSelect,
+    shortcut: tooltip(isOrdered ? toggleOrderedList : toggleBulletList),
+    title: formatMessage(isOrdered ? messages.orderedList : messages.unorderedList)
+  });
+};

package/dist/esm/ui/quick-insert/getListQuickInsertComponents.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ORDERED_LIST_MENU_ITEM, TEXT_FORMATTING_SECTION, UNORDERED_LIST_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { TEXT_FORMATTING_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { ListQuickInsertMenuItem } from './ListQuickInsertMenuItem';
+export var getListQuickInsertComponents = function getListQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    item: UNORDERED_LIST_MENU_ITEM,
+    type: 'unordered'
+  }, {
+    item: ORDERED_LIST_MENU_ITEM,
+    type: 'ordered'
+  }].map(function (_ref2) {
+    var item = _ref2.item,
+      type = _ref2.type;
+    return {
+      key: item.key,
+      type: item.type,
+      parents: [{
+        key: TEXT_FORMATTING_SECTION.key,
+        type: TEXT_FORMATTING_SECTION.type,
+        rank: TEXT_FORMATTING_SECTION_RANK[item.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(ListQuickInsertMenuItem, {
+          api: api,
+          type: type
+        });
+      }
+    };
+  });
+};

package/dist/types/listPluginType.d.ts

@@ -3,12 +3,14 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 import type { FindRootParentListNode, IndentList, IsInsideListItem, ListState, OutdentList, ToggleBulletList, ToggleOrderedList } from './types';
 export type ListPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<BlockMenuPlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type ListPluginActions = {
     findRootParentListNode: FindRootParentListNode;

package/dist/types/ui/quick-insert/ListQuickInsertMenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ListPlugin } from '../../listPluginType';
+type Props = {
+    api: ExtractInjectionAPI<ListPlugin> | undefined;
+    type: 'ordered' | 'unordered';
+};
+export declare const ListQuickInsertMenuItem: ({ api, type }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/quick-insert/getListQuickInsertComponents.d.ts

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { ListPlugin } from '../../listPluginType';
+export declare const getListQuickInsertComponents: ({ api, }: {
+    api: ExtractInjectionAPI<ListPlugin> | undefined;
+}) => RegisterMenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-list",
-	"version": "15.0.1",
+	"version": "15.0.2",
 	"description": "List plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,9 +24,12 @@
 		"@atlaskit/editor-plugin-block-menu": "^12.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^12.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^10.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-toolbar": "^2.4.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/editor-ui-control-model": "^2.4.0",
+		"@atlaskit/icon": "^37.3.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/prosemirror-history": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
@@ -34,7 +37,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^117.0.0",
+		"@atlaskit/editor-common": "^117.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},