@atlaskit/editor-core 150.0.0 → 151.0.0

package/dist/esm/plugins/media/pm-plugins/main.js

@@ -18,14 +18,15 @@ import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { insertMediaGroupNode } from '../utils/media-files';
-import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { insertMediaGroupNode, insertMediaInlineNode, canInsertMediaInline } from '../utils/media-files';
+import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
 import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
 import { INPUT_METHOD } from '../../analytics/types';
 import { isImage } from '../utils/is-image';
+import { isInEmptyLine } from '../../../utils/document';
 export { stateKey } from './plugin-key';
 
 var createDropPlaceholder = function createDropPlaceholder(allowDropLine) {
@@ -73,7 +74,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
     _defineProperty(this, "removeOnCloseListener", function () {});
 
-    _defineProperty(this, "onPopupToogleCallback", function () {});
+    _defineProperty(this, "onPopupToggleCallback", function () {});
 
     _defineProperty(this, "pickers", []);
 
@@ -238,11 +239,12 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       var type = _ref3.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
+          mediaInline = _this$view$state$sche.mediaInline,
           mediaSingle = _this$view$state$sche.mediaSingle,
           media = _this$view$state$sche.media;
 
       if ((_this$mediaOptions = _this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
-        return type === mediaSingle || type === media;
+        return type === mediaSingle || type === media || type === mediaInline;
       }
 
       return type === mediaSingle;
@@ -253,6 +255,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
+      var _this$mediaOptions2;
+
+      var state = _this.view.state;
+
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
         contextId: _this.contextIdentifierProvider ? _this.contextIdentifierProvider.objectId : undefined
       });
@@ -274,8 +280,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
 
-      if (isMediaSingle(_this.view.state.schema, mediaStateWithContext.fileMimeType)) {
+      if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
         insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert);
