@atlaskit/editor-plugin-placeholder-text 0.1.0

package/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-placeholder-text

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin placeholder-text
+
+Placeholder text plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-placeholder-text*
+- **npm** - [@atlaskit/editor-plugin-placeholder-text](https://www.npmjs.com/package/@atlaskit/editor-plugin-placeholder-text)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-placeholder-text)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-placeholder-text/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-placeholder-text is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin placeholder text](https://atlaskit.atlassian.com/packages/editor/editor-plugin-placeholder-text) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://developer.atlassian.com/cloud/framework/atlassian-frontend/#license) for more licensing information.

package/dist/cjs/actions.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showPlaceholderFloatingToolbar = exports.insertPlaceholderTextAtSelection = exports.hidePlaceholderFloatingToolbar = void 0;
+var _pluginKey = require("./plugin-key");
+var showPlaceholderFloatingToolbar = exports.showPlaceholderFloatingToolbar = function showPlaceholderFloatingToolbar(state, dispatch) {
+  var tr = state.tr;
+  if (!state.selection.empty) {
+    tr.deleteSelection();
+  }
+  tr.setMeta(_pluginKey.pluginKey, {
+    showInsertPanelAt: tr.selection.anchor
+  });
+  tr.scrollIntoView();
+  dispatch(tr);
+  return true;
+};
+var insertPlaceholderTextAtSelection = exports.insertPlaceholderTextAtSelection = function insertPlaceholderTextAtSelection(value) {
+  return function (state, dispatch) {
+    dispatch(state.tr.replaceSelectionWith(state.schema.nodes.placeholder.createChecked({
+      text: value
+    })).setMeta(_pluginKey.pluginKey, {
+      showInsertPanelAt: null
+    }).scrollIntoView());
+    return true;
+  };
+};
+var hidePlaceholderFloatingToolbar = exports.hidePlaceholderFloatingToolbar = function hidePlaceholderFloatingToolbar(state, dispatch) {
+  dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
+    showInsertPanelAt: null
+  }));
+  return true;
+};

package/dist/cjs/fake-text-cursor/cursor.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeFakeTextCursor = exports.drawFakeTextCursor = exports.addFakeTextCursor = exports.FakeTextCursorSelection = exports.FakeTextCursorBookmark = void 0;
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var FakeTextCursorBookmark = exports.FakeTextCursorBookmark = /*#__PURE__*/function () {
+  function FakeTextCursorBookmark(pos) {
+    (0, _classCallCheck2.default)(this, FakeTextCursorBookmark);
+    (0, _defineProperty2.default)(this, "pos", undefined);
+    (0, _defineProperty2.default)(this, "visible", false);
+    this.pos = pos;
+  }
+  (0, _createClass2.default)(FakeTextCursorBookmark, [{
+    key: "map",
+    value: function map(mapping) {
+      return new FakeTextCursorBookmark(mapping.map(this.pos));
+    }
+  }, {
+    key: "resolve",
+    value: function resolve(doc) {
+      var $pos = doc.resolve(this.pos);
+      return _state.Selection.near($pos);
+    }
+  }]);
+  return FakeTextCursorBookmark;
+}();
+var FakeTextCursorSelection = exports.FakeTextCursorSelection = /*#__PURE__*/function (_Selection) {
+  (0, _inherits2.default)(FakeTextCursorSelection, _Selection);
+  var _super = _createSuper(FakeTextCursorSelection);
+  function FakeTextCursorSelection($pos) {
+    (0, _classCallCheck2.default)(this, FakeTextCursorSelection);
+    return _super.call(this, $pos, $pos);
+  }
+  (0, _createClass2.default)(FakeTextCursorSelection, [{
+    key: "map",
+    value: function map(doc, mapping) {
+      var $pos = doc.resolve(mapping.map(this.$head.pos));
+      return new FakeTextCursorSelection($pos);
+    }
+  }, {
+    key: "eq",
+    value: function eq(other) {
+      return other instanceof FakeTextCursorSelection && other.head === this.head;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return {
+        type: 'Cursor',
+        pos: this.head
+      };
+    }
+  }, {
+    key: "getBookmark",
+    value: function getBookmark() {
+      return new FakeTextCursorBookmark(this.anchor);
+    }
+  }], [{
+    key: "content",
+    value: function content() {
+      return _model.Slice.empty;
+    }
+  }, {
+    key: "fromJSON",
+    value: function fromJSON(doc, json) {
+      return new FakeTextCursorSelection(doc.resolve(json.pos));
+    }
+  }]);
+  return FakeTextCursorSelection;
+}(_state.Selection);
+_state.Selection.jsonID('fake-text-cursor', FakeTextCursorSelection);
+var addFakeTextCursor = exports.addFakeTextCursor = function addFakeTextCursor(state, dispatch) {
+  var selection = state.selection;
+  if (selection.empty) {
+    var $from = state.selection.$from;
+    dispatch(state.tr.setSelection(new FakeTextCursorSelection($from)));
+  }
+};
+var removeFakeTextCursor = exports.removeFakeTextCursor = function removeFakeTextCursor(state, dispatch) {
+  if (state.selection instanceof FakeTextCursorSelection) {
+    var $from = state.selection.$from;
+    dispatch(state.tr.setSelection(new _state.TextSelection($from)));
+  }
+};
+var drawFakeTextCursor = exports.drawFakeTextCursor = function drawFakeTextCursor(state) {
+  if (!(state.selection instanceof FakeTextCursorSelection)) {
+    return null;
+  }
+  var node = document.createElement('div');
+  node.className = 'ProseMirror-fake-text-cursor';
+  return _view.DecorationSet.create(state.doc, [_view.Decoration.widget(state.selection.head, node, {
+    key: 'Cursor'
+  })]);
+};

