@atlaskit/editor-core 173.0.1 → 175.0.0

package/dist/esm/plugins/block-type/commands/block-type.js

@@ -4,7 +4,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { Selection } from 'prosemirror-state';
 import { findWrapping } from 'prosemirror-transform';
 import { safeInsert } from 'prosemirror-utils';
 import { CODE_BLOCK, BLOCK_QUOTE, PANEL, HEADINGS_BY_NAME, NORMAL_TEXT } from '../types';
@@ -14,6 +13,7 @@ import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE }
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
 import { CellSelection } from '@atlaskit/editor-tables';
+import { transformToCodeBlockAction } from './transform-to-code-block';
 export function setBlockType(name) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes;
@@ -230,7 +230,7 @@ export var insertBlockTypesWithAnalytics = function insertBlockTypesWithAnalytic
 };
 /**
  * Function will add wrapping node.
- * 1. If currently selected blocks can be wrapped in the warpper type it will wrap them.
+ * 1. If currently selected blocks can be wrapped in the wrapper type it will wrap them.
  * 2. If current block can not be wrapped inside wrapping block it will create a new block below selection,
  *  and set selection on it.
  */
@@ -275,19 +275,24 @@ function insertCodeBlock() {
     var _state$selection$$fro;
 
     var tr = state.tr;
-    var _state$selection2 = state.selection,
-        $to = _state$selection2.$to,
-        $from = _state$selection2.$from;
+    var from = state.selection.from;
     var codeBlock = state.schema.nodes.codeBlock;
-    var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
-    var parentType = state.selection.$from.parent.type;
-    /** We always want to append a block type unless we're inserting into a paragraph
-     * AND it's a valid child of the grandparent node
+    var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+    var parentNodeType = state.selection.$from.parent.type;
+    /** We always want to append a codeBlock unless we're inserting into a paragraph
+     * AND it's a valid child of the grandparent node.
+     * Insert the current selection as codeBlock content unless it contains nodes other
+     * than paragraphs and inline.
      */
 
-    if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, codeBlock.createAndFill())) {
-      tr.replaceRangeWith($from.pos, $to.pos, codeBlock.createAndFill());
-      tr.setSelection(Selection.near(tr.doc.resolve(state.selection.to)));
+    var canInsertCodeBlock = shouldSplitSelectedNodeOnNodeInsertion({
+      parentNodeType: parentNodeType,
+      grandParentNodeType: grandParentNodeType,
+      content: codeBlock.createAndFill()
+    }) && contentAllowedInCodeBlock(state);
+
+    if (canInsertCodeBlock) {
+      tr = transformToCodeBlockAction(state, from);
     } else {
       safeInsert(codeBlock.createAndFill())(tr).scrollIntoView();
     }
@@ -299,6 +304,27 @@ function insertCodeBlock() {
     return true;
   };
 }
