@atlaskit/editor-core 171.0.1 → 172.0.0

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -10,13 +10,13 @@ import { insertTaskDecisionWithAnalytics } from '../commands';
 import { joinAtCut, liftSelection, wrapSelectionInTaskList } from './commands';
 import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable, getTaskItemIndex, isInsideDecision } from './helpers';
 
-const indentationAnalytics = (curIndentLevel, direction) => ({
+const indentationAnalytics = (curIndentLevel, direction, inputMethod) => ({
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   actionSubjectId: ACTION_SUBJECT_ID.FORMAT_INDENT,
   eventType: EVENT_TYPE.TRACK,
   attributes: {
-    inputMethod: INPUT_METHOD.KEYBOARD,
+    inputMethod,
     previousIndentationLevel: curIndentLevel,
     newIndentLevel: direction === INDENT_DIRECTION.OUTDENT ? curIndentLevel - 1 : curIndentLevel + 1,
     direction,
@@ -83,14 +83,14 @@ const joinTaskDecisionFollowing = (state, dispatch) => {
   return false;
 };
 
-const unindent = filter(isInsideTask, (state, dispatch) => {
+export const getUnindentCommand = (inputMethod = INPUT_METHOD.KEYBOARD) => filter(isInsideTask, (state, dispatch) => {
   const curIndentLevel = getCurrentIndentLevel(state.selection);
 
   if (!curIndentLevel || curIndentLevel === 1) {
     return false;
   }
 
-  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
+  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT, inputMethod))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
 }); // if selection is decision item or first action item in table cell
 // then dont consume the Tab, as table-keymap should tab to the next cell
 
@@ -110,7 +110,7 @@ const shouldLetTabThroughInTable = state => {
   return false;
 };
 
-const indent = filter(isInsideTask, (state, dispatch) => {
+export const getIndentCommand = (inputMethod = INPUT_METHOD.KEYBOARD) => filter(isInsideTask, (state, dispatch) => {
   // limit ui indentation to 6 levels
   const curIndentLevel = getCurrentIndentLevel(state.selection);
 
@@ -132,7 +132,7 @@ const indent = filter(isInsideTask, (state, dispatch) => {
     return true;
   }
 
-  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.INDENT))(autoJoin(wrapSelectionInTaskList, ['taskList']))(state, dispatch);
+  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.INDENT, inputMethod))(autoJoin(wrapSelectionInTaskList, ['taskList']))(state, dispatch);
 });
 
 const backspaceFrom = $from => (state, dispatch) => {
@@ -150,7 +150,7 @@ const backspaceFrom = $from => (state, dispatch) => {
   } = state.schema.nodes;
 
   if ($from.node($from.depth - 2).type === taskList) {
-    return unindent(state, dispatch);
+    return getUnindentCommand()(state, dispatch);
   } // bottom level, should "unwrap" taskItem contents into paragraph
   // we achieve this by slicing the content out, and replacing
 
@@ -305,7 +305,7 @@ const splitListItem = (state, dispatch) => {
   return false;
 };
 
-const enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTaskDecision, chainCommands(unindent, splitListItem)), (state, dispatch) => {
+const enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTaskDecision, chainCommands(getUnindentCommand(), splitListItem)), (state, dispatch) => {
   const {
     selection,
     schema
@@ -356,8 +356,8 @@ const enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTas
 }));
 export function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
   const indentHandlers = {
-    'Shift-Tab': filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => unindent(state, dispatch) || !!consumeTabs),
-    Tab: filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => indent(state, dispatch) || !!consumeTabs)
+    'Shift-Tab': filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => getUnindentCommand(INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs),
+    Tab: filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => getIndentCommand(INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs)
   };
   const defaultHandlers = consumeTabs ? {
     'Shift-Tab': isInsideTaskOrDecisionItem,

package/dist/es2019/plugins/toolbar-lists-indentation/index.js

@@ -3,12 +3,27 @@ import ToolbarListsIndentation from './ui';
 import WithPluginState from '../../ui/WithPluginState';
 import { ToolbarSize } from '../../ui/Toolbar/types';
 import { pluginKey as listPluginKey } from '../list/pm-plugins/main';
+import { pluginKey as indentationButtonsPluginKey, createPlugin as indentationButtonsPlugin } from './pm-plugins/indentation-buttons';
 
 const toolbarListsIndentationPlugin = ({
-  showIndentationButtons
+  showIndentationButtons,
+  allowHeadingAndParagraphIndentation
 }) => ({
   name: 'toolbarListsIndentation',
 
+  pmPlugins() {
+    return [{
+      name: 'indentationButtons',
+      plugin: ({
+        dispatch
+      }) => indentationButtonsPlugin({
+        dispatch,
+        showIndentationButtons,
+        allowHeadingAndParagraphIndentation
+      })
+    }];
+  },
+
   primaryToolbarComponent({
     editorView,
     popupsMountPoint,
@@ -21,10 +36,12 @@ const toolbarListsIndentationPlugin = ({
     const isSmall = toolbarSize < ToolbarSize.L;
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
-        listState: listPluginKey
+        listState: listPluginKey,
+        indentationState: indentationButtonsPluginKey
       },
       render: ({
-        listState: listState
+        listState,
+        indentationState
       }) => {
         if (!listState) {
           return null;
@@ -42,7 +59,9 @@ const toolbarListsIndentationPlugin = ({
           bulletListDisabled: listState.bulletListDisabled,
           orderedListActive: listState.orderedListActive,
           orderedListDisabled: listState.orderedListDisabled,
-          showIndentationButtons: !!showIndentationButtons
+          showIndentationButtons: !!showIndentationButtons,
+          indentDisabled: indentationState.indentDisabled,
+          outdentDisabled: indentationState.outdentDisabled
         });
       }
     });

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

@@ -0,0 +1,104 @@
+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 const pluginKey = new PluginKey('indentationButtonsPlugin');
+
+function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation) {
+  const state = {
+    indentDisabled: true,
+    outdentDisabled: true,
+    node: null
+  };
+  const {
+    selection
+  } = editorState;
+  const 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)) {
+    const {
+      indentLevel,
+      itemIndex
+    } = getListItemAttributes(selection.$head);
+    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)) {
+    const indentLevel = getTaskListIndentLevel(selection) || 0;
+    const itemIndex = getTaskItemIndex(editorState);
+    return {
+      indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL,
+      outdentDisabled: indentLevel <= 1,
+      node: 'taskList'
+    };
+  }
+
+  const isTopLevelParagraphOrHeading = selection.$from.depth === 1;
+  const 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)) {
+    const indentationMark = node.marks.find(mark => 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 const createPlugin = ({
+  dispatch,
+  showIndentationButtons,
+  allowHeadingAndParagraphIndentation
+}) => new SafePlugin({
+  state: {
+    init(_config, state) {
+      const initialState = {
+        indentDisabled: true,
+        outdentDisabled: true,
+        node: null
+      };
+      return showIndentationButtons ? getIndentationButtonsState(state, allowHeadingAndParagraphIndentation) : initialState;
+    },
+
+    apply(_tr, pluginState, _oldState, newState) {
+      if (showIndentationButtons) {
+        const state = getIndentationButtonsState(newState, allowHeadingAndParagraphIndentation);
+
+        if (!shallowEqual(pluginState, state)) {
+          dispatch(pluginKey, state);
+          return state;
+        }
+      }
+
+      return pluginState;
+    }
+
+  },
+  key: pluginKey
+});

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

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

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

@@ -124,7 +124,7 @@ function useItems(props) {
       value: {
         name: 'indent'
       },
-      isDisabled: true,
+      isDisabled: props.indentDisabled,
       isActive: false,
       elemAfter: jsx("div", {
         css: shortcutStyle
@@ -135,7 +135,7 @@ function useItems(props) {
       value: {
         name: 'outdent'
       },
-      isDisabled: true,
+      isDisabled: props.outdentDisabled,
       isActive: false,
       elemAfter: jsx("div", {
         css: shortcutStyle

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

@@ -15,7 +15,9 @@ export default function ToolbarListsIndentation(props) {
     showIndentationButtons,
     popupsMountPoint,
     popupsBoundariesElement,
-    popupsScrollableElement
+    popupsScrollableElement,
+    indentDisabled,
+    outdentDisabled
   } = props;
 
   if (isSmall) {
@@ -30,6 +32,8 @@ export default function ToolbarListsIndentation(props) {
       showIndentationButtons: showIndentationButtons,
       orderedListActive: orderedListActive,
       orderedListDisabled: orderedListDisabled,
+      indentDisabled: indentDisabled,
+      outdentDisabled: outdentDisabled,
       disabled: disabled,
       onItemActivated: onItemActivated
     });
@@ -43,6 +47,8 @@ export default function ToolbarListsIndentation(props) {
     showIndentationButtons: showIndentationButtons,
     orderedListActive: orderedListActive,
     orderedListDisabled: orderedListDisabled,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled,
     disabled: disabled,
     onItemActivated: onItemActivated
   });

package/dist/es2019/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({
   buttonName,
   editorView
@@ -14,22 +17,41 @@ export function onItemActivated({
       break;
 
     case 'indent':
-      editorView.someProp('handleKeyDown', handleKeyDown => handleKeyDown(editorView, new KeyboardEvent('keydown', {
-        bubbles: true,
-        cancelable: true,
-        key: 'Tab',
-        code: 'Tab'
-      })));
-      break;
+      {
+        const 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', handleKeyDown => handleKeyDown(editorView, new KeyboardEvent('keydown', {
-        bubbles: true,
-        cancelable: true,
-        shiftKey: true,
-        key: 'Tab',
-        code: 'Tab'
-      })));
-      break;
+      {
+        const 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/es2019/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 const openTypeAhead = props => tr => {
   const {
     triggerHandler,
@@ -21,6 +22,8 @@ export const openTypeAheadAtCursor = ({
   inputMethod,
   query
 }) => tr => {
+  var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+
   openTypeAhead({
     triggerHandler,
     inputMethod,
@@ -46,6 +49,12 @@ export const openTypeAheadAtCursor = ({
 
   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/es2019/types/browser.js

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

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

@@ -13,10 +13,34 @@ const 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 const checkForModal = target => {
+  const 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;
+};
 
 const clickAreaClickHandler = (view, event) => {
-  const contentArea = event.currentTarget.querySelector('.ak-editor-content-area');
-  const editorFocused = !!(view && view.hasFocus());
+  var _view$hasFocus;
+
+  const isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
+  const isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
   const 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 @@ const clickAreaClickHandler = (view, event) => {
 
   const isTextAreaClicked = target.nodeName === 'TEXTAREA';
   const isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
-  const targetIsNotContentArea = !contentArea;
-  const tragetIsNotChildOfContentArea = !insideContentArea(target.parentNode);
-  const editorIsNotInFocus = editorFocused === false;
+  const isTargetChildOfContentArea = insideContentArea(target.parentNode);
   const selection = window.getSelection();
   const isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  const isModalDialog = !!target.closest('[role=dialog]');
-  const isClickOutsideEditor = (targetIsNotContentArea || tragetIsNotChildOfContentArea || editorIsNotInFocus) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isModalDialog && !isBreadcrumbClicked && !isPopupClicked && !isEditorPopupTextSelected;
+  const 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,19 +63,25 @@ const clickAreaClickHandler = (view, event) => {
 };
 
 const outsideProsemirrorEditorClickHandler = (view, event) => {
+  var _view$hasFocus2;
+
   const {
     dispatch,
     dom,
     state
   } = view;
-  const editorFocused = !!(view && view.hasFocus());
   const {
     tr
   } = state;
-  appendEmptyParagraph(event, dom, tr);
+  const isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus2 = view.hasFocus) !== null && _view$hasFocus2 !== void 0 && _view$hasFocus2.call(view));
+  const 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) {
@@ -70,12 +97,4 @@ const outsideProsemirrorEditorClickHandler = (view, event) => {
   event.preventDefault();
 };
 
-const appendEmptyParagraph = (event, dom, tr) => {
-  const bottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
-
-  if (bottomAreaClicked) {
-    addParagraphAtEnd(tr);
-  }
-};
-
 export { clickAreaClickHandler };

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

@@ -36,7 +36,7 @@ const commentEditorStyle = css`
   }
 
   min-width: 272px;
-  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */
+  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */
   /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */
 
   height: auto;
@@ -55,7 +55,7 @@ const ContentArea = createEditorContentStyle(css`
   line-height: 24px;
 
   /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
-  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/
+  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/
   .ProseMirror {
     margin: 12px ${CommentEditorMargin}px ${CommentEditorMargin}px;
   }

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

@@ -10,7 +10,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';
@@ -35,15 +35,12 @@ import { embedCardStyles } from '../../plugins/card/ui/styled';
 import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
-const contentStyles = props => {
-  var _props$featureFlags;
-
-  return css`
+const contentStyles = props => css`
   .ProseMirror {
     outline: none;
     font-size: ${editorFontSize({
-    theme: props.theme
-  })}px;
+  theme: props.theme
+})}px;
     ${whitespaceSharedStyles};
     ${paragraphSharedStyles};
     ${listsSharedStyles};
@@ -75,7 +72,7 @@ const contentStyles = props => {
 
   ${placeholderTextStyles}
   ${placeholderStyles}
-  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
+  ${codeBlockStyles(props)}
 
   ${blocktypeStyles(props)}
   ${textFormattingStyles(props)}
@@ -158,7 +155,6 @@ const contentStyles = props => {
     }
   }
 `;
-};
 
 export const createEditorContentStyle = styles => {
   return /*#__PURE__*/React.forwardRef((props, ref) => {