@atlaskit/editor-core 189.0.0 → 189.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 189.0.3
+
+### Patch Changes
+
+- [#41773](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41773) [`2ad7c026f79`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ad7c026f79) - ED-20478: partially decouples placeholdertext editor plugin for future package extraction, migrates associated failing integration tests to libra
+
+## 189.0.1
+
+### Patch Changes
+
+- [#39920](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39920) [`c08ab6beb65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c08ab6beb65) - [ux] Adding new plugin for paste options toolbar. Also making required changes for the new toolbar in folating-toolbar plugin and paste plugin.
+- Updated dependencies
+
 ## 189.0.0
 
 ### Major Changes

package/dist/cjs/labs/next/presets/universal.js

@@ -17,6 +17,7 @@ var _editorPluginHelpDialog = require("@atlaskit/editor-plugin-help-dialog");
 var _editorPluginMedia = require("@atlaskit/editor-plugin-media");
 var _editorPluginRule = require("@atlaskit/editor-plugin-rule");
 var _editorPluginEmoji = require("@atlaskit/editor-plugin-emoji");
+var _editorPluginPasteOptionsToolbar = require("@atlaskit/editor-plugin-paste-options-toolbar");
 var _editorPluginList = require("@atlaskit/editor-plugin-list");
 var _editorPluginImageUpload = require("@atlaskit/editor-plugin-image-upload");
 var _editorPluginGuideline = require("@atlaskit/editor-plugin-guideline");
@@ -400,6 +401,11 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
       return builder.add(plugin);
     }
     return builder;
+  }).maybeAdd(_editorPluginPasteOptionsToolbar.pasteOptionsToolbarPlugin, function (plugin, builder) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.paste-options-toolbar')) {
+      return builder.add(plugin);
+    }
+    return builder;
   }).add([_plugins.codeBidiWarningPlugin, {
     appearance: appearance
   }])

package/dist/cjs/plugins/index.js

