@atlaskit/editor-core 153.1.1 → 154.0.0

package/dist/es2019/plugins/extension/extension-api.js

@@ -41,33 +41,50 @@ const extensionAPICallPayload = functionName => ({
 });
 
 export const createExtensionAPI = options => {
-  const doc = {
-    insertAfter: (localId, adf, opt) => {
-      const {
-        editorView
-      } = options;
-      const {
-        dispatch
-      } = editorView; // Be extra cautious since 3rd party devs can use regular JS without type safety
-
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error(`insertAfter(): Invalid localId '${localId}'.`);
+  /**
+   * Finds the node and its position by `localId`. Throws if the node could not be found.
+   *
+   * @returns {NodeWithPos}
+   */
+  const ensureNodePosByLocalId = (localId, {
+    opName
+  }) => {
+    // Be extra cautious since 3rd party devs can use regular JS without type safety
+    if (typeof localId !== 'string' || localId === '') {
+      throw new Error(`${opName}(): Invalid localId '${localId}'.`);
+    } // Find the node + position matching the given ID
+
+
+    const {
+      editorView: {
+        state
       }
+    } = options;
+    const nodePos = findNodePosWithLocalId(state, localId);
 
+    if (!nodePos) {
+      throw new Error(`${opName}(): Could not find node with ID '${localId}'.`);
+    }
+
+    return nodePos;
+  };
+
+  const doc = {
+    insertAfter: (localId, adf, opt) => {
       if (typeof adf !== 'object' || Array.isArray(adf)) {
         throw new Error(`insertAfter(): Invalid ADF given.`);
-      } // Find the node + position matching the given ID
-
+      }
 
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'insertAfter'
+      });
+      const {
+        editorView
+      } = options;
       const {
+        dispatch,
         state
-      } = editorView;
-      const nodePos = findNodePosWithLocalId(state, localId);
-
-      if (!nodePos) {
-        throw new Error(`insertAfter(): Could not find node with ID '${localId}'.`);
-      } // Validate the given ADF
-
+      } = editorView; // Validate the given ADF
 
       const {
         tr,
@@ -139,35 +156,91 @@ export const createExtensionAPI = options => {
       dispatch(tr);
     },
     scrollTo: localId => {
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'scrollTo'
+      }); // Analytics - tracking the api call
+
+      const apiCallPayload = extensionAPICallPayload('scrollTo');
       const {
-        editorView
+        editorView: {
+          dispatch,
+          state
+        }
+      } = options;
+      let {
+        tr
+      } = state;
+      tr = addAnalytics(state, tr, apiCallPayload);
+      tr = setTextSelection(nodePos.pos)(tr);
+      tr = tr.scrollIntoView();
+      dispatch(tr);
+    },
+    update: (localId, mutationCallback) => {
+      var _changedValues$marks;
+
+      const {
+        node,
+        pos
+      } = ensureNodePosByLocalId(localId, {
+        opName: 'update'
+      });
+      const {
+        editorView: {
+          dispatch,
+          state
+        }
       } = options;
       const {
-        dispatch
-      } = editorView; // Be extra cautious since 3rd party devs can use regular JS without type safety
+        tr,
+        schema
+      } = state;
+      const changedValues = mutationCallback({
+        attrs: node.attrs,
+        marks: node.marks.map(pmMark => ({
+          type: pmMark.type.name,
+          attrs: pmMark.attrs
+        }))
+      });
 
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error(`scrollTo(): Invalid localId '${localId}'.`);
-      } // Find the node + position matching the given ID
+      const ensureValidMark = mark => {
+        if (typeof mark !== 'object' || Array.isArray(mark)) {
+          throw new Error(`update(): Invalid mark given.`);
+        } // Ensure that the given mark is present in the schema
 
 
-      const {
-        state
-      } = editorView;
-      const nodePos = findNodePosWithLocalId(state, localId);
+        const markType = schema.marks[mark.type];
 
-      if (!nodePos) {
-        throw new Error(`scrollTo(): Could not find node with ID '${localId}'.`);
-      } // Analytics - tracking the api call
+        if (!markType) {
+          throw new Error(`update(): Invalid ADF mark type '${mark.type}'.`);
+        }
 
+        if (!node.type.allowsMarkType(markType)) {
+          throw new Error(`update(): Node of type '${node.type.name}' does not allow marks of type '${mark.type}'.`);
+        }
 
-      const apiCallPayload = extensionAPICallPayload('scrollTo');
-      let {
-        tr
-      } = state;
-      tr = addAnalytics(state, tr, apiCallPayload);
-      tr = setTextSelection(nodePos.pos)(tr);
-      tr = tr.scrollIntoView();
+        return {
+          mark: markType,
+          attrs: mark.attrs
+        };
+      };
+
+      const newMarks = (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(({
+        mark,
+        attrs
+      }) => mark.create(attrs)); // Validate if the new attributes result in a valid node.
+      // We're doing this by relying on `createChecked`, which validates attributes,
+      // and if we don't exit - we assume validity.
+
+      try {
+        node.type.createChecked(changedValues.attrs, node.content, newMarks);
+      } catch (err) {
+        throw new Error(`update(): The given ADFEntity cannot be inserted in the current position.\n${err}`);
+      }
+
+      tr.setNodeMarkup(pos, undefined, changedValues.attrs, newMarks); // Analytics - tracking the api call
+
+      const apiCallPayload = extensionAPICallPayload('update');
+      addAnalytics(state, tr, apiCallPayload);
       dispatch(tr);
     }
   };

