@atlaskit/editor-plugin-placeholder-text 0.1.0

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

@@ -0,0 +1,82 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { Selection } from '@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 = 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 (browser.safari) {
+    element.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+  } else {
+    element.appendChild(document.createElement('wbr'));
+  }
+  return element;
+};
+export var PlaceholderTextNodeView = /*#__PURE__*/function () {
+  function PlaceholderTextNodeView(node, view, getPos) {
+    _classCallCheck(this, PlaceholderTextNodeView);
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
+  }
+  _createClass(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(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(Selection.near(tr.doc.resolve(placeholderEndPosition)));
+        view.dispatch(tr);
+        return true;
+      }
+      return true;
+    }
+  }]);
+  return PlaceholderTextNodeView;
+}();

package/dist/esm/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('placeholderTextPlugin');

package/dist/esm/plugin.js

@@ -0,0 +1,262 @@
+import React from 'react';
+import { placeholder } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isNodeEmpty } from '@atlaskit/editor-common/utils';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import MediaServicesTextIcon from '@atlaskit/icon/glyph/media-services/text';
+import { hidePlaceholderFloatingToolbar, insertPlaceholderTextAtSelection, showPlaceholderFloatingToolbar } from './actions';
+import { drawFakeTextCursor, FakeTextCursorSelection } from './fake-text-cursor/cursor';
+import { PlaceholderTextNodeView } from './placeholder-text-nodeview';
+import { pluginKey } from './plugin-key';
+import { isSelectionAtPlaceholder } from './selection-utils';
+import PlaceholderFloatingToolbar from './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: INPUT_METHOD.KEYBOARD
+  });
+};
+export function createPlugin(dispatch, options, api) {
+  var allowInserting = !!options.allowInserting;
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          showInsertPanelAt: null,
+          allowInserting: allowInserting
+        };
+      },
+      apply: function apply(tr, state) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta && meta.showInsertPanelAt !== undefined) {
+          var newState = {
+            showInsertPanelAt: meta.showInsertPanelAt,
+            allowInserting: allowInserting
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        } else if (state.showInsertPanelAt) {
+          var _newState = {
+            showInsertPanelAt: tr.mapping.map(state.showInsertPanelAt),
+            allowInserting: allowInserting
+          };
+          dispatch(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 = !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 = 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.getState(oldState).showInsertPanelAt && pluginKey.getState(newState).showInsertPanelAt) {
+        return newState.tr.setSelection(new FakeTextCursorSelection(newState.selection.$from));
+      }
+      if (pluginKey.getState(oldState).showInsertPanelAt && !pluginKey.getState(newState).showInsertPanelAt) {
+        if (newState.selection instanceof FakeTextCursorSelection) {
+          return newState.tr.setSelection(new TextSelection(newState.selection.$from));
+        }
+      }
+      return;
+    },
+    props: {
+      decorations: drawFakeTextCursor,
+      handleDOMEvents: {
+        beforeinput: function beforeinput(view, event) {
+          var state = view.state;
+          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && 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(node, view, getPos);
+        }
+      }
+    }
+  });
+}
+function ContentComponent(_ref) {
+  var editorView = _ref.editorView,
+    dependencyApi = _ref.dependencyApi,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement;
+  var _useSharedPluginState = useSharedPluginState(dependencyApi, ['placeholderText']),
+    placeholderTextState = _useSharedPluginState.placeholderTextState;
+  var insertPlaceholderText = function insertPlaceholderText(value) {
+    return insertPlaceholderTextAtSelection(value)(editorView.state, editorView.dispatch);
+  };
+  var hidePlaceholderToolbar = function hidePlaceholderToolbar() {
+    return 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.createElement(PlaceholderFloatingToolbar, {
+      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: placeholder
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'placeholderText',
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
+          return createPlugin(dispatch, options, api);
+        }
+      }];
+    },
+    actions: {
+      showPlaceholderFloatingToolbar: showPlaceholderFloatingToolbar
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var _ref4 = 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.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.placeholderText),
+        description: formatMessage(messages.placeholderTextDescription),
+        priority: 1400,
+        keywords: ['placeholder'],
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(MediaServicesTextIcon, {
+            label: ""
+          });
+        },
+        action: function action(insert, state) {
+          var _api$analytics;
+          var tr = state.tr;
+          tr.setMeta(pluginKey, {
+            showInsertPanelAt: tr.selection.anchor
+          });
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.PLACEHOLDER_TEXT,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: 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);
+};
+export default placeholderTextPlugin;

