@atlaskit/editor-core 185.12.0 → 185.12.2

package/dist/es2019/plugins/block-type/commands/block-type.js

@@ -207,6 +207,45 @@ export const insertBlockTypesWithAnalytics = (name, inputMethod, editorAnalytics
   }
 };
 
+/**
+ * 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 function createWrapSelectionTransaction({
+  state,
+  type,
+  nodeAttributes
+}) {
+  let {
+    tr
+  } = state;
+  const {
+    $from,
+    $to
+  } = state.selection;
+  const {
+    alignment,
+    indentation
+  } = state.schema.marks;
+
+  /** Alignment or Indentation is not valid inside block types */
+  const removeAlignTr = removeBlockMarks(state, [alignment, indentation]);
+  tr = removeAlignTr || tr;
+  const range = $from.blockRange($to);
+  const wrapping = range && findWrapping(range, type, nodeAttributes);
+  if (range && wrapping) {
+    tr.wrap(range, wrapping).scrollIntoView();
+  } else {
+    /** We always want to append a block type */
+    safeInsert(type.createAndFill())(tr).scrollIntoView();
+  }
+  return tr;
+}
+
 /**
  * Function will add wrapping node.
  * 1. If currently selected blocks can be wrapped in the wrapper type it will wrap them.
@@ -215,29 +254,10 @@ export const insertBlockTypesWithAnalytics = (name, inputMethod, editorAnalytics
  */
 function wrapSelectionIn(type) {
   return function (state, dispatch) {
-    let {
-      tr
-    } = state;
-    const {
-      $from,
-      $to
-    } = state.selection;
-    const {
-      alignment,
-      indentation
-    } = state.schema.marks;
-
-    /** Alignment or Indentation is not valid inside block types */
-    const removeAlignTr = removeBlockMarks(state, [alignment, indentation]);
-    tr = removeAlignTr || tr;
-    const range = $from.blockRange($to);
-    const wrapping = range && findWrapping(range, type);
-    if (range && wrapping) {
-      tr.wrap(range, wrapping).scrollIntoView();
-    } else {
-      /** We always want to append a block type */
-      safeInsert(type.createAndFill())(tr).scrollIntoView();
-    }
+    let tr = createWrapSelectionTransaction({
+      state,
+      type
+    });
     if (dispatch) {
       dispatch(tr);
     }
@@ -245,45 +265,60 @@ function wrapSelectionIn(type) {
   };
 }
 
+/**
+ * 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 function createInsertCodeBlockTransaction({
+  state
+}) {
+  var _state$selection$$fro;
+  let {
+    tr
+  } = state;
+  const {
+    from
+  } = state.selection;
+  const {
+    codeBlock
+  } = state.schema.nodes;
+  const grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  const parentNodeType = state.selection.$from.parent.type;
+
+  /** We always want to append a codeBlock unless we're inserting into a paragraph
+   * AND it's a valid child of the grandparent node.
+   * Insert the current selection as codeBlock content unless it contains nodes other
+   * than paragraphs and inline.
+   */
+  const canInsertCodeBlock = shouldSplitSelectedNodeOnNodeInsertion({
+    parentNodeType,
+    grandParentNodeType,
+    content: codeBlock.createAndFill()
+  }) && contentAllowedInCodeBlock(state);
+  if (canInsertCodeBlock) {
+    tr = transformToCodeBlockAction(state, from);
+  } else {
+    safeInsert(codeBlock.createAndFill())(tr).scrollIntoView();
+  }
+  return tr;
+}
+
 /**
  * Function will insert code block at current selection if block is empty or below current selection and set focus on it.
  */
 function insertCodeBlock() {
   return function (state, dispatch) {
-    var _state$selection$$fro;
-    let {
-      tr
-    } = state;
-    const {
-      from
-    } = state.selection;
-    const {
-      codeBlock
-    } = state.schema.nodes;
-    const grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
-    const parentNodeType = state.selection.$from.parent.type;
-
-    /** We always want to append a codeBlock unless we're inserting into a paragraph
-     * AND it's a valid child of the grandparent node.
-     * Insert the current selection as codeBlock content unless it contains nodes other
-     * than paragraphs and inline.
-     */
-    const canInsertCodeBlock = shouldSplitSelectedNodeOnNodeInsertion({
-      parentNodeType,
-      grandParentNodeType,
-      content: codeBlock.createAndFill()
-    }) && contentAllowedInCodeBlock(state);
-    if (canInsertCodeBlock) {
-      tr = transformToCodeBlockAction(state, from);
-    } else {
-      safeInsert(codeBlock.createAndFill())(tr).scrollIntoView();
-    }
+    let tr = createInsertCodeBlockTransaction({
+      state
+    });
     if (dispatch) {
       dispatch(tr);
     }
     return true;
   };
 }
