@atlaskit/editor-plugin-placeholder-text 0.1.0

package/dist/es2019/plugin.js

@@ -0,0 +1,250 @@
+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';
+const getOpenTypeAhead = (trigger, api) => {
+  var _api$typeAhead, _api$typeAhead$action, _api$typeAhead2, _api$typeAhead2$actio;
+  const typeAheadHandler = api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : (_api$typeAhead$action = _api$typeAhead.actions) === null || _api$typeAhead$action === void 0 ? void 0 : _api$typeAhead$action.findHandlerByTrigger(trigger);
+  if (!typeAheadHandler || !typeAheadHandler.id) {
+    return null;
+  }
+  return api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : (_api$typeAhead2$actio = _api$typeAhead2.actions) === null || _api$typeAhead2$actio === void 0 ? void 0 : _api$typeAhead2$actio.openAtTransaction({
+    triggerHandler: typeAheadHandler,
+    inputMethod: INPUT_METHOD.KEYBOARD
+  });
+};
+export function createPlugin(dispatch, options, api) {
+  const allowInserting = !!options.allowInserting;
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: () => ({
+        showInsertPanelAt: null,
+        allowInserting
+      }),
+      apply: (tr, state) => {
+        const meta = tr.getMeta(pluginKey);
+        if (meta && meta.showInsertPanelAt !== undefined) {
+          const newState = {
+            showInsertPanelAt: meta.showInsertPanelAt,
+            allowInserting
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        } else if (state.showInsertPanelAt) {
+          const newState = {
+            showInsertPanelAt: tr.mapping.map(state.showInsertPanelAt),
+            allowInserting
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return state;
+      }
+    },
+    appendTransaction(transactions, oldState, newState) {
+      if (transactions.some(txn => txn.docChanged)) {
+        const didPlaceholderExistBeforeTxn = oldState.selection.$head.nodeAfter === newState.selection.$head.nodeAfter;
+        const adjacentNode = newState.selection.$head.nodeAfter;
+        const adjacentNodePos = newState.selection.$head.pos;
+        const placeholderNodeType = newState.schema.nodes.placeholder;
+        if (adjacentNode && adjacentNode.type === placeholderNodeType && didPlaceholderExistBeforeTxn) {
+          var _$newHead$nodeBefore;
+          const {
+            $head: $newHead
+          } = newState.selection;
+          const {
+            $head: $oldHead
+          } = oldState.selection;
+          // Check that cursor has moved forward in the document **and** that there is content before the cursor
+          const cursorMoved = $oldHead.pos < $newHead.pos;
+          const nodeBeforeHasContent = !isNodeEmpty($newHead.nodeBefore);
+          const nodeBeforeIsInline = (_$newHead$nodeBefore = $newHead.nodeBefore) === null || _$newHead$nodeBefore === void 0 ? void 0 : _$newHead$nodeBefore.type.isInline;
+          if (cursorMoved && (nodeBeforeHasContent || nodeBeforeIsInline)) {
+            const {
+              $from,
+              $to
+            } = NodeSelection.create(newState.doc, adjacentNodePos);
+            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: (view, event) => {
+          const {
+            state
+          } = view;
+          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && isSelectionAtPlaceholder(view.state.selection)) {
+            event.stopPropagation();
+            event.preventDefault();
+            const startNodePosition = state.selection.from;
+            const content = event.data || '';
+            const tr = view.state.tr;
+            tr.delete(startNodePosition, startNodePosition + 1);
+            const openTypeAhead = getOpenTypeAhead(content, api);
+            if (openTypeAhead) {
+              openTypeAhead(tr);
+            } else {
+              tr.insertText(content);
+            }
+            view.dispatch(tr);
+            return true;
+          }
+          return false;
+        }
+      },
+      nodeViews: {
+        placeholder: (node, view, getPos) => new PlaceholderTextNodeView(node, view, getPos)
+      }
+    }
+  });
+}
+function ContentComponent({
+  editorView,
+  dependencyApi,
+  popupsMountPoint,
+  popupsBoundariesElement
+}) {
+  const {
+    placeholderTextState
+  } = useSharedPluginState(dependencyApi, ['placeholderText']);
+  const insertPlaceholderText = value => insertPlaceholderTextAtSelection(value)(editorView.state, editorView.dispatch);
+  const hidePlaceholderToolbar = () => hidePlaceholderFloatingToolbar(editorView.state, editorView.dispatch);
+  const getNodeFromPos = pos => editorView.domAtPos(pos).node;
+  const getFixedCoordinatesFromPos = pos => editorView.coordsAtPos(pos);
+  const setFocusInEditor = () => 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;
+}
+const basePlaceholderTextPlugin = ({
+  api,
+  config: options
+}) => ({
+  name: 'placeholderText',
+  nodes() {
+    return [{
+      name: 'placeholder',
+      node: placeholder
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'placeholderText',
+      plugin: ({
+        dispatch
+      }) => createPlugin(dispatch, options, api)
+    }];
+  },
+  actions: {
+    showPlaceholderFloatingToolbar
+  },
+  getSharedState(editorState) {
+    if (!editorState) {
+      return undefined;
+    }
+    const {
+      showInsertPanelAt,
+      allowInserting
+    } = pluginKey.getState(editorState) || {
+      showInsertPanelAt: null
+    };
+    return {
+      showInsertPanelAt,
+      allowInserting: !!allowInserting
+    };
+  },
+  contentComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement
+  }) {
+    return /*#__PURE__*/React.createElement(ContentComponent, {
+      editorView: editorView,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      dependencyApi: api
+    });
+  }
+});
+const decorateWithPluginOptions = (plugin, options, api) => {
+  if (!options.allowInserting) {
+    return plugin;
+  }
+  plugin.pluginsOptions = {
+    quickInsert: ({
+      formatMessage
+    }) => [{
+      id: 'placeholderText',
+      title: formatMessage(messages.placeholderText),
+      description: formatMessage(messages.placeholderTextDescription),
+      priority: 1400,
+      keywords: ['placeholder'],
+      icon: () => /*#__PURE__*/React.createElement(MediaServicesTextIcon, {
+        label: ""
+      }),
+      action(insert, state) {
+        var _api$analytics;
+        const tr = state.tr;
+        tr.setMeta(pluginKey, {
+          showInsertPanelAt: tr.selection.anchor
+        });
+        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? 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;
+};
+const placeholderTextPlugin = ({
+  config: options = {},
+  api
+}) => decorateWithPluginOptions(basePlaceholderTextPlugin({
+  config: options,
+  api
+}), options, api);
+export default placeholderTextPlugin;

package/dist/es2019/selection-utils.js

@@ -0,0 +1,8 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const isSelectionAtPlaceholder = selection => {
+  if (!(selection instanceof TextSelection) || !selection.$cursor) {
+    return false;
+  }
+  const node = selection.$cursor.doc.nodeAt(selection.$cursor.pos);
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'placeholder';
+};

package/dist/es2019/styles.js

@@ -0,0 +1,52 @@
+import { css } from '@emotion/react';
+import { akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { B75, N200 } from '@atlaskit/theme/colors';
+export const placeholderTextStyles = css`
+  .ProseMirror span[data-placeholder] {
+    color: ${`var(--ds-text-subtlest, ${N200})`};
+    display: inline;
+  }
+
+  .ProseMirror span.pm-placeholder {
+    display: inline;
+    color: ${`var(--ds-text-subtlest, ${N200})`};
+  }
+  .ProseMirror span.pm-placeholder__text {
+    display: inline;
+    color: ${`var(--ds-text-subtlest, ${N200})`};
+  }
+
+  .ProseMirror span.pm-placeholder.${akEditorSelectedNodeClassName} {
+    ${getSelectionStyles([SelectionStyle.Background])}
+  }
+
+  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {
+    color: ${`var(--ds-text-subtlest, ${N200})`};
+    cursor: text;
+    content: attr(data-placeholder);
+    display: inline;
+  }
+
+  .ProseMirror {
+    .ProseMirror-fake-text-cursor {
+      display: inline;
+      pointer-events: none;
+      position: relative;
+    }
+
+    .ProseMirror-fake-text-cursor::after {
+      content: '';
+      display: inline;
+      top: 0;
+      position: absolute;
+      border-right: 1px solid ${"var(--ds-border, rgba(0, 0, 0, 0.4))"};
+    }
+
+    .ProseMirror-fake-text-selection {
+      display: inline;
+      pointer-events: none;
+      position: relative;
+      background-color: ${`var(--ds-background-selected, ${B75})`};
+    }
+  }
+`;

package/dist/es2019/types.js

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

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

@@ -0,0 +1,49 @@
+/* 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
+export default class FloatingToolbar extends PureComponent {
+  render() {
+    const {
+      children,
+      target,
+      offset,
+      fitWidth,
+      fitHeight = 40,
+      onPositionCalculated,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      className,
+      absoluteOffset,
+      alignX,
+      alignY,
+      zIndex
+    } = this.props;
+    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));
+  }
+}

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

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+export const container = height => css`
+  border-radius: ${borderRadius()}px;
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`})`};
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+  background-color: ${`var(--ds-background-input, ${N0})`};
+  ${height ? css`
+        height: ${height}px;
+      ` : ''};
+`;

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

@@ -0,0 +1,42 @@
+const getCursorHeightFrom = node => parseFloat(window.getComputedStyle(node, undefined).lineHeight || '');
+export const getOffsetParent = (editorViewDom, popupsMountPoint) => popupsMountPoint ? popupsMountPoint.offsetParent : editorViewDom.offsetParent;
+export const getNearestNonTextNode = node => 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]               |  |
+ */
+const convertFixedCoordinatesToAbsolutePositioning = (coordinates, offsetParent, cursorHeight) => {
+  var _coordinates$left, _coordinates$right, _coordinates$top, _coordinates$top2;
+  const {
+    left: offsetParentLeft,
+    top: offsetParentTop,
+    height: offsetParentHeight
+  } = offsetParent.getBoundingClientRect();
+  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 const handlePositionCalculatedWith = (offsetParent, node, getCurrentFixedCoordinates) => position => {
+  if (!offsetParent) {
+    return position;
+  }
+  const target = getNearestNonTextNode(node);
+  const cursorHeight = getCursorHeightFrom(target);
+  const fixedCoordinates = getCurrentFixedCoordinates();
+  const 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/es2019/ui/PlaceholderFloatingToolbar/index.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 const messages = defineMessages({
+  placeholderTextPlaceholder: {
+    id: 'fabric.editor.placeholderTextPlaceholder',
+    defaultMessage: 'Add placeholder text',
+    description: ''
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class PlaceholderFloatingToolbar extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleSubmit", value => {
+      if (value) {
+        this.props.insertPlaceholder(value);
+        this.props.setFocusInEditor();
+      } else {
+        this.props.hidePlaceholderFloatingToolbar();
+      }
+    });
+    _defineProperty(this, "handleBlur", () => {
+      this.props.hidePlaceholderFloatingToolbar();
+    });
+  }
+  render() {
+    const {
+      getNodeFromPos,
+      showInsertPanelAt,
+      editorViewDOM,
+      popupsMountPoint,
+      getFixedCoordinatesFromPos,
+      popupsBoundariesElement,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    const target = getNodeFromPos(showInsertPanelAt);
+    const offsetParent = getOffsetParent(editorViewDOM, popupsMountPoint);
+    const getFixedCoordinates = () => getFixedCoordinatesFromPos(showInsertPanelAt);
+    const 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
+    }));
+  }
+}
+export default injectIntl(PlaceholderFloatingToolbar);

package/dist/esm/actions.js

@@ -0,0 +1,29 @@
+import { pluginKey } from './plugin-key';
+export var showPlaceholderFloatingToolbar = function showPlaceholderFloatingToolbar(state, dispatch) {
+  var tr = state.tr;
+  if (!state.selection.empty) {
+    tr.deleteSelection();
+  }
+  tr.setMeta(pluginKey, {
+    showInsertPanelAt: tr.selection.anchor
+  });
+  tr.scrollIntoView();
+  dispatch(tr);
+  return true;
+};
+export var insertPlaceholderTextAtSelection = function insertPlaceholderTextAtSelection(value) {
+  return function (state, dispatch) {
+    dispatch(state.tr.replaceSelectionWith(state.schema.nodes.placeholder.createChecked({
+      text: value
+    })).setMeta(pluginKey, {
+      showInsertPanelAt: null
+    }).scrollIntoView());
+    return true;
+  };
+};
+export var hidePlaceholderFloatingToolbar = function hidePlaceholderFloatingToolbar(state, dispatch) {
+  dispatch(state.tr.setMeta(pluginKey, {
+    showInsertPanelAt: null
+  }));
+  return true;
+};

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

@@ -0,0 +1,100 @@
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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 { Slice } from '@atlaskit/editor-prosemirror/model';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export var FakeTextCursorBookmark = /*#__PURE__*/function () {
+  function FakeTextCursorBookmark(pos) {
+    _classCallCheck(this, FakeTextCursorBookmark);
+    _defineProperty(this, "pos", undefined);
+    _defineProperty(this, "visible", false);
+    this.pos = pos;
+  }
+  _createClass(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 Selection.near($pos);
+    }
+  }]);
+  return FakeTextCursorBookmark;
+}();
+export var FakeTextCursorSelection = /*#__PURE__*/function (_Selection) {
+  _inherits(FakeTextCursorSelection, _Selection);
+  var _super = _createSuper(FakeTextCursorSelection);
+  function FakeTextCursorSelection($pos) {
+    _classCallCheck(this, FakeTextCursorSelection);
+    return _super.call(this, $pos, $pos);
+  }
+  _createClass(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 Slice.empty;
+    }
+  }, {
+    key: "fromJSON",
+    value: function fromJSON(doc, json) {
+      return new FakeTextCursorSelection(doc.resolve(json.pos));
+    }
+  }]);
+  return FakeTextCursorSelection;
+}(Selection);
+Selection.jsonID('fake-text-cursor', FakeTextCursorSelection);
+export var addFakeTextCursor = function addFakeTextCursor(state, dispatch) {
+  var selection = state.selection;
+  if (selection.empty) {
+    var $from = state.selection.$from;
+    dispatch(state.tr.setSelection(new FakeTextCursorSelection($from)));
+  }
+};
+export var removeFakeTextCursor = function removeFakeTextCursor(state, dispatch) {
+  if (state.selection instanceof FakeTextCursorSelection) {
+    var $from = state.selection.$from;
+    dispatch(state.tr.setSelection(new TextSelection($from)));
+  }
+};
+export var drawFakeTextCursor = function drawFakeTextCursor(state) {
+  if (!(state.selection instanceof FakeTextCursorSelection)) {
+    return null;
+  }
+  var node = document.createElement('div');
+  node.className = 'ProseMirror-fake-text-cursor';
+  return DecorationSet.create(state.doc, [Decoration.widget(state.selection.head, node, {
+    key: 'Cursor'
+  })]);
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default as placeholderTextPlugin } from './plugin';