@atlaskit/editor-core 185.12.1 → 185.12.2

package/dist/esm/plugins/panel/index.js

@@ -8,25 +8,10 @@ import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel
 import { messages } from '../block-type/messages';
 import IconCustomPanel from '../quick-insert/assets/custom-panel';
 import { T50 } from '@atlaskit/theme/colors';
-var insertPanelTypeWithAnalytics = function insertPanelTypeWithAnalytics(panelAttributes, state, insert) {
-  var tr = insert(insertPanelType(panelAttributes, state));
-  if (tr) {
-    addAnalytics(state, tr, {
-      action: ACTION.INSERTED,
-      actionSubject: ACTION_SUBJECT.DOCUMENT,
-      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
-      attributes: {
-        inputMethod: INPUT_METHOD.QUICK_INSERT,
-        panelType: panelAttributes.panelType
-      },
-      eventType: EVENT_TYPE.TRACK
-    });
-  }
-  return tr;
-};
-var insertPanelType = function insertPanelType(panelAttributes, state) {
-  return state.schema.nodes.panel.createChecked(panelAttributes, state.schema.nodes.paragraph.createChecked());
-};
+// Theres an existing interelationship between these files, where the imported function is being called for panel
+// Insertions via the drop down menu
+// tslint-ignore-next-line
+import { createWrapSelectionTransaction } from '../block-type/commands/block-type';
 var panelPlugin = function panelPlugin() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var api = arguments.length > 1 ? arguments[1] : undefined;
@@ -67,9 +52,12 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanel, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics({
-              panelType: PanelType.INFO
-            }, state, insert);
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.INFO
+              }
+            });
           }
         }, {
           id: 'notepanel',
@@ -80,9 +68,12 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelNote, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics({
-              panelType: PanelType.NOTE
-            }, state, insert);
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.NOTE
+              }
+            });
           }
         }, {
           id: 'successpanel',
@@ -94,9 +85,12 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics({
-              panelType: PanelType.SUCCESS
-            }, state, insert);
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.SUCCESS
+              }
+            });
           }
         }, {
           id: 'warningpanel',
@@ -107,9 +101,12 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelWarning, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics({
-              panelType: PanelType.WARNING
-            }, state, insert);
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.WARNING
+              }
+            });
           }
         }, {
           id: 'errorpanel',
@@ -120,9 +117,12 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelError, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics({
-              panelType: PanelType.ERROR
-            }, state, insert);
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.ERROR
+              }
+            });
           }
         }];
         if (options.allowCustomPanel && options.allowCustomPanelEdit) {
@@ -135,15 +135,18 @@ var panelPlugin = function panelPlugin() {
               return /*#__PURE__*/React.createElement(IconCustomPanel, null);
             },
             action: function action(insert, state) {
-              return insertPanelTypeWithAnalytics({
-                panelType: PanelType.CUSTOM,
-                panelIcon: ':rainbow:',
-                panelIconId: '1f308',
-                panelIconText: '🌈',
-                // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
-                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-                panelColor: T50
-              }, state, insert);
+              return createPanelAction({
+                state: state,
+                attributes: {
+                  panelType: PanelType.CUSTOM,
+                  panelIcon: ':rainbow:',
+                  panelIconId: '1f308',
+                  panelIconText: '🌈',
+                  // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
+                  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                  panelColor: T50
+                }
+              });
             }
           });
         }
@@ -155,4 +158,39 @@ var panelPlugin = function panelPlugin() {
     }
   };
 };
+
+/**
+ * Creates panel action and wrap selection transaction with analytics for the panel insertion.
+ *
+ * @example
+ * const tr = createPanelAction({
+ *   state: editorState,
+ *   attributes: { panelType: 'info' },
+ * });
+ * if (tr) {
+ *   applyTransaction(tr);
+ * }
+ */
+function createPanelAction(_ref3) {
+  var state = _ref3.state,
+    attributes = _ref3.attributes;
+  var tr = createWrapSelectionTransaction({
+    state: state,
+    type: state.schema.nodes.panel,
+    nodeAttributes: attributes
+  });
+  if (tr) {
+    addAnalytics(state, tr, {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod: INPUT_METHOD.QUICK_INSERT,
+        panelType: attributes.panelType
+      },
+      eventType: EVENT_TYPE.TRACK
+    });
+  }
+  return tr;
+}
 export default panelPlugin;

package/dist/esm/plugins/quick-insert/commands.js

@@ -31,6 +31,8 @@ export var insertItem = function insertItem(item) {
       return insertSelectedItem(maybeNode, opts)(state, state.tr, state.selection.head);
     };
     var tr = item.action(insert, state);
