@atlaskit/editor-core 153.1.4 → 154.0.0

package/dist/cjs/plugins/expand/ui/styles.js

@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -57,7 +57,7 @@ var DANGER_STATE_BORDER_COLOR = (0, _components.themed)({
 var DANGER_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'
 });
-var expandStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _editorCommon.sharedExpandStyles.ContainerStyles, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR, ACTIVE_STATE_BORDER, ACTIVE_STATE_BORDER_RADIUS, DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER, DANGER_STATE_BORDER_COLOR, DANGER_STATE_BORDER_RADIUS, _classNames.expandClassNames.type('expand'), _constants2.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _editorCommon.sharedExpandStyles.ContentStyles, _classNames.expandClassNames.titleInput, _editorCommon.sharedExpandStyles.TitleInputStyles, _classNames.expandClassNames.titleContainer, _editorCommon.sharedExpandStyles.TitleContainerStyles, _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, (0, _components.themed)({
+var expandStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _ui.sharedExpandStyles.ContainerStyles, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR, ACTIVE_STATE_BORDER, ACTIVE_STATE_BORDER_RADIUS, DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER, DANGER_STATE_BORDER_COLOR, DANGER_STATE_BORDER_RADIUS, _classNames.expandClassNames.type('expand'), _constants2.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _ui.sharedExpandStyles.ContentStyles, _classNames.expandClassNames.titleInput, _ui.sharedExpandStyles.TitleInputStyles, _classNames.expandClassNames.titleContainer, _ui.sharedExpandStyles.TitleContainerStyles, _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, (0, _components.themed)({
   light: _colors.N40A,
   dark: _colors.DN50
 }), _classNames.expandClassNames.content, _constants.gridSize, _classNames.expandClassNames.inputContainer, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _components.themed)({

package/dist/cjs/plugins/extension/commands.js

@@ -80,9 +80,11 @@ var updateExtensionLayout = function updateExtensionLayout(layout) {
     var selectedExtension = (0, _utils.getSelectedExtension)(state, true);
 
     if (selectedExtension) {
-      return tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
+      var trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
         layout: layout
       }));
+      trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+      return trWithNewNodeMarkup;
     }
 
     return tr;

package/dist/cjs/plugins/extension/extension-api.js

@@ -62,27 +62,42 @@ var extensionAPICallPayload = function extensionAPICallPayload(functionName) {
 };
 
 var createExtensionAPI = function createExtensionAPI(options) {
-  var doc = {
-    insertAfter: function insertAfter(localId, adf, opt) {
-      var editorView = options.editorView;
-      var dispatch = editorView.dispatch; // Be extra cautious since 3rd party devs can use regular JS without type safety
+  /**
+   * Finds the node and its position by `localId`. Throws if the node could not be found.
+   *
+   * @returns {NodeWithPos}
+   */
+  var ensureNodePosByLocalId = function ensureNodePosByLocalId(localId, _ref2) {
+    var opName = _ref2.opName;
 
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error("insertAfter(): Invalid localId '".concat(localId, "'."));
-      }
+    // Be extra cautious since 3rd party devs can use regular JS without type safety
+    if (typeof localId !== 'string' || localId === '') {
+      throw new Error("".concat(opName, "(): Invalid localId '").concat(localId, "'."));
+    } // Find the node + position matching the given ID
 
-      if ((0, _typeof2.default)(adf) !== 'object' || Array.isArray(adf)) {
-        throw new Error("insertAfter(): Invalid ADF given.");
-      } // Find the node + position matching the given ID
 
+    var state = options.editorView.state;
+    var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
 
-      var state = editorView.state;
-      var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
+    if (!nodePos) {
+      throw new Error("".concat(opName, "(): Could not find node with ID '").concat(localId, "'."));
+    }
 
-      if (!nodePos) {
-        throw new Error("insertAfter(): Could not find node with ID '".concat(localId, "'."));
-      } // Validate the given ADF
+    return nodePos;
+  };
 
+  var doc = {
+    insertAfter: function insertAfter(localId, adf, opt) {
+      if ((0, _typeof2.default)(adf) !== 'object' || Array.isArray(adf)) {
+        throw new Error("insertAfter(): Invalid ADF given.");
+      }
+
+      var nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'insertAfter'
+      });
+      var editorView = options.editorView;
+      var dispatch = editorView.dispatch,
+          state = editorView.state; // Validate the given ADF
 
       var tr = state.tr,
           schema = state.schema;
@@ -156,28 +171,85 @@ var createExtensionAPI = function createExtensionAPI(options) {
       dispatch(tr);
     },
     scrollTo: function scrollTo(localId) {
-      var editorView = options.editorView;
-      var dispatch = editorView.dispatch; // Be extra cautious since 3rd party devs can use regular JS without type safety
-
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error("scrollTo(): Invalid localId '".concat(localId, "'."));
-      } // Find the node + position matching the given ID
-
-
-      var state = editorView.state;
-      var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
-
-      if (!nodePos) {
-        throw new Error("scrollTo(): Could not find node with ID '".concat(localId, "'."));
-      } // Analytics - tracking the api call
-
+      var nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'scrollTo'
+      }); // Analytics - tracking the api call
 
       var apiCallPayload = extensionAPICallPayload('scrollTo');
+      var _options$editorView = options.editorView,
+          dispatch = _options$editorView.dispatch,
+          state = _options$editorView.state;
       var tr = state.tr;
       tr = (0, _analytics.addAnalytics)(state, tr, apiCallPayload);
       tr = (0, _prosemirrorUtils.setTextSelection)(nodePos.pos)(tr);
       tr = tr.scrollIntoView();
       dispatch(tr);
+    },
+    update: function update(localId, mutationCallback) {
+      var _changedValues$marks;
+
+      var _ensureNodePosByLocal = ensureNodePosByLocalId(localId, {
+        opName: 'update'
+      }),
+          node = _ensureNodePosByLocal.node,
+          pos = _ensureNodePosByLocal.pos;
+
+      var _options$editorView2 = options.editorView,
+          dispatch = _options$editorView2.dispatch,
+          state = _options$editorView2.state;
+      var tr = state.tr,
+          schema = state.schema;
+      var changedValues = mutationCallback({
+        attrs: node.attrs,
+        marks: node.marks.map(function (pmMark) {
+          return {
+            type: pmMark.type.name,
+            attrs: pmMark.attrs
+          };
+        })
+      });
+
+      var ensureValidMark = function ensureValidMark(mark) {
+        if ((0, _typeof2.default)(mark) !== 'object' || Array.isArray(mark)) {
+          throw new Error("update(): Invalid mark given.");
+        } // Ensure that the given mark is present in the schema
+
+
+        var markType = schema.marks[mark.type];
+
+        if (!markType) {
+          throw new Error("update(): Invalid ADF mark type '".concat(mark.type, "'."));
+        }
+
+        if (!node.type.allowsMarkType(markType)) {
+          throw new Error("update(): Node of type '".concat(node.type.name, "' does not allow marks of type '").concat(mark.type, "'."));
+        }
+
+        return {
+          mark: markType,
+          attrs: mark.attrs
+        };
+      };
+
+      var newMarks = (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(function (_ref3) {
+        var mark = _ref3.mark,
+            attrs = _ref3.attrs;
+        return mark.create(attrs);
+      }); // Validate if the new attributes result in a valid node.
+      // We're doing this by relying on `createChecked`, which validates attributes,
+      // and if we don't exit - we assume validity.
+
+      try {
+        node.type.createChecked(changedValues.attrs, node.content, newMarks);
+      } catch (err) {
+        throw new Error("update(): The given ADFEntity cannot be inserted in the current position.\n".concat(err));
+      }
+
+      tr.setNodeMarkup(pos, undefined, changedValues.attrs, newMarks); // Analytics - tracking the api call
+
+      var apiCallPayload = extensionAPICallPayload('update');
+      (0, _analytics.addAnalytics)(state, tr, apiCallPayload);
+      dispatch(tr);
     }
   };
   return {

package/dist/cjs/plugins/extension/pm-plugins/unique-id.js

@@ -9,15 +9,11 @@ exports.createPlugin = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _prosemirrorState = require("prosemirror-state");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _utils = require("../../../utils");
-
-var _excluded = ["localId"];
+var _step = require("../../../utils/step");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -32,31 +28,56 @@ var createPlugin = function createPlugin() {
       var tr = newState.tr;
       var selectionBookmark = tr.selection.getBookmark();
       var modified = false;
+      var _newState$schema$node = newState.schema.nodes,
+          extension = _newState$schema$node.extension,
+          bodiedExtension = _newState$schema$node.bodiedExtension,
+          inlineExtension = _newState$schema$node.inlineExtension;
+      var extensionTypes = new Set([extension, bodiedExtension, inlineExtension]);
+      var idsObserved = new Set();
       transactions.forEach(function (transaction) {
         if (!transaction.docChanged) {
           return;
-        } // Adds a unique id to a node
+        }
 
+        var isAddingExtension = transaction.steps.some(function (step) {
+          return (0, _step.stepAddsOneOf)(step, extensionTypes);
+        });
 
-        (0, _utils.nodesBetweenChanged)(transaction, function (node, pos) {
-          var _newState$schema$node = newState.schema.nodes,
-              extension = _newState$schema$node.extension,
-              bodiedExtension = _newState$schema$node.bodiedExtension,
-              inlineExtension = _newState$schema$node.inlineExtension;
+        if (isAddingExtension) {
+          // Can't simply look at changed nodes, as we could be adding an extension
+          newState.doc.descendants(function (node, pos) {
+            var localId = node.attrs.localId; // Dealing with an extension - make sure it's a unique ID
+
+            if (!!node.type && extensionTypes.has(node.type)) {
+              if (localId && !idsObserved.has(localId)) {
+                idsObserved.add(localId); // Also add a localId if it happens to not have one,
+              } else if (!localId || idsObserved.has(localId)) {
+                modified = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  localId: _adfSchema.uuid.generate()
+                }));
+              }
+              /**
+               * If it's a bodiedExtension, we'll need to keep digging; since we
+               * can have more extension nodes within the contents of that
+               */
+
+
+              if (node.type === bodiedExtension) {
+                return true;
+              }
+
+              return false;
+            }
+            /**
+             * Otherwise continue traversing, we can encounter extensions nested in
+             * expands/bodiedExtensions
+             */
 
-          if (!!node.type && (node.type === extension || node.type === bodiedExtension || node.type === inlineExtension)) {
-            var _node$attrs = node.attrs,
-                localId = _node$attrs.localId,
-                rest = (0, _objectWithoutProperties2.default)(_node$attrs, _excluded);
 
-            if (!localId) {
-              tr.setNodeMarkup(pos, undefined, _objectSpread({
-                localId: _adfSchema.uuid.generate()
-              }, rest));
-              modified = true;
-            }
-          }
-        });
+            return true;
+          });
+        }
       });
 
       if (modified) {

package/dist/cjs/plugins/extension/ui/Extension/Extension/index.js

@@ -11,7 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _styles = require("./styles");
 
@@ -60,7 +62,7 @@ var Extension = function Extension(props) {
         innerRef: handleRef,
         "data-layout": node.attrs.layout,
         className: classNames,
-        extensionWidth: (0, _editorCommon.calcBreakoutWidth)(node.attrs.layout, widthState.width)
+        extensionWidth: (0, _utils.calcBreakoutWidth)(node.attrs.layout, widthState.width)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
       }, /*#__PURE__*/_react.default.createElement(_styles2.Overlay, {
@@ -78,7 +80,7 @@ var Extension = function Extension(props) {
   });
 };
 
-var _default = (0, _editorCommon.overflowShadow)(Extension, {
+var _default = (0, _ui.overflowShadow)(Extension, {
   overflowSelector: '.extension-overflow-wrapper'
 });
 

package/dist/cjs/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -31,7 +31,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _extensions = require("@atlaskit/editor-common/extensions");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _Extension = _interopRequireDefault(require("./Extension"));
 
@@ -63,8 +65,8 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "privatePropsParsed", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_editorCommon.getNodeRenderer));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtensionModuleNodePrivateProps", (0, _memoizeOne.default)(_editorCommon.getExtensionModuleNodePrivateProps));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtensionModuleNodePrivateProps", (0, _memoizeOne.default)(_extensions.getExtensionModuleNodePrivateProps));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -152,7 +154,7 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
       var result;
 
       if (extensionHandlers && extensionHandlers[extensionType]) {
-        var render = (0, _editorCommon.getExtensionRenderer)(extensionHandlers[extensionType]);
+        var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
         result = render(node, editorView.state.doc);
       }
 

