@atlaskit/editor-core 150.0.3 → 151.0.0

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
+import { NodeSelection } from 'prosemirror-state';
+import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -18,7 +19,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } f
 import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia } from './utils';
+import { downloadMedia, removeMediaGroupNode } from './utils';
+import { Fragment } from 'prosemirror-model';
 
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -28,13 +30,43 @@ const remove = (state, dispatch) => {
   return true;
 };
 
-const removeMediaCard = (state, mediaPluginState) => {
-  const getPos = () => {
-    const mediaOffset = state.selection.$from.parentOffset + 1;
-    return mediaOffset;
-  };
+const handleRemoveMediaGroup = (state, dispatch) => {
+  const tr = removeMediaGroupNode(state);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+const changeMediaCardToInline = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  const mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  const space = state.schema.text(' ');
+  let content = Fragment.from([mediaInlineNode, space]);
+  const node = paragraph.createChecked({}, content);
+  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  let tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
   return true;
 };
 
@@ -48,9 +80,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     options: [{
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
-      onClick: () => {
-        return true;
-      },
+      onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       title: intl.formatMessage(messages.displayThumbnail),
@@ -94,9 +124,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     onFocus: hoverDecoration(mediaGroup, true),
     onBlur: hoverDecoration(mediaGroup, false),
     title: intl.formatMessage(commonMessages.remove),
-    onClick: state => {
-      return removeMediaCard(state, mediaPluginState);
-    },
+    onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
   return items;
@@ -210,6 +238,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
 export const floatingToolbar = (state, intl, options = {}) => {
   const {
     media,
+    mediaInline,
     mediaSingle,
     mediaGroup
   } = state.schema.nodes;
@@ -227,7 +256,7 @@ export const floatingToolbar = (state, intl, options = {}) => {
     return;
   }
 
-  const nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
   const baseToolbar = {
     title: 'Media floating controls',
     nodeType,

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

@@ -1,4 +1,5 @@
 import { getMediaClient } from '@atlaskit/media-client';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
 
@@ -29,4 +30,19 @@ export const downloadMedia = async mediaPluginState => {
   } catch (err) {
     return false;
   }
+};
+export const removeMediaGroupNode = state => {
+  const {
+    mediaGroup
+  } = state.schema.nodes;
+  const mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
+  let tr = state.tr; // If it is the last media group in filmstrip, remove the entire filmstrip
+
+  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
+    tr = removeParentNodeOfType(mediaGroup)(tr);
+  } else {
+    tr = removeSelectedNode(tr);
+  }
+
+  return tr;
 };

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+export const messages = defineMessages({
+  info: {
+    id: 'fabric.editor.info',
+    defaultMessage: 'Info',
+    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
+  },
+  note: {
+    id: 'fabric.editor.note',
+    defaultMessage: 'Note',
+    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
+  },
+  success: {
+    id: 'fabric.editor.success',
+    defaultMessage: 'Success',
+    description: 'Panels provide a way to highlight text. The success panel has a green background.'
+  },
+  warning: {
+    id: 'fabric.editor.warning',
+    defaultMessage: 'Warning',
+    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
+  },
+  error: {
+    id: 'fabric.editor.error',
+    defaultMessage: 'Error',
+    description: 'Panels provide a way to highlight text. The error panel has a red background.'
+  },
+  emoji: {
+    id: 'fabric.editor.panel.emoji',
+    defaultMessage: 'Add emoji',
+    description: 'Select the panel icon'
+  },
+  backgroundColor: {
+    id: 'fabric.editor.panel.backgroundColor',
+    defaultMessage: 'Background color',
+    description: 'Select the panel background color.'
+  }
+});

package/dist/es2019/plugins/panel/toolbar.js

@@ -1,4 +1,3 @@
-import { defineMessages } from 'react-intl';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import NoteIcon from '@atlaskit/icon/glyph/editor/note';
@@ -16,44 +15,16 @@ import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
-export const messages = defineMessages({
-  info: {
-    id: 'fabric.editor.info',
-    defaultMessage: 'Info',
-    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
-  },
-  note: {
-    id: 'fabric.editor.note',
-    defaultMessage: 'Note',
-    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
-  },
-  success: {
-    id: 'fabric.editor.success',
-    defaultMessage: 'Success',
-    description: 'Panels provide a way to highlight text. The success panel has a green background.'
-  },
-  warning: {
-    id: 'fabric.editor.warning',
-    defaultMessage: 'Warning',
-    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
-  },
-  error: {
-    id: 'fabric.editor.error',
-    defaultMessage: 'Error',
-    description: 'Panels provide a way to highlight text. The error panel has a red background.'
-  },
-  emoji: {
-    id: 'fabric.editor.panel.emoji',
-    defaultMessage: 'Add emoji',
-    description: 'Select the panel icon'
-  },
-  backgroundColor: {
-    id: 'fabric.editor.panel.backgroundColor',
-    defaultMessage: 'Background color',
-    description: 'Select the panel background color.'
-  }
-});
-export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
+import { messages } from './message';
+export const panelIconMap = {
+  [PanelType.INFO]: ':info:',
+  [PanelType.NOTE]: ':note:',
+  [PanelType.WARNING]: ':warning:',
+  [PanelType.ERROR]: ':error:',
+  [PanelType.SUCCESS]: ':success:',
+  [PanelType.TIP]: ':tip:'
+};
+export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
   const items = [{
     id: 'editor.panel.info',
     type: 'button',
@@ -100,10 +71,16 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       }
 
       let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+      const emojiInfo = panelNode.node.attrs.panelType;
+      const panelInfo = panelIconMap[emojiInfo];
+      const previousEmoji = panelInfo ? {
+        emoji: panelInfo
+      } : {};
 
       if (previousColor === color) {
         changePanelType(PanelType.CUSTOM, {
-          color
+          color,
+          ...previousEmoji
         }, isCustomPanelEnabled)(state, dispatch);
         return false;
       }
@@ -119,7 +96,8 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         eventType: EVENT_TYPE.TRACK
       };
       withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
-        color
+        color,
+        ...previousEmoji
       }, isCustomPanelEnabled))(state, dispatch);
       return false;
     };
