@atlaskit/editor-plugin-block-type 1.0.0

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

@@ -0,0 +1,170 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { setHeading } from '@atlaskit/editor-common/commands';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { filterChildrenBetween, wrapSelectionIn } from '@atlaskit/editor-common/utils';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { HEADINGS_BY_NAME, NORMAL_TEXT } from '../block-types';
+export function setBlockType(name) {
+  return (state, dispatch) => {
+    const {
+      nodes
+    } = state.schema;
+    if (name === NORMAL_TEXT.name && nodes.paragraph) {
+      return setNormalText()(state, dispatch);
+    }
+    const headingBlockType = HEADINGS_BY_NAME[name];
+    if (headingBlockType && nodes.heading && headingBlockType.level) {
+      return setHeading(headingBlockType.level)(state, dispatch);
+    }
+    return false;
+  };
+}
+export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi) {
+  return (state, dispatch) => {
+    const {
+      nodes
+    } = state.schema;
+    if (name === NORMAL_TEXT.name && nodes.paragraph) {
+      return setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi)(state, dispatch);
+    }
+    const headingBlockType = HEADINGS_BY_NAME[name];
+    if (headingBlockType && nodes.heading && headingBlockType.level) {
+      return setHeadingWithAnalytics(headingBlockType.level, inputMethod, editorAnalyticsApi)(state, dispatch);
+    }
+    return false;
+  };
+}
+export function setNormalText() {
+  return function (state, dispatch) {
+    const {
+      selection,
+      schema,
+      tr
+    } = state;
+    const ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(({
+      $from,
+      $to
+    }) => {
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+function withCurrentHeadingLevel(fn) {
+  return (state, dispatch, view) => {
+    // Find all headings and paragraphs of text
+    const {
+      heading,
+      paragraph
+    } = state.schema.nodes;
+    const nodes = filterChildrenBetween(state.doc, state.selection.from, state.selection.to, node => {
+      return node.type === heading || node.type === paragraph;
+    });
+
+    // Check each paragraph and/or heading and check for consistent level
+    let level;
+    for (let node of nodes) {
+      const nodeLevel = node.node.type === heading ? node.node.attrs.level : 0;
+      if (!level) {
+        level = nodeLevel;
+      } else if (nodeLevel !== level) {
+        // Conflict in level, therefore inconsistent and undefined
+        level = undefined;
+        break;
+      }
+    }
+    return fn(level)(state, dispatch, view);
+  };
+}
+export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
+  return withCurrentHeadingLevel(previousHeadingLevel => withAnalytics(editorAnalyticsApi, {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_HEADING,
+    attributes: {
+      inputMethod,
+      newHeadingLevel: 0,
+      previousHeadingLevel
+    }
+  })(setNormalText()));
+}
+export const setHeadingWithAnalytics = (newHeadingLevel, inputMethod, editorAnalyticsApi) => {
+  return withCurrentHeadingLevel(previousHeadingLevel => withAnalytics(editorAnalyticsApi, {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_HEADING,
+    attributes: {
+      inputMethod,
+      newHeadingLevel,
+      previousHeadingLevel
+    }
+  })(setHeading(newHeadingLevel)));
+};
+function insertBlockQuote() {
+  return function (state, dispatch) {
+    const {
+      nodes
+    } = state.schema;
+    if (nodes.paragraph && nodes.blockquote) {
+      return wrapSelectionIn(nodes.blockquote)(state, dispatch);
+    }
+    return false;
+  };
+}
+
+/**
+ *
+ * @param name - block type name
+ * @param inputMethod - input method
+ * @param editorAnalyticsApi - analytics api, undefined if not available either because it failed to load or wasn't added
+ * otherwise Editor becomes very sad and crashes
+ * @returns - command that inserts block type
+ */
+export const insertBlockQuoteWithAnalytics = (inputMethod, editorAnalyticsApi) => {
+  return withAnalytics(editorAnalyticsApi, {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
+    attributes: {
+      inputMethod: inputMethod
+    }
+  })(insertBlockQuote());
+};
+export const cleanUpAtTheStartOfDocument = (state, dispatch) => {
+  const {
+    $cursor
+  } = state.selection;
+  if ($cursor && !$cursor.nodeBefore && !$cursor.nodeAfter && $cursor.pos === 1) {
+    const {
+      tr,
+      schema
+    } = state;
+    const {
+      paragraph
+    } = schema.nodes;
+    const {
+      parent
+    } = $cursor;
+
+    /**
+     * Use cases:
+     * 1. Change `heading` to `paragraph`
+     * 2. Remove block marks
+     *
+     * NOTE: We already know it's an empty doc so it's safe to use 0
+     */
+    tr.setNodeMarkup(0, paragraph, parent.attrs, []);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};

package/dist/es2019/plugin/commands/delete-and-move-cursor.js

@@ -0,0 +1,55 @@
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+
+// We should override default behaviour when selection spans node depths or
+// ends at a node junction
+const shouldMoveCursorAfterDelete = state => {
+  const {
+    selection: {
+      $from,
+      $to
+    }
+  } = state;
+  const nodeRange = $from.blockRange($to);
+  if (!nodeRange) {
+    return false;
+  }
+  const hasSameAncestor = $from.depth === $to.depth && $from.depth - 1 === nodeRange.depth;
+  const toPositionHasNodeAfter = !!$to.nodeAfter;
+  if (hasSameAncestor || toPositionHasNodeAfter) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Fixes cursor position after delete for list/task in panel and table
+ *
+ * ED-13873 fixes a bug where after deleting a list the cursor would move
+ * to the cell to the right. Uses setSelection to position the cursor as expected after deleting.
+ *
+ * @param state EditorState
+ * @param dispatch CommandDispatch
+ * @returns boolean
+ */
+export const deleteAndMoveCursor = (state, dispatch) => {
+  if (state.selection.empty || !(state.selection instanceof TextSelection)) {
+    return false;
+  }
+  if (!shouldMoveCursorAfterDelete(state)) {
+    return false;
+  }
+  const {
+    tr
+  } = state;
+  tr.deleteSelection();
+
+  // Make sure the next position is not out of boundaries
+  const previousPosition = Math.min(Math.max(state.selection.$from.pos, 0), tr.doc.content.size);
+  // Override default delete behaviour that moves the cursor to first suitable position after selection (postive bias).
+  // See. selectionToInsertionEnd. We will override behavior with negative bias (search for suitable cursor position backwards).
+  tr.setSelection(Selection.near(tr.doc.resolve(previousPosition), -1));
+  if (dispatch) {
+    dispatch(tr.scrollIntoView());
+  }
+  return true;
+};

package/dist/es2019/plugin/commands/delete-block-content.js

@@ -0,0 +1,42 @@
+/**
+ * Prevent removing the block when deleting block content
+ *
+ * @param state EditorState
+ * @param dispatch CommandDispatch
+ * @returns boolean
+ */
+export function deleteBlockContent(isNodeAWrappingBlockNode) {
+  return (state, dispatch) => {
+    const {
+      tr,
+      selection: {
+        $from,
+        $to
+      },
+      doc
+    } = state;
+    if ($from.pos === $to.pos) {
+      return false;
+    }
+    let selectionCrossesWrappingBlockNode = false;
+    doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+      // Optimisation. If selection crosses wrapping block node
+      // short circuit the loop by returning false
+      if (selectionCrossesWrappingBlockNode) {
+        return false;
+      }
+      if (isNodeAWrappingBlockNode(node)) {
+        selectionCrossesWrappingBlockNode = true;
+        return false;
+      }
+    });
+    if (!selectionCrossesWrappingBlockNode) {
+      return false;
+    }
+    tr.delete($from.pos, $to.pos);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}

package/dist/es2019/plugin/commands/index.js

@@ -0,0 +1,8 @@
+export { cleanUpAtTheStartOfDocument, insertBlockQuoteWithAnalytics, setBlockType, setBlockTypeWithAnalytics, setHeadingWithAnalytics, setNormalText, setNormalTextWithAnalytics } from './block-type';
+export { deleteAndMoveCursor } from './delete-and-move-cursor';
+export { deleteBlockContent } from './delete-block-content';
+/**
+ * @private
+ * @deprecated use import from @atlaskit/editor-common/commands
+ */
+export { setHeading } from '@atlaskit/editor-common/commands';

package/dist/es2019/plugin/consts.js

@@ -0,0 +1,8 @@
+const KEY_0 = 48;
+const KEY_1 = 49;
+const KEY_2 = 50;
+const KEY_3 = 51;
+const KEY_4 = 52;
+const KEY_5 = 53;
+const KEY_6 = 54;
+export const HEADING_KEYS = [KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6];

package/dist/es2019/plugin/index.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import { blockquote, hardBreak, heading } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { keymap, toggleBlockQuote, tooltip } from '@atlaskit/editor-common/keymaps';
+import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { setBlockTypeWithAnalytics } from './commands';
+import { insertBlockQuoteWithAnalytics } from './commands/block-type';
+import { messages } from './messages';
+import inputRulePlugin from './pm-plugins/input-rule';
+import keymapPlugin from './pm-plugins/keymap';
+import { createPlugin, pluginKey } from './pm-plugins/main';
+import ToolbarBlockType from './ui/ToolbarBlockType';
+const headingPluginOptions = ({
+  formatMessage
+}, isAllowed, editorAnalyticsApi) => {
+  if (!isAllowed) {
+    return [];
+  }
+  return Array.from({
+    length: 6
+  }, (_v, idx) => {
+    const level = idx + 1;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const descriptionDescriptor = messages[`heading${level}Description`];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const keyshortcut = tooltip(keymap[`toggleHeading${level}`]);
+    const id = `heading${level}`;
+    return {
+      id,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      title: formatMessage(messages[id]),
+      description: formatMessage(descriptionDescriptor),
+      priority: 1300,
+      keywords: [`h${level}`],
+      keyshortcut,
+      icon: () => /*#__PURE__*/React.createElement(IconHeading, {
+        level: level
+      }),
+      action(insert, state) {
+        const tr = insert(state.schema.nodes.heading.createChecked({
+          level
+        }));
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+          action: ACTION.FORMATTED,
+          actionSubject: ACTION_SUBJECT.TEXT,
+          eventType: EVENT_TYPE.TRACK,
+          actionSubjectId: ACTION_SUBJECT_ID.FORMAT_HEADING,
+          attributes: {
+            inputMethod: INPUT_METHOD.QUICK_INSERT,
+            newHeadingLevel: level
+          }
+        })(tr);
+        return tr;
+      }
+    };
+  });
+};
+const blockquotePluginOptions = ({
+  formatMessage
+}, isAllowed, editorAnalyticsApi) => {
+  if (!isAllowed) {
+    return [];
+  }
+  return [{
+    id: 'blockquote',
+    title: formatMessage(messages.blockquote),
+    description: formatMessage(messages.blockquoteDescription),
+    priority: 1300,
+    keyshortcut: tooltip(toggleBlockQuote),
+    icon: () => /*#__PURE__*/React.createElement(IconQuote, null),
+    action(insert, state) {
+      const tr = insert(state.schema.nodes.blockquote.createChecked({}, state.schema.nodes.paragraph.createChecked()));
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+        action: ACTION.FORMATTED,
+        actionSubject: ACTION_SUBJECT.TEXT,
+        eventType: EVENT_TYPE.TRACK,
+        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
+        attributes: {
+          inputMethod: INPUT_METHOD.QUICK_INSERT
+        }
+      })(tr);
+      return tr;
+    }
+  }];
+};
+const blockTypePlugin = ({
+  config: options,
+  api
+}) => ({
+  name: 'blockType',
+  nodes() {
+    const nodes = [{
+      name: 'heading',
+      node: heading
+    }, {
+      name: 'blockquote',
+      node: blockquote
+    }, {
+      name: 'hardBreak',
+      node: hardBreak
+    }];
+    if (options && options.allowBlockType) {
+      const exclude = options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
+      return nodes.filter(node => exclude.indexOf(node.name) === -1);
+    }
+    return nodes;
+  },
+  pmPlugins() {
+    return [{
+      name: 'blockType',
+      plugin: ({
+        dispatch
+      }) => {
+        var _api$analytics;
+        return createPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, dispatch, options && options.lastNodeMustBeParagraph);
+      }
+    }, {
+      name: 'blockTypeInputRule',
+      plugin: ({
+        schema,
+        featureFlags
+      }) => {
+        var _api$analytics2;
+        return inputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
+      }
+    },
+    // Needs to be lower priority than editor-tables.tableEditing
+    // plugin as it is currently swallowing right/down arrow events inside tables
+    {
+      name: 'blockTypeKeyMap',
+      plugin: ({
+        schema,
+        featureFlags
+      }) => {
+        var _api$analytics3;
+        return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, schema, featureFlags);
+      }
+    }];
+  },
+  actions: {
+    insertBlockQuote(inputMethod) {
+      var _api$analytics4;
+      return insertBlockQuoteWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+    },
+    setBlockType(name, inputMethod) {
+      var _api$analytics5;
+      return setBlockTypeWithAnalytics(name, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+    }
+  },
+  getSharedState(editorState) {
+    if (!editorState) {
+      return;
+    }
+    return pluginKey.getState(editorState);
+  },
+  primaryToolbarComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    toolbarSize,
+    disabled,
+    isToolbarReducedSpacing,
+    eventDispatcher
+  }) {
+    const isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
+    const boundSetBlockType = name => {
+      var _api$analytics6;
+      return setBlockTypeWithAnalytics(name, INPUT_METHOD.TOOLBAR, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)(editorView.state, editorView.dispatch);
+    };
+    return /*#__PURE__*/React.createElement(WithPluginState, {
+      editorView: editorView,
+      eventDispatcher: eventDispatcher,
+      plugins: {
+        pluginState: pluginKey
+      },
+      render: ({
+        pluginState
+      }) => {
+        return /*#__PURE__*/React.createElement(ToolbarBlockType, {
+          isSmall: isSmall,
+          isDisabled: disabled,
+          isReducedSpacing: isToolbarReducedSpacing,
+          setBlockType: boundSetBlockType,
+          pluginState: pluginState,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement
+        });
+      }
+    });
+  },
+  pluginsOptions: {
+    quickInsert: intl => {
+      var _api$analytics7, _api$analytics8;
+      const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
+      return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions)];
+    }
+  }
+});
+export { blockTypePlugin };
+export { pluginKey } from './pm-plugins/main';

