@atlaskit/editor-core 159.0.1 → 162.0.0

package/dist/cjs/plugins/table/utils/nodes.js

@@ -15,7 +15,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginKey = require("../pm-plugins/plugin-key");
 
 var isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
@@ -23,7 +23,7 @@ var isIsolating = function isIsolating(node) {
 
 exports.isIsolating = isIsolating;
 
-var containsHeaderColumn = function containsHeaderColumn(state, table) {
+var containsHeaderColumn = function containsHeaderColumn(table) {
   var map = _tableMap.TableMap.get(table); // Get cell positions for first column.
 
 
@@ -38,7 +38,7 @@ var containsHeaderColumn = function containsHeaderColumn(state, table) {
     try {
       var cell = table.nodeAt(cellPositions[i]);
 
-      if (cell && cell.type !== state.schema.nodes.tableHeader) {
+      if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
         return false;
       }
     } catch (e) {
@@ -51,13 +51,13 @@ var containsHeaderColumn = function containsHeaderColumn(state, table) {
 
 exports.containsHeaderColumn = containsHeaderColumn;
 
-var containsHeaderRow = function containsHeaderRow(state, table) {
+var containsHeaderRow = function containsHeaderRow(table) {
   var map = _tableMap.TableMap.get(table);
 
   for (var i = 0; i < map.width; i++) {
     var cell = table.nodeAt(map.map[i]);
 
-    if (cell && cell.type !== state.schema.nodes.tableHeader) {
+    if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
       return false;
     }
   }
@@ -67,20 +67,20 @@ var containsHeaderRow = function containsHeaderRow(state, table) {
 
 exports.containsHeaderRow = containsHeaderRow;
 
-var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, containsHeaderColumn, false);
+var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, containsHeaderColumn, false);
 };
 
 exports.checkIfHeaderColumnEnabled = checkIfHeaderColumnEnabled;
 
-var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, containsHeaderRow, false);
+var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, containsHeaderRow, false);
 };
 
 exports.checkIfHeaderRowEnabled = checkIfHeaderRowEnabled;
 
-var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, function (_, table) {
+var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
@@ -88,7 +88,7 @@ var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
 exports.checkIfNumberColumnEnabled = checkIfNumberColumnEnabled;
 
 var isLayoutSupported = function isLayoutSupported(state) {
-  var permittedLayouts = _pluginFactory.pluginKey.getState(state).pluginConfig.permittedLayouts;
+  var permittedLayouts = _pluginKey.pluginKey.getState(state).pluginConfig.permittedLayouts;
 
   var _state$schema$nodes = state.schema.nodes,
       bodiedExtension = _state$schema$nodes.bodiedExtension,
@@ -133,14 +133,14 @@ var tablesHaveDifferentNoOfColumns = function tablesHaveDifferentNoOfColumns(cur
 
 exports.tablesHaveDifferentNoOfColumns = tablesHaveDifferentNoOfColumns;
 
-function filterNearSelection(state, findNode, predicate, defaultValue) {
-  var found = findNode(state.selection);
+function filterNearSelection(selection, findNode, predicate, defaultValue) {
+  var found = findNode(selection);
 
   if (!found) {
     return defaultValue;
   }
 
-  return predicate(state, found.node, found.pos);
+  return predicate(found.node, found.pos);
 }
 
 function getTableWidths(node) {

package/dist/cjs/plugins/tasks-and-decisions/commands.js

@@ -7,10 +7,14 @@ exports.isSupportedSourceNode = exports.insertTaskDecisionWithAnalytics = export
 
 var _prosemirrorCommands = require("prosemirror-commands");
 
+var _prosemirrorModel = require("prosemirror-model");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
+var _prosemirrorTransform = require("prosemirror-transform");
+
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _analytics = require("../analytics");
@@ -250,6 +254,14 @@ var createListAtSelection = function createListAtSelection(tr, list, item, schem
     }, [item.create({
       localId: _adfSchema.uuid.generate()
     }, $from.node($from.depth).content)]);
+    var hasBlockquoteParent = (0, _prosemirrorUtils.findParentNodeOfType)(blockquote)(selection);
+
+    if (hasBlockquoteParent) {
+      var liftedDepth = $from.depth - 1;
+      var range = new _prosemirrorModel.NodeRange($from, $to, liftedDepth);
+      tr.lift(range, (0, _prosemirrorTransform.liftTarget)(range));
+    }
+
     var listParent = (0, _prosemirrorUtils.findParentNodeOfType)(taskList)(selection) || (0, _prosemirrorUtils.findParentNodeOfType)(decisionList)(selection);
     var listItem = (0, _prosemirrorUtils.findParentNodeOfType)(taskItem)(selection) || (0, _prosemirrorUtils.findParentNodeOfType)(decisionItem)(selection); // For a selection inside a task/decision list, we can't just simply replace the
     // node type as it will mess up lists with > 1 item
@@ -281,10 +293,12 @@ var createListAtSelection = function createListAtSelection(tr, list, item, schem
 
     var nodeTypesToReplace = [blockquote];
 
-    if (nodeType === paragraph && childCount > 0) {
+    if (nodeType === paragraph && childCount > 0 || hasBlockquoteParent) {
       // Only convert paragraphs containing content.
       // Empty paragraphs use the default flow.
       // This distinction ensures the text selection remains in the correct location.
+      // We also want to replace the paragraph type when we are inside a blockQuote
+      // to avoid inserting an extra taskList whilst keeping the paragraph
       nodeTypesToReplace.push(paragraph);
     }
 

package/dist/cjs/plugins/text-formatting/styles.js

@@ -9,11 +9,14 @@ exports.textFormattingStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var textFormattingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _styles.codeMarkSharedStyles);
+var textFormattingStyles = function textFormattingStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.codeMarkSharedStyles)(props));
+};
+
 exports.textFormattingStyles = textFormattingStyles;

package/dist/cjs/plugins/text-formatting/ui/Toolbar/index.js

@@ -21,6 +21,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -41,6 +43,10 @@ var _dropdownMenu = require("./dropdown-menu");
 
 var _toolbarMessages = require("./toolbar-messages");
 
+var _utils = require("../../utils");
+
+var _announcer = _interopRequireDefault(require("../../../../utils/announcer/announcer"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,6 +68,12 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var editorState = (0, _react.useMemo)(function () {
     return editorView.state;
   }, [editorView.state]);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      message = _useState2[0],
+      setMessage = _useState2[1];
+
   var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
     editorState: editorState,
     intl: intl,
@@ -88,6 +100,54 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       dropdownItems = _useResponsiveToolbar.dropdownItems,
       singleItems = _useResponsiveToolbar.singleItems;
 
+  var clearFormattingStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.textFormattingOff);
+  var superscriptOffSubscriptOnStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.superscriptOffSubscriptOn);
+  var subscriptOffSuperscriptOnStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.subscriptOffSuperscriptOn);
+  var activeItems = [].concat((0, _toConsumableArray2.default)(dropdownItems), (0, _toConsumableArray2.default)(singleItems)).filter(function (item) {
+    return item.isActive;
+  });
+  var prevActiveItems = (0, _utils.usePreviousObjectState)(activeItems);
+  var fromSuperscriptToSubscript = (0, _utils.isArrayContainsContent)(activeItems, 'Subscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Superscript');
+  var fromSubscriptToSuperscript = (0, _utils.isArrayContainsContent)(activeItems, 'Superscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Subscript');
+  var comparedItems;
+  var screenReaderMessage = '';
+
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = (0, _utils.compareItemsArrays)(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = (0, _utils.compareItemsArrays)(prevActiveItems, activeItems);
+
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+
+      screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  } // handle 'Clear formatting' status for screen readers
+
+
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+
   var items = (0, _react.useMemo)(function () {
     if (!clearIcon) {
       return dropdownItems;
@@ -96,9 +156,19 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     return [].concat((0, _toConsumableArray2.default)(dropdownItems), [clearIcon]);
   }, [clearIcon, dropdownItems]);
   var moreFormattingButtonLabel = intl.formatMessage(_toolbarMessages.toolbarMessages.moreFormatting);
+  (0, _react.useEffect)(function () {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
   return /*#__PURE__*/_react.default.createElement(_styles.ButtonGroup, {
     width: isReducedSpacing ? 'small' : 'large'
-  }, /*#__PURE__*/_react.default.createElement(_singleToolbarButtons.SingleToolbarButtons, {
+  }, message && /*#__PURE__*/_react.default.createElement(_announcer.default, {
+    ariaLive: "assertive",
+    text: message,
+    ariaRelevant: "additions",
+    delay: 250
+  }), /*#__PURE__*/_react.default.createElement(_singleToolbarButtons.SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing

package/dist/cjs/plugins/text-formatting/ui/Toolbar/toolbar-messages.js

@@ -23,16 +23,31 @@ var toolbarMessages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Code',
     description: 'Whether the text selection has monospaced/code font'
   },
+  codeOn: {
+    id: 'fabric.editor.code.on',
+    defaultMessage: '{textFormattingOff}, Code On',
+    description: 'Reports that code formatting has been turned on'
+  },
   subscript: {
     id: 'fabric.editor.subscript',
     defaultMessage: 'Subscript',
     description: 'Whether the text selection is written below the line in a slightly smaller size'
   },
+  subscriptOffSuperscriptOn: {
+    id: 'fabric.editor.subscript.off.superscript.on',
+    defaultMessage: 'Subscript Off, Superscript On',
+    description: 'Reports text formatting in case when subscript off and superscript on'
+  },
   superscript: {
     id: 'fabric.editor.superscript',
     defaultMessage: 'Superscript',
     description: 'Whether the text selection is written above the line in a slightly smaller size'
   },
+  superscriptOffSubscriptOn: {
+    id: 'fabric.editor.superscript.off.subscript.on',
+    defaultMessage: 'Superscript Off, Subscript On',
+    description: 'Describe text formatting in case when Superscript Off and Subscript on'
+  },
   clearFormatting: {
     id: 'fabric.editor.clearFormatting',
     defaultMessage: 'Clear formatting',
@@ -52,6 +67,21 @@ var toolbarMessages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.italic',
     defaultMessage: 'Italic',
     description: 'This refers to italics or emphasized formatting.'
+  },
+  on: {
+    id: 'fabric.editor.on',
+    defaultMessage: '{formattingType} On',
+    description: 'Reports that text formatting has been turned on'
+  },
+  off: {
+    id: 'fabric.editor.off',
+    defaultMessage: '{formattingType} Off',
+    description: 'Reports that text formatting has been turned off'
+  },
+  textFormattingOff: {
+    id: 'fabric.editor.text.formatting.off',
+    defaultMessage: 'Text formatting Off',
+    description: 'Reports that text formatting has been turned off'
   }
 });
 exports.toolbarMessages = toolbarMessages;

package/dist/cjs/plugins/text-formatting/utils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeLen = exports.markActive = exports.isIgnorable = exports.isBlockNode = exports.hasCode = exports.domIndex = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
+exports.usePreviousObjectState = exports.nodeLen = exports.markActive = exports.isIgnorable = exports.isBlockNode = exports.isArrayContainsContent = exports.hasCode = exports.domIndex = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
+
+var _react = require("react");
 
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 
@@ -159,4 +161,30 @@ var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
   return marksArePresent(state) || blockStylingIsPresent(state);
 };
 
-exports.checkFormattingIsPresent = checkFormattingIsPresent;
+exports.checkFormattingIsPresent = checkFormattingIsPresent;
+
+var usePreviousObjectState = function usePreviousObjectState(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+exports.usePreviousObjectState = usePreviousObjectState;
+
+var compareItemsArrays = function compareItemsArrays(items, prevItems) {
+  return items && items.filter(function (item) {
+    return !prevItems.includes(item);
+  });
+};
+
+exports.compareItemsArrays = compareItemsArrays;
+
+var isArrayContainsContent = function isArrayContainsContent(items, content) {
+  return items.filter(function (item) {
+    return item.content === content;
+  }).length > 0;
+};
+
+exports.isArrayContainsContent = isArrayContainsContent;

package/dist/cjs/plugins/type-ahead/api.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createTypeAheadTools = void 0;
+exports.createTypeAheadTools = exports.createInternalTypeAheadTools = void 0;
 
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
@@ -220,6 +220,37 @@ var currentQuery = function currentQuery(_ref8) {
   };
 };
 
+var find = function find(_ref9) {
+  var editorView = _ref9.editorView;
+  return function (trigger) {
+    var editorState = editorView.state;
+    var handler = (0, _utils.findHandlerByTrigger)({
+      trigger: trigger,
+      editorState: editorState
+    });
+
+    if (!handler) {
+      return null;
+    }
+
+    return handler;
+  };
+}; // This is an internal tool to be used inside of others Editor Plugins
+// We shouldn't public export this method.
+
+
+var createInternalTypeAheadTools = function createInternalTypeAheadTools(editorView) {
+  var props = {
+    editorView: editorView
+  };
+  return {
+    findTypeAheadHandler: find(props),
+    openTypeAheadHandler: _openTypeaheadAtCursor.openTypeAhead
+  };
+};
+
+exports.createInternalTypeAheadTools = createInternalTypeAheadTools;
+
 var createTypeAheadTools = function createTypeAheadTools(editorView) {
   var props = {
     editorView: editorView

package/dist/cjs/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.openTypeAheadAtCursor = void 0;
+exports.openTypeAheadAtCursor = exports.openTypeAhead = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
@@ -11,11 +11,11 @@ var _key = require("../pm-plugins/key");
 
 var _actions = require("../pm-plugins/actions");
 
-var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
-  var triggerHandler = _ref.triggerHandler,
-      inputMethod = _ref.inputMethod,
-      query = _ref.query;
+var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
+    var triggerHandler = props.triggerHandler,
+        inputMethod = props.inputMethod,
+        query = props.query;
     tr.setMeta(_key.pluginKey, {
       action: _actions.ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
       params: {
@@ -24,6 +24,21 @@ var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
         query: query
       }
     });
+  };
+};
+
+exports.openTypeAhead = openTypeAhead;
+
+var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      inputMethod = _ref.inputMethod,
+      query = _ref.query;
+  return function (tr) {
+    openTypeAhead({
+      triggerHandler: triggerHandler,
+      inputMethod: inputMethod,
+      query: query
+    })(tr);
     var selection = tr.selection;
 
     if (!(selection instanceof _prosemirrorState.TextSelection)) {

package/dist/cjs/plugins/type-ahead/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandler = void 0;
+exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
@@ -97,9 +97,27 @@ var findHandler = function findHandler(id, state) {
 
 exports.findHandler = findHandler;
 
-var moveSelectedIndex = function moveSelectedIndex(_ref) {
-  var editorView = _ref.editorView,
-      direction = _ref.direction;
+var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
+  var trigger = _ref.trigger,
+      editorState = _ref.editorState;
+
+  var pluginState = _key.pluginKey.getState(editorState);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  var typeAheadHandlers = pluginState.typeAheadHandlers;
+  return typeAheadHandlers.find(function (h) {
+    return h.trigger === trigger;
+  }) || null;
+};
+
+exports.findHandlerByTrigger = findHandlerByTrigger;
+
+var moveSelectedIndex = function moveSelectedIndex(_ref2) {
+  var editorView = _ref2.editorView,
+      direction = _ref2.direction;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
 

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

@@ -83,7 +83,7 @@ var CommentEditor = _styledComponents.default.div(_templateObject || (_templateO
 CommentEditor.displayName = 'CommentEditor';
 var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
   return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles);
+}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.deprecatedTableCommentEditorStyles);
 ContentArea.displayName = 'ContentArea';
 
 var SecondaryToolbar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -54,7 +54,7 @@ var EditorContentArea = _styledComponents.default.div(_templateObject5 || (_temp
   var theme = _ref.theme,
       fullWidthMode = _ref.fullWidthMode;
   return (fullWidthMode ? _editorSharedStyles.akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING;
-}, SWOOP_ANIMATION, _adfSchema.taskListSelector, _adfSchema.decisionListSelector, _commonStyles.tableFullPageEditorStyles, function (_ref2) {
+}, SWOOP_ANIMATION, _adfSchema.taskListSelector, _adfSchema.decisionListSelector, _commonStyles.deprecatedTableFullPageEditorStyles, function (_ref2) {
   var containerWidth = _ref2.containerWidth;
 
   if (!containerWidth) {

package/dist/cjs/ui/ContentStyles/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -77,21 +81,40 @@ var _styled = require("../../plugins/card/ui/styled");
 
 var _featureFlagsContext = require("../../plugins/feature-flags-context");
 
-var _templateObject;
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var contentStyles = function contentStyles(props) {
+  var _props$featureFlags;
+
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
+    theme: props.theme
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, (0, _commonStyles.tableStyles)(props), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? (0, _styles7.highlightingCodeBlockStyles)(props) : (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles10.mediaStyles, _styles11.layoutStyles, _styles.tasksAndDecisionsStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, (0, _styles.annotationSharedStyles)(props), _styled.embedCardStyles);
+};
 
-var ContentStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _styles6.blocktypeStyles, _styles16.textFormattingStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, function (_ref) {
+var DeprecatedContentStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), _styles17.placeholderTextStyles, _styles5.placeholderStyles, _styles8.listsStyles, _styles9.ruleStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, _styles12.panelStyles, _styles13.fakeCursorStyles, _styles14.mentionsStyles, function (_ref) {
   var featureFlags = _ref.featureFlags;
-  return featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? _styles7.highlightingCodeBlockStyles : _styles7.codeBlockStyles;
-}, _styles.textColorStyles, _styles8.listsStyles, _styles9.ruleStyles, _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, _commonStyles.tableStyles, _styles12.panelStyles, _styles13.fakeCursorStyles, _styles14.mentionsStyles, function (_ref2) {
-  var featureFlags = _ref2.featureFlags;
   return featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? _styles15.emojiStylesNext : _styles15.emojiStyles;
-}, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, _styles21.expandStyles, _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, _styles.annotationSharedStyles, _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+}, _styles18.gridStyles, _styles19.linkStyles, _styles20.extensionStyles, _styles21.expandStyles, _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var featureFlags = (0, _featureFlagsContext.useFeatureFlags)();
-  return /*#__PURE__*/_react.default.createElement(ContentStyles, (0, _extends2.default)({}, props, {
+  var allowAnnotation = props.allowAnnotation;
+  var theme = (0, _react2.useTheme)();
+  var memoizedStyle = (0, _react.useMemo)(function () {
+    return contentStyles({
+      theme: theme,
+      allowAnnotation: allowAnnotation,
+      featureFlags: featureFlags
+    });
+  }, [theme, featureFlags, allowAnnotation]);
+  return (0, _react2.jsx)(DeprecatedContentStyles, (0, _extends2.default)({}, props, {
     innerRef: ref,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    css: memoizedStyle
   }));
 });
 

package/dist/cjs/utils/index.js

@@ -69,14 +69,7 @@ Object.defineProperty(exports, "hasVisibleContent", {
     return _document.hasVisibleContent;
   }
 });
-exports.insideTableCell = exports.insideTable = void 0;
-Object.defineProperty(exports, "isChromeWithSelectionBug", {
-  enumerable: true,
-  get: function get() {
-    return _selection.isChromeWithSelectionBug;
-  }
-});
-exports.isElementInTableCell = void 0;
+exports.isElementInTableCell = exports.insideTableCell = exports.insideTable = void 0;
 Object.defineProperty(exports, "isEmptyDocument", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/insert.js

@@ -184,15 +184,7 @@ var insertSelectedItem = function insertSelectedItem(maybeNode) {
        */
     } else if (node.isInline || isInputFragment) {
       var fragment = isInputFragment ? node : _prosemirrorModel.Fragment.fromArray([node, state.schema.text(' ')]);
-      tr = tr.replaceWith(start, start, fragment); // This problem affects Chrome v58+. See: https://github.com/ProseMirror/prosemirror/issues/710
-
-      if (_selection.isChromeWithSelectionBug) {
-        var selection = document.getSelection();
-
-        if (selection) {
-          selection.empty();
-        }
-      }
+      tr = tr.replaceWith(start, start, fragment);
 
       if (opts.selectInlineNode) {
         // Select inserted node