@atlaskit/editor-plugin-placeholder 0.1.0

package/CHANGELOG.md

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

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
+
+Placeholder 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*
+- **npm** - [@atlaskit/editor-plugin-placeholder](https://www.npmjs.com/package/@atlaskit/editor-plugin-placeholder)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-placeholder)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-placeholder/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-placeholder 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](https://atlaskit.atlassian.com/packages/editor/editor-plugin-placeholder) 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/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "placeholderPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.placeholderPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlaceholderDecoration = createPlaceholderDecoration;
+exports.createPlugin = createPlugin;
+exports.pluginKey = exports.placeholderTestId = exports.placeholderPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var pluginKey = new _state.PluginKey('placeholderPlugin');
+exports.pluginKey = pluginKey;
+function getPlaceholderState(editorState) {
+  return pluginKey.getState(editorState);
+}
+var placeholderTestId = 'placeholder-test-id';
+exports.placeholderTestId = placeholderTestId;
+function createPlaceholderDecoration(editorState, placeholderText) {
+  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var placeholderDecoration = document.createElement('span');
+  var placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+
+  // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
+  if (_utils.browser.gecko) {
+    var placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
+  }
+  placeholderNodeWithText.textContent = placeholderText || ' ';
+
+  // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  // Add a editable buff node as the cursor moving forward is inevitable
+  // when backspace in GBoard composition
+  if (_utils.browser.android && _utils.browser.chrome) {
+    var buffNode = document.createElement('span');
+    buffNode.setAttribute('class', 'placeholder-android');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+  return _view.DecorationSet.create(editorState.doc, [_view.Decoration.widget(pos, placeholderDecoration, {
+    side: 0,
+    key: 'placeholder'
+  })]);
+}
+function setPlaceHolderState(placeholderText, pos) {
+  return {
+    hasPlaceholder: true,
+    placeholderText: placeholderText,
+    pos: pos ? pos : 1
+  };
+}
+var emptyPlaceholder = {
+  hasPlaceholder: false
+};
+function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText) {
+  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
+    return emptyPlaceholder;
+  }
+  if (defaultPlaceholderText && (0, _utils.isEmptyDocument)(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText);
+  }
+  if (bracketPlaceholderText && (0, _utils.bracketTyped)(editorState) && isEditorFocused) {
+    var $from = editorState.selection.$from;
+    // Space is to account for positioning of the bracket
+    var bracketHint = '  ' + bracketPlaceholderText;
+    return setPlaceHolderState(bracketHint, $from.pos - 1);
+  }
+  return emptyPlaceholder;
+}
+function createPlugin(defaultPlaceholderText, bracketPlaceholderText, api) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+    return;
+  }
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init(_, state) {
+        var _api$focus, _api$focus$sharedStat;
+        return createPlaceHolderStateFrom(Boolean(api === null || api === void 0 ? void 0 : (_api$focus = api.focus) === null || _api$focus === void 0 ? void 0 : (_api$focus$sharedStat = _api$focus.sharedState.currentState()) === null || _api$focus$sharedStat === void 0 ? void 0 : _api$focus$sharedStat.hasFocus), state, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      },
+      apply: function apply(tr, _oldPluginState, _oldEditorState, newEditorState) {
+        var _api$focus2, _api$focus2$sharedSta;
+        var meta = tr.getMeta(pluginKey);
+        var isEditorFocused = Boolean(api === null || api === void 0 ? void 0 : (_api$focus2 = api.focus) === null || _api$focus2 === void 0 ? void 0 : (_api$focus2$sharedSta = _api$focus2.sharedState.currentState()) === null || _api$focus2$sharedSta === void 0 ? void 0 : _api$focus2$sharedSta.hasFocus);
+        if (meta) {
+          if (meta.removePlaceholder) {
+            return emptyPlaceholder;
+          }
+          if (meta.applyPlaceholderIfEmpty) {
+            return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+          }
+        }
+        return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      }
+    },
+    props: {
+      decorations: function decorations(editorState) {
+        var _api$composition;
+        var _getPlaceholderState = getPlaceholderState(editorState),
+          hasPlaceholder = _getPlaceholderState.hasPlaceholder,
+          placeholderText = _getPlaceholderState.placeholderText,
+          pos = _getPlaceholderState.pos;
+        var compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
+        if (hasPlaceholder && placeholderText && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing)) {
+          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        }
+        return;
+      }
+    }
+  });
+}
+var placeholderPlugin = function placeholderPlugin(_ref) {
+  var options = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'placeholder',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'placeholder',
+        plugin: function plugin() {
+          return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, api);
+        }
+      }];
+    }
+  };
+};
+exports.placeholderPlugin = placeholderPlugin;

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { placeholderPlugin } from './plugin';

package/dist/es2019/plugin.js