@@ -182,7 +182,7 @@ Object.defineProperty(exports, "pastePlugin", {
 Object.defineProperty(exports, "placeholderTextPlugin", {
   enumerable: true,
   get: function get() {
-    return _placeholderText.default;
+    return _placeholderText.placeholderTextPlugin;
   }
 });
 Object.defineProperty(exports, "tasksAndDecisionsPlugin", {
@@ -228,7 +228,7 @@ var _macro = _interopRequireDefault(require("./macro"));
 var _maxContentSize = _interopRequireDefault(require("./max-content-size"));
 var _panel = _interopRequireDefault(require("./panel"));
 var _paste = _interopRequireDefault(require("./paste"));
-var _placeholderText = _interopRequireDefault(require("./placeholder-text"));
+var _placeholderText = require("./placeholder-text");
 var _tasksAndDecisions = _interopRequireDefault(require("./tasks-and-decisions"));
 var _textColor = _interopRequireDefault(require("./text-color"));
 var _breakout = _interopRequireDefault(require("./breakout"));

package/dist/cjs/plugins/placeholder-text/index.js

@@ -4,244 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPlugin = createPlugin;
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _adfSchema = require("@atlaskit/adf-schema");
-var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-var _utils = require("@atlaskit/editor-common/utils");
-var _cursor = require("../fake-text-cursor/cursor");
-var _PlaceholderFloatingToolbar = _interopRequireDefault(require("./ui/PlaceholderFloatingToolbar"));
-var _actions = require("./actions");
-var _placeholderTextNodeview = require("./placeholder-text-nodeview");
-var _pluginKey = require("./plugin-key");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
-var _selectionUtils = require("./selection-utils");
-var getOpenTypeAhead = function getOpenTypeAhead(trigger, api) {
-  var _api$typeAhead, _api$typeAhead2;
-  var typeAheadHandler = api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.findHandlerByTrigger(trigger);
-  if (!typeAheadHandler || !typeAheadHandler.id) {
-    return null;
+Object.defineProperty(exports, "placeholderTextPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
   }
-  return api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || (_api$typeAhead2 = _api$typeAhead2.actions) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.openAtTransaction({
-    triggerHandler: typeAheadHandler,
-    inputMethod: _analytics.INPUT_METHOD.KEYBOARD
-  });
-};
-function createPlugin(dispatch, options, api) {
-  var allowInserting = !!options.allowInserting;
-  return new _safePlugin.SafePlugin({
-    key: _pluginKey.pluginKey,
-    state: {
-      init: function init() {
-        return {
-          showInsertPanelAt: null,
-          allowInserting: allowInserting
-        };
-      },
-      apply: function apply(tr, state) {
-        var meta = tr.getMeta(_pluginKey.pluginKey);
-        if (meta && meta.showInsertPanelAt !== undefined) {
-          var newState = {
-            showInsertPanelAt: meta.showInsertPanelAt,
-            allowInserting: allowInserting
-          };
-          dispatch(_pluginKey.pluginKey, newState);
-          return newState;
-        } else if (state.showInsertPanelAt) {
-          var _newState = {
-            showInsertPanelAt: tr.mapping.map(state.showInsertPanelAt),
-            allowInserting: allowInserting
-          };
-          dispatch(_pluginKey.pluginKey, _newState);
-          return _newState;
-        }
-        return state;
-      }
-    },
-    appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      if (transactions.some(function (txn) {
-        return txn.docChanged;
-      })) {
-        var didPlaceholderExistBeforeTxn = oldState.selection.$head.nodeAfter === newState.selection.$head.nodeAfter;
-        var adjacentNode = newState.selection.$head.nodeAfter;
-        var adjacentNodePos = newState.selection.$head.pos;
-        var placeholderNodeType = newState.schema.nodes.placeholder;
-        if (adjacentNode && adjacentNode.type === placeholderNodeType && didPlaceholderExistBeforeTxn) {
-          var _$newHead$nodeBefore;
-          var $newHead = newState.selection.$head;
-          var $oldHead = oldState.selection.$head;
-          // Check that cursor has moved forward in the document **and** that there is content before the cursor
-          var cursorMoved = $oldHead.pos < $newHead.pos;
-          var nodeBeforeHasContent = !(0, _utils.isNodeEmpty)($newHead.nodeBefore);
-          var nodeBeforeIsInline = (_$newHead$nodeBefore = $newHead.nodeBefore) === null || _$newHead$nodeBefore === void 0 ? void 0 : _$newHead$nodeBefore.type.isInline;
-          if (cursorMoved && (nodeBeforeHasContent || nodeBeforeIsInline)) {
-            var _NodeSelection$create = _state.NodeSelection.create(newState.doc, adjacentNodePos),
-              $from = _NodeSelection$create.$from,
-              $to = _NodeSelection$create.$to;
-            return newState.tr.deleteRange($from.pos, $to.pos);
-          }
-        }
-      }
-
-      // Handle Fake Text Cursor for Floating Toolbar
-      if (!_pluginKey.pluginKey.getState(oldState).showInsertPanelAt && _pluginKey.pluginKey.getState(newState).showInsertPanelAt) {
-        return newState.tr.setSelection(new _cursor.FakeTextCursorSelection(newState.selection.$from));
-      }
-      if (_pluginKey.pluginKey.getState(oldState).showInsertPanelAt && !_pluginKey.pluginKey.getState(newState).showInsertPanelAt) {
-        if (newState.selection instanceof _cursor.FakeTextCursorSelection) {
-          return newState.tr.setSelection(new _state.TextSelection(newState.selection.$from));
-        }
-      }
-      return;
-    },
-    props: {
-      handleDOMEvents: {
-        beforeinput: function beforeinput(view, event) {
-          var state = view.state;
-          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && (0, _selectionUtils.isSelectionAtPlaceholder)(view.state.selection)) {
-            event.stopPropagation();
-            event.preventDefault();
-            var startNodePosition = state.selection.from;
-            var content = event.data || '';
-            var tr = view.state.tr;
-            tr.delete(startNodePosition, startNodePosition + 1);
-            var openTypeAhead = getOpenTypeAhead(content, api);
-            if (openTypeAhead) {
-              openTypeAhead(tr);
-            } else {
-              tr.insertText(content);
-            }
-            view.dispatch(tr);
-            return true;
-          }
-          return false;
-        }
-      },
-      nodeViews: {
-        placeholder: function placeholder(node, view, getPos) {
-          return new _placeholderTextNodeview.PlaceholderTextNodeView(node, view, getPos);
-        }
-      }
-    }
-  });
-}
-var basePlaceholderTextPlugin = function basePlaceholderTextPlugin(_ref) {
-  var api = _ref.api,
-    options = _ref.config;
-  return {
-    name: 'placeholderText',
-    nodes: function nodes() {
-      return [{
-        name: 'placeholder',
-        node: _adfSchema.placeholder
-      }];
-    },
-    pmPlugins: function pmPlugins() {
-      return [{
-        name: 'placeholderText',
-        plugin: function plugin(_ref2) {
-          var dispatch = _ref2.dispatch;
-          return createPlugin(dispatch, options, api);
-        }
-      }];
-    },
-    contentComponent: function contentComponent(_ref3) {
-      var editorView = _ref3.editorView,
-        popupsMountPoint = _ref3.popupsMountPoint,
-        popupsBoundariesElement = _ref3.popupsBoundariesElement;
-      var insertPlaceholderText = function insertPlaceholderText(value) {
-        return (0, _actions.insertPlaceholderTextAtSelection)(value)(editorView.state, editorView.dispatch);
-      };
-      var hidePlaceholderToolbar = function hidePlaceholderToolbar() {
-        return (0, _actions.hidePlaceholderFloatingToolbar)(editorView.state, editorView.dispatch);
-      };
-      var getNodeFromPos = function getNodeFromPos(pos) {
-        return editorView.domAtPos(pos).node;
-      };
-      var getFixedCoordinatesFromPos = function getFixedCoordinatesFromPos(pos) {
-        return editorView.coordsAtPos(pos);
-      };
-      var setFocusInEditor = function setFocusInEditor() {
-        return editorView.focus();
-      };
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        plugins: {
-          placeholderTextState: _pluginKey.pluginKey
-        },
-        render: function render(_ref4) {
-          var _ref4$placeholderText = _ref4.placeholderTextState,
-            placeholderTextState = _ref4$placeholderText === void 0 ? {} : _ref4$placeholderText;
-          if (placeholderTextState.showInsertPanelAt) {
-            return /*#__PURE__*/_react.default.createElement(_PlaceholderFloatingToolbar.default, {
-              editorViewDOM: editorView.dom,
-              popupsMountPoint: popupsMountPoint,
-              popupsBoundariesElement: popupsBoundariesElement,
-              getFixedCoordinatesFromPos: getFixedCoordinatesFromPos,
-              getNodeFromPos: getNodeFromPos,
-              hidePlaceholderFloatingToolbar: hidePlaceholderToolbar,
-              showInsertPanelAt: placeholderTextState.showInsertPanelAt,
-              insertPlaceholder: insertPlaceholderText,
-              setFocusInEditor: setFocusInEditor
-            });
-          }
-          return null;
-        }
-      });
-    }
-  };
-};
-var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, options, api) {
-  if (!options.allowInserting) {
-    return plugin;
-  }
-  plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref5) {
-      var formatMessage = _ref5.formatMessage;
-      return [{
-        id: 'placeholderText',
-        title: formatMessage(_messages.messages.placeholderText),
-        description: formatMessage(_messages.messages.placeholderTextDescription),
-        priority: 1400,
-        keywords: ['placeholder'],
-        icon: function icon() {
-          return /*#__PURE__*/_react.default.createElement(_text.default, {
-            label: ""
-          });
-        },
-        action: function action(insert, state) {
-          var _api$analytics;
-          var tr = state.tr;
-          tr.setMeta(_pluginKey.pluginKey, {
-            showInsertPanelAt: tr.selection.anchor
-          });
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-            action: _analytics.ACTION.INSERTED,
-            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.PLACEHOLDER_TEXT,
-            attributes: {
-              inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
-            },
-            eventType: _analytics.EVENT_TYPE.TRACK
-          })(tr);
-          return tr;
-        }
-      }];
-    }
-  };
-  return plugin;
-};
-var placeholderTextPlugin = function placeholderTextPlugin(_ref6) {
-  var _ref6$config = _ref6.config,
-    options = _ref6$config === void 0 ? {} : _ref6$config,
-    api = _ref6.api;
-  return decorateWithPluginOptions(basePlaceholderTextPlugin({
-    config: options,
-    api: api
-  }), options, api);
-};
-var _default = exports.default = placeholderTextPlugin;
+});
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/plugins/placeholder-text/plugin.js

