@atlaskit/editor-core 171.0.0 → 172.0.1

package/dist/esm/plugins/toolbar-lists-indentation/pm-plugins/indentation-buttons.js

@@ -0,0 +1,105 @@
+import { PluginKey } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { shallowEqual } from '../../../utils';
+import { getListItemAttributes, isInsideListItem } from '../../list/utils/selection';
+import { getCurrentIndentLevel as getTaskListIndentLevel, getTaskItemIndex, isInsideTask } from '../../tasks-and-decisions/pm-plugins/helpers';
+import { isIndentationAllowed, MAX_INDENTATION_LEVEL } from '../../indentation/commands';
+export var pluginKey = new PluginKey('indentationButtonsPlugin');
+
+function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation) {
+  var state = {
+    indentDisabled: true,
+    outdentDisabled: true,
+    node: null
+  };
+  var selection = editorState.selection;
+  var node = selection.$from.node(); // Handle bullet and numbered lists seperately as they do
+  // not use the indentation mark.
+  // Check for lists before paragraphs and headings in case
+  // the selection is in a list nested in a layout column.
+
+  if (isInsideListItem(editorState)) {
+    var _getListItemAttribute = getListItemAttributes(selection.$head),
+        indentLevel = _getListItemAttribute.indentLevel,
+        itemIndex = _getListItemAttribute.itemIndex;
+
+    return {
+      // List indent levels are zero indexed so we need to subtract 1
+      indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL - 1,
+      outdentDisabled: false,
+      node: 'list'
+    };
+  } // Handle tasks seperately as they do not use the indentation mark
+  // and have different behaviour for outdent compared to lists
+
+
+  if (isInsideTask(editorState)) {
+    var _indentLevel = getTaskListIndentLevel(selection) || 0;
+
+    var _itemIndex = getTaskItemIndex(editorState);
+
+    return {
+      indentDisabled: _itemIndex === 0 || _indentLevel >= MAX_INDENTATION_LEVEL,
+      outdentDisabled: _indentLevel <= 1,
+      node: 'taskList'
+    };
+  }
+
+  var isTopLevelParagraphOrHeading = selection.$from.depth === 1;
+  var isInLayoutNode = hasParentNodeOfType(editorState.schema.nodes.layoutColumn)(selection) && // depth of non-nested paragraphs and headings in layouts will always be 3
+  selection.$from.depth === 3;
+
+  if (allowHeadingAndParagraphIndentation && isIndentationAllowed(editorState.schema, node) && (isTopLevelParagraphOrHeading || isInLayoutNode)) {
+    var indentationMark = node.marks.find(function (mark) {
+      return mark.type === editorState.schema.marks.indentation;
+    });
+
+    if (!indentationMark) {
+      return {
+        outdentDisabled: true,
+        indentDisabled: false,
+        node: 'paragraph_heading'
+      };
+    }
+
+    return {
+      indentDisabled: indentationMark.attrs.level >= MAX_INDENTATION_LEVEL,
+      outdentDisabled: false,
+      node: 'paragraph_heading'
+    };
+  }
+
+  return state;
+}
+
+export var createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch,
+      showIndentationButtons = _ref.showIndentationButtons,
+      allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  return new SafePlugin({
+    state: {
+      init: function init(_config, state) {
+        var initialState = {
+          indentDisabled: true,
+          outdentDisabled: true,
+          node: null
+        };
+        return showIndentationButtons ? getIndentationButtonsState(state, allowHeadingAndParagraphIndentation) : initialState;
+      },
+      apply: function apply(_tr, pluginState, _oldState, newState) {
+        if (showIndentationButtons) {
+          var state = getIndentationButtonsState(newState, allowHeadingAndParagraphIndentation);
+
+          if (!shallowEqual(pluginState, state)) {
+            dispatch(pluginKey, state);
+            return state;
+          }
+        }
+
+        return pluginState;
+      }
+    },
+    key: pluginKey
+  });
+};

package/dist/esm/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -21,6 +21,8 @@ export function Toolbar(props) {
       orderedListActive = props.orderedListActive,
       orderedListDisabled = props.orderedListDisabled,
       showIndentationButtons = props.showIndentationButtons,
+      indentDisabled = props.indentDisabled,
+      outdentDisabled = props.outdentDisabled,
       onItemActivated = props.onItemActivated;
   var labelUnorderedList = formatMessage(messages.unorderedList);
   var labelOrderedList = formatMessage(messages.orderedList);
@@ -67,28 +69,32 @@ export function Toolbar(props) {
       label: ""
     })
   }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.INDENT,
+    buttonId: TOOLBAR_BUTTON.OUTDENT,
+    testId: TOOLBAR_BUTTON.OUTDENT,
     spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('indent'),
