@atlaskit/editor-core 173.0.1 → 175.0.0

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

@@ -18,8 +18,8 @@ import { jsx } from '@emotion/react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
-import { header, footer, contentWrapper, line, content, columnRight, columnLeft, row, codeSm, codeMd, codeLg, title } from './styles';
+import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
+import { header, footer, contentWrapper, line, content, row, codeSm, codeMd, codeLg, title, column, dialogHeader } from './styles';
 import * as keymaps from '../../../keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
 import { toolbarMessages } from '../../text-formatting/ui/Toolbar/toolbar-messages';
@@ -400,6 +400,16 @@ var quickInsertAutoFormat = function quickInsertAutoFormat(_ref3) {
   };
 };
 
+var getKeyParts = function getKeyParts(keymap) {
+  var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
+
+  if (browser.mac) {
+    shortcut = shortcut.replace('Alt', 'Opt');
+  }
+
+  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+};
+
 export var getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled) {
   var supportedBySchema = formatting(intl).filter(function (format) {
     return schema.nodes[format.type] || schema.marks[format.type];
@@ -407,33 +417,27 @@ export var getSupportedFormatting = function getSupportedFormatting(schema, intl
   return [].concat(_toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(otherFormatting(intl)));
 };
 export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
-  var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
-
-  if (browser.mac) {
-    shortcut = shortcut.replace('Alt', 'Opt');
-  }
-
-  var keyParts = shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+  var keyParts = getKeyParts(keymap);
   return jsx("span", null, keyParts.map(function (part, index) {
     if (part === '+') {
       return jsx("span", {
-        key: "".concat(shortcut, "-").concat(index)
+        key: "".concat(keyParts, "-").concat(index)
       }, ' + ');
     } else if (part === 'Cmd') {
       return jsx("span", {
         css: codeSm,
-        key: "".concat(shortcut, "-").concat(index)
+        key: "".concat(keyParts, "-").concat(index)
       }, "\u2318");
     } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
       return jsx("span", {
         css: codeMd,
-        key: "".concat(shortcut, "-").concat(index)
+        key: "".concat(keyParts, "-").concat(index)
       }, part);
     }
 
     return jsx("span", {
       css: codeSm,
-      key: "".concat(shortcut, "-").concat(index)
+      key: "".concat(keyParts, "-").concat(index)
     }, part.toUpperCase());
   }));
 };
@@ -445,7 +449,9 @@ var ModalHeader = injectIntl(function (_ref4) {
 
   return jsx("div", {
     css: header
-  }, jsx(FormattedMessage, messages.editorHelp), jsx("div", null, jsx(ToolbarButton // @ts-ignore
+  }, jsx("h1", {
+    css: dialogHeader
+  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton // @ts-ignore
   , {
     onClick: onClose,
     title: formatMessage(messages.closeHelpDialog),
@@ -526,21 +532,21 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
         width: "large",
         onClose: this.closeDialog,
         testId: "help-modal-dialog"
-      }, jsx(ModalHeader, null), jsx(ModalBody, null, jsx("div", {
+      }, jsx(ModalHeader, null), jsx("div", {
         css: contentWrapper
       }, jsx("div", {
         css: line
       }), jsx("div", {
         css: content
       }, jsx("div", {
-        css: columnLeft
-      }, jsx("div", {
+        css: column
+      }, jsx("h2", {
         css: title
-      }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("div", null, this.formatting.filter(function (form) {
+      }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];
       }).map(function (form) {
-        return jsx("div", {
+        return jsx("li", {
           css: row,
           key: "textFormatting-".concat(form.name)
         }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()));
@@ -549,24 +555,24 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
       }).filter(function (form) {
         return form.autoFormatting;
       }).map(function (form) {
-        return jsx("div", {
+        return jsx("li", {
           css: row,
           key: "autoFormatting-".concat(form.name)
         }, jsx("span", null, form.name), form.autoFormatting());
       }))), jsx("div", {
         css: line
       }), jsx("div", {
-        css: columnRight
-      }, jsx("div", {
+        css: column
+      }, jsx("h2", {
         css: title
-      }, jsx(FormattedMessage, messages.markdown)), jsx("div", null, this.formatting.filter(function (form) {
+      }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, this.formatting.filter(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
       }).map(function (form) {
-        return form.autoFormatting && jsx("div", {
-          css: row,
-          key: "autoFormatting-".concat(form.name)
+        return form.autoFormatting && jsx("li", {
+          key: "autoFormatting-".concat(form.name),
+          css: row
         }, jsx("span", null, form.name), form.autoFormatting());
-      })))))), jsx(ModalFooter, null)) : null);
+      }))))), jsx(ModalFooter, null)) : null);
     }
   }]);
 