@@ -0,0 +1,266 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = createPlugin;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _utils = require("@atlaskit/editor-common/utils");
+var _cursor = require("../fake-text-cursor/cursor");
+var _PlaceholderFloatingToolbar = _interopRequireDefault(require("./ui/PlaceholderFloatingToolbar"));
+var _actions = require("./actions");
+var _placeholderTextNodeview = require("./placeholder-text-nodeview");
+var _pluginKey = require("./plugin-key");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _selectionUtils = require("./selection-utils");
+var getOpenTypeAhead = function getOpenTypeAhead(trigger, api) {
+  var _api$typeAhead, _api$typeAhead2;
+  var typeAheadHandler = api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.findHandlerByTrigger(trigger);
+  if (!typeAheadHandler || !typeAheadHandler.id) {
+    return null;
+  }
+  return api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || (_api$typeAhead2 = _api$typeAhead2.actions) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.openAtTransaction({
+    triggerHandler: typeAheadHandler,
+    inputMethod: _analytics.INPUT_METHOD.KEYBOARD
+  });
+};
+function createPlugin(dispatch, options, api) {
+  var allowInserting = !!options.allowInserting;
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.pluginKey,
+    state: {
+      init: function init() {
+        return {
+          showInsertPanelAt: null,
+          allowInserting: allowInserting
+        };
+      },
+      apply: function apply(tr, state) {
+        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if (meta && meta.showInsertPanelAt !== undefined) {
+          var newState = {
+            showInsertPanelAt: meta.showInsertPanelAt,
+            allowInserting: allowInserting
+          };
+          dispatch(_pluginKey.pluginKey, newState);
+          return newState;
+        } else if (state.showInsertPanelAt) {
+          var _newState = {
+            showInsertPanelAt: tr.mapping.map(state.showInsertPanelAt),
+            allowInserting: allowInserting
+          };
+          dispatch(_pluginKey.pluginKey, _newState);
+          return _newState;
+        }
+        return state;
+      }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      if (transactions.some(function (txn) {
+        return txn.docChanged;
+      })) {
+        var didPlaceholderExistBeforeTxn = oldState.selection.$head.nodeAfter === newState.selection.$head.nodeAfter;
+        var adjacentNode = newState.selection.$head.nodeAfter;
+        var adjacentNodePos = newState.selection.$head.pos;
+        var placeholderNodeType = newState.schema.nodes.placeholder;
+        if (adjacentNode && adjacentNode.type === placeholderNodeType && didPlaceholderExistBeforeTxn) {
+          var _$newHead$nodeBefore;
+          var $newHead = newState.selection.$head;
+          var $oldHead = oldState.selection.$head;
+          // Check that cursor has moved forward in the document **and** that there is content before the cursor
+          var cursorMoved = $oldHead.pos < $newHead.pos;
+          var nodeBeforeHasContent = !(0, _utils.isNodeEmpty)($newHead.nodeBefore);
+          var nodeBeforeIsInline = (_$newHead$nodeBefore = $newHead.nodeBefore) === null || _$newHead$nodeBefore === void 0 ? void 0 : _$newHead$nodeBefore.type.isInline;
+          if (cursorMoved && (nodeBeforeHasContent || nodeBeforeIsInline)) {
+            var _NodeSelection$create = _state.NodeSelection.create(newState.doc, adjacentNodePos),
+              $from = _NodeSelection$create.$from,
+              $to = _NodeSelection$create.$to;
+            return newState.tr.deleteRange($from.pos, $to.pos);
+          }
+        }
+      }
+
+      // Handle Fake Text Cursor for Floating Toolbar
+      if (!_pluginKey.pluginKey.getState(oldState).showInsertPanelAt && _pluginKey.pluginKey.getState(newState).showInsertPanelAt) {
+        return newState.tr.setSelection(new _cursor.FakeTextCursorSelection(newState.selection.$from));
+      }
+      if (_pluginKey.pluginKey.getState(oldState).showInsertPanelAt && !_pluginKey.pluginKey.getState(newState).showInsertPanelAt) {
+        if (newState.selection instanceof _cursor.FakeTextCursorSelection) {
+          return newState.tr.setSelection(new _state.TextSelection(newState.selection.$from));
+        }
+      }
+      return;
+    },
+    props: {
+      handleDOMEvents: {
+        beforeinput: function beforeinput(view, event) {
+          var state = view.state;
+          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && (0, _selectionUtils.isSelectionAtPlaceholder)(view.state.selection)) {
+            event.stopPropagation();
+            event.preventDefault();
+            var startNodePosition = state.selection.from;
+            var content = event.data || '';
+            var tr = view.state.tr;
+            tr.delete(startNodePosition, startNodePosition + 1);
+            var openTypeAhead = getOpenTypeAhead(content, api);
+            if (openTypeAhead) {
+              openTypeAhead(tr);
+            } else {
+              tr.insertText(content);
+            }
+            view.dispatch(tr);
+            return true;
+          }
+          return false;
+        }
+      },
+      nodeViews: {
+        placeholder: function placeholder(node, view, getPos) {
+          return new _placeholderTextNodeview.PlaceholderTextNodeView(node, view, getPos);
+        }
+      }
+    }
+  });
+}
+function ContentComponent(_ref) {
+  var editorView = _ref.editorView,
+    dependencyApi = _ref.dependencyApi,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(dependencyApi, ['placeholderText']),
+    placeholderTextState = _useSharedPluginState.placeholderTextState;
+  var insertPlaceholderText = function insertPlaceholderText(value) {
+    return (0, _actions.insertPlaceholderTextAtSelection)(value)(editorView.state, editorView.dispatch);
+  };
+  var hidePlaceholderToolbar = function hidePlaceholderToolbar() {
+    return (0, _actions.hidePlaceholderFloatingToolbar)(editorView.state, editorView.dispatch);
+  };
+  var getNodeFromPos = function getNodeFromPos(pos) {
+    return editorView.domAtPos(pos).node;
+  };
+  var getFixedCoordinatesFromPos = function getFixedCoordinatesFromPos(pos) {
+    return editorView.coordsAtPos(pos);
+  };
+  var setFocusInEditor = function setFocusInEditor() {
+    return editorView.focus();
+  };
+  if (placeholderTextState !== null && placeholderTextState !== void 0 && placeholderTextState.showInsertPanelAt) {
+    return /*#__PURE__*/_react.default.createElement(_PlaceholderFloatingToolbar.default, {
+      editorViewDOM: editorView.dom,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      getFixedCoordinatesFromPos: getFixedCoordinatesFromPos,
+      getNodeFromPos: getNodeFromPos,
+      hidePlaceholderFloatingToolbar: hidePlaceholderToolbar,
+      showInsertPanelAt: placeholderTextState.showInsertPanelAt,
+      insertPlaceholder: insertPlaceholderText,
+      setFocusInEditor: setFocusInEditor
+    });
+  }
+  return null;
+}
+var basePlaceholderTextPlugin = function basePlaceholderTextPlugin(_ref2) {
+  var api = _ref2.api,
+    options = _ref2.config;
+  return {
+    name: 'placeholderText',
+    nodes: function nodes() {
+      return [{
+        name: 'placeholder',
+        node: _adfSchema.placeholder
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'placeholderText',
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
+          return createPlugin(dispatch, options, api);
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var _ref4 = _pluginKey.pluginKey.getState(editorState) || {
+          showInsertPanelAt: null
+        },
+        showInsertPanelAt = _ref4.showInsertPanelAt,
+        allowInserting = _ref4.allowInserting;
+      return {
+        showInsertPanelAt: showInsertPanelAt,
+        allowInserting: !!allowInserting
+      };
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        popupsBoundariesElement = _ref5.popupsBoundariesElement;
+      return /*#__PURE__*/_react.default.createElement(ContentComponent, {
+        editorView: editorView,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        dependencyApi: api
+      });
+    }
+  };
+};
+var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, options, api) {
+  if (!options.allowInserting) {
+    return plugin;
+  }
+  plugin.pluginsOptions = {
+    quickInsert: function quickInsert(_ref6) {
+      var formatMessage = _ref6.formatMessage;
+      return [{
+        id: 'placeholderText',
+        title: formatMessage(_messages.toolbarInsertBlockMessages.placeholderText),
+        description: formatMessage(_messages.toolbarInsertBlockMessages.placeholderTextDescription),
+        priority: 1400,
+        keywords: ['placeholder'],
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_text.default, {
+            label: ""
+          });
+        },
+        action: function action(insert, state) {
+          var _api$analytics;
+          var tr = state.tr;
+          tr.setMeta(_pluginKey.pluginKey, {
+            showInsertPanelAt: tr.selection.anchor
+          });
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            action: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.PLACEHOLDER_TEXT,
+            attributes: {
+              inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: _analytics.EVENT_TYPE.TRACK
+          })(tr);
+          return tr;
+        }
+      }];
+    }
+  };
+  return plugin;
+};
+var placeholderTextPlugin = function placeholderTextPlugin(_ref7) {
+  var _ref7$config = _ref7.config,
+    options = _ref7$config === void 0 ? {} : _ref7$config,
+    api = _ref7.api;
+  return decorateWithPluginOptions(basePlaceholderTextPlugin({
+    config: options,
+    api: api
+  }), options, api);
+};
+var _default = exports.default = placeholderTextPlugin;