+      } else if ((_this$mediaOptions2 = _this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline && !isInEmptyLine(state) && !isInsidePotentialEmptyParagraph(state) && canInsertMediaInline(state)) {
+        insertMediaInlineNode(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
         insertMediaGroupNode(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       } // do events when media state changes
@@ -328,7 +336,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "onPopupPickerClose", function () {
-      _this.onPopupToogleCallback(false);
+      _this.onPopupToggleCallback(false);
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", function () {
@@ -350,15 +358,15 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       _this.popupPicker.show();
 
-      _this.onPopupToogleCallback(true);
+      _this.onPopupToggleCallback(true);
     });
 
     _defineProperty(this, "setBrowseFn", function (browseFn) {
       _this.openMediaPickerBrowser = browseFn;
     });
 
-    _defineProperty(this, "onPopupToggle", function (onPopupToogleCallback) {
-      _this.onPopupToogleCallback = onPopupToogleCallback;
+    _defineProperty(this, "onPopupToggle", function (onPopupToggleCallback) {
+      _this.onPopupToggleCallback = onPopupToggleCallback;
     });
 
     _defineProperty(this, "waitForPendingTasks", function (timeout, lastTask) {
@@ -582,7 +590,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$mediaOptions2;
+      var _this$mediaOptions3;
 
       var selection = this.view.state.selection;
 
@@ -594,7 +602,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return;
       }
 
-      var position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+      var position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
       var node = findDomRefAtPos(position, domAtPos);
 
       if (node) {

package/dist/esm/plugins/media/toolbar/index.js

@@ -6,7 +6,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
+import { NodeSelection } from 'prosemirror-state';
+import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -25,7 +26,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } f
 import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia } from './utils';
+import { downloadMedia, removeMediaGroupNode } from './utils';
+import { Fragment } from 'prosemirror-model';
 
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -35,13 +37,42 @@ var remove = function remove(state, dispatch) {
   return true;
 };
 
-var removeMediaCard = function removeMediaCard(state, mediaPluginState) {
-  var getPos = function getPos() {
-    var mediaOffset = state.selection.$from.parentOffset + 1;
-    return mediaOffset;
-  };
+var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
+  var tr = removeMediaGroupNode(state);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch) {
+  var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaInline = _state$schema$nodes.mediaInline,
+      paragraph = _state$schema$nodes.paragraph;
+  var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  var mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  var space = state.schema.text(' ');
+  var content = Fragment.from([mediaInlineNode, space]);
+  var node = paragraph.createChecked({}, content);
+  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  var tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
   return true;
 };
 
@@ -53,9 +84,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     options: [{
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
-      onClick: function onClick() {
-        return true;
-      },
+      onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       title: intl.formatMessage(messages.displayThumbnail),
@@ -99,9 +128,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     onFocus: hoverDecoration(mediaGroup, true),
     onBlur: hoverDecoration(mediaGroup, false),
     title: intl.formatMessage(commonMessages.remove),
-    onClick: function onClick(state) {
-      return removeMediaCard(state, mediaPluginState);
-    },
+    onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
   return items;
@@ -206,10 +233,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
 export var floatingToolbar = function floatingToolbar(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _state$schema$nodes = state.schema.nodes,
-      media = _state$schema$nodes.media,
-      mediaSingle = _state$schema$nodes.mediaSingle,
-      mediaGroup = _state$schema$nodes.mediaGroup;
+  var _state$schema$nodes2 = state.schema.nodes,
+      media = _state$schema$nodes2.media,
+      mediaInline = _state$schema$nodes2.mediaInline,
+      mediaSingle = _state$schema$nodes2.mediaSingle,
+      mediaGroup = _state$schema$nodes2.mediaGroup;
   var altTextValidator = options.altTextValidator,
       allowLinking = options.allowLinking,
       allowAltTextOnImages = options.allowAltTextOnImages,
@@ -222,7 +250,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     return;
   }
 
-  var nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
   var baseToolbar = {
     title: 'Media floating controls',
     nodeType: nodeType,

package/dist/esm/plugins/media/toolbar/utils.js

@@ -1,6 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import { getMediaClient } from '@atlaskit/media-client';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
 
@@ -57,4 +58,17 @@ export var downloadMedia = /*#__PURE__*/function () {
   return function downloadMedia(_x) {
     return _ref.apply(this, arguments);
   };
-}();
+}();
+export var removeMediaGroupNode = function removeMediaGroupNode(state) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
+  var tr = state.tr; // If it is the last media group in filmstrip, remove the entire filmstrip
+
+  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
+    tr = removeParentNodeOfType(mediaGroup)(tr);
+  } else {
+    tr = removeSelectedNode(tr);
+  }
+
+  return tr;
+};

package/dist/esm/plugins/media/utils/media-files.js

@@ -1,10 +1,14 @@
 import { Fragment } from 'prosemirror-model';
 import { setNodeSelection, setTextSelection, insideTableCell, isInListItem, findFarthestParentNode, isInLayoutColumn } from '../../../utils';
 import { posOfPrecedingMediaGroup, posOfMediaGroupNearby, posOfParentMediaGroup, isSelectionNonMediaBlockNode, isInsidePotentialEmptyParagraph, copyOptionalAttrsFromMediaState } from './media-common';
-import { safeInsert, hasParentNode } from 'prosemirror-utils';
+import { canInsert, safeInsert, hasParentNode } from 'prosemirror-utils';
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '../../../utils/prosemirror/position';
 import { isSupportedInParent } from '../../../utils/nodes';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, addAnalytics } from '../../analytics';
+export var canInsertMediaInline = function canInsertMediaInline(state) {
+  var node = state.schema.nodes.mediaInline.create({});
+  return canInsert(state.selection.$to, Fragment.from(node));
+};
 
 var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaState, inputMethod) {
   var media = '';
@@ -27,6 +31,21 @@ var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaSt
     eventType: EVENT_TYPE.TRACK
   };
 };
+
+var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(mediaState, inputMethod) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: ACTION_SUBJECT_ID.MEDIA_INLINE,
+      inputMethod: inputMethod,
+      fileExtension: media
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -51,6 +70,46 @@ function shouldAppendParagraph(state, node) {
   var wasMediaNode = node && node.type === media;
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || isSelectionNonMediaBlockNode(state))) && !wasMediaNode;
 }