-    iconBefore: jsx(IndentIcon, {
+    onClick: handleOnItemActivated('outdent'),
+    iconBefore: jsx(OutdentIcon, {
       label: ""
     }),
-    disabled: true,
+    disabled: outdentDisabled || disabled,
+    "aria-label": formatMessage(indentationMessages.outdent),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.indent),
-      keymap: toggleIndentKeymap
+      description: formatMessage(indentationMessages.outdent),
+      keymap: toggleOutdentKeymap
     })
   }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.OUTDENT,
+    buttonId: TOOLBAR_BUTTON.INDENT,
+    testId: TOOLBAR_BUTTON.INDENT,
     spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('outdent'),
-    iconBefore: jsx(OutdentIcon, {
+    onClick: handleOnItemActivated('indent'),
+    iconBefore: jsx(IndentIcon, {
       label: ""
     }),
-    disabled: true,
+    disabled: indentDisabled || disabled,
+    "aria-label": formatMessage(indentationMessages.indent),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.outdent),
-      keymap: toggleOutdentKeymap
+      description: formatMessage(indentationMessages.indent),
+      keymap: toggleIndentKeymap
     })
   }), jsx("span", {
     css: separatorStyles

package/dist/esm/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -123,27 +123,27 @@ function useItems(props) {
     var labelIndent = formatMessage(indentationMessages.indent);
     var labelOutdent = formatMessage(indentationMessages.outdent);
     items.push({
-      key: 'indent',
-      content: labelIndent,
+      key: 'outdent',
+      content: labelOutdent,
       value: {
-        name: 'indent'
+        name: 'outdent'
       },
-      isDisabled: true,
+      isDisabled: props.outdentDisabled,
       isActive: false,
       elemAfter: jsx("div", {
         css: shortcutStyle
-      }, tooltip(toggleIndentKeymap))
+      }, tooltip(toggleOutdentKeymap))
     }, {
-      key: 'outdent',
-      content: labelOutdent,
+      key: 'indent',
+      content: labelIndent,
       value: {
-        name: 'outdent'
+        name: 'indent'
       },
-      isDisabled: true,
+      isDisabled: props.indentDisabled,
       isActive: false,
       elemAfter: jsx("div", {
         css: shortcutStyle
-      }, tooltip(toggleOutdentKeymap))
+      }, tooltip(toggleIndentKeymap))
     });
   }
 

package/dist/esm/plugins/toolbar-lists-indentation/ui/index.js