package/dist/cjs/{ui → plugins/placeholder-text/ui}/FloatingToolbar/styles.js

@@ -11,5 +11,5 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 var container = exports.container = function container(height) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-background-input, ".concat(_colors.N0, ")"), height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: ", " ", ";\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, ".concat(_colors.N0, ")"), height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
 };

package/dist/cjs/plugins/placeholder-text/ui/PlaceholderFloatingToolbar/index.js

@@ -16,7 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _ui = require("@atlaskit/editor-common/ui");
-var _FloatingToolbar = _interopRequireWildcard(require("../../../../ui/FloatingToolbar"));
+var _FloatingToolbar = _interopRequireWildcard(require("../FloatingToolbar"));
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

package/dist/cjs/ui/Addon/click-area-helper.js

@@ -97,6 +97,7 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
   var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus2 = view.hasFocus) !== null && _view$hasFocus2 !== void 0 && _view$hasFocus2.call(view));
   var isBottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
   if (isBottomAreaClicked) {
+    tr.setMeta('outsideProsemirrorEditorClicked', true);
     (0, _commands.addParagraphAtEnd)(tr);
   }
   (0, _selection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);

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

@@ -15,16 +15,17 @@ var _mention = require("@atlaskit/editor-common/mention");
 var _styles2 = require("../../plugins/collab-edit/styles");
 var _commonStyles = require("@atlaskit/editor-plugin-table/ui/common-styles");
 var _styles3 = require("@atlaskit/editor-plugin-block-type/styles");