package/dist/cjs/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -9,12 +9,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
       nodeType = _ref.nodeType;
-  return /*#__PURE__*/_react.default.createElement("span", null, children, nodeType === 'inlineExtension' && _editorCommon.ZERO_WIDTH_SPACE);
+  return /*#__PURE__*/_react.default.createElement("span", null, children, nodeType === 'inlineExtension' && _utils.ZERO_WIDTH_SPACE);
 };
 
 var _default = ExtensionNodeWrapper;

package/dist/cjs/plugins/extension/ui/Extension/Lozenge.js

@@ -29,7 +29,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _styles = require("./styles");
 
@@ -69,7 +69,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var node = this.props.node;
-      var imageData = (0, _editorCommon.getExtensionLozengeData)({
+      var imageData = (0, _utils.getExtensionLozengeData)({
         node: node,
         type: 'image'
       });
@@ -78,7 +78,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         return this.renderImage(imageData);
       }
 
-      var iconData = (0, _editorCommon.getExtensionLozengeData)({
+      var iconData = (0, _utils.getExtensionLozengeData)({
         node: node,
         type: 'icon'
       });

package/dist/cjs/plugins/extension/ui/Extension/index.js

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _ExtensionComponent = _interopRequireDefault(require("./ExtensionComponent"));
 
@@ -66,7 +66,7 @@ var Extension = /*#__PURE__*/function (_Component) {
         editorAppearance: editorAppearance
       });
     });