+
 /**
  * Check if the current selection contains any nodes that are not permitted
  * as codeBlock child nodes. Note that this allows paragraphs and inline nodes

package/dist/es2019/plugins/card/ui/EditLinkToolbar.js

@@ -59,10 +59,10 @@ export class EditLinkToolbar extends React.Component {
       ,
       invokeMethod: INPUT_METHOD.FLOATING_TB,
       featureFlags: featureFlags,
-      onSubmit: (href, title, displayText, _, analytic) => {
+      onSubmit: (href, title, displayText, inputMethod, analytic) => {
         this.hideLinkToolbar();
         if (onSubmit) {
-          onSubmit(href, displayText || title, analytic);
+          onSubmit(href, displayText || title, inputMethod, analytic);
         }
       }
     });
@@ -111,7 +111,7 @@ export const buildEditLinkToolbar = ({
         node: node,
         featureFlags: featureFlags,
         forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.forceFocusSelector,
-        onSubmit: (newHref, newText, analytic) => {
+        onSubmit: (newHref, newText, inputMethod, analytic) => {
           const urlChanged = newHref !== displayInfo.url;
           const titleChanged = newText !== displayInfo.title;
 
@@ -121,6 +121,7 @@ export const buildEditLinkToolbar = ({
             var _pluginInjectionApi$d2;
             return commandWithMetadata(changeSelectedCardToLink(newText, newHref, undefined, undefined, undefined, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions), {
               action: ACTION.UPDATED,
+              inputMethod,
               sourceEvent: analytic
             })(view.state, view.dispatch);
           }

package/dist/es2019/plugins/card/ui/EditorSmartCardEventsNext.js

@@ -29,15 +29,8 @@ const withHistoryMethod = fn => {
   };
 };
 const getMethod = withHistoryMethod(({
-  inputMethod,
-  sourceEvent
+  inputMethod
 }) => {
-  /**
-   * If sourceEvent is present, don't provide a custom method
-   */
-  if (sourceEvent) {
-    return;
-  }
   switch (inputMethod) {
     case INPUT_METHOD.CLIPBOARD:
       return 'editor_paste';
@@ -51,15 +44,8 @@ const getMethod = withHistoryMethod(({
   }
 });
 const getUpdateType = withHistoryMethod(({
-  action,
-  sourceEvent
+  action
 }) => {
-  /**
-   * If sourceEvent is present, don't provide a custom method
-   */
-  if (sourceEvent) {
-    return;
-  }
   switch (action) {
     case ACTION.CHANGED_TYPE:
       return 'display_update';
@@ -111,12 +97,12 @@ export const EventsBinding = ({
   } = useSmartLinkLifecycleAnalytics();
   const events = useMemo(() => {
     return {
-      created: ({
-        url,
-        display,
-        nodeContext,
-        ...metadata
-      }) => {
+      created: metadata => {
+        const {
+          url,
+          display,
+          nodeContext
+        } = metadata;
         const displayCategory = displayCategoryFromDisplay(display);
         const sourceEvent = getSourceEventFromMetadata(metadata);
         const creationMethod = getMethod(metadata);
@@ -129,13 +115,13 @@ export const EventsBinding = ({
           creationMethod
         });
       },
-      updated: ({
-        url,
-        display,
-        previousDisplay,
-        nodeContext,
-        ...metadata
-      }) => {
+      updated: metadata => {
+        const {
+          url,
+          display,
+          previousDisplay,
+          nodeContext
+        } = metadata;
         const displayCategory = displayCategoryFromDisplay(display);
         const sourceEvent = getSourceEventFromMetadata(metadata);
         const updateMethod = getMethod(metadata);
@@ -151,12 +137,12 @@ export const EventsBinding = ({
           updateType
         });
       },
-      deleted: ({
-        url,
-        display,
-        nodeContext,
-        ...metadata
-      }) => {
+      deleted: metadata => {
+        const {
+          url,
+          display,
+          nodeContext
+        } = metadata;
         const displayCategory = displayCategoryFromDisplay(display);
         const sourceEvent = getSourceEventFromMetadata(metadata);
         const deleteMethod = getMethod(metadata);

package/dist/es2019/plugins/code-block/index.js

@@ -9,6 +9,10 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } f
 import { IconCode } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
 import refreshBrowserSelectionOnChange from './refresh-browser-selection';
+// Theres an existing interelationship between these files, where the imported function is being called for code-block
+// Insertions via the drop down menu
+// tslint-ignore-next-line
+import { createInsertCodeBlockTransaction } from '../block-type/commands/block-type';
 const codeBlockPlugin = (options, api) => ({
   name: 'codeBlock',
   nodes() {
@@ -58,8 +62,9 @@ const codeBlockPlugin = (options, api) => ({
       icon: () => /*#__PURE__*/React.createElement(IconCode, null),
       action(insert, state) {
         var _api$dependencies$ana;
-        const schema = state.schema;
-        const tr = insert(schema.nodes.codeBlock.createChecked());
+        const tr = createInsertCodeBlockTransaction({
+          state
+        });
         api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions.attachAnalyticsEvent({
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/es2019/plugins/expand/commands.js

@@ -1,10 +1,10 @@
 import { TextSelection } from 'prosemirror-state';
-import { safeInsert } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE, PLATFORMS, MODE } from '../analytics';
 import { GapCursorSelection, Side } from '../selection/gap-cursor-selection';
 import { findExpand } from './utils';
 import { createCommand } from './pm-plugins/plugin-factory';
+import { createWrapSelectionTransaction } from '../block-type/commands/block-type';
 export const setExpandRef = ref => createCommand({
   type: 'SET_EXPAND_REF',
   data: {
@@ -97,6 +97,10 @@ export const createExpandNode = state => {
 };
 export const insertExpand = (state, dispatch) => {
   const expandNode = createExpandNode(state);
+  const tr = createWrapSelectionTransaction({
+    state,
+    type: state.schema.nodes.expand
+  });
   const payload = {
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -107,7 +111,7 @@ export const insertExpand = (state, dispatch) => {
     eventType: EVENT_TYPE.TRACK
   };
   if (dispatch && expandNode) {
-    dispatch(addAnalytics(state, safeInsert(expandNode)(state.tr).scrollIntoView(), payload));
+    dispatch(addAnalytics(state, tr, payload));
   }
   return true;
 };

package/dist/es2019/plugins/expand/index.js

@@ -7,6 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, IN
 import { getToolbarConfig } from './toolbar';
 import { createExpandNode } from './commands';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { createWrapSelectionTransaction } from '../block-type/commands/block-type';
 const expandPlugin = (options = {}, api) => {
   var _api$dependencies, _api$dependencies$fea;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
@@ -55,7 +56,10 @@ const expandPlugin = (options = {}, api) => {
             if (!node) {
               return false;
             }
-            const tr = insert(node);
+            const tr = createWrapSelectionTransaction({
+              state,
+              type: state.schema.nodes.expand
+            });
             return addAnalytics(state, tr, {
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/es2019/plugins/hyperlink/Toolbar.js

@@ -204,6 +204,7 @@ export const getToolbarConfig = (options, featureFlags, pluginInjectionApi) => (
                     const action = isEdit ? ACTION.UPDATED : ACTION.INSERTED;
                     const command = isEdit ? commandWithMetadata(updateLink(href, displayText || title, activeLinkMark.pos), {
                       action,
+                      inputMethod,
                       sourceEvent: analytic
                     }) : insertLinkWithAnalytics(inputMethod, activeLinkMark.from, activeLinkMark.to, href, title, displayText, !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider), analytic);
                     command(view.state, view.dispatch, view);

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

@@ -8,23 +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';
-const insertPanelTypeWithAnalytics = (panelAttributes, state, insert) => {
-  const 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;
-};
-const insertPanelType = (panelAttributes, state) => 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';
 const panelPlugin = (options = {}, api) => ({
   name: 'panel',
   nodes() {
@@ -58,9 +45,12 @@ const panelPlugin = (options = {}, api) => ({
         priority: 800,
         icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
         action(insert, state) {
-          return insertPanelTypeWithAnalytics({
-            panelType: PanelType.INFO
-          }, state, insert);
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.INFO
+            }
+          });
         }
       }, {
         id: 'notepanel',
@@ -69,9 +59,12 @@ const panelPlugin = (options = {}, api) => ({
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
         action(insert, state) {
-          return insertPanelTypeWithAnalytics({
-            panelType: PanelType.NOTE
-          }, state, insert);
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.NOTE
+            }
+          });
         }
       }, {
         id: 'successpanel',
@@ -81,9 +74,12 @@ const panelPlugin = (options = {}, api) => ({
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
         action(insert, state) {
-          return insertPanelTypeWithAnalytics({
-            panelType: PanelType.SUCCESS
-          }, state, insert);
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.SUCCESS
+            }
+          });
         }
       }, {
         id: 'warningpanel',
@@ -92,9 +88,12 @@ const panelPlugin = (options = {}, api) => ({
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
         action(insert, state) {
-          return insertPanelTypeWithAnalytics({
-            panelType: PanelType.WARNING
-          }, state, insert);
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.WARNING
+            }
+          });
         }
       }, {
         id: 'errorpanel',
@@ -103,9 +102,12 @@ const panelPlugin = (options = {}, api) => ({
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
         action(insert, state) {
-          return insertPanelTypeWithAnalytics({
-            panelType: PanelType.ERROR
-          }, state, insert);
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.ERROR
+            }
+          });
         }
       }];
       if (options.allowCustomPanel && options.allowCustomPanelEdit) {
@@ -116,15 +118,18 @@ const panelPlugin = (options = {}, api) => ({
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
           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,
+              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
+              }
+            });
           }
         });
       }
@@ -133,4 +138,40 @@ const panelPlugin = (options = {}, api) => ({
     floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api === null || api === void 0 ? void 0 : api.dependencies.decorations.actions.hoverDecoration)
   }
 });
+
+/**
+ * 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({
+  state,
+  attributes
+}) {
+  const tr = createWrapSelectionTransaction({
+    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/es2019/plugins/quick-insert/commands.js

@@ -25,6 +25,8 @@ export const insertItem = item => (state, dispatch) => {
     return insertSelectedItem(maybeNode, opts)(state, state.tr, state.selection.head);
   };
   const 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/es2019/ui/ElementBrowser/InsertMenu.js

@@ -30,6 +30,10 @@ const InsertMenu = ({
     icon: () => getSvgIconForItem({
       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: () => onInsert({
       item
     }),
@@ -48,6 +52,12 @@ const InsertMenu = ({
   }, [editorView, toggleVisiblity]);
   const getItems = useCallback(quickInsertState => (query, category) => {
     let 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/es2019/version-wrapper.js

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

package/dist/es2019/version.json

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