@atlaskit/editor-core 161.0.0 → 162.0.0

package/dist/esm/actions/index.js

@@ -32,36 +32,64 @@ var EditorActions = /*#__PURE__*/function () {
       }
     });
 
-    _defineProperty(this, "getResolvedEditorState", function () {
-      return new Promise(function (resolver, reject) {
-        var _getCollabProvider;
-
-        if (!_this.editorView) {
-          reject();
-          return;
-        }
-
-        var featureFlags = getFeatureFlags(_this.editorView.state);
-
-        if (!featureFlags.useNativeCollabPlugin) {
-          var _this$getValue;
-
-          return (_this$getValue = _this.getValue()) === null || _this$getValue === void 0 ? void 0 : _this$getValue.then(function (content) {
-            resolver({
-              content: content,
-              title: null,
-              stepVersion: -1
-            });
-          });
+    _defineProperty(this, "getResolvedEditorState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _getCollabProvider;
+
+      var featureFlags, editorValue, editorView;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (_this.editorView) {
+                _context.next = 2;
+                break;
+              }
+
+              throw new Error('Called getResolvedEditorState before editorView is ready');
+
+            case 2:
+              featureFlags = getFeatureFlags(_this.editorView.state);
+
+              if (featureFlags.useNativeCollabPlugin) {
+                _context.next = 10;
+                break;
+              }
+
+              _context.next = 6;
+              return _this.getValue();
+
+            case 6:
+              editorValue = _context.sent;
+
+              if (editorValue) {
+                _context.next = 9;
+                break;
+              }
+
+              throw new Error('editorValue is undefined');
+
+            case 9:
+              return _context.abrupt("return", {
+                content: editorValue,
+                title: null,
+                stepVersion: -1
+              });
+
+            case 10:
+              editorView = _this.editorView;
+              _context.next = 13;
+              return getEditorValueWithMedia(editorView);
+
+            case 13:
+              return _context.abrupt("return", (_getCollabProvider = getCollabProvider(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState());
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
         }
-
-        (_getCollabProvider = getCollabProvider(_this.editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState().then(function (resolvedEditorState) {
-          resolver(resolvedEditorState);
-        }).catch(function (error) {
-          reject(error);
-        });
-      });
-    });
+      }, _callee);
+    })));
   }
 
   _createClass(EditorActions, [{
@@ -161,30 +189,30 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "__temporaryFixForConfigPanel",
     value: function () {
-      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var editorView;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context.next = 3;
+                  _context2.next = 3;
                   break;
                 }
 
-                return _context.abrupt("return");
+                return _context2.abrupt("return");
 
               case 3:
                 _temporaryFixForConfigPanel(editorView);
 
               case 4:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
 
       function __temporaryFixForConfigPanel() {
@@ -197,46 +225,46 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "getValue",
     value: function () {
-      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var editorView, doc, json, nodeSanitized;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context2.next = 3;
+                  _context3.next = 3;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 3:
-                _context2.next = 5;
+                _context3.next = 5;
                 return getEditorValueWithMedia(editorView);
 
               case 5:
-                doc = _context2.sent;
+                doc = _context3.sent;
                 json = toJSON(doc);
 
                 if (this.contentEncode) {
-                  _context2.next = 9;
+                  _context3.next = 9;
                   break;
                 }
 
-                return _context2.abrupt("return", json);
+                return _context3.abrupt("return", json);
 
               case 9:
                 nodeSanitized = Node.fromJSON(this.editorView.state.schema, json);
-                return _context2.abrupt("return", this.contentEncode(nodeSanitized));
+                return _context3.abrupt("return", this.contentEncode(nodeSanitized));
 
               case 11:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function getValue() {

package/dist/esm/extensibility.js

@@ -4,7 +4,7 @@ export { toJSON } from './utils';
 export { default as Extension } from './plugins/extension/ui/Extension';
 export { default as ExtensionNodeWrapper } from './plugins/extension/ui/Extension/ExtensionNodeWrapper';
 export { ExtensionNode } from './plugins/extension/nodeviews/extension';
-export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-factory';
+export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-key';
 export var EmitterEvents = {
   TABLE_DELETED: 'TABLE_DELETED'
 };

package/dist/esm/labs/next/full-page.js

@@ -15,7 +15,7 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { tableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';
@@ -35,7 +35,7 @@ ContentArea.displayName = 'ContentArea';
 var EditorContentArea = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.layoutMaxWidth + GUTTER_PADDING * 2;
-}, tableFullPageEditorStyles);
+}, deprecatedTableFullPageEditorStyles);
 EditorContentArea.displayName = 'EditorContentArea';
 var MainToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), function (props) {
   return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';

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

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
-export var blocktypeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles);
+export var blocktypeStyles = function blocktypeStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles(props));
+};

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -11,13 +11,15 @@ 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/react';
 import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { Separator, Wrapper, MenuWrapper } from '../../../../ui/styles';
 import { NORMAL_TEXT } from '../../types';