package/dist/esm/plugins/help-dialog/ui/styles.js

@@ -1,21 +1,43 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
+import { N400 } from '@atlaskit/theme/colors';
 export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), token('color.text', colors.N400), token('color.background.neutral.subtle', colors.N0), borderRadius());
 export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), token('color.text.subtlest', colors.N300));
-export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), token('color.text.subtle', colors.N400), token('color.background.neutral.subtle', colors.N0));
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), token('color.text.subtle', colors.N400), token('color.background.neutral.subtle', colors.N0));
 export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), token('color.background.neutral.subtle', '#fff'));
 export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var columnLeft = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var columnRight = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var row = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var title = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
-export var codeSm = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeMd = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeLg = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var column = {
+  width: '44%',
+  '& > ul': {
+    padding: 0
+  }
+};
+export var row = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var dialogHeader = {
+  '&': {
+    fontSize: relativeFontSizeToBase16(24),
+    fontWeight: 400,
+    color: token('color.text.subtle', N400),
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+export var title = {
+  '&': {
+    fontSize: relativeFontSizeToBase16(18),
+    fontWeight: 400,
+    color: token('color.text.subtle', N400),
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());

package/dist/esm/plugins/hyperlink/Toolbar.js

@@ -19,7 +19,6 @@ import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/
 import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
 import { addAnalytics, ACTION_SUBJECT_ID } from '../analytics';
 import { buildVisitedLinkPayload, buildOpenedSettingsPayload } from '../../utils/linking-utils';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 import { getFeatureFlags } from '../feature-flags-context';
 /* type guard for edit links */
 
@@ -65,12 +64,6 @@ function getLinkText(activeLinkMark, state) {
   return activeLinkMark.node.text;
 }
 
-var getCopyButtonGroup = function getCopyButtonGroup(state, intl, nodeType) {
-  return state && showCopyButton(state) ? [{
-    type: 'separator'
-  }, getCopyButtonConfig(state, intl.formatMessage, nodeType)] : [];
-};
-
 var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl) {
   var _getFeatureFlags = getFeatureFlags(state),
       floatingToolbarLinkSettingsButton = _getFeatureFlags.floatingToolbarLinkSettingsButton;
@@ -179,7 +172,17 @@ export var getToolbarConfig = function getToolbarConfig(options) {
                 title: labelUnlink,
                 icon: UnlinkIcon,
                 tabIndex: null
-              }].concat(_toConsumableArray(getCopyButtonGroup(state, intl, hyperLinkToolbar.nodeType)), _toConsumableArray(getSettingsButtonGroup(state, intl)))
+              }, {
+                type: 'copy-button',
+                items: [{
+                  type: 'separator'
+                }, {
+                  state: state,
+                  formatMessage: formatMessage,
+                  markType: state.schema.marks.link
+                }]
+              }].concat(_toConsumableArray(getSettingsButtonGroup(state, intl))),
+              scrollable: true
             });
           }
 
