@atlaskit/editor-core 151.1.2 → 152.0.0

package/dist/esm/plugins/find-replace/index.js

@@ -1,13 +1,7 @@
 import React from 'react';
 import { createPlugin } from './plugin';
-import { findReplacePluginKey } from './types';
 import keymapPlugin from './keymap';
-import WithPluginState from '../../ui/WithPluginState';
-import { cancelSearchWithAnalytics, replaceWithAnalytics, replaceAllWithAnalytics, findWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, activateWithAnalytics } from './commands-with-analytics';
-import { blur, toggleMatchCase } from './commands';
-import FindReplaceToolbarButton from './ui/FindReplaceToolbarButton';
-import { TRIGGER_METHOD } from '../analytics';
-import { getFeatureFlags } from '../feature-flags-context';
+import FindReplaceToolbarButtonWithState from './FindReplaceToolbarButtonWithState';
 export var findReplacePlugin = function findReplacePlugin(props) {
   return {
     name: 'findReplace',
@@ -34,131 +28,20 @@ export var findReplacePlugin = function findReplacePlugin(props) {
           containerElement = _ref2.containerElement,
           dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
 
-      // we need the editor to be in focus for scrollIntoView() to work
-      // so we focus it while we run the command, then put focus back into
-      // whatever element was previously focused in find replace component
-      var runWithEditorFocused = function runWithEditorFocused(fn) {
-        var activeElement = document.activeElement;
-        editorView.focus();
-        fn();
-        activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-      };
-
-      var dispatchCommand = function dispatchCommand(cmd) {
-        var state = editorView.state,
-            dispatch = editorView.dispatch;
-        cmd(state, dispatch);
-      };
-
-      var handleActivate = function handleActivate() {
-        runWithEditorFocused(function () {
-          return dispatchCommand(activateWithAnalytics({
-            triggerMethod: TRIGGER_METHOD.TOOLBAR
-          }));
-        });
-      };
-
-      var handleFind = function handleFind(keyword) {
-        runWithEditorFocused(function () {
-          return dispatchCommand(findWithAnalytics({
-            editorView: editorView,
-            containerElement: containerElement,
-            keyword: keyword
-          }));
-        });
-      };
-
-      var handleFindNext = function handleFindNext(_ref3) {
-        var triggerMethod = _ref3.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand(findNextWithAnalytics({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleFindPrev = function handleFindPrev(_ref4) {
-        var triggerMethod = _ref4.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand(findPrevWithAnalytics({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleReplace = function handleReplace(_ref5) {
-        var triggerMethod = _ref5.triggerMethod,
-            replaceText = _ref5.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand(replaceWithAnalytics({
-            triggerMethod: triggerMethod,
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleReplaceAll = function handleReplaceAll(_ref6) {
-        var replaceText = _ref6.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand(replaceAllWithAnalytics({
-            replaceText: replaceText
-          }));
+      if (props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props.takeFullWidth
         });
-      };
-
-      var handleFindBlur = function handleFindBlur() {
-        dispatchCommand(blur());
-      };
-
-      var handleCancel = function handleCancel(_ref7) {
-        var triggerMethod = _ref7.triggerMethod;
-        dispatchCommand(cancelSearchWithAnalytics({
-          triggerMethod: triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      var handleToggleMatchCase = function handleToggleMatchCase() {
-        dispatchCommand(toggleMatchCase());
-      };
-
-      var _getFeatureFlags = getFeatureFlags(editorView.state),
-          findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
-
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        debounce: false,
-        plugins: {
-          findReplaceState: findReplacePluginKey
-        },
-        render: function render(_ref8) {
-          var findReplaceState = _ref8.findReplaceState;
-          return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
-            allowMatchCase: findReplaceMatchCase,
-            shouldMatchCase: findReplaceState.shouldMatchCase,
-            onToggleMatchCase: handleToggleMatchCase,
-            isActive: findReplaceState.isActive,
-            findText: findReplaceState.findText,
-            index: findReplaceState.index,
-            numMatches: findReplaceState.matches.length,
-            replaceText: findReplaceState.replaceText,
-            shouldFocus: findReplaceState.shouldFocus,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            isReducedSpacing: isToolbarReducedSpacing,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            onFindBlur: handleFindBlur,
-            onCancel: handleCancel,
-            onActivate: handleActivate,
-            onFind: handleFind,
-            onFindNext: handleFindNext,
-            onFindPrev: handleFindPrev,
-            onReplace: handleReplace,
-            onReplaceAll: handleReplaceAll,
-            takeFullWidth: props.takeFullWidth
-          });
-        }
-      });
+      }
     }
   };
 };

package/dist/esm/plugins/find-replace/ui/Find.js

@@ -10,14 +10,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import { defineMessages, injectIntl } from 'react-intl';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, Count } from './styles';
+import { countStyles, sectionWrapperStyles } from './styles';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
 var messages = defineMessages({
@@ -170,16 +172,16 @@ var Find = /*#__PURE__*/function (_React$Component) {
     _this.findNext = formatMessage(messages.findNext);
     _this.findPrevious = formatMessage(messages.findPrevious);
     _this.matchCase = formatMessage(messages.matchCase);
-    _this.matchCaseIcon = /*#__PURE__*/React.createElement(MatchCaseIcon, {
+    _this.matchCaseIcon = jsx(MatchCaseIcon, {
       label: _this.matchCase
     });
-    _this.findNextIcon = /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    _this.findNextIcon = jsx(ChevronDownIcon, {
       label: _this.findNext
     });
-    _this.findPrevIcon = /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    _this.findPrevIcon = jsx(ChevronUpIcon, {
       label: _this.findPrevious
     });
-    _this.closeIcon = /*#__PURE__*/React.createElement(EditorCloseIcon, {
+    _this.closeIcon = jsx(EditorCloseIcon, {
       label: _this.closeFindReplaceDialog
     }); // We locally manage the value of the input inside this component in order to support compositions.
     // This requires some additional work inside componentDidUpdate to ensure we support changes that
@@ -225,7 +227,9 @@ var Find = /*#__PURE__*/function (_React$Component) {
         selectedMatchPosition: count.index + 1,
         totalResultsCount: count.total
       });
-      return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+      return jsx("div", {
+        css: sectionWrapperStyles
+      }, jsx(Textfield, {
         name: "find",
         appearance: "none",
         placeholder: this.find,
@@ -237,24 +241,27 @@ var Find = /*#__PURE__*/function (_React$Component) {
         onBlur: this.props.onFindBlur,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), findText && /*#__PURE__*/React.createElement(Count, null, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), findText && jsx("span", {
+        "data-testid": "textfield-count",
+        css: countStyles
+      }, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && jsx(FindReplaceTooltipButton, {
         title: this.matchCase,
         icon: this.matchCaseIcon,
         onClick: this.handleMatchCaseClick,
         isPressed: shouldMatchCase
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.closeFindReplaceDialog,
         icon: this.closeIcon,
         keymapDescription: 'Escape',

package/dist/esm/plugins/find-replace/ui/FindReplace.js

@@ -10,10 +10,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import Find from './Find';
 import Replace from './Replace';
-import { Rule, Wrapper } from './styles';
+import { ruleStyles, wrapperStyles } from './styles';
 
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(FindReplace, _React$PureComponent);
@@ -77,7 +79,9 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
           allowMatchCase = _this$props.allowMatchCase,
           shouldMatchCase = _this$props.shouldMatchCase,
           onToggleMatchCase = _this$props.onToggleMatchCase;
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Find, {
+      return jsx("div", {
+        css: wrapperStyles
+      }, jsx(Find, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
         onToggleMatchCase: onToggleMatchCase,
@@ -91,7 +95,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onFindTextfieldRefSet: this.setFindTextfieldRef,
         onCancel: onCancel,
         onArrowDown: this.setFocusToReplace
-      }), /*#__PURE__*/React.createElement(Rule, null), /*#__PURE__*/React.createElement(Replace, {
+      }), jsx("hr", {
+        css: ruleStyles,
+        id: "replace-hr-element"
+      }), jsx(Replace, {
         canReplace: count.total > 0,
         replaceText: replaceText,
         onReplace: onReplace,

package/dist/esm/plugins/find-replace/ui/Replace.js

@@ -10,10 +10,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, ReplaceSectionButton } from './styles';
+import { sectionWrapperStyles, replaceSectionButtonStyles } from './styles';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, TRIGGER_METHOD } from '../../analytics/types';
 var messages = defineMessages({
   replaceWith: {
@@ -158,7 +161,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var replaceText = this.state.replaceText;
       var canReplace = this.props.canReplace;
-      return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+      return jsx("div", {
+        css: sectionWrapperStyles
+      }, jsx(Textfield, {
         name: "replace",
         appearance: "none",
         placeholder: this.replaceWith,
@@ -169,11 +174,13 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onKeyDown: this.handleReplaceKeyDown,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+      }), jsx(Button, {
+        css: replaceSectionButtonStyles,
         testId: this.replace,
         onClick: this.handleReplaceClick,
         isDisabled: !canReplace
-      }, this.replace), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+      }, this.replace), jsx(Button, {
+        css: replaceSectionButtonStyles,
         testId: this.replaceAll,
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace

package/dist/esm/plugins/find-replace/ui/styles.js

@@ -1,19 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css } from '@emotion/core';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import Button from '@atlaskit/button/standard-button';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // This is a workaround because React.memo does not play well with styled-components
-
-function StyledComponentsButton(props) {
-  return /*#__PURE__*/React.createElement(Button, props);
-}
-
-export var ReplaceSectionButton = styled(StyledComponentsButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* increase specificity to override default Button styles */\n  && {\n    margin-left: 4px;\n  }\n"])));
-export var Rule = styled.hr(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  background-color: ", ";\n  margin: 4px 0px;\n  height: 1px;\n  border-radius: 1px;\n"])), N30A);
-export var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  > *:not(", ") {\n    margin: 0px 4px;\n  }\n"])), Rule);
-export var SectionWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > * {\n    flex: 0 0 auto;\n    display: inline-flex;\n    height: 32px;\n  }\n"])));
-export var Count = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  flex: 0 0 auto;\n  justify-content: center;\n  align-items: center;\n  margin-left: 4px;\n  margin-right: 8px;\n"])), N60, relativeFontSizeToBase16(12));
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+export var replaceSectionButtonStyles = css({
+  marginLeft: '4px'
+});
+export var ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: "".concat(N30A),
+  margin: '4px 0px',
+  height: '1px',
+  borderRadius: '1px'
+});
+export var wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: '0px 4px'
+  }
+});
+export var sectionWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'column',
+  '> *': {
+    display: 'inline-flex',
+    height: '32px',
+    flex: '0 0 auto'
+  }
+});
+export var countStyles = css({
+  color: "".concat(N60),
+  fontSize: "".concat(relativeFontSizeToBase16(12)),
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: '4px',
+  marginRight: '8px'
+});

package/dist/esm/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -16,7 +16,8 @@ import React from 'react';
 import { Component } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { B400 } from '@atlaskit/theme/colors';
+import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item, { itemThemeNamespace } from '@atlaskit/item';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,7 +11,11 @@ import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
 
-var EmojiPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var EmojiPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // helps to vertically align emoji picker
+// both top and bottom margin should be 2px
+// https://product-fabric.atlassian.net/browse/CETI-148
+
+var EmojiPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
 
@@ -28,6 +32,7 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
 
   var updateEmoji = function updateEmoji(emoji) {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -55,11 +60,11 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/React.createElement(WithProviders, {
+    }, /*#__PURE__*/React.createElement(EmojiPickerWrapper, null, /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    }));
+    })));
   };
 
   var title = props.title || '';

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -267,7 +267,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             if (item.selectType === 'emoji') {
               return /*#__PURE__*/React.createElement(EmojiPickerButton, {
                 key: idx,
-                view: editorView,
+                editorView: editorView,
                 title: item.title,
                 providerFactory: providerFactory,
                 isSelected: item.selected,

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

@@ -0,0 +1,22 @@
+import { fragment } from '@atlaskit/adf-schema';
+import { Plugin } from 'prosemirror-state';
+import { pluginKey } from './plugin-key';
+export function createPlugin() {
+  return new Plugin({
+    key: pluginKey
+  });
+}
+
+var fragmentMarkPlugin = function fragmentMarkPlugin() {
+  return {
+    name: 'fragmentPlugin',
+    marks: function marks() {
+      return [{
+        name: 'fragment',
+        mark: fragment
+      }];
+    }
+  };
+};
+
+export default fragmentMarkPlugin;

package/dist/esm/plugins/fragment/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('fragmentMarkPlugin');

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -22,7 +22,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { N80, N30 } from '@atlaskit/theme/colors';
+import { N90, N80, N30 } from '@atlaskit/theme/colors';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
@@ -42,7 +42,7 @@ import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { ScreenReaderText } from '../../styles';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var ClearText = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), N80);
+var ClearText = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), N90);
 var TextInputWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), InputWrapper, N30, N30);
 var IconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), N80);
 export var messages = defineMessages({

package/dist/esm/plugins/index.js

@@ -42,6 +42,7 @@ export { default as breakoutPlugin } from './breakout';
 export { default as alignmentPlugin } from './alignment';
 export { default as dataConsumerMarkPlugin } from './data-consumer';
 export { default as editorDisabledPlugin } from './editor-disabled';
+export { default as fragmentMarkPlugin } from './fragment';
 export { default as indentationPlugin } from './indentation';
 export { default as annotationPlugin } from './annotation';
 export { default as analyticsPlugin } from './analytics';
@@ -61,4 +62,5 @@ export { default as clipboardPlugin } from './clipboard';
 export { default as undoRedoPlugin } from './undo-redo';
 export { default as avatarGroupPlugin } from './avatar-group';
 export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
+export { default as beforePrimaryToolbarPlugin } from './before-primaryToolbar';
 export { default as codeBidiWarningPlugin } from './code-bidi-warning';

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

@@ -4,6 +4,7 @@ import { findWrapping } from 'prosemirror-transform';
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, joinSiblingLists } from '../utils/node';
 import { isEmptyParagraph } from '../../../utils';
+import { findFirstParentListNode } from '../utils/find';
 export function convertListType(_ref) {
   var tr = _ref.tr,
       nextListNodeType = _ref.nextListNodeType;
@@ -29,84 +30,50 @@ export function convertListType(_ref) {
   var parentNode = nodeRangeAroundList.parent;
   var startIndex = nodeRangeAroundList.startIndex,
       endIndex = nodeRangeAroundList.endIndex,
-      depth = nodeRangeAroundList.depth;
-  var before = {
-    from: !isListNode(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  var after = {
-    from: null,
-    to: !isListNode(parentNode.child(endIndex - 1)) ? doc.resolve( // @ts-ignore
-    nodeRangeAroundList.$from.posAtIndex(endIndex - 1, depth) + 1) : null
-  };
-  var isListNodeFound = false;
-  var firstEmptyParagraphAfterListFound = false;
-
-  for (var i = startIndex; i < endIndex; i++) {
-    // @ts-ignore posAtIndex is a public API but has no type yet
-    var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
-    var resolvedPosition = doc.resolve(position);
-
-    if (isEmptyParagraph(parentNode.child(i)) && !isListNodeFound) {
-      before.from = doc.resolve( // @ts-ignore posAtIndex is a public API but has no type yet
-      nodeRangeAroundList.$from.posAtIndex(i, depth) + 2);
-    }
-
-    if (isEmptyParagraph(parentNode.child(i)) && isListNodeFound && !firstEmptyParagraphAfterListFound) {
-      after.to = resolvedPosition;
-      firstEmptyParagraphAfterListFound = true;
-    }
-
-    if (!isListNode(parentNode.child(i)) && !isListNodeFound) {
-      before.to = doc.resolve(resolvedPosition.pos + 1);
-    } else if (!isListNodeFound) {
-      isListNodeFound = true;
-      var endNodePosition = doc.resolve(resolvedPosition.pos + 1).end() + 1;
-
-      if (doc.resolve(endNodePosition).nodeAfter) {
-        after.from = doc.resolve(endNodePosition + 1);
+      depth = nodeRangeAroundList.depth; // Checking for invalid nodes to prevent conversion
+  // eg. a panel cannot be wrapped in a list so return
+  // It will skip this check if the selection begins within a list
+  // This is to match the behaviour of the toolbar buttons being disabled
+
+  if (!findFirstParentListNode($from)) {
+    for (var i = startIndex; i < endIndex; i++) {
+      var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
+      var resolvedPosition = doc.resolve(position);
+      var currentChild = parentNode.child(i);
+      var currentNodeRange = resolvedPosition.blockRange(tr.doc.resolve(position + currentChild.nodeSize));
+
+      if (currentNodeRange && !isListNode(currentChild) && !findWrapping(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
-
-  var beforeConversionArgs, beforeRange, afterConversionArgs, afterRange;
-
-  if (after.from && after.to) {
-    var mappedFrom = tr.mapping.map(after.from.pos);
-    var mappedTo = tr.mapping.map(after.to.pos);
-    afterRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  if (before.from && before.to) {
-    var _mappedFrom = tr.mapping.map(before.from.pos);
 
-    var _mappedTo = tr.mapping.map(before.to.pos);
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, function (node, pos) {
+    // Skip over any nodes that are part of a list
+    if (findFirstParentListNode(tr.doc.resolve(tr.mapping.map(pos)))) {
+      return false;
+    } // The following applies to suitable nodes that are not within a list
 
-    beforeRange = new NodeRange(tr.doc.resolve(_mappedFrom), tr.doc.resolve(_mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
 
-  if (!afterRange && !beforeRange || afterRange && !findWrapping(afterRange, nextListNodeType) || beforeRange && !findWrapping(beforeRange, nextListNodeType)) {
-    return;
-  }
+    var currentNodeNotWrappedInList = node;
+    var isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
-
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      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,
+        nextListNodeType: nextListNodeType,
+        nodeRange: remainingNodeRange
+      });
+      return false;
+    }
+  });
+  convertSelectedList({
+    tr: tr,
+    nextListNodeType: nextListNodeType
+  });
 
   if (tr.docChanged) {
     joinSiblingLists({