@@ -0,0 +1,122 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { bracketTyped, browser, isEmptyDocument } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export const pluginKey = new PluginKey('placeholderPlugin');
+function getPlaceholderState(editorState) {
+  return pluginKey.getState(editorState);
+}
+export const placeholderTestId = 'placeholder-test-id';
+export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
+  const placeholderDecoration = document.createElement('span');
+  let placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+
+  // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
+  if (browser.gecko) {
+    const placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
+  }
+  placeholderNodeWithText.textContent = placeholderText || ' ';
+
+  // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  // Add a editable buff node as the cursor moving forward is inevitable
+  // when backspace in GBoard composition
+  if (browser.android && browser.chrome) {
+    const buffNode = document.createElement('span');
+    buffNode.setAttribute('class', 'placeholder-android');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+  return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
+    side: 0,
+    key: 'placeholder'
+  })]);
+}
+function setPlaceHolderState(placeholderText, pos) {
+  return {
+    hasPlaceholder: true,
+    placeholderText,
+    pos: pos ? pos : 1
+  };
+}
+const emptyPlaceholder = {
+  hasPlaceholder: false
+};
+function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText) {
+  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
+    return emptyPlaceholder;
+  }
+  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText);
+  }
+  if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
+    const {
+      $from
+    } = editorState.selection;
+    // Space is to account for positioning of the bracket
+    const bracketHint = '  ' + bracketPlaceholderText;
+    return setPlaceHolderState(bracketHint, $from.pos - 1);
+  }
+  return emptyPlaceholder;
+}
+export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, api) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+    return;
+  }
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: (_, state) => {
+        var _api$focus, _api$focus$sharedStat;
+        return createPlaceHolderStateFrom(Boolean(api === null || api === void 0 ? void 0 : (_api$focus = api.focus) === null || _api$focus === void 0 ? void 0 : (_api$focus$sharedStat = _api$focus.sharedState.currentState()) === null || _api$focus$sharedStat === void 0 ? void 0 : _api$focus$sharedStat.hasFocus), state, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      },
+      apply: (tr, _oldPluginState, _oldEditorState, newEditorState) => {
+        var _api$focus2, _api$focus2$sharedSta;
+        const meta = tr.getMeta(pluginKey);
+        const isEditorFocused = Boolean(api === null || api === void 0 ? void 0 : (_api$focus2 = api.focus) === null || _api$focus2 === void 0 ? void 0 : (_api$focus2$sharedSta = _api$focus2.sharedState.currentState()) === null || _api$focus2$sharedSta === void 0 ? void 0 : _api$focus2$sharedSta.hasFocus);
+        if (meta) {
+          if (meta.removePlaceholder) {
+            return emptyPlaceholder;
+          }
+          if (meta.applyPlaceholderIfEmpty) {
+            return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+          }
+        }
+        return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      }
+    },
+    props: {
+      decorations(editorState) {
+        var _api$composition;
+        const {
+          hasPlaceholder,
+          placeholderText,
+          pos
+        } = getPlaceholderState(editorState);
+        const compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
+        if (hasPlaceholder && placeholderText && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing)) {
+          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        }
+        return;
+      }
+    }
+  });
+}
+export const placeholderPlugin = ({
+  config: options,
+  api
+}) => ({
+  name: 'placeholder',
+  pmPlugins() {
+    return [{
+      name: 'placeholder',
+      plugin: () => createPlugin(options && options.placeholder, options && options.placeholderBracketHint, api)
+    }];
+  }
+});

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { placeholderPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,123 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { bracketTyped, browser, isEmptyDocument } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export var pluginKey = new PluginKey('placeholderPlugin');
+function getPlaceholderState(editorState) {
+  return pluginKey.getState(editorState);
+}
+export var placeholderTestId = 'placeholder-test-id';
+export function createPlaceholderDecoration(editorState, placeholderText) {
+  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var placeholderDecoration = document.createElement('span');
+  var placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+
+  // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
+  if (browser.gecko) {
+    var placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
+  }
+  placeholderNodeWithText.textContent = placeholderText || ' ';
+
+  // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  // Add a editable buff node as the cursor moving forward is inevitable
+  // when backspace in GBoard composition
+  if (browser.android && browser.chrome) {
+    var buffNode = document.createElement('span');
+    buffNode.setAttribute('class', 'placeholder-android');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+  return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
+    side: 0,
+    key: 'placeholder'
+  })]);
+}
+function setPlaceHolderState(placeholderText, pos) {
+  return {
+    hasPlaceholder: true,
+    placeholderText: placeholderText,
+    pos: pos ? pos : 1
+  };
+}
+var emptyPlaceholder = {
+  hasPlaceholder: false
+};
+function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText) {
+  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
+    return emptyPlaceholder;
+  }
+  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText);
+  }
+  if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
+    var $from = editorState.selection.$from;
+    // Space is to account for positioning of the bracket
+    var bracketHint = '  ' + bracketPlaceholderText;
+    return setPlaceHolderState(bracketHint, $from.pos - 1);
+  }
+  return emptyPlaceholder;
+}
+export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, api) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+    return;
+  }
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init(_, state) {
+        var _api$focus, _api$focus$sharedStat;
+        return createPlaceHolderStateFrom(Boolean(api === null || api === void 0 ? void 0 : (_api$focus = api.focus) === null || _api$focus === void 0 ? void 0 : (_api$focus$sharedStat = _api$focus.sharedState.currentState()) === null || _api$focus$sharedStat === void 0 ? void 0 : _api$focus$sharedStat.hasFocus), state, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      },
+      apply: function apply(tr, _oldPluginState, _oldEditorState, newEditorState) {
+        var _api$focus2, _api$focus2$sharedSta;
+        var meta = tr.getMeta(pluginKey);
+        var isEditorFocused = Boolean(api === null || api === void 0 ? void 0 : (_api$focus2 = api.focus) === null || _api$focus2 === void 0 ? void 0 : (_api$focus2$sharedSta = _api$focus2.sharedState.currentState()) === null || _api$focus2$sharedSta === void 0 ? void 0 : _api$focus2$sharedSta.hasFocus);
+        if (meta) {
+          if (meta.removePlaceholder) {
+            return emptyPlaceholder;
+          }
+          if (meta.applyPlaceholderIfEmpty) {
+            return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+          }
+        }
+        return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : api.typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText);
+      }
+    },
+    props: {
+      decorations: function decorations(editorState) {
+        var _api$composition;
+        var _getPlaceholderState = getPlaceholderState(editorState),
+          hasPlaceholder = _getPlaceholderState.hasPlaceholder,
+          placeholderText = _getPlaceholderState.placeholderText,
+          pos = _getPlaceholderState.pos;
+        var compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
+        if (hasPlaceholder && placeholderText && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing)) {
+          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        }
+        return;
+      }
+    }
+  });
+}
+export var placeholderPlugin = function placeholderPlugin(_ref) {
+  var options = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'placeholder',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'placeholder',
+        plugin: function plugin() {
+          return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, api);
+        }
+      }];
+    }
+  };
+};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { PlaceholderPlugin, PlaceholderPluginOptions } from './plugin';
+export { placeholderPlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,21 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const pluginKey: PluginKey<any>;
+export declare const placeholderTestId = "placeholder-test-id";
+export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
+export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
+export interface PlaceholderPluginOptions {
+    placeholder?: string;
+    placeholderBracketHint?: string;
+}
+export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
+    pluginConfiguration: PlaceholderPluginOptions | undefined;
+    dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin];
+}>;
+export declare const placeholderPlugin: PlaceholderPlugin;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export type { PlaceholderPlugin, PlaceholderPluginOptions } from './plugin';
+export { placeholderPlugin } from './plugin';

