@atlaskit/editor-core 148.0.0 → 149.0.3

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

@@ -6,9 +6,11 @@ import keymap from './pm-plugins/keymaps';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanelError } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
+import IconCustomPanel from '../quick-insert/assets/custom-panel';
+import { T75 } from '@atlaskit/theme/colors';
 
-var insertPanelTypeWithAnalytics = function insertPanelTypeWithAnalytics(panelType, state, insert) {
-  var tr = insert(insertPanelType(panelType, state));
+var insertPanelTypeWithAnalytics = function insertPanelTypeWithAnalytics(panelAttributes, state, insert) {
+  var tr = insert(insertPanelType(panelAttributes, state));
 
   if (tr) {
     addAnalytics(state, tr, {
@@ -17,7 +19,7 @@ var insertPanelTypeWithAnalytics = function insertPanelTypeWithAnalytics(panelTy
       actionSubjectId: ACTION_SUBJECT_ID.PANEL,
       attributes: {
         inputMethod: INPUT_METHOD.QUICK_INSERT,
-        panelType: panelType
+        panelType: panelAttributes.panelType
       },
       eventType: EVENT_TYPE.TRACK
     });
@@ -26,10 +28,8 @@ var insertPanelTypeWithAnalytics = function insertPanelTypeWithAnalytics(panelTy
   return tr;
 };
 
-var insertPanelType = function insertPanelType(panelType, state) {
-  return state.schema.nodes.panel.createChecked({
-    panelType: panelType
-  }, state.schema.nodes.paragraph.createChecked());
+var insertPanelType = function insertPanelType(panelAttributes, state) {
+  return state.schema.nodes.panel.createChecked(panelAttributes, state.schema.nodes.paragraph.createChecked());
 };
 
 var panelPlugin = function panelPlugin() {
@@ -62,7 +62,7 @@ var panelPlugin = function panelPlugin() {
     pluginsOptions: {
       quickInsert: function quickInsert(_ref2) {
         var formatMessage = _ref2.formatMessage;
-        return [{
+        var quickInsertOptions = [{
           id: 'infopanel',
           title: formatMessage(messages.infoPanel),
           keywords: ['panel'],
@@ -72,7 +72,9 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanel, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics(PanelType.INFO, state, insert);
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.INFO
+            }, state, insert);
           }
         }, {
           id: 'notepanel',
@@ -83,7 +85,9 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelNote, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics(PanelType.NOTE, state, insert);
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.NOTE
+            }, state, insert);
           }
         }, {
           id: 'successpanel',
@@ -95,7 +99,9 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics(PanelType.SUCCESS, state, insert);
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.SUCCESS
+            }, state, insert);
           }
         }, {
           id: 'warningpanel',
@@ -106,7 +112,9 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelWarning, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics(PanelType.WARNING, state, insert);
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.WARNING
+            }, state, insert);
           }
         }, {
           id: 'errorpanel',
@@ -117,9 +125,32 @@ var panelPlugin = function panelPlugin() {
             return /*#__PURE__*/React.createElement(IconPanelError, null);
           },
           action: function action(insert, state) {
-            return insertPanelTypeWithAnalytics(PanelType.ERROR, state, insert);
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.ERROR
+            }, state, insert);
           }
         }];
+
+        if (options.UNSAFE_allowCustomPanel) {
+          quickInsertOptions.push({
+            id: 'custompanel',
+            title: formatMessage(messages.customPanel),
+            description: formatMessage(messages.customPanelDescription),
+            priority: 1000,
+            icon: function icon() {
+              return /*#__PURE__*/React.createElement(IconCustomPanel, null);
+            },
+            action: function action(insert, state) {
+              return insertPanelTypeWithAnalytics({
+                panelType: PanelType.CUSTOM,
+                panelIcon: ':rainbow:',
+                panelColor: T75
+              }, state, insert);
+            }
+          });
+        }
+
+        return quickInsertOptions;
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return getToolbarConfig(state, intl, options, providerFactory);

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

@@ -1,4 +1,5 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DOMSerializer } from 'prosemirror-model';
@@ -12,6 +13,7 @@ import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common';
 import { Emoji } from '@atlaskit/editor-common';
 import { panelAttrsToDom } from '../utils';
