@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/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';
 
-const insertPanelTypeWithAnalytics = (panelType, state, insert) => {
-  const tr = insert(insertPanelType(panelType, state));
+const insertPanelTypeWithAnalytics = (panelAttributes, state, insert) => {
+  const tr = insert(insertPanelType(panelAttributes, state));
 
   if (tr) {
     addAnalytics(state, tr, {
@@ -17,7 +19,7 @@ const insertPanelTypeWithAnalytics = (panelType, state, insert) => {
       actionSubjectId: ACTION_SUBJECT_ID.PANEL,
       attributes: {
         inputMethod: INPUT_METHOD.QUICK_INSERT,
-        panelType
+        panelType: panelAttributes.panelType
       },
       eventType: EVENT_TYPE.TRACK
     });
@@ -26,9 +28,7 @@ const insertPanelTypeWithAnalytics = (panelType, state, insert) => {
   return tr;
 };
 
-const insertPanelType = (panelType, state) => state.schema.nodes.panel.createChecked({
-  panelType
-}, state.schema.nodes.paragraph.createChecked());
+const insertPanelType = (panelAttributes, state) => state.schema.nodes.panel.createChecked(panelAttributes, state.schema.nodes.paragraph.createChecked());
 
 const panelPlugin = (options = {}) => ({
   name: 'panel',
@@ -58,64 +58,97 @@ const panelPlugin = (options = {}) => ({
   pluginsOptions: {
     quickInsert: ({
       formatMessage
-    }) => [{
-      id: 'infopanel',
-      title: formatMessage(messages.infoPanel),
-      keywords: ['panel'],
-      description: formatMessage(messages.infoPanelDescription),
-      priority: 800,
-      icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
-
-      action(insert, state) {
-        return insertPanelTypeWithAnalytics(PanelType.INFO, state, insert);
+    }) => {
+      let quickInsertOptions = [{
+        id: 'infopanel',
+        title: formatMessage(messages.infoPanel),
+        keywords: ['panel'],
+        description: formatMessage(messages.infoPanelDescription),
+        priority: 800,
+        icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
+
+        action(insert, state) {
+          return insertPanelTypeWithAnalytics({
+            panelType: PanelType.INFO
+          }, state, insert);
+        }
+
+      }, {
+        id: 'notepanel',
+        title: formatMessage(messages.notePanel),
+        description: formatMessage(messages.notePanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
+
+        action(insert, state) {
+          return insertPanelTypeWithAnalytics({
+            panelType: PanelType.NOTE
+          }, state, insert);
+        }
+
+      }, {
+        id: 'successpanel',
+        title: formatMessage(messages.successPanel),
+        description: formatMessage(messages.successPanelDescription),
+        keywords: ['tip'],
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
+
+        action(insert, state) {
+          return insertPanelTypeWithAnalytics({
+            panelType: PanelType.SUCCESS
+          }, state, insert);
+        }
+
+      }, {
+        id: 'warningpanel',
+        title: formatMessage(messages.warningPanel),
+        description: formatMessage(messages.warningPanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
+
+        action(insert, state) {
+          return insertPanelTypeWithAnalytics({
+            panelType: PanelType.WARNING
+          }, state, insert);
+        }
+
+      }, {
+        id: 'errorpanel',
+        title: formatMessage(messages.errorPanel),
+        description: formatMessage(messages.errorPanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
+
+        action(insert, state) {
+          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: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
+
+          action(insert, state) {
+            return insertPanelTypeWithAnalytics({
+              panelType: PanelType.CUSTOM,
+              panelIcon: ':rainbow:',
+              panelColor: T75
+            }, state, insert);
+          }
+
+        });
       }
 
-    }, {
-      id: 'notepanel',
-      title: formatMessage(messages.notePanel),
-      description: formatMessage(messages.notePanelDescription),
-      priority: 1000,
-      icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
-
-      action(insert, state) {
-        return insertPanelTypeWithAnalytics(PanelType.NOTE, state, insert);
-      }
-
-    }, {
-      id: 'successpanel',
-      title: formatMessage(messages.successPanel),
-      description: formatMessage(messages.successPanelDescription),
-      keywords: ['tip'],
-      priority: 1000,
-      icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
-
-      action(insert, state) {
-        return insertPanelTypeWithAnalytics(PanelType.SUCCESS, state, insert);
-      }
-
-    }, {
-      id: 'warningpanel',
-      title: formatMessage(messages.warningPanel),
-      description: formatMessage(messages.warningPanelDescription),
-      priority: 1000,
-      icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
-
-      action(insert, state) {
-        return insertPanelTypeWithAnalytics(PanelType.WARNING, state, insert);
-      }
-
-    }, {
-      id: 'errorpanel',
-      title: formatMessage(messages.errorPanel),
-      description: formatMessage(messages.errorPanelDescription),
-      priority: 1000,
-      icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
-
-      action(insert, state) {
-        return insertPanelTypeWithAnalytics(PanelType.ERROR, state, insert);
-      }
-
-    }],
+      return quickInsertOptions;
+    },
     floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory)
   }
 });

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

@@ -11,6 +11,7 @@ import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common';
 import { Emoji } from '@atlaskit/editor-common';
 import { panelAttrsToDom } from '../utils';
+const fitToHeight = 20;
 export const panelIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -36,7 +37,7 @@ export const PanelIcon = props => {
       shortName: panelIcon,
       showTooltip: false,
       allowTextFallback: false,
-      fitToHeight: 16
+      fitToHeight: fitToHeight
     });
   }
 
@@ -72,6 +73,11 @@ class PanelNodeView {
     }), this.icon);
   }
 
+  ignoreMutation(mutation) {
+    // ignore mutation if it caused by the icon.
+    return mutation.target === this.icon;
+  }
+
 }
 
 export const getPanelNodeView = (pluginOptions, providerFactory) => (node, view, getPos) => {

package/dist/es2019/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 const messages = defineMessages({
   info: {
     id: 'fabric.editor.info',
@@ -42,7 +44,7 @@ export const messages = defineMessages({
   },
   emoji: {
     id: 'fabric.editor.panel.emoji',
-    defaultMessage: 'Add icon',
+    defaultMessage: 'Add emoji',
     description: 'Select the panel icon'
   },
   backgroundColor: {
@@ -91,16 +93,92 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
 
   if (isCustomPanelEnabled) {
     const changeColor = color => (state, dispatch) => {
-      changePanelType(PanelType.CUSTOM, {
+      const panelNode = findPanel(state);
+
+      if (panelNode === undefined) {
+        return false;
+      }
+
+      let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+
+      if (previousColor === color) {
+        changePanelType(PanelType.CUSTOM, {
+          color
+        }, isCustomPanelEnabled)(state, dispatch);
+        return false;
+      }
+
+      const 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
-      }, true)(state, dispatch);
+      }, isCustomPanelEnabled))(state, dispatch);
       return false;
     };
 
     const changeEmoji = emoji => (state, dispatch) => {
-      changePanelType(PanelType.CUSTOM, {
+      const panelNode = findPanel(state);
+
+      if (panelNode === undefined) {
+        return false;
+      }
+
+      let previousIcon = panelNode.node.attrs.panelIcon || '';
+
+      if (previousIcon === emoji) {
+        changePanelType(PanelType.CUSTOM, {
+          emoji
+        }, true)(state, dispatch);
+        return false;
+      }
+
+      const 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
-      }, true)(state, dispatch);
+      }, true))(state, dispatch);
+      return false;
+    };
+
+    const removeEmoji = () => (state, dispatch) => {
+      const panelNode = findPanel(state);
+
+      if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
+        return false;
+      }
+
+      if (panelNode === undefined) {
+        return false;
+      }
+
+      const 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;
     };
 
@@ -125,10 +203,16 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       type: 'select',
       selectType: 'emoji',
       options: [],
-      selected: activePanelType === PanelType.CUSTOM,
+      selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
       onChange: emojiShortName => changeEmoji(emojiShortName)
     };
     items.push(emojiPicker, {
+      id: 'editor.panel.hideEmoji',
+      type: 'button',
+      icon: HideEmojiIcon,
+      onClick: removeEmoji(),
+      title: formatMessage(commonMessages.hideEmoji)
+    }, {
       type: 'separator'
     }, colorPicker);
   }

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