package/dist/types-ts4.5/plugin.d.ts

@@ -0,0 +1,25 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const pluginKey: PluginKey<any>;
+export declare const placeholderTestId = "placeholder-test-id";
+export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
+export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
+export interface PlaceholderPluginOptions {
+    placeholder?: string;
+    placeholderBracketHint?: string;
+}
+export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
+    pluginConfiguration: PlaceholderPluginOptions | undefined;
+    dependencies: [
+        FocusPlugin,
+        CompositionPlugin,
+        TypeAheadPlugin
+    ];
+}>;
+export declare const placeholderPlugin: PlaceholderPlugin;

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@atlaskit/editor-plugin-placeholder",
+  "version": "0.1.0",
+  "description": "Placeholder plugin for @atlaskit/editor-core.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor: Scarlet",
+    "singleton": true,
+    "releaseModel": "continuous"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/editor-common": "^74.56.0",
+    "@atlaskit/editor-plugin-composition": "^0.1.0",
+    "@atlaskit/editor-plugin-focus": "^0.2.0",
+    "@atlaskit/editor-plugin-type-ahead": "^0.3.0",
+    "@atlaskit/editor-prosemirror": "1.1.0",
+    "@babel/runtime": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,58 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/editor-plugin-placeholder"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+
+// @public (undocumented)
+export type PlaceholderPlugin = NextEditorPlugin<
+  'placeholder',
+  {
+    pluginConfiguration: PlaceholderPluginOptions | undefined;
+    dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin];
+  }
+>;
+
+// @public (undocumented)
+export const placeholderPlugin: PlaceholderPlugin;
+
+// @public (undocumented)
+export interface PlaceholderPluginOptions {
+  // (undocumented)
+  placeholder?: string;
+  // (undocumented)
+  placeholderBracketHint?: string;
+}
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,31 @@
+## API Report File for "@atlaskit/editor-plugin-placeholder"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+
+// @public (undocumented)
+export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
+    pluginConfiguration: PlaceholderPluginOptions | undefined;
+    dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin];
+}>;
+
+// @public (undocumented)
+export const placeholderPlugin: PlaceholderPlugin;
+
+// @public (undocumented)
+export interface PlaceholderPluginOptions {
+    // (undocumented)
+    placeholder?: string;
+    // (undocumented)
+    placeholderBracketHint?: string;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```