@@ -14,7 +14,9 @@ export default function ToolbarListsIndentation(props) {
       showIndentationButtons = props.showIndentationButtons,
       popupsMountPoint = props.popupsMountPoint,
       popupsBoundariesElement = props.popupsBoundariesElement,
-      popupsScrollableElement = props.popupsScrollableElement;
+      popupsScrollableElement = props.popupsScrollableElement,
+      indentDisabled = props.indentDisabled,
+      outdentDisabled = props.outdentDisabled;
 
   if (isSmall) {
     return jsx(ToolbarDropdown, {
@@ -28,6 +30,8 @@ export default function ToolbarListsIndentation(props) {
       showIndentationButtons: showIndentationButtons,
       orderedListActive: orderedListActive,
       orderedListDisabled: orderedListDisabled,
+      indentDisabled: indentDisabled,
+      outdentDisabled: outdentDisabled,
       disabled: disabled,
       onItemActivated: onItemActivated
     });
@@ -41,6 +45,8 @@ export default function ToolbarListsIndentation(props) {
     showIndentationButtons: showIndentationButtons,
     orderedListActive: orderedListActive,
     orderedListDisabled: orderedListDisabled,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled,
     disabled: disabled,
     onItemActivated: onItemActivated
   });

package/dist/esm/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -1,5 +1,8 @@
-import { toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { indentList, outdentList, toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { getIndentCommand as indentParagraphOrHeading, getOutdentCommand as outdentParagraphOrHeading } from '../../indentation/commands';
+import { getIndentCommand as indentTaskList, getUnindentCommand as outdentTaskList } from '../../tasks-and-decisions/pm-plugins/keymaps';
 import { INPUT_METHOD } from '../../analytics';
+import { pluginKey as indentationButtonsPluginKey } from '../pm-plugins/indentation-buttons';
 export function onItemActivated(_ref) {
   var buttonName = _ref.buttonName,
       editorView = _ref.editorView;
@@ -14,26 +17,41 @@ export function onItemActivated(_ref) {
       break;
 
     case 'indent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var node = indentationButtonsPluginKey.getState(editorView.state).node;
+
+        if (node === 'paragraph_heading') {
+          indentParagraphOrHeading(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'list') {
+          indentList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'taskList') {
+          indentTaskList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
 
     case 'outdent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          shiftKey: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var _node = indentationButtonsPluginKey.getState(editorView.state).node;
+
+        if (_node === 'paragraph_heading') {
+          outdentParagraphOrHeading(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'list') {
+          outdentList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'taskList') {
+          outdentTaskList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
   }
 }

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,6 +1,7 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
+import { browser } from '@atlaskit/editor-common/utils';
 export var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
     var triggerHandler = props.triggerHandler,
@@ -21,6 +22,8 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       inputMethod = _ref.inputMethod,
       query = _ref.query;
   return function (tr) {
+    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
@@ -44,6 +47,12 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
 
     if (nodeAtCursor && isPlaceholderAtCursorPosition) {
       tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    } // ME-2375 remove the superfluous '@' inserted before decoration
+    // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
+
+
+    if (browser.chrome && browser.android && cursorPos > 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, '@')) {
+      tr.delete(cursorPos - 1, cursorPos);
     }
 
     return tr;

package/dist/esm/types/browser.js

@@ -0,0 +1,2 @@
+var SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];
+export {};

package/dist/esm/ui/Addon/click-area-helper.js

@@ -13,10 +13,34 @@ var insideContentArea = function insideContentArea(ref) {
 
   return false;
 };
+/**
+ * @see ED-14699 - check if editor is inside a modal to continue to bring cursor to input when
+ * any part of the editor container is clicked
+ *
+ * Handles two cases when a click event is fired:
+ *
+ * 1. if editor (e.g. comment inside of Jira ticket view) is inside modal then ensure focus and cursor is brought to the input
+ * 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
+ */
+
+
+export var checkForModal = function checkForModal(target) {
+  var modalDialog = target.closest('[role=dialog]');
+
+  if (modalDialog) {
+    // return false if not an editor inside modal, otherwise return true
+    return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
+  } // no modal present so we can return true
+
+
+  return true;
+};
 
 var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
-  var contentArea = event.currentTarget.querySelector('.ak-editor-content-area');
-  var editorFocused = !!(view && view.hasFocus());
+  var _view$hasFocus;
+
+  var isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
   var target = event.target; // @see https://product-fabric.atlassian.net/browse/ED-4287
   // click event gets triggered twice on a checkbox (on <label> first and then on <input>)
   // by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
@@ -28,13 +52,10 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 
   var isTextAreaClicked = target.nodeName === 'TEXTAREA';
   var isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
-  var targetIsNotContentArea = !contentArea;
-  var tragetIsNotChildOfContentArea = !insideContentArea(target.parentNode);
-  var editorIsNotInFocus = editorFocused === false;
+  var isTargetChildOfContentArea = insideContentArea(target.parentNode);
   var selection = window.getSelection();
   var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  var isModalDialog = !!target.closest('[role=dialog]');
-  var isClickOutsideEditor = (targetIsNotContentArea || tragetIsNotChildOfContentArea || editorIsNotInFocus) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isModalDialog && !isBreadcrumbClicked && !isPopupClicked && !isEditorPopupTextSelected;
+  var isClickOutsideEditor = (!isTargetContentArea || !isTargetChildOfContentArea || !isEditorFocused) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
 
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);
@@ -42,15 +63,21 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 };
 
 var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
+  var _view$hasFocus2;
+
   var dispatch = view.dispatch,
       dom = view.dom,
       state = view.state;
-  var editorFocused = !!(view && view.hasFocus());
   var tr = state.tr;
-  appendEmptyParagraph(event, dom, tr);
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus2 = view.hasFocus) !== null && _view$hasFocus2 !== void 0 && _view$hasFocus2.call(view));
+  var isBottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
+
+  if (isBottomAreaClicked) {
+    addParagraphAtEnd(tr);
+  }
 
   if (hasGapCursorPlugin(state)) {
-    setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), editorFocused);
+    setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
   }
 
   if (!tr.docChanged && !tr.selectionSet) {
@@ -66,12 +93,4 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
   event.preventDefault();
 };
 
-var appendEmptyParagraph = function appendEmptyParagraph(event, dom, tr) {
-  var bottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
-
-  if (bottomAreaClicked) {
-    addParagraphAtEnd(tr);
-  }
-};
-
 export { clickAreaClickHandler };

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -40,8 +40,8 @@ import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle
 import { createEditorContentStyle } from '../../ContentStyles';
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, token('color.background.input', 'white'), token('color.border', N40), borderRadius());
-var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
+var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, token('color.background.input', 'white'), token('color.border', N40), borderRadius());
+var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 

package/dist/esm/ui/ContentStyles/index.js

@@ -14,7 +14,7 @@ import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
 import { tableStyles } from '../../plugins/table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
-import { codeBlockStyles, highlightingCodeBlockStyles } from '../../plugins/code-block/styles';
+import { codeBlockStyles } from '../../plugins/code-block/styles';
 import { listsStyles } from '../../plugins/list/styles';
 import { ruleStyles } from '../../plugins/rule/styles';
 import { mediaStyles } from '../../plugins/media/styles';
@@ -40,11 +40,9 @@ import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 var contentStyles = function contentStyles(props) {
-  var _props$featureFlags;
-
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, token('color.border.focused', '#8cf'), placeholderTextStyles, placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, token('color.border.focused', '#8cf'), placeholderTextStyles, placeholderStyles, codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
 export var createEditorContentStyle = function createEditorContentStyle(styles) {