+var fitToHeight = 20;
 export var panelIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -34,7 +36,7 @@ export var PanelIcon = function PanelIcon(props) {
       shortName: panelIcon,
       showTooltip: false,
       allowTextFallback: false,
-      fitToHeight: 16
+      fitToHeight: fitToHeight
     });
   }
 
@@ -44,33 +46,45 @@ export var PanelIcon = function PanelIcon(props) {
   });
 };
 
-var PanelNodeView = function PanelNodeView(node, view, getPos, pluginOptions, providerFactory) {
-  _classCallCheck(this, PanelNodeView);
+var PanelNodeView = /*#__PURE__*/function () {
+  function PanelNodeView(node, view, getPos, pluginOptions, providerFactory) {
+    _classCallCheck(this, PanelNodeView);
 
-  this.providerFactory = providerFactory;
-  this.pluginOptions = pluginOptions;
-  this.view = view;
-  this.node = node;
+    this.providerFactory = providerFactory;
+    this.pluginOptions = pluginOptions;
+    this.view = view;
+    this.node = node;
 
-  var _DOMSerializer$render = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.UNSAFE_allowCustomPanel || false)),
-      dom = _DOMSerializer$render.dom,
-      contentDOM = _DOMSerializer$render.contentDOM;
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.UNSAFE_allowCustomPanel || false)),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
 
-  this.getPos = getPos;
-  this.dom = dom;
-  this.contentDOM = contentDOM;
-  this.icon = this.dom.querySelector(".".concat(PanelSharedCssClassName.icon));
+    this.getPos = getPos;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.icon = this.dom.querySelector(".".concat(PanelSharedCssClassName.icon));
 
-  if (!this.icon) {
-    return;
+    if (!this.icon) {
+      return;
+    }
+
+    ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
+      allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
+      panelAttributes: node.attrs,
+      providerFactory: this.providerFactory
+    }), this.icon);
   }
 
-  ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
-    allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
-    panelAttributes: node.attrs,
-    providerFactory: this.providerFactory
-  }), this.icon);
-};
+  _createClass(PanelNodeView, [{
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      // ignore mutation if it caused by the icon.
+      return mutation.target === this.icon;
+    }
+  }]);
+
+  return PanelNodeView;
+}();
 
 export var getPanelNodeView = function getPanelNodeView(pluginOptions, providerFactory) {
   return function (node, view, getPos) {

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

@@ -5,6 +5,7 @@ import NoteIcon from '@atlaskit/icon/glyph/editor/note';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
+import HideEmojiIcon from '../floating-toolbar/ui/EditorHideEmojiIcon';
 import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
@@ -14,6 +15,7 @@ import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 export var messages = defineMessages({
   info: {
     id: 'fabric.editor.info',
@@ -42,7 +44,7 @@ export var messages = defineMessages({
   },
   emoji: {
     id: 'fabric.editor.panel.emoji',
-    defaultMessage: 'Add icon',
+    defaultMessage: 'Add emoji',
     description: 'Select the panel icon'
   },
   backgroundColor: {
@@ -92,18 +94,96 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
   if (isCustomPanelEnabled) {
     var changeColor = function changeColor(color) {
       return function (state, dispatch) {
-        changePanelType(PanelType.CUSTOM, {
+        var panelNode = findPanel(state);
+
+        if (panelNode === undefined) {
+          return false;
+        }
+
+        var previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+
+        if (previousColor === color) {
+          changePanelType(PanelType.CUSTOM, {
+            color: color
+          }, isCustomPanelEnabled)(state, dispatch);
+          return false;
+        }
+
+        var payload = {
+          action: ACTION.CHANGED_BACKGROUND_COLOR,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newColor: color,
+            previousColor: previousColor
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
           color: color
-        }, true)(state, dispatch);
+        }, isCustomPanelEnabled))(state, dispatch);
         return false;
       };
     };
 
     var changeEmoji = function changeEmoji(emoji) {
       return function (state, dispatch) {
-        changePanelType(PanelType.CUSTOM, {
+        var panelNode = findPanel(state);
+
+        if (panelNode === undefined) {
+          return false;
+        }
+
+        var previousIcon = panelNode.node.attrs.panelIcon || '';
+
+        if (previousIcon === emoji) {
+          changePanelType(PanelType.CUSTOM, {
+            emoji: emoji
+          }, true)(state, dispatch);
+          return false;
+        }
+
+        var payload = {
+          action: ACTION.CHANGED_ICON,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newIcon: emoji,
+            previousIcon: previousIcon
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
           emoji: emoji
-        }, true)(state, dispatch);
+        }, true))(state, dispatch);
+        return false;
+      };
+    };
+
+    var removeEmoji = function removeEmoji() {
+      return function (state, dispatch) {
+        var panelNode = findPanel(state);
+
+        if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
+          return false;
+        }
+
+        if (panelNode === undefined) {
+          return false;
+        }
+
+        var payload = {
+          action: ACTION.REMOVE_ICON,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            icon: panelNode.node.attrs.panelIcon
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
+          emoji: undefined
+        }, isCustomPanelEnabled))(state, dispatch);
         return false;
       };
     };
@@ -133,12 +213,18 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
       type: 'select',
       selectType: 'emoji',
       options: [],
-      selected: activePanelType === PanelType.CUSTOM,
+      selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
       onChange: function onChange(emojiShortName) {
         return changeEmoji(emojiShortName);
       }
     };
     items.push(emojiPicker, {
+      id: 'editor.panel.hideEmoji',
+      type: 'button',
+      icon: HideEmojiIcon,
+      onClick: removeEmoji(),
+      title: formatMessage(commonMessages.hideEmoji)
+    }, {
       type: 'separator'
     }, colorPicker);
   }