-import { BlockTypeMenuItem, KeyboardShortcut } from './styled';
+import { blockTypeMenuItemStyle, KeyboardShortcut } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
 
@@ -60,16 +62,16 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           availableBlockTypes = _this$props$pluginSta.availableBlockTypes;
       var items = availableBlockTypes.map(function (blockType, index) {
         var isActive = currentBlockType === blockType;
-        var Tag = blockType.tagName || 'p';
+        var tagName = blockType.tagName || 'p';
+        var Tag = tagName;
         return {
-          content: /*#__PURE__*/React.createElement(BlockTypeMenuItem, {
-            tagName: Tag,
-            selected: isActive
-          }, /*#__PURE__*/React.createElement(Tag, null, formatMessage(blockType.title))),
+          content: jsx("div", {
+            css: blockTypeMenuItemStyle(tagName, isActive)
+          }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
           key: "".concat(blockType.name, "-").concat(index),
-          elemAfter: /*#__PURE__*/React.createElement(KeyboardShortcut, {
+          elemAfter: jsx(KeyboardShortcut, {
             selected: isActive
           }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
           isActive: isActive
@@ -129,7 +131,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
 
       if (!this.props.isDisabled && !blockTypesDisabled) {
         var items = this.createItems();
-        return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+        return jsx(MenuWrapper, null, jsx(DropdownMenu, {
           items: items,
           onOpenChange: this.onOpenChange,
           onItemActivated: this.handleSelectBlockType,
@@ -141,7 +143,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           fitHeight: 360,
           fitWidth: 106,
           shouldUseDefaultRole: true
-        }, /*#__PURE__*/React.createElement(BlockTypeButton, {
+        }, jsx(BlockTypeButton, {
           isSmall: isSmall,
           isReducedSpacing: isReducedSpacing,
           selected: active,
@@ -150,10 +152,10 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           onClick: this.handleTriggerClick,
           formatMessage: formatMessage,
           "aria-expanded": active
-        }, longestDropdownMenuItem)), /*#__PURE__*/React.createElement(Separator, null));
+        }, longestDropdownMenuItem)), jsx(Separator, null));
       }
 
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BlockTypeButton, {
+      return jsx(Wrapper, null, jsx(BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
         selected: active,
@@ -162,7 +164,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleTriggerClick,
         formatMessage: formatMessage,
         "aria-expanded": active
-      }, longestDropdownMenuItem), /*#__PURE__*/React.createElement(Separator, null));
+      }, longestDropdownMenuItem), jsx(Separator, null));
     }
   }]);
 

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -2,15 +2,19 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
+import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import styled from 'styled-components';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { Shortcut } from '../../../../ui/styles';
-export var BlockTypeMenuItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  > {\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-top: 0;\n    }\n  }\n  ", ";\n"])), headingsSharedStyles, function (props) {
-  return (// TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-    props.selected ? "".concat(props.tagName, " { color: white !important; }") : ''
-  );
-});
+export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
+  // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
+  var selectedStyle = selected ? "".concat(tagName, " { color: white !important; }") : '';
+  return function (themeProps) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), headingsSharedStyles(themeProps), selectedStyle);
+  };
+};
 export var KeyboardShortcut = styled(Shortcut)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: 16px;\n"])), function (props) {
   return props.selected ? "color: ".concat(N400, ";") : '';
 });

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