-var _styles4 = require("../../plugins/code-block/styles");
+var _styles4 = require("@atlaskit/editor-plugin-paste-options-toolbar/styles");
+var _styles5 = require("../../plugins/code-block/styles");
 var _media = require("./media");
-var _styles5 = require("../../plugins/layout/styles");
-var _styles6 = require("../../plugins/panel/styles");
-var _styles7 = require("../../plugins/fake-text-cursor/styles");
-var _styles8 = require("../../plugins/placeholder-text/styles");
-var _styles9 = require("../../plugins/extension/ui/styles");
-var _styles10 = require("../../plugins/expand/ui/styles");
-var _styles11 = require("../../plugins/find-replace/styles");
-var _styles12 = require("../../plugins/tasks-and-decisions/styles");
+var _styles6 = require("../../plugins/layout/styles");
+var _styles7 = require("../../plugins/panel/styles");
+var _styles8 = require("../../plugins/fake-text-cursor/styles");
+var _styles9 = require("../../plugins/placeholder-text/styles");
+var _styles10 = require("../../plugins/extension/ui/styles");
+var _styles11 = require("../../plugins/expand/ui/styles");
+var _styles12 = require("../../plugins/find-replace/styles");
+var _styles13 = require("../../plugins/tasks-and-decisions/styles");
 var _status = require("./status");
 var _date = require("./date");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
@@ -45,9 +46,9 @@ var listsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _
 var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", " {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n\n    .placeholder-android {\n      pointer-events: none;\n      outline: none;\n      user-select: none;\n      position: absolute;\n    }\n  }\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\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 ", ";\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  ", "\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 :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\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"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\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 ", ";\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  ", "\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 :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\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"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles8.placeholderTextStyles, placeholderStyles, (0, _styles4.codeBlockStyles)(props), (0, _styles3.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, ruleStyles(props), _media.mediaStyles, (0, _styles5.layoutStyles)(props), _styles2.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles6.panelStyles)(props), _styles7.fakeCursorStyles, mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles9.extensionStyles, (0, _styles10.expandStyles)(props), _styles11.findReplaceStyles, _styles12.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles9.placeholderTextStyles, placeholderStyles, (0, _styles5.codeBlockStyles)(props), (0, _styles3.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, ruleStyles(props), _media.mediaStyles, (0, _styles6.layoutStyles)(props), _styles2.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles7.panelStyles)(props), _styles8.fakeCursorStyles, mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles10.extensionStyles, (0, _styles11.expandStyles)(props), _styles12.findReplaceStyles, _styles4.textHighlightStyle, _styles13.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {