@atlaskit/editor-plugin-panel 0.1.0

package/dist/cjs/toolbar.js

@@ -0,0 +1,293 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelIconMap = exports.getToolbarItems = exports.getToolbarConfig = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+var _panel = require("@atlaskit/editor-common/panel");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/error"));
+var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/info"));
+var _note = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/note"));
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _removeEmoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove-emoji"));
+var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _actions = require("./actions");
+var _message = require("./message");
+var _utils2 = require("./utils");
+var _panelIconMap;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var panelIconMap = exports.panelIconMap = (_panelIconMap = {}, (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.INFO, {
+  shortName: ':info:',
+  id: 'atlassian-info'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.NOTE, {
+  shortName: ':note:',
+  id: 'atlassian-note'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.WARNING, {
+  shortName: ':warning:',
+  id: 'atlassian-warning'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.ERROR, {
+  shortName: ':cross_mark:',
+  id: 'atlassian-cross_mark'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.SUCCESS, {
+  shortName: ':check_mark:',
+  id: 'atlassian-check_mark'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.TIP, {
+  shortName: ':tip:',
+  id: 'atlassian-tip'
+}), _panelIconMap);
+var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) {
+  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
+  var items = [{
+    id: 'editor.panel.info',
+    type: 'button',
+    icon: _info.default,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.INFO),
+    selected: activePanelType === _adfSchema.PanelType.INFO,
+    title: formatMessage(_message.messages.info),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.note',
+    type: 'button',
+    icon: _note.default,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.NOTE),
+    selected: activePanelType === _adfSchema.PanelType.NOTE,
+    title: formatMessage(_message.messages.note),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.success',
+    type: 'button',
+    icon: _success.default,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.SUCCESS),
+    selected: activePanelType === _adfSchema.PanelType.SUCCESS,
+    title: formatMessage(_message.messages.success),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.warning',
+    type: 'button',
+    icon: _warning.default,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.WARNING),
+    selected: activePanelType === _adfSchema.PanelType.WARNING,
+    title: formatMessage(_message.messages.warning),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.error',
+    type: 'button',
+    icon: _error.default,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.ERROR),
+    selected: activePanelType === _adfSchema.PanelType.ERROR,
+    title: formatMessage(_message.messages.error),
+    tabIndex: null
+  }];
+  if (isCustomPanelEnabled) {
+    var changeColor = function changeColor(color) {
+      return function (state, dispatch) {
+        var panelNode = (0, _utils2.findPanel)(state);
+        if (panelNode === undefined) {
+          return false;
+        }
+        var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(panelNode.node.attrs.panelType);
+        var emojiInfo = panelNode.node.attrs.panelType;
+        var panelEmoji = panelIconMap[emojiInfo];
+        var previousEmoji = panelEmoji ? {
+          emoji: panelEmoji.shortName,
+          emojiId: panelEmoji.id
+        } : {};
+        if (previousColor === color) {
+          (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, _objectSpread({
+            color: color
+          }, previousEmoji), isCustomPanelEnabled)(state, dispatch);
+          return false;
+        }
+        var payload = {
+          action: _analytics.ACTION.CHANGED_BACKGROUND_COLOR,
+          actionSubject: _analytics.ACTION_SUBJECT.PANEL,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newColor: color,
+            previousColor: previousColor
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        };
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, _objectSpread({
+          color: color
+        }, previousEmoji), isCustomPanelEnabled))(state, dispatch);
+        return false;
+      };
+    };
+    var changeEmoji = function changeEmoji(emoji) {
+      return function (state, dispatch) {
+        var panelNode = (0, _utils2.findPanel)(state);
+        if (panelNode === undefined) {
+          return false;
+        }
+        var previousIcon = panelNode.node.attrs.panelIcon || '';
+        if (previousIcon === emoji.shortName) {
+          (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
+            emoji: emoji.shortName,
+            emojiId: emoji.id,
+            emojiText: emoji.fallback
+          }, true)(state, dispatch);
+          return false;
+        }
+        var payload = {
+          action: _analytics.ACTION.CHANGED_ICON,
+          actionSubject: _analytics.ACTION_SUBJECT.PANEL,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newIcon: emoji.shortName,
+            previousIcon: previousIcon
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        };
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
+          emoji: emoji.shortName,
+          emojiId: emoji.id,
+          emojiText: emoji.fallback
+        }, true))(state, dispatch);
+        return false;
+      };
+    };
+    var removeEmoji = function removeEmoji() {
+      return function (state, dispatch) {
+        var panelNode = (0, _utils2.findPanel)(state);
+        if (activePanelType === _adfSchema.PanelType.CUSTOM && !activePanelIcon) {
+          return false;
+        }
+        if (panelNode === undefined) {
+          return false;
+        }
+        var payload = {
+          action: _analytics.ACTION.REMOVE_ICON,
+          actionSubject: _analytics.ACTION_SUBJECT.PANEL,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            icon: panelNode.node.attrs.panelIcon
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        };
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
+          emoji: undefined,
+          emojiId: undefined,
+          emojiText: undefined
+        }, isCustomPanelEnabled))(state, dispatch);
+        return false;
+      };
+    };
+    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _panel.getPanelTypeBackgroundNoTokens)(_adfSchema.PanelType.INFO) : (0, _panel.getPanelTypeBackgroundNoTokens)(activePanelType);
+    var defaultPalette = _uiColor.panelBackgroundPalette.find(function (item) {
+      return item.value === panelColor;
+    }) || {
+      label: 'Custom',
+      value: panelColor,
+      border: _uiColor.DEFAULT_BORDER_COLOR
+    };
+    if (isCustomPanelEditable) {
+      var colorPicker = {
+        id: 'editor.panel.colorPicker',
+        title: formatMessage(_message.messages.backgroundColor),
+        type: 'select',
+        selectType: 'color',
+        defaultValue: defaultPalette,
+        options: _uiColor.panelBackgroundPalette,
+        onChange: function onChange(option) {
+          return changeColor(option.value);
+        }
+      };
+      var emojiPicker = {
+        id: 'editor.panel.emojiPicker',
+        title: formatMessage(_message.messages.emoji),
+        type: 'select',
+        selectType: 'emoji',
+        options: [],
+        selected: activePanelType === _adfSchema.PanelType.CUSTOM && !!activePanelIcon,
+        onChange: function onChange(emoji) {
+          return changeEmoji(emoji);
+        }
+      };
+      var removeEmojiButton = {
+        id: 'editor.panel.removeEmoji',
+        type: 'button',
+        icon: _removeEmoji.default,
+        onClick: removeEmoji(),
+        title: formatMessage(_messages.default.removeEmoji),
+        disabled: activePanelIcon ? false : true
+      };
+      items.push(emojiPicker, removeEmojiButton, {
+        type: 'separator'
+      }, colorPicker);
+    }
+  }
+  if (state) {
+    items.push({
+      type: 'copy-button',
+      items: [{
+        type: 'separator'
+      }, {
+        state: state,
+        formatMessage: formatMessage,
+        nodeType: panelNodeType
+      }]
+    });
+  }
+  items.push({
+    type: 'separator'
+  }, {
+    id: 'editor.panel.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: _remove.default,
+    onClick: (0, _actions.removePanel)(editorAnalyticsAPI),
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
+    title: formatMessage(_messages.default.remove),
+    tabIndex: null
+  });
+  return items;
+};
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var providerFactory = arguments.length > 3 ? arguments[3] : undefined;
+  var api = arguments.length > 4 ? arguments[4] : undefined;
+  var formatMessage = intl.formatMessage;
+  var panelObject = (0, _utils2.findPanel)(state);
+  if (panelObject) {
+    var _api$analytics;
+    var nodeType = state.schema.nodes.panel;
+    var _panelObject$node$att = panelObject.node.attrs,
+      panelType = _panelObject$node$att.panelType,
+      panelColor = _panelObject$node$att.panelColor,
+      panelIcon = _panelObject$node$att.panelIcon;
+    var isStandardPanel = function isStandardPanel(panelType) {
+      return panelType !== _adfSchema.PanelType.CUSTOM ? panelType : undefined;
+    };
+
+    // force toolbar to be turned on
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    var getDomRef = function getDomRef(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var element = (0, _utils.findDomRefAtPos)(panelObject.pos, domAtPos);
+      return element;
+    };
+    return {
+      title: 'Panel floating controls',
+      getDomRef: getDomRef,
+      nodeType: nodeType,
+      items: items,
+      scrollable: true
+    };
+  }
+  return;
+};