+/**
+ * Create a new media inline to insert the new media.
+ * @param view Editor view
+ * @param mediaState Media file to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+
+
+export var insertMediaInlineNode = function insertMediaInlineNode(view, mediaState, collection, inputMethod) {
+  var state = view.state,
+      dispatch = view.dispatch;
+  var schema = state.schema,
+      tr = state.tr;
+  var mediaInline = schema.nodes.mediaInline; // Do nothing if no media found
+
+  if (!mediaInline || !mediaState || collection === undefined) {
+    return false;
+  }
+
+  var id = mediaState.id;
+  var mediaInlineNode = mediaInline.create({
+    id: id,
+    collection: collection
+  });
+  var space = state.schema.text(' ');
+  var pos = state.selection.$to.pos;
+  var content = Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
+
+  var deleteRange = findDeleteRange(state);
+
+  if (!deleteRange) {
+    tr.insert(pos, content);
+  } else {
+    tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+  }
+
+  addAnalytics(state, tr, getInsertMediaInlineAnalytics(mediaState, inputMethod));
+  dispatch(tr);
+  return true;
+};
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.
@@ -59,7 +118,6 @@ function shouldAppendParagraph(state, node) {
  * @param collection Collection for the media to be added
  */
 
-
 export var insertMediaGroupNode = function insertMediaGroupNode(view, mediaStates, collection, inputMethod) {
   var state = view.state,
       dispatch = view.dispatch;

package/dist/esm/plugins/mentions/type-ahead/index.js

@@ -1,6 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -201,6 +207,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       HighlightComponent = _ref6.HighlightComponent;
   var sessionId = uuid();
   var firstQueryWithoutResults = null;
+  var subscriptionKeys = new Set();
   var typeAhead = {
     id: TypeAheadAvailableNodes.MENTION,
     trigger: '@',
@@ -247,9 +254,15 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
         var key = "loadingMentionsForTypeAhead_".concat(uuid());
 
         var mentionsSubscribeCallback = function mentionsSubscribeCallback(mentions) {
-          var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+          var resultQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
           var stats = arguments.length > 2 ? arguments[2] : undefined;
+
+          if (query !== resultQuery) {
+            return;
+          }
+
           mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
           var mentionItems = mentions.map(function (mention) {
             return memoizedToItem.call(mention);
           });
@@ -285,13 +298,14 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
           }
         };
 
+        subscriptionKeys.add(key);
         mentionProvider.subscribe(key, mentionsSubscribeCallback);
         mentionProvider.filter(query || '', _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
           sessionId: sessionId
         }));
       });
     },
-    onOpen: function onOpen(editorState) {
+    onOpen: function onOpen() {
       firstQueryWithoutResults = null;
     },
     selectItem: function selectItem(state, item, insert, _ref8) {
@@ -362,11 +376,33 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       return insert(Fragment.from([mentionNode, space]));
     },
     dismiss: function dismiss(_ref9) {
-      var query = _ref9.query,
+      var editorState = _ref9.editorState,
+          query = _ref9.query,
           stats = _ref9.stats;
       firstQueryWithoutResults = null;
       var pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
       fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      var pluginState = getMentionPluginState(editorState);
+
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        var mentionProvider = pluginState.mentionProvider;
+
+        var _iterator = _createForOfIteratorHelper(subscriptionKeys),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var key = _step.value;
+            mentionProvider.unsubscribe(key);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+
+      subscriptionKeys.clear();
       sessionId = uuid();
     }
   };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { panel, customPanel, PanelType } from '@atlaskit/adf-schema';
+import { customPanel, PanelType } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
@@ -37,8 +37,7 @@ var panelPlugin = function panelPlugin() {
   return {
     name: 'panel',
     nodes: function nodes() {
-      //TODO: ED-10445 remove this check after emoji panels moved to full schema
-      var panelNode = options.UNSAFE_allowCustomPanel ? customPanel : panel;
+      var panelNode = customPanel(!!options.UNSAFE_allowCustomPanel);
       return [{
         name: 'panel',
         node: panelNode
@@ -131,7 +130,7 @@ var panelPlugin = function panelPlugin() {
           }
         }];
 
-        if (options.UNSAFE_allowCustomPanel) {
+        if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
           quickInsertOptions.push({
             id: 'custompanel',
             title: formatMessage(messages.customPanel),

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

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+export var 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.'
+  }
+});