package/dist/esm/plugins/panel/toolbar.test.js

@@ -8,17 +8,22 @@ import { createProsemirrorEditorFactory, Preset } from '@atlaskit/editor-test-he
 import panelPlugin from '.';
 import { doc, p, panel } from '@atlaskit/editor-test-helpers/doc-builder';
 import { PanelType } from '@atlaskit/adf-schema';
+import analyticsPlugin from '../analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
+import { emojiPluginKey } from '../emoji';
 
 var dummyFormatMessage = function dummyFormatMessage(messageDescriptor) {
   return messageDescriptor.defaultMessage || '';
 };
 
-var spy = jest.spyOn(actions, 'changePanelType').mockImplementation(function () {
-  return jest.fn();
-});
+var changePanelTypespy = jest.spyOn(actions, 'changePanelType');
 describe('getToolbarItems', function () {
   var providerFactory = new ProviderFactory();
   providerFactory.setProvider('emojiProvider', Promise.resolve(getTestEmojiResource()));
+  var panelPreset = new Preset().add([panelPlugin, {
+    UNSAFE_allowCustomPanel: true
+  }]);
+  var itemsWithCustomPanelEnabled = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
   afterEach(function () {
     jest.clearAllMocks();
   });
@@ -27,15 +32,14 @@ describe('getToolbarItems', function () {
     expect(items).toHaveLength(7);
   });
   describe('if isCustomPanelEnabled is true', function () {
-    var items = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
-    it('should return 10 items', function () {
-      expect(items).toHaveLength(10);
+    it('should return 11 items', function () {
+      expect(itemsWithCustomPanelEnabled).toHaveLength(11);
     });
     it('should contain emoji and color picker button', function () {
-      var emojiButton = items.find(function (item) {
+      var emojiButton = itemsWithCustomPanelEnabled.find(function (item) {
         return item.type === 'select' && item.selectType === 'emoji';
       });
-      var colorButton = items.find(function (item) {
+      var colorButton = itemsWithCustomPanelEnabled.find(function (item) {
         return item.type === 'select' && item.selectType === 'color';
       });
       expect(emojiButton).not.toBeUndefined();
@@ -44,9 +48,6 @@ describe('getToolbarItems', function () {
   });
   describe('custom panel toolbar items', function () {
     var createEditor = createProsemirrorEditorFactory();
-    var panelPreset = new Preset().add([panelPlugin, {
-      UNSAFE_allowCustomPanel: true
-    }]);
 
     var _createEditor = createEditor({
       doc: doc(panel({
@@ -57,18 +58,17 @@ describe('getToolbarItems', function () {
     }),
         editorView = _createEditor.editorView;
 
-    var items = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
     it("should call changePanelType when clicked on emoji picker\n          with changed emoji", function () {
-      var emojiPickerConfig = items.find(function (item) {
+      var emojiPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
         return item.type === 'select' && item.selectType === 'emoji';
       });
       emojiPickerConfig.onChange(':smiley:')(editorView.state);
-      expect(spy).toBeCalledWith(PanelType.CUSTOM, {
+      expect(changePanelTypespy).toBeCalledWith(PanelType.CUSTOM, {
         emoji: ':smiley:'
       }, true);
     });
     it("should call changePanelType when clicked on color picker\n          with changed color", function () {
-      var colorPickerConfig = items.find(function (item) {
+      var colorPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
         return item.type === 'select' && item.selectType === 'color';
       });
       colorPickerConfig.onChange({
@@ -76,9 +76,141 @@ describe('getToolbarItems', function () {
         value: '#ABF5D1',
         border: DEFAULT_BORDER_COLOR
       })(editorView.state);
-      expect(spy).toBeCalledWith(PanelType.CUSTOM, {
+      expect(changePanelTypespy).toBeCalledWith(PanelType.CUSTOM, {
         color: '#ABF5D1'
       }, true);
     });
+    it("should call changePanelType when clicked on hide emoji", function () {
+      var hideEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+      });
+      hideEmojiButton.onClick(editorView.state);
+      expect(changePanelTypespy).toBeCalledWith(PanelType.CUSTOM, {
+        emoji: undefined
+      }, true);
+    });
+    it("should not call changePanelType when clicked on hide emoji when no emoji in panel", function () {
+      var _createEditor2 = createEditor({
+        doc: doc(panel({
+          panelType: 'custom'
+        })(p('{<>}'))),
+        preset: panelPreset,
+        providerFactory: providerFactory
+      }),
+          editorView = _createEditor2.editorView;
+
+      var toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM);
+      var hideEmojiButton = toolbarItems.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+      });
+      changePanelTypespy.mockClear();
+      hideEmojiButton.onClick(editorView.state);
+      expect(changePanelTypespy).not.toBeCalled();
+    });
+  });
+  describe('analytics for custom panels', function () {
+    var createEditor = createProsemirrorEditorFactory();
+    var createAnalyticsEvent = jest.fn(function () {
+      return {
+        fire: function fire() {}
+      };
+    });
+    var editorView;
+    beforeEach(function () {
+      var _createEditor3 = createEditor({
+        doc: doc(panel({
+          panelType: 'info'
+        })(p('{<>}'))),
+        preset: panelPreset.add([analyticsPlugin, {
+          createAnalyticsEvent: createAnalyticsEvent
+        }]),
+        providerFactory: providerFactory,
+        pluginKey: emojiPluginKey
+      });
+
+      editorView = _createEditor3.editorView;
+    });
+    it('Should trigger analytics when background color is changed', function () {
+      var colorPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'select' && item.selectType === 'color';
+      });
+      colorPickerConfig.onChange({
+        label: 'Mintie',
+        value: '#ABF5D1',
+        border: DEFAULT_BORDER_COLOR
+      })(editorView.state, editorView.dispatch);
+      var payload = {
+        action: ACTION.CHANGED_BACKGROUND_COLOR,
+        actionSubject: ACTION_SUBJECT.PANEL,
+        actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+        attributes: expect.objectContaining({
+          newColor: '#ABF5D1',
+          previousColor: '#DEEBFF'
+        }),
+        eventType: EVENT_TYPE.TRACK
+      };
+      expect(createAnalyticsEvent).toHaveBeenCalledWith(payload);
+    });
+    it('Should trigger analytics when Icon is changed', function () {
+      var emojiPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'select' && item.selectType === 'emoji';
+      });
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      var payload = {
+        action: ACTION.CHANGED_ICON,
+        actionSubject: ACTION_SUBJECT.PANEL,
+        actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+        attributes: expect.objectContaining({
+          newIcon: ':smiley:',
+          previousIcon: ''
+        }),
+        eventType: EVENT_TYPE.TRACK
+      };
+      expect(createAnalyticsEvent).toHaveBeenCalledWith(payload);
+    });
+    it('Should trigger analytics when Icon is removed', function () {
+      var hideEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+      });
+      var emojiPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'select' && item.selectType === 'emoji';
+      });
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      hideEmojiButton.onClick(editorView.state, editorView.dispatch);
+      var payload = {
+        action: ACTION.REMOVE_ICON,
+        actionSubject: ACTION_SUBJECT.PANEL,
+        actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+        attributes: expect.objectContaining({
+          icon: ':smiley:'
+        }),
+        eventType: EVENT_TYPE.TRACK
+      };
+      expect(createAnalyticsEvent).nthCalledWith(4, payload);
+    });
+    it('Should not fire analytics when the same background color is selected', function () {
+      var colorPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'select' && item.selectType === 'color';
+      });
+      colorPickerConfig.onChange({
+        label: 'Mintie',
+        value: '#ABF5D1',
+        border: DEFAULT_BORDER_COLOR
+      })(editorView.state, editorView.dispatch);
+      colorPickerConfig.onChange({
+        label: 'Mintie',
+        value: '#ABF5D1',
+        border: DEFAULT_BORDER_COLOR
+      })(editorView.state, editorView.dispatch);
+      expect(createAnalyticsEvent).toHaveBeenCalledTimes(3);
+    });
+    it('Should not fire analtyics when same emoji is selected', function () {
+      var emojiPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'select' && item.selectType === 'emoji';
+      });
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      expect(createAnalyticsEvent).toHaveBeenCalledTimes(3);
+    });
   });
 });

package/dist/esm/plugins/paste/handlers.js

@@ -72,8 +72,8 @@ export function handlePasteIntoTaskAndDecision(slice) {
 
     if (selection instanceof TextSelection && Array.isArray(selectionMarks) && selectionMarks.length > 0 && hasOnlyNodesOfType(paragraph, text, emoji, mention, hardBreak)(slice) && (!codeMark.isInSet(selectionMarks) || textFormattingState.codeActive) // for codeMarks let's make sure mark is active
     ) {
-        filters.push(applyTextMarksToSlice(schema, selection.$head.marks()));
-      }
+      filters.push(applyTextMarksToSlice(schema, selection.$head.marks()));
+    }
 
     var transformedSlice = compose.apply(null, filters)(slice);
     var tr = closeHistory(state.tr).replaceSelection(transformedSlice).scrollIntoView();

package/dist/esm/plugins/paste/pm-plugins/analytics.js

@@ -164,7 +164,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
       pasteSize: text.length,
       type: pasteContext.type,
       content: PasteContents.text,
-      source: source
+      source: source,
+      hyperlinkPasteOnText: false
     });
   }
 
@@ -192,7 +193,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     type: pasteContext.type,
     pasteSize: pasteSize,
     content: content,
-    source: source
+    source: source,
+    hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText
   }, linkDomains);
 } // TODO: ED-6612 We should not dispatch only analytics, it's preferred to wrap each command with his own analytics.
 // However, handlers like handleMacroAutoConvert dispatch multiple time,