package/dist/cjs/types.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('panelPlugin');

package/dist/cjs/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelAttrsToDom = exports.findPanel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _panel = require("@atlaskit/editor-common/panel");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var findPanel = exports.findPanel = function findPanel(state, selection) {
+  var panel = state.schema.nodes.panel;
+  return (0, _utils.findSelectedNodeOfType)(panel)(selection || state.selection) || (0, _utils.findParentNodeOfType)(panel)(selection || state.selection);
+};
+var panelAttrsToDom = exports.panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
+  var panelColor = attrs.panelColor,
+    panelType = attrs.panelType,
+    panelIcon = attrs.panelIcon,
+    panelIconId = attrs.panelIconId,
+    panelIconText = attrs.panelIconText;
+  var isCustomPanel = panelType === _adfSchema.PanelType.CUSTOM && allowCustomPanel;
+  var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
+  var tokenColor = panelColor && (0, _editorPalette.hexToEditorBackgroundPaletteColor)(panelColor);
+  var panelBackgroundColor = tokenColor || panelColor;
+  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;')].join('');
+  var panelAttrs = {
+    class: _panel.PanelSharedCssClassName.prefix,
+    'data-panel-type': panelType || _adfSchema.PanelType.INFO,
+    style: style
+  };
+  if (panelColor && isCustomPanel) {
+    panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
+      'data-panel-color': panelColor,
+      'data-panel-icon-id': panelIconId,
+      'data-panel-icon-text': panelIconText
+    });
+  }
+  var iconDiv = ['div', {
+    class: _panel.PanelSharedCssClassName.icon
+  }];
+  var contentDiv = ['div', {
+    class: _panel.PanelSharedCssClassName.content
+  }, 0];
+  if (hasIcon) {
+    return ['div', panelAttrs, iconDiv, contentDiv];
+  } else {
+    return ['div', panelAttrs, contentDiv];
+  }
+};