-    _this.providerFactory = props.providerFactory || new _editorCommon.ProviderFactory();
+    _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();
     return _this;
   }
 
@@ -82,7 +82,7 @@ var Extension = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['extensionProvider'],
         providerFactory: this.providerFactory,
         renderNode: this.renderWithProvider

package/dist/cjs/plugins/feature-flags-context/feature-flags-from-props.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -61,7 +61,7 @@ function createFeatureFlagsFromProps(props) {
     enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.enableViewUpdateSubscription) : false),
     collabAvatarScroll: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.collabAvatarScroll) : false),
     ufo: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.ufo) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.ufo) : false),
-    codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !_editorCommon.browser.safari : false),
+    codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !_utils.browser.safari : false),
     twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.twoLineEditorToolbar) : false),
     codeBidiWarnings: Boolean(typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.codeBidiWarnings) === 'boolean' ? !!((_props$featureFlags31 = props.featureFlags) !== null && _props$featureFlags31 !== void 0 && _props$featureFlags31.codeBidiWarnings) : true),
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags32 = props.featureFlags) === null || _props$featureFlags32 === void 0 ? void 0 : _props$featureFlags32.maxUnsafeChromeSpellcheckingVersion)

package/dist/cjs/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -164,7 +164,9 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           iconBefore: /*#__PURE__*/_react.default.createElement(_search.default, {
             label: title
           }),