@@ -203,6 +206,7 @@ export var getToolbarConfig = function getToolbarConfig(options) {
               items: [{
                 type: 'custom',
                 fallback: [],
+                disableArrowNavigation: true,
                 render: function render(view, idx) {
                   if (!view) {
                     return null;

package/dist/esm/plugins/hyperlink/pm-plugins/input-rule.js

@@ -5,7 +5,6 @@ import { INPUT_METHOD, addAnalytics } from '../../analytics';
 import { getLinkCreationAnalyticsEvent } from '../analytics';
 export function createLinkInputRule(regexp) {
   var skipAnalytics = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var useUnpredictableInputRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   // Plain typed text (eg, typing 'www.google.com') should convert to a hyperlink
   return createRule(regexp, function (state, match, start, end) {
     var schema = state.schema;
@@ -32,12 +31,6 @@ export function createLinkInputRule(regexp) {
 
     if (isLinkInMatches(start, filepaths)) {
       var _tr = state.tr;
-
-      if (useUnpredictableInputRule) {
-        _tr.insertText(' ');
-      } // To keep consistent with original behaviour.
-
-
       return _tr;
     }
 
@@ -45,7 +38,7 @@ export function createLinkInputRule(regexp) {
     var to = Math.min(start + link.text.length, state.doc.content.size);
     var tr = state.tr.addMark(from, to, markType); // Keep old behavior that will delete the space after the link
 
-    if (useUnpredictableInputRule || to === end) {
+    if (to === end) {
       tr.insertText(' ');
     }
 
@@ -64,9 +57,7 @@ export function createInputRulePlugin(schema) {
     return;
   }
 
-  var hasUseUnpredictableFlag = typeof featureFlags.useUnpredictableInputRule === 'boolean';
-  var useUnpredictableInputRule = hasUseUnpredictableFlag ? Boolean(featureFlags.useUnpredictableInputRule) : true;
-  var urlWithASpaceRule = createLinkInputRule(LinkMatcher.create(useUnpredictableInputRule), skipAnalytics, featureFlags.useUnpredictableInputRule); // [something](link) should convert to a hyperlink
+  var urlWithASpaceRule = createLinkInputRule(LinkMatcher.create(), skipAnalytics); // [something](link) should convert to a hyperlink
 
   var markdownLinkRule = createRule(/(^|[^!])\[(.*?)\]\((\S+)\)$/, function (state, match, start, end) {
     var schema = state.schema;
@@ -88,8 +79,6 @@ export function createInputRulePlugin(schema) {
 
     return addAnalytics(state, tr, getLinkCreationAnalyticsEvent(INPUT_METHOD.FORMATTING, url));
   });
-  return createPlugin('hyperlink', [urlWithASpaceRule, markdownLinkRule], {
-    useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
-  });
+  return createPlugin('hyperlink', [urlWithASpaceRule, markdownLinkRule]);
 }
 export default createInputRulePlugin;

package/dist/esm/plugins/hyperlink/utils.js

@@ -3,7 +3,9 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import { mapSlice } from '../../utils/slice';
 import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema'; // Regular expression for a windows filepath in the format <DRIVE LETTER>:\<folder name>\
 
-export var FILEPATH_REGEXP = /([a-zA-Z]:|\\)([^\/:*?<>"|]+\\)?([^\/:*?<>"| ]+(?=\s?))?/gim;
+export var FILEPATH_REGEXP = /([a-zA-Z]:|\\)([^\/:*?<>"|]+\\)?([^\/:*?<>"| ]+(?=\s?))?/gim; // Don't linkify if starts with $ or {
+
+export var DONTLINKIFY_REGEXP = /^(\$|{)/;
 /**
  * Instance of class LinkMatcher are used in autoformatting in place of Regex.
  * Hence it has been made similar to regex with an exec method.
@@ -17,7 +19,7 @@ export var LinkMatcher = /*#__PURE__*/function () {
 
   _createClass(LinkMatcher, null, [{
     key: "create",
-    value: function create(useUnpredictableInputRule) {
+    value: function create() {
       var LinkMatcherRegex = /*#__PURE__*/function () {
         function LinkMatcherRegex() {
           _classCallCheck(this, LinkMatcherRegex);
@@ -34,6 +36,10 @@ export var LinkMatcher = /*#__PURE__*/function () {
               return null;
             }
 
+            if (DONTLINKIFY_REGEXP.test(lastStringBeforeSpace)) {
+              return null;
+            }
+
             var links = linkify.match(lastStringBeforeSpace);
 
             if (!links || links.length === 0) {
@@ -45,15 +51,6 @@ export var LinkMatcher = /*#__PURE__*/function () {
             lastLink.input = str.substring(lastMatch.index);
             lastLink.length = lastLink.lastIndex - lastLink.index + 1;
             lastLink.index = str.lastIndexOf(lastStringBeforeSpace) + lastMatch.index;
-
-            if (useUnpredictableInputRule) {
-              // ugly hack to make this works with unpredictable input rules
-              // prosemirror does this to find the positions:
-              // `(match[0].length - text.length)`
-              // @ts-ignore
-              lastLink[0] = lastLink;
-            }
-
             return lastLink;
           }
         }]);

package/dist/esm/plugins/image-upload/pm-plugins/input-rule.js

@@ -20,8 +20,6 @@ export function inputRulePlugin(schema, featureFlags) {
 
     return null;
   });
-  return createPlugin('image-upload', [imageRule], {
-    useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
-  });
+  return createPlugin('image-upload', [imageRule]);
 }
 export default inputRulePlugin;

package/dist/esm/plugins/index.js

@@ -28,7 +28,6 @@ export { default as rulePlugin } from './rule';
 export { default as quickInsertPlugin } from './quick-insert';
 export { default as saveOnEnterPlugin } from './save-on-enter';
 export { default as submitEditorPlugin } from './submit-editor';
-export { default as tablesPlugin } from './table';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';
 export { default as textColorPlugin } from './text-color';
 export { default as textFormattingPlugin } from './text-formatting';

package/dist/esm/plugins/layout/styles.js

@@ -8,7 +8,7 @@ import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
-import { TableCssClassName } from '../table/types';
-import { tableMarginFullWidthMode } from '../table/ui/consts';
+import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
+import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        // TODO: https://product-fabric.atlassian.net/browse/DSP-4353\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursord:first-of-type + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-of-type\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

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

@@ -11,7 +11,6 @@ import { toolbarMessages } from './toolbar-messages';
 import commonMessages from '../../messages';
 import { setPresetLayout, deleteActiveLayoutNode, getPresetLayout } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 var LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -94,7 +93,15 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         return buildLayoutButton(intl, i, currentLayout);
       })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout);
-      }) : []), _toConsumableArray(state && showCopyButton(state) ? [separator, getCopyButtonConfig(state, intl.formatMessage, nodeType)] : []), [separator, deleteButton])
+      }) : []), [{
+        type: 'copy-button',
+        items: [separator, {
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: nodeType
+        }]
+      }, separator, deleteButton]),
+      scrollable: true
     };
   }
 

package/dist/esm/plugins/list/actions/conversions.js

@@ -5,6 +5,7 @@ import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, joinSiblingLists } from '../utils/node';
 import { isEmptyParagraph } from '../../../utils';
 import { findFirstParentListNode } from '../utils/find';
+import { GapCursorSelection } from '../../selection/gap-cursor-selection';
 export function convertListType(_ref) {
   var tr = _ref.tr,
       nextListNodeType = _ref.nextListNodeType;
@@ -12,7 +13,16 @@ export function convertListType(_ref) {
       _tr$selection = tr.selection,
       $from = _tr$selection.$from,
       $to = _tr$selection.$to;
-  var listRange = $from.blockRange($to, isListNode);
+  var listRange;
+
+  if (tr.selection instanceof GapCursorSelection) {
+    var _$from$nodeAfter;
+
+    var nodeSize = ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.nodeSize) || 1;
+    listRange = $from.blockRange($from.doc.resolve($from.pos + nodeSize));
+  } else {
+    listRange = $from.blockRange($to, isListNode);
+  }
 
   if (listRange) {
     return convertSelectedList({
@@ -60,7 +70,7 @@ export function convertListType(_ref) {
     var currentNodeNotWrappedInList = node;
     var isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode && nodeRangeAroundList) {
       var remainingNodeRange = new NodeRange(tr.doc.resolve(tr.mapping.map(pos)), tr.doc.resolve(tr.mapping.map(pos) + currentNodeNotWrappedInList.nodeSize), nodeRangeAroundList.depth);
       convertAroundList({
         tr: tr,
@@ -89,16 +99,18 @@ var convertSelectedList = function convertSelectedList(_ref2) {
   var selection = tr.selection,
       _tr$selection2 = tr.selection,
       from = _tr$selection2.from,
-      to = _tr$selection2.to; // get the positions of all the leaf nodes within the selection
+      to = _tr$selection2.to;
+  var codeBlock = tr.doc.type.schema.nodes.codeBlock; // get the positions of all the leaf nodes within the selection
 
   var nodePositions = [];
 
-  if (selection instanceof TextSelection && selection.$cursor) {
+  if (selection instanceof TextSelection && selection.$cursor || selection instanceof GapCursorSelection) {
     nodePositions.push(from);
   } else {
     // nodesBetween doesn't return leaf nodes that are outside of from and to
     tr.doc.nodesBetween(from, to, function (node, pos) {
-      if (!node.isLeaf) {
+      // isLeaf is false for empty codeBlock so adding additional check for childCount
+      if (!node.isLeaf && !(node.type === codeBlock && node.childCount === 0)) {
         return true;
       }
 

package/dist/esm/plugins/list/actions/wrap-and-join-lists.js

@@ -1,6 +1,8 @@
 import { Fragment, Slice, NodeRange } from 'prosemirror-model';
 import { ReplaceAroundStep, findWrapping, canSplit } from 'prosemirror-transform';
 import { autoJoinTr } from '../../../utils/prosemirror/autojoin';
+import { GapCursorSelection } from '../../selection/gap-cursor-selection';
+import { isWrappingPossible } from '../utils/selection';
 /**
  * Wraps the selection in a list with the given type. If this results in
  * two adjacent lists of the same type, those will be joined together.
@@ -23,7 +25,15 @@ export function wrapInList(listType, attrs) {
     var _tr$selection = tr.selection,
         $from = _tr$selection.$from,
         $to = _tr$selection.$to;
-    var range = $from.blockRange($to);
+    var range;
+
+    if (tr.selection instanceof GapCursorSelection && $from.nodeAfter && isWrappingPossible(listType, tr.selection)) {
+      var nodeSize = $from.nodeAfter.nodeSize || 1;
+      range = $from.blockRange($from.doc.resolve($from.pos + nodeSize));
+    } else {
+      range = $from.blockRange($to);
+    }
+
     var doJoin = false;
     var outerRange = range;
 

package/dist/esm/plugins/list/commands/index.js

@@ -5,13 +5,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { Fragment, Slice } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
 import * as baseCommand from 'prosemirror-commands';
 import { hasParentNodeOfType, findPositionOfNodeBefore } from 'prosemirror-utils';
-import { hasVisibleContent, isNodeEmpty } from '../../../utils/document';
+import { hasVisibleContent } from '../../../utils/document';
 import { findCutBefore, isEmptySelectionAtStart, isFirstChildOfParent, filter } from '../../../utils/commands';
 import { sanitiseMarksInSelection } from '../../../utils';
-import { liftFollowingList, liftSelectionList } from '../transforms';
+import { liftFollowingList, liftTextSelectionList, liftNodeSelectionList } from '../transforms';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, addAnalytics } from '../../analytics';
 import { isInsideListItem, canJoinToPreviousListItem, selectionContainsList } from '../utils/selection';
@@ -32,14 +32,13 @@ export var enterKeyCommand = function enterKeyCommand(state, dispatch) {
     var _state$schema$nodes = state.schema.nodes,
         listItem = _state$schema$nodes.listItem,
         codeBlock = _state$schema$nodes.codeBlock;
-    var node = $from.node($from.depth);
     var wrapper = $from.node($from.depth - 1);
 
     if (wrapper && wrapper.type === listItem) {
       /** Check if the wrapper has any visible content */
       var wrapperHasContent = hasVisibleContent(wrapper);
 
-      if (isNodeEmpty(node) && !wrapperHasContent) {
+      if (!wrapperHasContent) {
         return outdentList(INPUT_METHOD.KEYBOARD)(state, dispatch);
       } else if (!hasParentNodeOfType(codeBlock)(selection)) {
         return splitListItem(listItem)(state, dispatch);
@@ -85,7 +84,12 @@ function untoggleSelectedList(tr) {
       selection = _tr.selection;
   var depth = rootListDepth(selection.$to, tr.doc.type.schema.nodes);
   tr = liftFollowingList(selection.$to.pos, selection.$to.end(depth), depth || 0, tr);
-  tr = liftSelectionList(selection, tr);
+
+  if (selection instanceof NodeSelection || selection instanceof GapCursorSelection) {
+    return liftNodeSelectionList(selection, tr);
+  }
+
+  return liftTextSelectionList(selection, tr);
 }
 
 export function toggleList(inputMethod, listType) {
@@ -96,9 +100,12 @@ export function toggleList(inputMethod, listType) {
     var actionSubjectId = listType === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
     if (listInsideSelection) {
-      var selection = state.selection;
-      var fromNode = selection.$from.node(selection.$from.depth - 2);
-      var toNode = selection.$to.node(selection.$to.depth - 2);
+      var selection = state.selection; // for gap cursor or node selection - list is expected 1 level up (listItem -> list)
+      // for text selection - list is expected 2 levels up (paragraph -> listItem -> list)
+
+      var positionDiff = selection instanceof GapCursorSelection || selection instanceof NodeSelection ? 1 : 2;
+      var fromNode = selection.$from.node(selection.$from.depth - positionDiff);
+      var toNode = selection.$to.node(selection.$to.depth - positionDiff);
       var transformedFrom = listInsideSelection.type.name === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
       if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {

package/dist/esm/plugins/list/pm-plugins/input-rules/index.js

@@ -24,9 +24,7 @@ export default function inputRulePlugin(schema, featureFlags) {
   }
 
   if (rules.length !== 0) {
-    return createPlugin('lists', rules, {
-      useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
-    });
+    return createPlugin('lists', rules);
   }
 
   return;

package/dist/esm/plugins/list/pm-plugins/main.js

@@ -11,6 +11,9 @@ import { findParentNodeOfType } from 'prosemirror-utils';
 import { isWrappingPossible } from '../utils/selection';
 import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
+import { setGapCursorSelection } from '../../../utils';
+import { Side } from '../../selection/gap-cursor-selection';
+import { listPaddingLeftMarkerSpace, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 var listPluginKey = new PluginKey('listPlugin');
 export var pluginKey = listPluginKey;
 var initialState = {
@@ -123,6 +126,34 @@ export var createPlugin = function createPlugin(eventDispatch) {
             decorationSet = _getPluginState.decorationSet;
 
         return decorationSet;
+      },
+      handleClick: function handleClick(view, pos, event) {
+        var state = view.state;
+
+        if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
+          var _nodeAtPos$firstChild;
+
+          var nodeAtPos = state.tr.doc.nodeAt(pos);
+          var _view$state$schema$no = view.state.schema.nodes,
+              listItem = _view$state$schema$no.listItem,
+              codeBlock = _view$state$schema$no.codeBlock;
+
+          if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
+            var _document, _document$elementFrom;
+
+            var bufferPx = 50;
+            var isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listPaddingLeftMarkerSpace + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER)));
+
+            if (isCodeBlockNextToListMarker) {
+              // +1 needed to put cursor inside li
+              // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
+              setGapCursorSelection(view, pos + 1, Side.LEFT);
+              return true;
+            }
+          }
+        }
+
+        return false;
       }
     }
   });

package/dist/esm/plugins/list/styles.js

@@ -4,4 +4,6 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export var listsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror li {\n    position: relative;\n\n    > p:not(:first-child) {\n      margin: 4px 0 0 0;\n    }\n\n    // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n    // The following rule resets the first p tag back to its original margin\n    // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n    > style:first-child + p {\n      margin-top: ", ";\n    }\n  }\n"])), blockNodesVerticalMargin);
+import { browser } from '@atlaskit/editor-common/utils';
+import { codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
+export var listsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror li {\n    position: relative;\n\n    > p:not(:first-child) {\n      margin: 4px 0 0 0;\n    }\n\n    // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n    // The following rule resets the first p tag back to its original margin\n    // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n    > style:first-child + p {\n      margin-top: ", ";\n    }\n\n    ", "\n  }\n"])), blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');