@@ -255,7 +257,8 @@ export var handleSelectedTableWithAnalytics = function handleSelectedTableWithAn
 };
 export var handlePasteLinkOnSelectedTextWithAnalytics = function handlePasteLinkOnSelectedTextWithAnalytics(view, event, slice, type) {
   return pipe(handlePasteLinkOnSelectedText, pasteCommandWithAnalytics(view, event, slice, {
-    type: type
+    type: type,
+    hyperlinkPasteOnText: true
   }))(slice);
 };
 export var createPasteMeasurePayload = function createPasteMeasurePayload(view, duration, content) {

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

@@ -5,6 +5,7 @@ import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
 import { placeHolderClassName } from './styles';
 export var pluginKey = new PluginKey('placeholderPlugin');
 import { focusStateKey } from '../base/pm-plugins/focus-handler';
+import { isTypeAheadOpen } from '../type-ahead/utils';
 
 function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
@@ -47,6 +48,10 @@ var emptyPlaceholder = {
 function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
   var isEditorFocused = focusStateKey.getState(editorState);
 
+  if (isTypeAheadOpen(editorState)) {
+    return emptyPlaceholder;
+  }
+
   if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
     return setPlaceHolderState(defaultPlaceholderText);
   }

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

@@ -0,0 +1,20 @@
+import { pluginKey as quickInsertPluginKey } from './plugin-key';
+import { searchQuickInsertItems } from './search';
+
+var getItems = function getItems(editorView) {
+  return function (query, options) {
+    var pluginState = quickInsertPluginKey.getState(editorView.state);
+
+    if (!pluginState) {
+      return [];
+    }
+
+    return searchQuickInsertItems(pluginState, options)(query);
+  };
+};
+
+export var createQuickInsertTools = function createQuickInsertTools(editorView) {
+  return {
+    getItems: getItems(editorView)
+  };
+};