@@ -188,35 +166,38 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       value: panelColor,
       border: DEFAULT_BORDER_COLOR
     };
-    const colorPicker = {
-      id: 'editor.panel.colorPicker',
-      title: formatMessage(messages.backgroundColor),
-      type: 'select',
-      selectType: 'color',
-      defaultValue: defaultPalette,
-      options: panelBackgroundPalette,
-      onChange: option => changeColor(option.value)
-    };
-    const emojiPicker = {
-      id: 'editor.panel.emojiPicker',
-      title: formatMessage(messages.emoji),
-      type: 'select',
-      selectType: 'emoji',
-      options: [],
-      selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
-      onChange: emojiShortName => changeEmoji(emojiShortName)
-    };
-    const removeEmojiButton = {
-      id: 'editor.panel.removeEmoji',
-      type: 'button',
-      icon: RemoveEmojiIcon,
-      onClick: removeEmoji(),
-      title: formatMessage(commonMessages.removeEmoji),
-      disabled: activePanelIcon ? false : true
-    };
-    items.push(emojiPicker, removeEmojiButton, {
-      type: 'separator'
-    }, colorPicker);
+
+    if (isCustomPanelEditable) {
+      const colorPicker = {
+        id: 'editor.panel.colorPicker',
+        title: formatMessage(messages.backgroundColor),
+        type: 'select',
+        selectType: 'color',
+        defaultValue: defaultPalette,
+        options: panelBackgroundPalette,
+        onChange: option => changeColor(option.value)
+      };
+      const emojiPicker = {
+        id: 'editor.panel.emojiPicker',
+        title: formatMessage(messages.emoji),
+        type: 'select',
+        selectType: 'emoji',
+        options: [],
+        selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
+        onChange: emojiShortName => changeEmoji(emojiShortName)
+      };
+      const removeEmojiButton = {
+        id: 'editor.panel.removeEmoji',
+        type: 'button',
+        icon: RemoveEmojiIcon,
+        onClick: removeEmoji(),
+        title: formatMessage(commonMessages.removeEmoji),
+        disabled: activePanelIcon ? false : true
+      };
+      items.push(emojiPicker, removeEmojiButton, {
+        type: 'separator'
+      }, colorPicker);
+    }
   }
 
   items.push({
@@ -249,7 +230,7 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory) =>
       panelIcon
     } = panelObject.node.attrs; // force toolbar to be turned on
 
-    const items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
+    const items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, options.UNSAFE_allowCustomPanel && options.UNSAFE_allowCustomPanelEdit || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
 
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);

package/dist/es2019/plugins/panel/utils.js

@@ -21,7 +21,7 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
     'data-panel-type': panelType || PanelType.INFO,
     style
   };