package/dist/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "placeholderTextPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/placeholder-text-nodeview.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlaceholderTextNodeView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var serializePlaceholderNode = function serializePlaceholderNode(node) {
+  var element = document.createElement('span');
+  element.classList.add('pm-placeholder');
+
+  // the inline node api test suite requires the following class name
+  element.classList.add('placeholderView-content-wrap');
+  element.innerText = _utils.ZERO_WIDTH_SPACE;
+  var elementChildren = document.createElement('span');
+  elementChildren.classList.add('pm-placeholder__text');
+  elementChildren.dataset.placeholder = node.attrs.text;
+  elementChildren.setAttribute('contenteditable', 'false');
+  element.appendChild(elementChildren);
+  if (_utils.browser.safari) {
+    element.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
+  } else {
+    element.appendChild(document.createElement('wbr'));
+  }
+  return element;
+};
+var PlaceholderTextNodeView = exports.PlaceholderTextNodeView = /*#__PURE__*/function () {
+  function PlaceholderTextNodeView(node, view, getPos) {
+    (0, _classCallCheck2.default)(this, PlaceholderTextNodeView);
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
+  }
+  (0, _createClass2.default)(PlaceholderTextNodeView, [{
+    key: "stopEvent",
+    value: function stopEvent(e) {
+      if (e.type === 'mousedown' && typeof this.getPos === 'function') {
+        e.preventDefault();
+        var _view = this.view;
+        var startNodePosition = this.getPos();
+        if (typeof startNodePosition !== 'number') {
+          return false;
+        }
+        var tr = _view.state.tr;
+        tr.setSelection(_state.Selection.near(tr.doc.resolve(startNodePosition)));
+        _view.dispatch(tr);
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(record) {
+      if (typeof this.getPos !== 'function' || record.type !== 'selection') {
+        return true;
+      }
+      var view = this.view,
+        node = this.node;
+      var placeholderStartPosition = this.getPos();
+      if (typeof placeholderStartPosition !== 'number') {
+        return false;
+      }
+      var placeholderEndPosition = placeholderStartPosition + node.nodeSize;
+      var selection = view.state.selection;
+
+      // when the selection is set right after the placeholder.
+      // we should let ProseMirror deal with this edge-case
+      if (selection.from === placeholderEndPosition) {
+        return false;
+      }
+      var isSelectionAtPlaceholder = selection.from === placeholderStartPosition;
+      var isSelectionAfterlaceholder = selection.from > placeholderEndPosition;
+      if (isSelectionAtPlaceholder || isSelectionAfterlaceholder) {
+        var tr = view.state.tr;
+        tr.setSelection(_state.Selection.near(tr.doc.resolve(placeholderEndPosition)));
+        view.dispatch(tr);
+        return true;
+      }
+      return true;
+    }
+  }]);
+  return PlaceholderTextNodeView;
+}();

package/dist/cjs/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderTextPlugin');

package/dist/cjs/plugin.js

@@ -0,0 +1,270 @@
+"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 _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
+var _actions = require("./actions");
+var _cursor = require("./fake-text-cursor/cursor");
+var _placeholderTextNodeview = require("./placeholder-text-nodeview");
+var _pluginKey = require("./plugin-key");
+var _selectionUtils = require("./selection-utils");
+var _PlaceholderFloatingToolbar = _interopRequireDefault(require("./ui/PlaceholderFloatingToolbar"));
+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: {
+      decorations: _cursor.drawFakeTextCursor,
+      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);
+        }
+      }];
+    },
+    actions: {
+      showPlaceholderFloatingToolbar: _actions.showPlaceholderFloatingToolbar
+    },
+    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/selection-utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectionAtPlaceholder = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var isSelectionAtPlaceholder = exports.isSelectionAtPlaceholder = function isSelectionAtPlaceholder(selection) {
+  if (!(selection instanceof _state.TextSelection) || !selection.$cursor) {
+    return false;
+  }
+  var node = selection.$cursor.doc.nodeAt(selection.$cursor.pos);
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'placeholder';
+};

package/dist/cjs/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placeholderTextStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+var placeholderTextStyles = exports.placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(_colors.B75, ")"));

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});