package/dist/esm/selection-utils.js

@@ -0,0 +1,8 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var isSelectionAtPlaceholder = function isSelectionAtPlaceholder(selection) {
+  if (!(selection instanceof 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/esm/styles.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { B75, N200 } from '@atlaskit/theme/colors';
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(B75, ")"));

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/FloatingToolbar/index.js

@@ -0,0 +1,67 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { container } from './styles';
+export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
+  _inherits(FloatingToolbar, _PureComponent);
+  var _super = _createSuper(FloatingToolbar);
+  function FloatingToolbar() {
+    _classCallCheck(this, FloatingToolbar);
+    return _super.apply(this, arguments);
+  }
+  _createClass(FloatingToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        target = _this$props.target,
+        offset = _this$props.offset,
+        fitWidth = _this$props.fitWidth,
+        _this$props$fitHeight = _this$props.fitHeight,
+        fitHeight = _this$props$fitHeight === void 0 ? 40 : _this$props$fitHeight,
+        onPositionCalculated = _this$props.onPositionCalculated,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        className = _this$props.className,
+        absoluteOffset = _this$props.absoluteOffset,
+        alignX = _this$props.alignX,
+        alignY = _this$props.alignY,
+        zIndex = _this$props.zIndex;
+      if (!target) {
+        return null;
+      }
+      return jsx(Popup, {
+        absoluteOffset: absoluteOffset,
+        alignX: alignX,
+        alignY: alignY,
+        target: target,
+        zIndex: zIndex,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        offset: offset,
+        fitWidth: fitWidth,
+        fitHeight: fitHeight,
+        onPositionCalculated: onPositionCalculated
+      }, jsx("div", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        css: container(fitHeight),
+        "data-testid": "popup-container",
+        className: className
+      }, children));
+    }
+  }]);
+  return FloatingToolbar;
+}(PureComponent);
+export { FloatingToolbar as default };

package/dist/esm/ui/FloatingToolbar/styles.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { css } from '@emotion/react';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+export var container = function container(height) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, ".concat(N0, ")"), height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), height) : '');
+};

package/dist/esm/ui/FloatingToolbar/utils.js