-  const iconSpan = ['span', {
+  const iconDiv = ['div', {
     class: PanelSharedCssClassName.icon
   }];
   const contentDiv = ['div', {
@@ -29,7 +29,7 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   }, 0];
 
   if (hasIcon) {
-    return ['div', panelAttrs, iconSpan, contentDiv];
+    return ['div', panelAttrs, iconDiv, contentDiv];
   } else {
     return ['div', panelAttrs, contentDiv];
   }

package/dist/es2019/plugins/paste/linkify-md-plugin.js

@@ -1,5 +1,5 @@
-import LinkifyIt from 'linkify-it';
-import { linkifyMatch } from '../hyperlink/utils'; // modified version of the original Linkify plugin
+import { linkifyMatch } from '@atlaskit/adf-schema';
+import LinkifyIt from 'linkify-it'; // modified version of the original Linkify plugin
 // https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js
 
 const arrayReplaceAt = (src, pos, newElements) => {

package/dist/es2019/plugins/status/styles.js

@@ -3,6 +3,8 @@ import { StatusSharedCssClassName } from '@atlaskit/editor-common';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const statusStyles = css`
   .${StatusSharedCssClassName.STATUS_CONTAINER} {
+    display: inline-block;
+
     > span {
       display: inline-block;
       cursor: pointer;

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -462,10 +462,26 @@ export class TableRowNodeView {
      * so it should be safe to ignore mutations that we cause
      * by updating styles and classnames on this DOM element
      *
-     * Update: should allow mutations for row selection to avoid known issue with table selection highlight in firefox
+     * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
      * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
      * */
-    return !(mutationRecord.type === 'selection' && mutationRecord.target.tagName === 'TR');
+    const isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
+    /**
+     * Update: should not ignore mutations when an node is added, as this interferes with
+     * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
+     *
+     * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
+     * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
+     * selection and insertion.
+     */
+
+    const isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
+
+    if (isTableSelection || isNodeInsertion) {
+      return false;
+    }
+
+    return true;
   }
   /* receive external events */
 

package/dist/es2019/profiler/render-count.js

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import uuid from 'uuid';
+import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common';
+export let ProfiledComponentIds;
+
+(function (ProfiledComponentIds) {
+  ProfiledComponentIds["editor"] = "Editor";
+  ProfiledComponentIds["appearance"] = "FullPageEditor";
+  ProfiledComponentIds["reactEditorView"] = "ReactEditorView";
+  ProfiledComponentIds["contentArea"] = "FullPageContentArea";
+  ProfiledComponentIds["toolbar"] = "FullPageToolbar";
+  ProfiledComponentIds["mention"] = "MentionNodeView";
+})(ProfiledComponentIds || (ProfiledComponentIds = {}));
+
+const CoreRenderCountProfiler = ({
+  componentId
+}) => {
+  const {
+    current: instanceId
+  } = useRef(uuid());
+
+  const onRender = ({
+    renderCount
+  }) => {
+    const profiler = RenderCountProfilerClass.getInstance({
+      store: window
+    });
+    profiler.setRenderCount({
+      componentId,
+      instanceId,
+      renderCount
+    });
+  };
+
+  useComponentRenderTracking({
+    onRender,
+    propsDiffingOptions: {
+      enabled: false
+    },
+    zeroBasedCount: false
+  });
+  return null;
+};
+
+export const RenderCountProfiler = ({
+  componentId
+}) => {
+  const profiler = RenderCountProfilerClass.getInstance({
+    store: window
+  });
+
+  if (profiler.isEnabled()) {
+    return /*#__PURE__*/React.createElement(CoreRenderCountProfiler, {
+      componentId: componentId
+    });
+  }
+
+  return null;
+};

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

@@ -37,7 +37,7 @@ const CommentEditor = styled.div`
   /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */
   min-height: 150px;
   height: auto;
-  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''} background-color: white;
+  background-color: white;
   border: 1px solid ${N40};
   box-sizing: border-box;
   border-radius: ${borderRadius()}px;
@@ -51,6 +51,7 @@ const ContentArea = styled(ContentStyles)`
   overflow-x: hidden;
   overflow-y: auto;
   line-height: 24px;
+  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''};
 
   /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
   /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/
@@ -155,7 +156,8 @@ class Editor extends React.Component {
           innerRef: ref => this.containerElement = ref,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
-          })
+          }),
+          maxHeight: maxHeight
         }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,