-          onClick: this.toggleOpen
+          onClick: this.toggleOpen,
+          "aria-expanded": isActive,
+          "aria-haspopup": true
         })
       }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_FindReplace.default, (0, _extends2.default)({
         findText: findText,

package/dist/cjs/plugins/floating-toolbar/index.js

@@ -17,7 +17,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 
@@ -247,7 +247,7 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
             componentId: (0, _camelCase.default)(title),
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             fallbackComponent: null
-          }, /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+          }, /*#__PURE__*/_react.default.createElement(_ui.Popup, {
             ariaLabel: title,
             offset: offset,
             target: targetRef,

package/dist/cjs/plugins/floating-toolbar/ui/Button.js

@@ -45,7 +45,8 @@ var _default = function _default(_ref) {
       tooltipContent = _ref.tooltipContent,
       testId = _ref.testId,
       _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
-      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli;
+      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
+      ariaHasPopup = _ref.ariaHasPopup;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
@@ -72,11 +73,12 @@ var _default = function _default(_ref) {
       }, rest);
     },
     "aria-label": title,
+    "aria-pressed": selected,
     spacing: 'compact',
     href: href,
     target: target,
     appearance: appearance,
-    "aria-haspopup": true,
+    "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,

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

@@ -17,7 +17,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _emoji = require("@atlaskit/emoji");
 
@@ -43,7 +45,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
 
-  var EmojiPickerWithListener = (0, _editorCommon.withOuterListeners)(_emoji.EmojiPicker);
+  var EmojiPickerWithListener = (0, _ui.withOuterListeners)(_emoji.EmojiPicker);
 
   var togglePopup = function togglePopup() {
     setIsPopupOpen(!isPopupOpen);
@@ -55,6 +57,20 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
     props.onChange && props.onChange(emoji);
   };
 
+  var isDetachedElement = function isDetachedElement(el) {
+    return !document.body.contains(el);
+  };
+
+  var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
+    // Ignore click events for detached elements.
+    // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
+    // still in the document, and one once it's detached. Does not always occur, and
+    // may be a side effect of a react render optimisation
+    if (e && e.target && !isDetachedElement(e.target)) {
+      togglePopup();
+    }
+  };
+
   var renderPicker = function renderPicker(providers) {
     if (!providers.emojiProvider) {
       return null;
@@ -64,7 +80,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: function onPickerRef() {},
-      handleClickOutside: togglePopup
+      handleClickOutside: handleEmojiClickOutside
     });
   };
 