@@ -8,13 +8,20 @@ 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';
 
 const dummyFormatMessage = messageDescriptor => messageDescriptor.defaultMessage || '';
 
-const spy = jest.spyOn(actions, 'changePanelType').mockImplementation(() => jest.fn());
+const changePanelTypespy = jest.spyOn(actions, 'changePanelType');
 describe('getToolbarItems', () => {
   const providerFactory = new ProviderFactory();
   providerFactory.setProvider('emojiProvider', Promise.resolve(getTestEmojiResource()));
+  const panelPreset = new Preset().add([panelPlugin, {
+    UNSAFE_allowCustomPanel: true
+  }]);
+  const itemsWithCustomPanelEnabled = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -23,22 +30,18 @@ describe('getToolbarItems', () => {
     expect(items).toHaveLength(7);
   });
   describe('if isCustomPanelEnabled is true', () => {
-    const items = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
-    it('should return 10 items', () => {
-      expect(items).toHaveLength(10);
+    it('should return 11 items', () => {
+      expect(itemsWithCustomPanelEnabled).toHaveLength(11);
     });
     it('should contain emoji and color picker button', () => {
-      const emojiButton = items.find(item => item.type === 'select' && item.selectType === 'emoji');
-      const colorButton = items.find(item => item.type === 'select' && item.selectType === 'color');
+      const emojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'emoji');
+      const colorButton = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'color');
       expect(emojiButton).not.toBeUndefined();
       expect(colorButton).not.toBeUndefined();
     });
   });
   describe('custom panel toolbar items', () => {
     const createEditor = createProsemirrorEditorFactory();
-    const panelPreset = new Preset().add([panelPlugin, {
-      UNSAFE_allowCustomPanel: true
-    }]);
     const {
       editorView
     } = createEditor({
@@ -48,26 +51,140 @@ describe('getToolbarItems', () => {
       preset: panelPreset,
       providerFactory
     });
-    const items = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.INFO);
     it(`should call changePanelType when clicked on emoji picker
           with changed emoji`, () => {
-      const emojiPickerConfig = items.find(item => item.type === 'select' && item.selectType === 'emoji');
+      const emojiPickerConfig = itemsWithCustomPanelEnabled.find(item => 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
           with changed color`, () => {
-      const colorPickerConfig = items.find(item => item.type === 'select' && item.selectType === 'color');
+      const colorPickerConfig = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'color');
       colorPickerConfig.onChange({
         label: 'Mintie',
         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`, () => {
+      const hideEmojiButton = itemsWithCustomPanelEnabled.find(item => 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`, () => {
+      const {
+        editorView
+      } = createEditor({
+        doc: doc(panel({
+          panelType: 'custom'
+        })(p('{<>}'))),
+        preset: panelPreset,
+        providerFactory
+      });
+      const toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM);
+      const hideEmojiButton = toolbarItems.find(item => item.type === 'button' && item.id === 'editor.panel.hideEmoji');
+      changePanelTypespy.mockClear();
+      hideEmojiButton.onClick(editorView.state);
+      expect(changePanelTypespy).not.toBeCalled();
+    });
+  });
+  describe('analytics for custom panels', () => {
+    const createEditor = createProsemirrorEditorFactory();
+    let createAnalyticsEvent = jest.fn(() => ({
+      fire() {}
+
+    }));
+    let editorView;
+    beforeEach(() => {
+      ({
+        editorView
+      } = createEditor({
+        doc: doc(panel({
+          panelType: 'info'
+        })(p('{<>}'))),
+        preset: panelPreset.add([analyticsPlugin, {
+          createAnalyticsEvent
+        }]),
+        providerFactory,
+        pluginKey: emojiPluginKey
+      }));
+    });
+    it('Should trigger analytics when background color is changed', () => {
+      const colorPickerConfig = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'color');
+      colorPickerConfig.onChange({
+        label: 'Mintie',
+        value: '#ABF5D1',
+        border: DEFAULT_BORDER_COLOR
+      })(editorView.state, editorView.dispatch);
+      const 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', () => {
+      const emojiPickerConfig = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'emoji');
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      const 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', () => {
+      const hideEmojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'button' && item.id === 'editor.panel.hideEmoji');
+      const emojiPickerConfig = itemsWithCustomPanelEnabled.find(item => item.type === 'select' && item.selectType === 'emoji');
+      emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
+      hideEmojiButton.onClick(editorView.state, editorView.dispatch);
+      const 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', () => {
+      const colorPickerConfig = itemsWithCustomPanelEnabled.find(item => 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', () => {
+      const emojiPickerConfig = itemsWithCustomPanelEnabled.find(item => 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/es2019/plugins/paste/handlers.js

@@ -65,8 +65,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()));
+    }
 
     const transformedSlice = compose.apply(null, filters)(slice);
     const tr = closeHistory(state.tr).replaceSelection(transformedSlice).scrollIntoView();

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

@@ -172,7 +172,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
       pasteSize: text.length,
       type: pasteContext.type,
       content: PasteContents.text,
-      source
+      source,
+      hyperlinkPasteOnText: false
     });
   }
 
@@ -198,7 +199,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     type: pasteContext.type,
     pasteSize,
     content,
-    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,
@@ -242,7 +244,8 @@ export const handleSelectedTableWithAnalytics = (view, event, slice) => pipe(han
   type: PasteTypes.richText
 }))(slice);
 export const handlePasteLinkOnSelectedTextWithAnalytics = (view, event, slice, type) => pipe(handlePasteLinkOnSelectedText, pasteCommandWithAnalytics(view, event, slice, {
-  type
+  type,
+  hyperlinkPasteOnText: true
 }))(slice);
 export const createPasteMeasurePayload = (view, duration, content) => {
   const pasteIntoNode = getActionSubjectId(view);

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

@@ -5,6 +5,7 @@ import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
 import { placeHolderClassName } from './styles';
 export const 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);
@@ -46,6 +47,10 @@ const emptyPlaceholder = {
 function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
   const isEditorFocused = focusStateKey.getState(editorState);
 
+  if (isTypeAheadOpen(editorState)) {
+    return emptyPlaceholder;
+  }
+
   if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
     return setPlaceHolderState(defaultPlaceholderText);
   }

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

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

package/dist/es2019/plugins/quick-insert/assets/custom-panel.js

@@ -0,0 +1,45 @@
+import React from 'react';
+export default function IconCustomPanel() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    focusable: "false",
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "40",
+    height: "40",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 13C8 12.4477 8.44772 12 9 12H40V28H9C8.44772 28 8 27.5523 8 27V13Z",
+    fill: "#E6FCFF"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.9999 16.2222C15.5817 16.2222 12.2222 19.5818 12.2222 24H16.0093C16.0093 21.7962 17.7964 20.0093 19.9999 20.0093V16.2222Z",
+    fill: "#8767AC"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 23.9998H12.676C12.676 19.9578 15.9502 16.6809 19.9909 16.676V16C15.5767 16.0051 12 19.5847 12 23.9998Z",
+    fill: "#EB2027"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.6851 24H13.3517C13.3517 20.3262 16.3273 17.3478 19.9999 17.3429V16.6762C15.9593 16.6811 12.6851 19.958 12.6851 24Z",
+    fill: "#F19020"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.3518 24H14.0185C14.0185 20.6945 16.6956 18.0145 20 18.0096V17.3429C16.3274 17.3478 13.3518 20.3262 13.3518 24Z",
+    fill: "#FFCB4C"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.0184 24H14.6851C14.6851 21.0629 17.064 18.6811 20 18.6762V18.0096C16.6955 18.0144 14.0184 20.6944 14.0184 24Z",
+    fill: "#5C903F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.6851 24H15.3517C15.3517 21.4311 17.4322 19.348 19.9999 19.3431V18.6762C17.0639 18.6811 14.6851 21.0629 14.6851 24Z",
+    fill: "#226798"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "8",
+    height: "8",
+    fill: "white",
+    transform: "translate(12 16)"
+  }))));
+}