package/dist/es2019/plugin/messages.js

@@ -0,0 +1,153 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  normal: {
+    id: 'fabric.editor.normal',
+    defaultMessage: 'Normal text',
+    description: 'This is the default text style'
+  },
+  heading1: {
+    id: 'fabric.editor.heading1',
+    defaultMessage: 'Heading 1',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading1Description: {
+    id: 'fabric.editor.heading1Description',
+    defaultMessage: 'Use this for a top level heading',
+    description: 'Description of the main heading, heading 1'
+  },
+  heading2: {
+    id: 'fabric.editor.heading2',
+    defaultMessage: 'Heading 2',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading2Description: {
+    id: 'fabric.editor.heading2Description',
+    defaultMessage: 'Use this for key sections',
+    description: 'Description of a subtitle heading or secondary heading'
+  },
+  heading3: {
+    id: 'fabric.editor.heading3',
+    defaultMessage: 'Heading 3',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading3Description: {
+    id: 'fabric.editor.heading3Description',
+    defaultMessage: 'Use this for sub sections and group headings',
+    description: ''
+  },
+  heading4: {
+    id: 'fabric.editor.heading4',
+    defaultMessage: 'Heading 4',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading4Description: {
+    id: 'fabric.editor.heading4Description',
+    defaultMessage: 'Use this for deep headings',
+    description: ''
+  },
+  heading5: {
+    id: 'fabric.editor.heading5',
+    defaultMessage: 'Heading 5',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading5Description: {
+    id: 'fabric.editor.heading5Description',
+    defaultMessage: 'Use this for grouping list items',
+    description: ''
+  },
+  heading6: {
+    id: 'fabric.editor.heading6',
+    defaultMessage: 'Heading 6',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading6Description: {
+    id: 'fabric.editor.heading6Description',
+    defaultMessage: 'Use this for low level headings',
+    description: ''
+  },
+  blockquote: {
+    id: 'fabric.editor.blockquote2',
+    defaultMessage: 'Quote',
+    description: 'Quote some text'
+  },
+  blockquoteDescription: {
+    id: 'fabric.editor.blockquote.description',
+    defaultMessage: 'Insert a quote or citation',
+    description: 'Quote some text'
+  },
+  codeblock: {
+    id: 'fabric.editor.codeblock',
+    defaultMessage: 'Code snippet',
+    description: 'Insert a snippet/segment of code (code block)'
+  },
+  codeblockDescription: {
+    id: 'fabric.editor.codeblock.description',
+    defaultMessage: 'Display code with syntax highlighting',
+    description: 'Insert a snippet/segment of code (code block)'
+  },
+  infoPanel: {
+    id: 'fabric.editor.infoPanel',
+    defaultMessage: 'Info panel',
+    description: 'Visually distinguishes your text by adding a background colour (blue, purple, yellow, green, red)'
+  },
+  infoPanelDescription: {
+    id: 'fabric.editor.infoPanel.description',
+    defaultMessage: 'Highlight information in a colored panel',
+    description: 'Visually distinguishes your text by adding a background colour (blue, purple, yellow, green, red)'
+  },
+  notePanel: {
+    id: 'fabric.editor.notePanel',
+    defaultMessage: 'Note panel',
+    description: 'Visually distinguishes your text by adding a note panel'
+  },
+  notePanelDescription: {
+    id: 'fabric.editor.notePanel.description',
+    defaultMessage: 'Add a note in a colored panel',
+    description: 'Visually distinguishes your text by adding a note panel'
+  },
+  successPanel: {
+    id: 'fabric.editor.successPanel',
+    defaultMessage: 'Success panel',
+    description: 'Visually distinguishes your text by adding a success panel'
+  },
+  successPanelDescription: {
+    id: 'fabric.editor.successPanel.description',
+    defaultMessage: 'Add tips in a colored panel',
+    description: 'Visually distinguishes your text by adding a success panel'
+  },
+  warningPanel: {
+    id: 'fabric.editor.warningPanel',
+    defaultMessage: 'Warning panel',
+    description: 'Visually distinguishes your text by adding a warning panel'
+  },
+  warningPanelDescription: {
+    id: 'fabric.editor.warningPanel.description',
+    defaultMessage: 'Add a note of caution in a colored panel',
+    description: 'Visually distinguishes your text by adding a warning panel'
+  },
+  errorPanel: {
+    id: 'fabric.editor.errorPanel',
+    defaultMessage: 'Error panel',
+    description: 'Visually distinguishes your text by adding a error panel'
+  },
+  errorPanelDescription: {
+    id: 'fabric.editor.errorPanel.description',
+    defaultMessage: 'Call out errors in a colored panel',
+    description: 'Visually distinguishes your text by adding a error panel'
+  },
+  customPanel: {
+    id: 'fabric.editor.customPanel',
+    defaultMessage: 'Custom panel',
+    description: 'Visually distinguishes your panel by adding a emoji icon and background color'
+  },
+  customPanelDescription: {
+    id: 'fabric.editor.customPanel.description',
+    defaultMessage: 'Add a note with an emoji and colored background',
+    description: 'Visually distinguishes your panel by adding a emoji icon and background color '
+  },
+  other: {
+    id: 'fabric.editor.other',
+    defaultMessage: 'Others...',
+    description: 'Other text formatting'
+  }
+});