+
+    /** @note There is no transaction when called without a search currently (different insert) */
     if (tr && dispatch) {
       dispatch(tr);
     }

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -40,6 +40,10 @@ var InsertMenu = function InsertMenu(_ref) {
           name: item.value.name
         }) || item.elemBefore;
       },
+      /**
+       * @note This transformed items action is only used when a quick insert item has been
+       * called from the quick insert menu and a search has not been performed.
+       */
       action: function action() {
         return onInsert({
           item: item
@@ -62,6 +66,12 @@ var InsertMenu = function InsertMenu(_ref) {
   var getItems = useCallback(function (quickInsertState) {
     return function (query, category) {
       var result;
+      /**
+       * @warning The results if there is a query are not the same as the results if there is no query.
+       * For example: If you have a typed panel and then select the panel item then it will call a different action
+       * than is specified on the editor plugins quick insert
+       * @see above transform function for more details.
+       */
       if (query) {
         result = searchQuickInsertItems(quickInsertState, {})(query, category);
       } else {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.12.1";
+export var version = "185.12.2";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.12.1",
+	"version": "185.12.2",
 	"sideEffects": false
 }

package/dist/types/plugins/block-type/commands/block-type.d.ts

@@ -1,3 +1,7 @@
+/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
+/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
+import { EditorState } from 'prosemirror-state';
+import { NodeType } from 'prosemirror-model';
 import { Command } from '../../../types';
 import { HeadingLevelsAndNormalText } from '../types';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -19,4 +23,25 @@ export declare function insertBlockType(name: string): Command;
  * @returns - command that inserts block type
  */
 export declare const insertBlockTypesWithAnalytics: (name: string, inputMethod: InputMethod, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => import("@atlaskit/editor-common/types").Command;
+/**
+ * This function creates a new transaction that wraps the current selection
+ * in the specified node type if it results in a valid transaction.
+ * If not valid, it performs a safe insert operation.
+ *
+ * Example of when wrapping might not be valid is when attempting to wrap
+ * content that is already inside a panel with another panel
+ */
+export declare function createWrapSelectionTransaction({ state, type, nodeAttributes, }: {
+    state: EditorState;
+    type: NodeType;
+    nodeAttributes?: Record<string, any>;
+}): import("prosemirror-state").Transaction;
+/**
+ * This function creates a new transaction that inserts a code block,
+ * if there is text selected it will wrap the current selection if not it will
+ * append the codeblock to the end of the document.
+ */
+export declare function createInsertCodeBlockTransaction({ state, }: {
+    state: EditorState;
+}): import("prosemirror-state").Transaction;
 export declare const cleanUpAtTheStartOfDocument: Command;

package/dist/types-ts4.5/plugins/block-type/commands/block-type.d.ts

@@ -1,3 +1,7 @@
+/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
+/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
+import { EditorState } from 'prosemirror-state';
+import { NodeType } from 'prosemirror-model';
 import { Command } from '../../../types';
 import { HeadingLevelsAndNormalText } from '../types';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -19,4 +23,25 @@ export declare function insertBlockType(name: string): Command;
  * @returns - command that inserts block type
  */
 export declare const insertBlockTypesWithAnalytics: (name: string, inputMethod: InputMethod, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => import("@atlaskit/editor-common/types").Command;
+/**
+ * This function creates a new transaction that wraps the current selection
+ * in the specified node type if it results in a valid transaction.
+ * If not valid, it performs a safe insert operation.
+ *
+ * Example of when wrapping might not be valid is when attempting to wrap
+ * content that is already inside a panel with another panel
+ */
+export declare function createWrapSelectionTransaction({ state, type, nodeAttributes, }: {
+    state: EditorState;
+    type: NodeType;
+    nodeAttributes?: Record<string, any>;
+}): import("prosemirror-state").Transaction;
+/**
+ * This function creates a new transaction that inserts a code block,
+ * if there is text selected it will wrap the current selection if not it will
+ * append the codeblock to the end of the document.
+ */
+export declare function createInsertCodeBlockTransaction({ state, }: {
+    state: EditorState;
+}): import("prosemirror-state").Transaction;
 export declare const cleanUpAtTheStartOfDocument: Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "185.12.1",
+  "version": "185.12.2",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -77,7 +77,7 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-datasource": "^0.28.0",
-    "@atlaskit/link-picker": "^1.26.0",
+    "@atlaskit/link-picker": "^1.27.0",
     "@atlaskit/locale": "^2.5.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/media-card": "^76.1.0",