+/**
+ * Check if the current selection contains any nodes that are not permitted
+ * as codeBlock child nodes. Note that this allows paragraphs and inline nodes
+ * as we extract their text content.
+ */
+
+
+function contentAllowedInCodeBlock(state) {
+  var _state$selection2 = state.selection,
+      $from = _state$selection2.$from,
+      $to = _state$selection2.$to;
+  var isAllowedChild = true;
+  state.doc.nodesBetween($from.pos, $to.pos, function (node) {
+    if (!isAllowedChild) {
+      return false;
+    }
+
+    return isAllowedChild = node.type === state.schema.nodes.listItem || node.type === state.schema.nodes.bulletList || node.type === state.schema.nodes.orderedList || node.type === state.schema.nodes.paragraph || node.isInline || node.isText;
+  });
+  return isAllowedChild;
+}
 
 export var cleanUpAtTheStartOfDocument = function cleanUpAtTheStartOfDocument(state, dispatch) {
   var _ref3 = state.selection,

package/dist/esm/plugins/block-type/commands/transform-to-code-block.js

@@ -1,34 +1,59 @@
 import { TextSelection } from 'prosemirror-state';
 import { mapSlice } from '../../../utils/slice';
-export function transformToCodeBlockAction(state, start, end, attrs) {
-  if (!state.selection.empty) {
-    // Don't do anything, if there is something selected
-    return state.tr;
-  }
-
+import { Fragment } from 'prosemirror-model';
+import { timestampToString } from '@atlaskit/editor-common/utils';
+export function transformToCodeBlockAction(state, start, attrs) {
   var startOfCodeBlockText = state.selection.$from;
-  var endLinePosition = startOfCodeBlockText.end();
-  var startLinePosition = startOfCodeBlockText.start();
-  var parentStartPosition = startOfCodeBlockText.before();
-  var codeBlockSlice = mapSlice(state.doc.slice(startOfCodeBlockText.pos, endLinePosition), function (node) {
+  var endPosition = state.selection.empty ? startOfCodeBlockText.end() : state.selection.$to.pos;
+  var startLinePosition = startOfCodeBlockText.start(); //when cmd+A is used to select the content. start position should be 0.
+
+  var parentStartPosition = startOfCodeBlockText.depth === 0 ? 0 : startOfCodeBlockText.before();
+  var contentSlice = state.doc.slice(startOfCodeBlockText.pos, endPosition);
+  var codeBlockSlice = mapSlice(contentSlice, function (node, parent, index) {
     if (node.type === state.schema.nodes.hardBreak) {
       return state.schema.text('\n');
     }
 
     if (node.isText) {
       return node.mark([]);
-    } else if (node.isInline) {
+    }
+
+    if (node.isInline) {
+      // Convert dates
+      if (node.attrs.timestamp) {
+        return state.schema.text(timestampToString(node.attrs.timestamp, null));
+      } // Convert links
+
+
+      if (node.attrs.url) {
+        return state.schema.text(node.attrs.url);
+      }
+
       return node.attrs.text ? state.schema.text(node.attrs.text) : null;
-    } else {
-      return node.content.childCount ? node.content : null;
+    } // if the current node is the last child of the Slice exit early to prevent
+    // adding additional line breaks
+
+
+    if (contentSlice.content.childCount - 1 === index) {
+      return node.content;
+    } //useful to decide whether to append line breaks when the content has list items.
+
+
+    var isParentLastChild = parent && contentSlice.content.childCount - 1 === index; // add line breaks at the end of each paragraph to mimic layout of selected content
+    // do not add line breaks when the 'paragraph' parent is last child.
+
+    if (node.content.childCount && node.type === state.schema.nodes.paragraph && !isParentLastChild) {
+      return node.content.append(Fragment.from(state.schema.text('\n\n')));
     }
+
+    return node.content.childCount ? node.content : null;
   });
   var tr = state.tr; // Replace current block node
 
   var startMapped = startLinePosition === start ? parentStartPosition : start;
   var codeBlock = state.schema.nodes.codeBlock;
   var codeBlockNode = codeBlock.createChecked(attrs, codeBlockSlice.content);
-  tr.replaceWith(startMapped, Math.min(endLinePosition, tr.doc.content.size), codeBlockNode); // Reposition cursor when inserting into layouts or table headers
+  tr.replaceWith(startMapped, Math.min(endPosition, tr.doc.content.size), codeBlockNode); // Reposition cursor when inserting into layouts or table headers
 
   var mapped = tr.doc.resolve(tr.mapping.map(startMapped) + 1);
   var selection = TextSelection.findFrom(mapped, 1, true);

package/dist/esm/plugins/block-type/pm-plugins/input-rule.js

@@ -104,7 +104,16 @@ function getCodeBlockRules(schema) {
     },
     eventType: EVENT_TYPE.TRACK
   });
+
+  var validMatchLength = function validMatchLength(match) {
+    return match.length > 0 && match[0].length === 3;
+  };
+
   var threeTildeRule = createRule(/(?!\s)(`{3,})$/, function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+
     var attributes = {};
 
     if (match[4]) {
@@ -112,7 +121,7 @@ function getCodeBlockRules(schema) {
     }
 
     if (isConvertableToCodeBlock(state)) {
-      return transformToCodeBlockAction(state, start, end, attributes);
+      return transformToCodeBlockAction(state, start, attributes);
     }
 
     var tr = state.tr;
@@ -122,6 +131,10 @@ function getCodeBlockRules(schema) {
     return tr;
   });
   var leftNodeReplacementThreeTildeRule = createRule(new RegExp("((".concat(leafNodeReplacementCharacter, "`{3,})|^\\s(`{3,}))(\\S*)$")), function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+
     var attributes = {};
 
     if (match[4]) {
@@ -151,8 +164,7 @@ export function inputRulePlugin(schema, featureFlags) {
 
   if (rules.length !== 0) {
     return createPlugin('block-type', rules, {
-      isBlockNodeRule: true,
-      useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
+      isBlockNodeRule: true
     });
   }
 

package/dist/esm/plugins/block-type/pm-plugins/keymap.js

@@ -1,21 +1,22 @@
-import { chainCommands } from 'prosemirror-commands';
-import { undoInputRule } from 'prosemirror-inputrules';
 import { redo, undo } from 'prosemirror-history';
 import * as keymaps from '../../../keymaps';
 import * as commands from '../../../commands';
 import * as blockTypes from '../types';
 import { keymap } from '../../../utils/keymap';
-import { cleanUpAtTheStartOfDocument, insertBlockTypesWithAnalytics } from '../../block-type/commands';
+import { cleanUpAtTheStartOfDocument, insertBlockTypesWithAnalytics } from '../commands';
+import { deleteEmptyParagraphAndMoveBlockUp } from '../../../utils/commands';
 import { INPUT_METHOD } from '../../analytics';
-var tryUndoInputRuleElseUndoHistory = chainCommands(undoInputRule, undo);
+import { isNodeAWrappingBlockNode } from '../utils';
 export default function keymapPlugin(schema, featureFlags) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
   keymaps.bindKeymapWithCommand(keymaps.moveUp.common, commands.createNewParagraphAbove, list);
   keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), redo, list);
-  keymaps.bindKeymapWithCommand(keymaps.undo.common, featureFlags.useUnpredictableInputRule ? tryUndoInputRuleElseUndoHistory : undo, list);
+  keymaps.bindKeymapWithCommand(keymaps.undo.common, undo, list);
   keymaps.bindKeymapWithCommand(keymaps.backspace.common, cleanUpAtTheStartOfDocument, list);
+  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), list);
+  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), list);
 
   if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
     keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBlockQuote), insertBlockTypesWithAnalytics(blockTypes.BLOCK_QUOTE.name, INPUT_METHOD.KEYBOARD), list);

package/dist/esm/plugins/block-type/utils.js

@@ -0,0 +1,10 @@
+import { WRAPPER_BLOCK_TYPES } from './types';
+export var isNodeAWrappingBlockNode = function isNodeAWrappingBlockNode(node) {
+  if (!node) {
+    return false;
+  }
+
+  return WRAPPER_BLOCK_TYPES.some(function (blockNode) {
+    return blockNode.name === node.type.name;
+  });
+};

package/dist/esm/plugins/breakout/index.js

@@ -9,17 +9,23 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
 import { BreakoutCssClassName } from './constants';
 import { pluginKey } from './plugin-key';
-import { parsePx } from '../../utils/dom';
 import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 
 var BreakoutView = /*#__PURE__*/function () {
-  function BreakoutView(node, view, eventDispatcher) {
+  function BreakoutView(
+  /**
+   * Note: this is actually a PMMark -- however our version
+   * of the prosemirror and prosemirror types mean using PMNode
+   * is not problematic.
+   */
+  mark, view, eventDispatcher) {
     var _this = this;
 
     _classCallCheck(this, BreakoutView);
@@ -32,21 +38,27 @@ var BreakoutView = /*#__PURE__*/function () {
         return;
       }
 
-      var width = calcBreakoutWidth(_this.node.attrs.mode, widthState.width);
-      var newStyle = "width: ".concat(width, "; ");
-      var lineLength = widthState.lineLength;
-      var widthPx = parsePx(width);
+      var containerStyle = "";
+      var contentStyle = "";
+      var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width);
 
-      if (lineLength && widthPx) {
-        var marginLeftPx = -(widthPx - lineLength) / 2;
-        newStyle += "transform: none; margin-left: ".concat(marginLeftPx, "px;");
+      if (widthState.lineLength) {
+        if (breakoutWidthPx < widthState.lineLength) {
+          breakoutWidthPx = widthState.lineLength;
+        }
+
+        containerStyle += "\n        transform: none;\n        display: flex;\n        justify-content: center;\n        "; // There is a delay in the animation because widthState is delayed.
+        // When the editor goes full width the animation for the editor
+        // begins and finishes before widthState can update the new dimensions.
+
+        contentStyle += "\n        min-width: ".concat(breakoutWidthPx, "px;\n        transition: min-width 0.5s ").concat(akEditorSwoopCubicBezier, ";\n      ");
       } else {
         // fallback method
         // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
         //
         // this approach doesn't work well with position: fixed, so
         // it breaks things like sticky headers
-        newStyle += "transform: translateX(-50%); margin-left: 50%;";
+        containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
       } // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
       // `ignoreMutation` life-cycle event. @see ED-9947
 
@@ -61,9 +73,12 @@ var BreakoutView = /*#__PURE__*/function () {
       }
 
       if (typeof _this.dom.style.cssText !== 'undefined') {
-        _this.dom.style.cssText = newStyle;
+        _this.dom.style.cssText = containerStyle;
+        _this.contentDOM.style.cssText = contentStyle;
       } else {
-        _this.dom.setAttribute('style', newStyle);
+        _this.dom.setAttribute('style', containerStyle);
+
+        _this.contentDOM.setAttribute('style', contentStyle);
       }
     });
 
@@ -71,10 +86,10 @@ var BreakoutView = /*#__PURE__*/function () {
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
     var dom = document.createElement('div');
     dom.className = BreakoutCssClassName.BREAKOUT_MARK;
-    dom.setAttribute('data-layout', node.attrs.mode);
+    dom.setAttribute('data-layout', mark.attrs.mode);
     dom.appendChild(contentDOM);
     this.dom = dom;
-    this.node = node;
+    this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
     this.eventDispatcher = eventDispatcher;
@@ -131,8 +146,12 @@ function createPlugin(_ref) {
     key: pluginKey,
     props: {
       nodeViews: {
-        breakout: function breakout(node, view) {
-          return new BreakoutView(node, view, eventDispatcher);
+        // Note: When we upgrade to prosemirror 1.27.2 -- we should
+        // move this to markViews.
+        // See the following link for more details:
+        // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
+        breakout: function breakout(mark, view) {
+          return new BreakoutView(mark, view, eventDispatcher);
         }
       }
     }

package/dist/esm/plugins/card/nodeviews/embedCard.js

@@ -31,7 +31,6 @@ import { createDisplayGrid } from '../../../plugins/grid';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
-import { pluginKey as tableResizePluginKey } from '../../table/pm-plugins/table-resizing';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbedCardComponent, _React$PureComponent);
@@ -157,15 +156,24 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "saveOriginalDimensionsAttributes", function (height, width) {
-      var view = _this.props.view;
-      var tableResizeState = tableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
+      var view = _this.props.view; // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+
+      var fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: function getState(state) {
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      var fakeTableResizeState = fakeTableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
       // Changing ADF in the middle of resize will break table resize plugin logic
       // (tables will be considered different at the end of the drag and cell size won't be stored)
       // But this is not a big problem, editor user will be seeing latest height anyway (via updated state)
       // And even if page to be saved with slightly outdated height, renderer is capable of reading latest height value
       // when embed loads, and so it won't be a problem.
 
-      if (tableResizeState !== null && tableResizeState !== void 0 && tableResizeState.dragging) {
+      if (fakeTableResizeState !== null && fakeTableResizeState !== void 0 && fakeTableResizeState.dragging) {
         return;
       }
 

package/dist/esm/plugins/card/toolbar.js

@@ -27,7 +27,6 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildOpenedSettingsPayload, buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 import { getFeatureFlags } from '../feature-flags-context';
 export var removeCard = function removeCard(state, dispatch) {
   if (!(state.selection instanceof NodeSelection)) {
@@ -113,7 +112,7 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform, lin
     } : {}; // Applies padding override for when link picker is currently displayed
 
     var className = pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-    return _objectSpread(_objectSpread({
+    return _objectSpread(_objectSpread(_objectSpread({
       title: intl.formatMessage(messages.card),
       className: className,
       nodeType: nodeType
@@ -132,7 +131,9 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform, lin
         return element;
       },
       items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions)
-    }, pluginState.showLinkingToolbar ? editLinkToolbarConfig : {});
+    }, pluginState.showLinkingToolbar ? editLinkToolbarConfig : {}), {}, {
+      scrollable: pluginState.showLinkingToolbar ? false : true
+    });
   };
 };
 
@@ -205,7 +206,16 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink
       }, {
         type: 'separator'
-      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard)), _toConsumableArray(getCopyButtonGroup(state, intl, node)), _toConsumableArray(getSettingsButtonGroup(state, intl)), [{
+      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard)), [{
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: node.type
+        }, {
+          type: 'separator'
+        }]
+      }], _toConsumableArray(getSettingsButtonGroup(state, intl)), [{
         id: 'editor.link.delete',
         type: 'button',
         appearance: 'danger',
@@ -284,10 +294,4 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl) {
   }, {
     type: 'separator'
   }] : [];
-};
-
-var getCopyButtonGroup = function getCopyButtonGroup(state, intl, node) {
-  return state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, node.type), {
-    type: 'separator'
-  }] : [];
 };

package/dist/esm/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -92,7 +92,8 @@ var Option = function Option(_ref) {
       width: 38,
       height: 38,
       label: title
-    })),
+    })) // @ts-ignore Overriding Menu styles is not supported
+    ,
     css: getCustomStyles(selected, disabled),
     description: description,
     testId: testId,

package/dist/esm/plugins/code-block/pm-plugins/codeBlockCopySelectionPlugin.js

@@ -94,7 +94,7 @@ export function provideVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }
 export function removeVisualFeedbackForCopyButton(state, dispatch) {
   var tr = state.tr;
@@ -108,5 +108,5 @@ export function removeVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }

package/dist/esm/plugins/code-block/styles.js

@@ -4,10 +4,10 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 export var codeBlockStyles = function codeBlockStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), codeBlockSharedStyles(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, token('color.blanket.danger', R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), codeBlockSharedStyles(props), blockNodesVerticalMargin, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, token('color.blanket.danger', R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };

package/dist/esm/plugins/code-block/toolbar.js

@@ -104,7 +104,8 @@ export var getToolbarConfig = function getToolbarConfig() {
         return findDomRefAtPos(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton])
+      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
+      scrollable: true
     };
   };
 };