@@ -0,0 +1,49 @@
+var getCursorHeightFrom = function getCursorHeightFrom(node) {
+  return parseFloat(window.getComputedStyle(node, undefined).lineHeight || '');
+};
+export var getOffsetParent = function getOffsetParent(editorViewDom, popupsMountPoint) {
+  return popupsMountPoint ? popupsMountPoint.offsetParent : editorViewDom.offsetParent;
+};
+export var getNearestNonTextNode = function getNearestNonTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
+};
+
+/**
+ * We need to translate the co-ordinates because `coordsAtPos` returns co-ordinates
+ * relative to `window`. And, also need to adjust the cursor container height.
+ * (0, 0)
+ * +--------------------- [window] ---------------------+
+ * |   (left, top) +-------- [Offset Parent] --------+  |
+ * | {coordsAtPos} | [Cursor]   <- cursorHeight      |  |
+ * |               | [FloatingToolbar]               |  |
+ */
+var convertFixedCoordinatesToAbsolutePositioning = function convertFixedCoordinatesToAbsolutePositioning(coordinates, offsetParent, cursorHeight) {
+  var _coordinates$left, _coordinates$right, _coordinates$top, _coordinates$top2;
+  var _offsetParent$getBoun = offsetParent.getBoundingClientRect(),
+    offsetParentLeft = _offsetParent$getBoun.left,
+    offsetParentTop = _offsetParent$getBoun.top,
+    offsetParentHeight = _offsetParent$getBoun.height;
+  return {
+    left: ((_coordinates$left = coordinates.left) !== null && _coordinates$left !== void 0 ? _coordinates$left : 0) - offsetParentLeft,
+    right: ((_coordinates$right = coordinates.right) !== null && _coordinates$right !== void 0 ? _coordinates$right : 0) - offsetParentLeft,
+    top: ((_coordinates$top = coordinates.top) !== null && _coordinates$top !== void 0 ? _coordinates$top : 0) - (offsetParentTop - cursorHeight) + offsetParent.scrollTop,
+    bottom: offsetParentHeight - (((_coordinates$top2 = coordinates.top) !== null && _coordinates$top2 !== void 0 ? _coordinates$top2 : 0) - (offsetParentTop - cursorHeight) - offsetParent.scrollTop)
+  };
+};
+export var handlePositionCalculatedWith = function handlePositionCalculatedWith(offsetParent, node, getCurrentFixedCoordinates) {
+  return function (position) {
+    if (!offsetParent) {
+      return position;
+    }
+    var target = getNearestNonTextNode(node);
+    var cursorHeight = getCursorHeightFrom(target);
+    var fixedCoordinates = getCurrentFixedCoordinates();
+    var absoluteCoordinates = convertFixedCoordinatesToAbsolutePositioning(fixedCoordinates, offsetParent, cursorHeight);
+    return {
+      left: position.left ? absoluteCoordinates.left : undefined,
+      right: position.right ? absoluteCoordinates.right : undefined,
+      top: position.top ? absoluteCoordinates.top : undefined,
+      bottom: position.bottom ? absoluteCoordinates.bottom : undefined
+    };
+  };
+};