@@ -45,8 +45,8 @@ export var messages = defineMessages({
     defaultMessage: 'URL',
     description: 'Title for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardTitle: {
-    id: 'fabric.editor.cardTitle',
+  blockTitle: {
+    id: 'fabric.editor.blockTitle',
     defaultMessage: 'Card',
     description: 'Title for option to display link in the card view.'
   },
@@ -65,8 +65,8 @@ export var messages = defineMessages({
     defaultMessage: 'Display link as URL',
     description: 'Description for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardDescription: {
-    id: 'fabric.editor.cardDescription',
+  blockDescription: {
+    id: 'fabric.editor.blockDescription',
     defaultMessage: 'Display more information about a link, including a summary and actions',
     description: 'Description for option to display link in the card view.'
   },

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

@@ -19,8 +19,10 @@ import Dropdown from '../../floating-toolbar/ui/Dropdown';
 import { messages } from '../messages';
 import nodeNames from '../../../messages';
 import { getFeatureFlags } from '../../../plugins/feature-flags-context';
-import LinkToolbarIconDropdown from './LinkToolbarIconDropdown';
-import LinkToolbarButtonGroup from './LinkToolbarButtonGroup';
+import { LinkToolbarIconDropdown } from './LinkToolbarIconDropdown';
+import { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+import { getButtonGroupOption } from './link-toolbar-button-group-options';
+import { getIconDropdownOption } from './link-toolbar-icon-dropdown-options';
 export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
   _inherits(LinkToolbarAppearance, _React$Component);
 
@@ -60,6 +62,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var isSmartLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
       var tooltip = isSmartLinkSupportedInParent ? undefined : parentNodeName(editorState, intl);
       var embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
         title: intl.formatMessage(messages.embed),
         onClick: setSelectedCardAppearance('embed'),
         selected: currentAppearance === 'embed',
@@ -76,24 +79,27 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         selected: !currentAppearance,
         testId: 'url-appearance'
       }, {
+        appearance: 'inline',
         title: intl.formatMessage(messages.inline),
         onClick: setSelectedCardAppearance('inline'),
         selected: currentAppearance === 'inline',
-        hidden: false,
         testId: 'inline-appearance'
       }, {
+        appearance: 'block',
         title: intl.formatMessage(messages.block),
         onClick: setSelectedCardAppearance('block'),
         selected: currentAppearance === 'block',
-        hidden: false,
         testId: 'block-appearance',
         disabled: !isSmartLinkSupportedInParent,
         tooltip: tooltip
       }];
-      var title = intl.formatMessage(currentAppearance ? messages[currentAppearance] : messages.url);
 
       var dispatchCommand = function dispatchCommand(fn) {
-        fn && fn(editorState, view && view.dispatch);
+        fn && fn(editorState, view && view.dispatch); // Refocus the view to ensure the editor has focus
+
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
       };
 
       if (embedOption) {
@@ -105,18 +111,28 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
 
       if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
         return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
-          key: "link-toolbar-button-group"
+          key: "link-toolbar-button-group",
+          options: options.map(function (option) {
+            return getButtonGroupOption(intl, dispatchCommand, option);
+          })
         });
       }
 
       if (viewChangingExperimentToolbarStyle === 'newDropdown') {
         return /*#__PURE__*/React.createElement(LinkToolbarIconDropdown, {
-          key: "link-toolbar-icon-dropdown"
+          key: "link-toolbar-icon-dropdown",
+          title: "Change view",
+          buttonTestId: "link-toolbar-appearance-button",
+          dispatchCommand: dispatchCommand,
+          options: options.map(function (option) {
+            return getIconDropdownOption(intl, dispatchCommand, option);
+          })
         });
       }
 
+      var title = intl.formatMessage(currentAppearance ? messages[currentAppearance] : messages.url);
       return /*#__PURE__*/React.createElement(Dropdown, {
-        key: 'link-toolbar',
+        key: "link-toolbar",
         buttonTestId: "link-toolbar-appearance-button",
         title: title,
         dispatchCommand: dispatchCommand,

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

@@ -1,10 +1,62 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["disabled"];
+
+var _templateObject, _templateObject2;
+
 import React from 'react';
+import styled from 'styled-components';
+import { ButtonGroup } from '@atlaskit/button';
+import Button from '../../floating-toolbar/ui/Button';
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
 
-var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref) {
-  _objectDestructuringEmpty(_ref);
+export var StyledButton = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: ", ";\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'none' : 'auto';
+});
 
-  return /*#__PURE__*/React.createElement("span", null);
+var DisallowedWrapper = function DisallowedWrapper(_ref2) {
+  var disabled = _ref2.disabled,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", props);
 };
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+
 
-export default LinkToolbarButtonGroup;
+var StyledDisallowedWrapper = styled(DisallowedWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: ", ";\n"])), function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref4) {
+  var options = _ref4.options;
+  return /*#__PURE__*/React.createElement(ButtonGroup, null, options.map(function (_ref5) {
+    var onClick = _ref5.onClick,
+        selected = _ref5.selected,
+        disabled = _ref5.disabled,
+        testId = _ref5.testId,
+        tooltipContent = _ref5.tooltipContent,
+        title = _ref5.title,
+        Icon = _ref5.icon;
+    return /*#__PURE__*/React.createElement(StyledDisallowedWrapper, {
+      key: testId,
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement(StyledButton, {
+      title: title,
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        size: "medium",
+        label: title
+      }),
+      selected: selected,
+      onClick: onClick,
+      testId: testId,
+      disabled: disabled,
+      tooltipContent: tooltipContent
+    }));
+  }));
+};