@@ -73,13 +89,13 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
       target: buttonRef.current,
       mountTo: buttonRef.current.parentElement,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/_react.default.createElement(EmojiPickerWrapper, null, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+    }, /*#__PURE__*/_react.default.createElement(EmojiPickerWrapper, null, /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker

package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _extensions = require("@atlaskit/editor-common/extensions");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
@@ -179,7 +179,7 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
   }, []);
 
   var extensionItems = _react.default.useMemo(function () {
-    return (0, _editorCommon.getContextualToolbarItemsFromModule)(extensions, (0, _utils.nodeToJSON)(node), (0, _extensionApi.createExtensionAPI)({
+    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, (0, _utils.nodeToJSON)(node), (0, _extensionApi.createExtensionAPI)({
       editorView: editorView
     }));
   }, [extensions, node, editorView]);

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

@@ -55,6 +55,8 @@ var _ColorPickerButton = _interopRequireDefault(require("../../../ui/ColorPicker
 
 var _EmojiPickerButton = require("./EmojiPickerButton");
 
+var _announcer = _interopRequireDefault(require("../../../utils/announcer/announcer"));
+
 var _templateObject;
 
 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); }
@@ -190,7 +192,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         "aria-label": "Floating Toolbar",
         hasCompactLeftPadding: firstElementIsSelect,
         className: className
-      }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, items.filter(function (item) {
+      }, /*#__PURE__*/_react.default.createElement(_announcer.default, {
+        text: "Floating toolbar controls have been opened",
+        delay: 250
+      }), /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         switch (item.type) {
@@ -232,7 +237,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               disabled: item.disabled,
               tooltipContent: item.tooltipContent,
               testId: item.testId,
-              hideTooltipOnClick: item.hideTooltipOnClick
+              hideTooltipOnClick: item.hideTooltipOnClick,
+              ariaHasPopup: item.ariaHasPopup
             }, item.showTitle && item.title);
 
           case 'input':
@@ -313,7 +319,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
                 providerFactory: providerFactory,
                 isSelected: item.selected,
                 onChange: function onChange(selected) {
-                  return dispatchCommand(item.onChange(selected.shortName));
+                  return dispatchCommand(item.onChange(selected));
                 }
               });
             }