package/dist/es2019/actions.js

@@ -0,0 +1,116 @@
+import { PanelType } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
+import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findPanel } from './utils';
+export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    schema: {
+      nodes
+    },
+    tr
+  } = state;
+  const payload = {
+    action: ACTION.DELETED,
+    actionSubject: ACTION_SUBJECT.PANEL,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+  let deleteTr = tr;
+  if (findSelectedNodeOfType(nodes.panel)(tr.selection)) {
+    deleteTr = removeSelectedNode(tr);
+  } else if (findParentNodeOfType(nodes.panel)(tr.selection)) {
+    deleteTr = removeParentNodeOfType(nodes.panel)(tr);
+  }
+  if (!deleteTr) {
+    return false;
+  }
+  if (dispatch) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(deleteTr);
+    dispatch(deleteTr);
+  }
+  return true;
+};
+export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions = {}, allowCustomPanel = false) => (state, dispatch) => {
+  const {
+    schema: {
+      nodes
+    },
+    tr
+  } = state;
+  const panelNode = findPanel(state);
+  if (panelNode === undefined) {
+    return false;
+  }
+  let newType = panelType;
+  let previousType = panelNode.node.attrs.panelType;
+  let newTr;
+  if (allowCustomPanel) {
+    let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
+    let previousIcon = panelNode.node.attrs.panelIcon;
+    let previousIconId = panelNode.node.attrs.panelIconId;
+    let previousIconText = panelNode.node.attrs.panelIconText;
+    let newPanelOptions = {
+      color: previousColor,
+      emoji: previousIcon,
+      emojiId: previousIconId,
+      emojiText: previousIconText,
+      ...panelOptions
+    };
+    newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+      panelIcon: newPanelOptions.emoji,
+      panelIconId: newPanelOptions.emojiId,
+      panelIconText: newPanelOptions.emojiText,
+      panelColor: newPanelOptions.color,
+      panelType
+    });
+  } else {
+    newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+      panelType
+    });
+  }
+  const payload = {
+    action: ACTION.CHANGED_TYPE,
+    actionSubject: ACTION_SUBJECT.PANEL,
+    attributes: {
+      newType,
+      previousType
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+
+  // Select the panel if it was previously selected
+  const newTrWithSelection = state.selection instanceof NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
+  newTrWithSelection.setMeta('scrollIntoView', false);
+  if (dispatch) {
+    dispatch(newTrWithSelection);
+  }
+  return true;
+};
+export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
+  return withAnalytics(analyticsAPI, {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+    attributes: {
+      inputMethod: inputMethod,
+      panelType: PanelType.INFO // only info panels can be inserted via this action
+    },
+
+    eventType: EVENT_TYPE.TRACK
+  })(function (state, dispatch) {
+    const {
+      nodes
+    } = state.schema;
+    if (nodes.panel && nodes.paragraph) {
+      return wrapSelectionIn(nodes.panel)(state, dispatch);
+    }
+    return false;
+  });
+}

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default as panelPlugin } from './plugin';