package/dist/es2019/plugins/extension/pm-plugins/unique-id.js

@@ -1,6 +1,6 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { stepAddsOneOf } from '../../../utils/step';
 const pluginKey = new PluginKey('extensionUniqueIdPlugin');
 
 const createPlugin = () => new Plugin({
@@ -9,34 +9,55 @@ const createPlugin = () => new Plugin({
     const tr = newState.tr;
     const selectionBookmark = tr.selection.getBookmark();
     let modified = false;
+    const {
+      extension,
+      bodiedExtension,
+      inlineExtension
+    } = newState.schema.nodes;
+    const extensionTypes = new Set([extension, bodiedExtension, inlineExtension]);
+    const idsObserved = new Set();
     transactions.forEach(transaction => {
       if (!transaction.docChanged) {
         return;
-      } // Adds a unique id to a node
-
-
-      nodesBetweenChanged(transaction, (node, pos) => {
-        const {
-          extension,
-          bodiedExtension,
-          inlineExtension
-        } = newState.schema.nodes;
-
-        if (!!node.type && (node.type === extension || node.type === bodiedExtension || node.type === inlineExtension)) {
-          const {
-            localId,
-            ...rest
-          } = node.attrs;
-
-          if (!localId) {
-            tr.setNodeMarkup(pos, undefined, {
-              localId: uuid.generate(),
-              ...rest
-            });
-            modified = true;
+      }
+
+      const isAddingExtension = transaction.steps.some(step => stepAddsOneOf(step, extensionTypes));
+
+      if (isAddingExtension) {
+        // Can't simply look at changed nodes, as we could be adding an extension
+        newState.doc.descendants((node, pos) => {
+          const localId = node.attrs.localId; // Dealing with an extension - make sure it's a unique ID
+
+          if (!!node.type && extensionTypes.has(node.type)) {
+            if (localId && !idsObserved.has(localId)) {
+              idsObserved.add(localId); // Also add a localId if it happens to not have one,
+            } else if (!localId || idsObserved.has(localId)) {
+              modified = true;
+              tr.setNodeMarkup(pos, undefined, { ...node.attrs,
+                localId: uuid.generate()
+              });
+            }
+            /**
+             * If it's a bodiedExtension, we'll need to keep digging; since we
+             * can have more extension nodes within the contents of that
+             */
+
+
+            if (node.type === bodiedExtension) {
+              return true;
+            }
+
+            return false;
           }
-        }
-      });
+          /**
+           * Otherwise continue traversing, we can encounter extensions nested in
+           * expands/bodiedExtensions
+           */
+
+
+          return true;
+        });
+      }
     });
 
     if (modified) {

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { calcBreakoutWidth, overflowShadow } from '@atlaskit/editor-common';
+import { overflowShadow } from '@atlaskit/editor-common/ui';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { Wrapper, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
 import { Overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
 import memoizeOne from 'memoize-one';
-import { getExtensionRenderer, getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/editor-common';
+import { getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/editor-common/extensions';
+import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 import Extension from './Extension';
 import InlineExtension from './InlineExtension';
 export default class ExtensionComponent extends Component {

package/dist/es2019/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 
 const ExtensionNodeWrapper = ({
   children,

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Component } from 'react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
-import { getExtensionLozengeData } from '@atlaskit/editor-common';
+import { getExtensionLozengeData } from '@atlaskit/editor-common/utils';
 import { PlaceholderFallback, PlaceholderFallbackParams, StyledImage } from './styles';
 export const capitalizeFirstLetter = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);

package/dist/es2019/plugins/extension/ui/Extension/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ExtensionComponent from './ExtensionComponent';
 export default class Extension extends Component {
   constructor(props) {

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -1,5 +1,5 @@
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 
 const safeNumberFeatureFlag = value => {
   const parsedValue = parseInt(value, 10);

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -113,7 +113,9 @@ class FindReplaceToolbarButton extends React.PureComponent {
         iconBefore: /*#__PURE__*/React.createElement(EditorSearchIcon, {
           label: title
         }),
-        onClick: this.toggleOpen
+        onClick: this.toggleOpen,
+        "aria-expanded": isActive,
+        "aria-haspopup": true
       })
     }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FindReplace, _extends({
       findText: findText,

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Plugin, PluginKey, AllSelection } from 'prosemirror-state';
 import { findDomRefAtPos, findSelectedNodeOfType } from 'prosemirror-utils';
 import camelCase from 'lodash/camelCase';
-import { Popup } from '@atlaskit/editor-common'; // AFP-2532 TODO: Fix automatic suppressions below
+import { Popup } from '@atlaskit/editor-common/ui'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import WithPluginState from '../../ui/WithPluginState';

package/dist/es2019/plugins/floating-toolbar/ui/Button.js

@@ -20,7 +20,8 @@ export default (({
   className,
   tooltipContent,
   testId,
-  hideTooltipOnClick = true
+  hideTooltipOnClick = true,
+  ariaHasPopup
 }) => {
   // Check if there's only an icon and add additional styles
   const iconOnly = (icon || iconAfter) && !children;
@@ -52,11 +53,12 @@ export default (({
       };
     },
     "aria-label": title,
+    "aria-pressed": selected,
     spacing: 'compact',
     href: href,
     target: target,
     appearance: appearance,
-    "aria-haspopup": true,
+    "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,

package/dist/es2019/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button';
-import { Popup, withOuterListeners, WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
@@ -31,6 +32,18 @@ export const EmojiPickerButton = props => {
     props.onChange && props.onChange(emoji);
   };
 
+  const isDetachedElement = el => !document.body.contains(el);
+
+  const handleEmojiClickOutside = e => {
+    // Ignore click events for detached elements.
+    // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
+    // still in the document, and one once it's detached. Does not always occur, and
+    // may be a side effect of a react render optimisation
+    if (e && e.target && !isDetachedElement(e.target)) {
+      togglePopup();
+    }
+  };
+
   const renderPicker = providers => {
     if (!providers.emojiProvider) {
       return null;
@@ -40,7 +53,7 @@ export const EmojiPickerButton = props => {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: () => {},
-      handleClickOutside: togglePopup
+      handleClickOutside: handleEmojiClickOutside
     });
   };
 

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
-import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common';
+import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
 import { createExtensionAPI } from '../../extension/extension-api';

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -16,6 +16,7 @@ import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
 import { EmojiPickerButton } from './EmojiPickerButton';
+import Announcer from '../../../utils/announcer/announcer';
 const akGridSize = gridSize();
 const ToolbarContainer = styled.div`
   background-color: ${themed({
@@ -122,7 +123,10 @@ export default class Toolbar extends Component {
       "aria-label": "Floating Toolbar",
       hasCompactLeftPadding: firstElementIsSelect,
       className: className
-    }, /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+    }, /*#__PURE__*/React.createElement(Announcer, {
+      text: "Floating toolbar controls have been opened",
+      delay: 250
+    }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
       switch (item.type) {
         case 'button':
           const ButtonIcon = item.icon;
@@ -154,7 +158,8 @@ export default class Toolbar extends Component {
             disabled: item.disabled,
             tooltipContent: item.tooltipContent,
             testId: item.testId,
-            hideTooltipOnClick: item.hideTooltipOnClick
+            hideTooltipOnClick: item.hideTooltipOnClick,
+            ariaHasPopup: item.ariaHasPopup
           }, item.showTitle && item.title);
 
         case 'input':
@@ -228,7 +233,7 @@ export default class Toolbar extends Component {
               title: item.title,
               providerFactory: providerFactory,
               isSelected: item.selected,
-              onChange: selected => dispatchCommand(item.onChange(selected.shortName))
+              onChange: selected => dispatchCommand(item.onChange(selected))
             });
           }
 

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

@@ -1,6 +1,7 @@
 import { fragment } from '@atlaskit/adf-schema';
 import { Plugin } from 'prosemirror-state';
 import { pluginKey } from './plugin-key';
+import { createPlugin as createFragmentMarkConsistencyPlugin } from './pm-plugins/fragment-consistency';
 export function createPlugin() {
   return new Plugin({
     key: pluginKey
@@ -15,6 +16,15 @@ const fragmentMarkPlugin = () => ({
       name: 'fragment',
       mark: fragment
     }];
+  },
+
+  pmPlugins() {
+    return [{
+      name: 'fragmentMarkConsistency',
+      plugin: ({
+        dispatch
+      }) => createFragmentMarkConsistencyPlugin(dispatch)
+    }];
   }
 
 });

package/dist/es2019/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -0,0 +1,140 @@
+/**
+ * This plugin ensures that certain nodes (such as tables, and various extension ones)
+ * have a unique `localId` attribute value for `fragment` marks.
+ * It also ensures the preservation of these IDs when nodes are being cut-and-pasted
+ * around the document.
+ *
+ * The implementation has been _heavily_ borrowed from
+ * - packages/editor/editor-core/src/plugins/table/pm-plugins/table-local-id.ts
+ */
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { uuid } from '@atlaskit/adf-schema';
+import { stepAddsOneOf } from '../../../utils/step';
+const pluginKey = new PluginKey('fragmentMarkConsistencyPlugin');
+/**
+ * Traverses a transaction's steps to see if we're inserting a node which supports a fragment mark
+ */
+
+const checkIsAddingSupportedNode = (schema, transaction) => {
+  const nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  return transaction.steps.some(step => nodesSupportingFragmentMark.some(nodeType => stepAddsOneOf(step, new Set([nodeType]))));
+};
+
+const getNodesSupportingFragmentMark = schema => {
+  const {
+    table,
+    extension,
+    bodiedExtension,
+    inlineExtension
+  } = schema.nodes;
+  return [table, extension, bodiedExtension, inlineExtension];
+};
+
+const regenerateFragmentIdIfNeeded = ({
+  transaction,
+  schema,
+  doc,
+  shouldRegenerateLocalId
+}) => {
+  const {
+    fragment
+  } = schema.marks;
+  const nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  let transactionChanged = false;
+  doc.descendants((node, pos) => {
+    const isSupportedNode = nodesSupportingFragmentMark.some(supportedNode => node.type === supportedNode);
+
+    if (!isSupportedNode) {
+      // continue traversing
+      return true;
+    }
+
+    const existingFragmentMark = node.marks.find(mark => mark.type === fragment);
+
+    if (!existingFragmentMark) {
+      // continue traversing
+      return true;
+    }
+
+    if (shouldRegenerateLocalId(existingFragmentMark.attrs.localId)) {
+      transactionChanged = true;
+      transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(mark => {
+        if (mark.type === fragment) {
+          mark.attrs.localId = uuid.generate();
+        }
+
+        return mark;
+      }));
+    }
+    /**
+     * Continue traversing, as we can encounter inline extension nodes pretty much anywhere
+     */
+
+
+    return true;
+  });
+  return {
+    transactionChanged
+  };
+};
+/**
+ * Ensures presence of `fragment` mark on certain node types and the uniqueness of their `localId` attributes
+ */
+
+
+export const createPlugin = dispatch => new Plugin({
+  key: pluginKey,
+  appendTransaction: (transactions, _oldState, newState) => {
+    let modified = false;
+    const tr = newState.tr;
+    transactions.forEach(transaction => {
+      const fragmentLocalIdsObserved = new Set();
+
+      if (!transaction.docChanged) {
+        return;
+      } // Don't interfere with cut as it clashes with fixTables & we don't need
+      // to handle any extra cut cases in this plugin
+
+
+      const uiEvent = transaction.getMeta('uiEvent');
+
+      if (uiEvent === 'cut') {
+        return;
+      }
+      /** Check if we're actually inserting a supported node, otherwise we can ignore this tr */
+
+
+      const isAddingSupportedNode = checkIsAddingSupportedNode(newState.schema, transaction);
+
+      if (!isAddingSupportedNode) {
+        return;
+      }
+
+      const {
+        transactionChanged
+      } = regenerateFragmentIdIfNeeded({
+        doc: newState.doc,
+        schema: newState.schema,
+        transaction: tr,
+        shouldRegenerateLocalId: localId => {
+          if (fragmentLocalIdsObserved.has(localId)) {
+            return true;
+          }
+
+          fragmentLocalIdsObserved.add(localId);
+          return false;
+        }
+      });
+
+      if (transactionChanged) {
+        modified = true;
+      }
+    });
+
+    if (modified) {
+      return tr;
+    }
+
+    return;
+  }
+});

package/dist/es2019/plugins/help-dialog/ui/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
@@ -13,6 +13,7 @@ import { messages as listMessages } from '../../list/messages';
 import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
 import { messages as blockTypeMessages } from '../../block-type/messages';
 import { messages as undoRedoMessages } from '../../undo-redo/messages';
+import { alignmentMessages } from '../../../ui/Alignment/messages';
 import { closeHelpCommand } from '../commands';
 import { annotationMessages } from '../../annotation/toolbar';
 const messages = defineMessages({
@@ -79,6 +80,14 @@ export const formatting = ({
   type: 'strike',
   keymap: () => keymaps.toggleStrikethrough,
   autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"))
+}, {
+  name: formatMessage(toolbarMessages.subscript),
+  type: 'subsup',
+  keymap: () => keymaps.toggleSubscript
+}, {
+  name: formatMessage(toolbarMessages.superscript),
+  type: 'subsup',
+  keymap: () => keymaps.toggleSuperscript
 }, {
   name: formatMessage(blockTypeMessages.heading1),
   type: 'heading',
@@ -163,6 +172,14 @@ export const formatting = ({
   name: formatMessage(insertBlockMessages.mention),
   type: 'mention',
   autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"))
+}, {
+  name: formatMessage(alignmentMessages.alignLeft),
+  type: 'alignment',
+  keymap: () => keymaps.alignLeft
+}, {
+  name: formatMessage(alignmentMessages.alignRight),
+  type: 'alignment',
+  keymap: () => keymaps.alignRight
 }];
 const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];