package/dist/esm/ui/PlaceholderFloatingToolbar/index.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { PanelTextInput } from '@atlaskit/editor-common/ui';
+import FloatingToolbar, { getNearestNonTextNode, getOffsetParent, handlePositionCalculatedWith } from '../FloatingToolbar';
+export var messages = defineMessages({
+  placeholderTextPlaceholder: {
+    id: 'fabric.editor.placeholderTextPlaceholder',
+    defaultMessage: 'Add placeholder text',
+    description: ''
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var PlaceholderFloatingToolbar = /*#__PURE__*/function (_React$Component) {
+  _inherits(PlaceholderFloatingToolbar, _React$Component);
+  var _super = _createSuper(PlaceholderFloatingToolbar);
+  function PlaceholderFloatingToolbar() {
+    var _this;
+    _classCallCheck(this, PlaceholderFloatingToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (value) {
+      if (value) {
+        _this.props.insertPlaceholder(value);
+        _this.props.setFocusInEditor();
+      } else {
+        _this.props.hidePlaceholderFloatingToolbar();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
+      _this.props.hidePlaceholderFloatingToolbar();
+    });
+    return _this;
+  }
+  _createClass(PlaceholderFloatingToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getNodeFromPos = _this$props.getNodeFromPos,
+        showInsertPanelAt = _this$props.showInsertPanelAt,
+        editorViewDOM = _this$props.editorViewDOM,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        getFixedCoordinatesFromPos = _this$props.getFixedCoordinatesFromPos,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        formatMessage = _this$props.intl.formatMessage;
+      var target = getNodeFromPos(showInsertPanelAt);
+      var offsetParent = getOffsetParent(editorViewDOM, popupsMountPoint);
+      var getFixedCoordinates = function getFixedCoordinates() {
+        return getFixedCoordinatesFromPos(showInsertPanelAt);
+      };
+      var handlePositionCalculated = handlePositionCalculatedWith(offsetParent, target, getFixedCoordinates);
+      return /*#__PURE__*/React.createElement(FloatingToolbar, {
+        target: getNearestNonTextNode(target),
+        onPositionCalculated: handlePositionCalculated,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        fitHeight: 32,
+        offset: [0, 12]
+      }, /*#__PURE__*/React.createElement(PanelTextInput, {
+        placeholder: formatMessage(messages.placeholderTextPlaceholder),
+        onSubmit: this.handleSubmit,
+        onBlur: this.handleBlur,
+        autoFocus: true,
+        width: 300
+      }));
+    }
+  }]);
+  return PlaceholderFloatingToolbar;
+}(React.Component);
+export default injectIntl(PlaceholderFloatingToolbar);

package/dist/types/actions.d.ts

@@ -0,0 +1,4 @@
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const showPlaceholderFloatingToolbar: (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
+export declare const insertPlaceholderTextAtSelection: (value: string) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
+export declare const hidePlaceholderFloatingToolbar: (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;

package/dist/types/fake-text-cursor/cursor.d.ts

@@ -0,0 +1,30 @@
+import type { Node, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { Slice } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState, SelectionBookmark, Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Mappable } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare class FakeTextCursorBookmark {
+    pos: undefined | number;
+    visible: boolean;
+    constructor(pos: number);
+    map(mapping: Mappable): FakeTextCursorBookmark;
+    resolve(doc: Node): Selection;
+}
+export declare class FakeTextCursorSelection extends Selection {
+    constructor($pos: ResolvedPos);
+    map(doc: Node, mapping: Mappable): Selection;
+    static content(): Slice;
+    eq(other: Selection): boolean;
+    toJSON(): {
+        type: string;
+        pos: number;
+    };
+    static fromJSON(doc: Node, json: {
+        pos: number;
+    }): Selection;
+    getBookmark(): SelectionBookmark;
+}
+export declare const addFakeTextCursor: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+export declare const removeFakeTextCursor: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+export declare const drawFakeTextCursor: (state: EditorState) => DecorationSet | null;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as placeholderTextPlugin } from './plugin';
+export type { PlaceholderTextPlugin, PlaceholderTextPluginState, PlaceholderTextOptions, } from './types';

package/dist/types/placeholder-text-nodeview.d.ts

@@ -0,0 +1,17 @@
+import type { getPosHandler } from '@atlaskit/editor-common/react-node-view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+type PmMutationRecord = MutationRecord | {
+    type: 'selection';
+    target: Element;
+};
+export declare class PlaceholderTextNodeView implements NodeView {
+    private readonly node;
+    private readonly view;
+    private readonly getPos;
+    readonly dom: Node;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandler);
+    stopEvent(e: Event): boolean;
+    ignoreMutation(record: PmMutationRecord): boolean;
+}
+export {};

package/dist/types/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PlaceholderTextPluginState } from './types';
+export declare const pluginKey: PluginKey<PlaceholderTextPluginState>;

package/dist/types/plugin.d.ts

@@ -0,0 +1,7 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { PlaceholderTextOptions, PlaceholderTextPlugin, PlaceholderTextPluginState } from './types';
+export declare function createPlugin(dispatch: Dispatch<PlaceholderTextPluginState>, options: PlaceholderTextOptions, api: ExtractInjectionAPI<PlaceholderTextPlugin> | undefined): SafePlugin | undefined;
+declare const placeholderTextPlugin: PlaceholderTextPlugin;
+export default placeholderTextPlugin;

package/dist/types/selection-utils.d.ts

@@ -0,0 +1,2 @@
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const isSelectionAtPlaceholder: (selection: Selection) => boolean;

package/dist/types/styles.d.ts

@@ -0,0 +1 @@
+export declare const placeholderTextStyles: import("@emotion/react").SerializedStyles;