package/dist/es2019/message.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  info: {
+    id: 'fabric.editor.info',
+    defaultMessage: 'Info',
+    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
+  },
+  note: {
+    id: 'fabric.editor.note',
+    defaultMessage: 'Note',
+    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
+  },
+  success: {
+    id: 'fabric.editor.success',
+    defaultMessage: 'Success',
+    description: 'Panels provide a way to highlight text. The success panel has a green background.'
+  },
+  warning: {
+    id: 'fabric.editor.warning',
+    defaultMessage: 'Warning',
+    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
+  },
+  error: {
+    id: 'fabric.editor.error',
+    defaultMessage: 'Error',
+    description: 'Panels provide a way to highlight text. The error panel has a red background.'
+  },
+  emoji: {
+    id: 'fabric.editor.panel.emoji',
+    defaultMessage: 'Add emoji',
+    description: 'Select the panel icon'
+  },
+  backgroundColor: {
+    id: 'fabric.editor.panel.backgroundColor',
+    defaultMessage: 'Background color',
+    description: 'Select the panel background color.'
+  }
+});

package/dist/es2019/nodeviews/panel.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PanelType } from '@atlaskit/adf-schema';
+import { Emoji } from '@atlaskit/editor-common/emoji';
+import { PanelErrorIcon, PanelInfoIcon, PanelNoteIcon, PanelSuccessIcon, PanelWarningIcon } from '@atlaskit/editor-common/icons';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import TipIcon from '@atlaskit/icon/glyph/editor/hint';
+import { panelAttrsToDom } from '../utils';
+export const panelIcons = {
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
+  tip: TipIcon,
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
+  custom: PanelInfoIcon
+};
+export const PanelIcon = props => {
+  const {
+    allowCustomPanel,
+    providerFactory,
+    panelAttributes: {
+      panelType,
+      panelIcon,
+      panelIconId,
+      panelIconText
+    }
+  } = props;
+  if (allowCustomPanel && panelIcon && panelType === PanelType.CUSTOM) {
+    return /*#__PURE__*/React.createElement(Emoji, {
+      providers: providerFactory,
+      shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
+      showTooltip: false,
+      allowTextFallback: false,
+      fitToHeight: akEditorCustomIconSize
+    });
+  }
+  const Icon = panelIcons[panelType];
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: `Panel ${panelType}`
+  });
+};
+class PanelNodeView {
+  constructor(node, view, getPos, pluginOptions, providerFactory) {
+    this.providerFactory = providerFactory;
+    this.pluginOptions = pluginOptions;
+    this.view = view;
+    this.node = node;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.allowCustomPanel || false));
+    this.getPos = getPos;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.icon = this.dom.querySelector(`.${PanelSharedCssClassName.icon}`);
+    if (!this.icon) {
+      return;
+    }
+    // set contentEditable as false to be able to select the custom panels with keyboard
+    this.icon.contentEditable = 'false';
+    ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
+      allowCustomPanel: pluginOptions.allowCustomPanel,
+      panelAttributes: node.attrs,
+      providerFactory: this.providerFactory
+    }), this.icon);
+  }
+  ignoreMutation(mutation) {
+    // ignore mutation if it caused by the icon.
+    const isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon;
+    // ignore mutation if it caused by the lazy load emoji inside icon.
+    const isInsideIcon = this.icon.contains(mutation.target);
+    return isIcon || isInsideIcon;
+  }
+}
+export const getPanelNodeView = (pluginOptions, providerFactory) => (node, view, getPos) => {
+  return new PanelNodeView(node, view, getPos, pluginOptions, providerFactory);
+};