@atlaskit/editor-plugin-placeholder-text 0.1.0

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "getNearestNonTextNode", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getNearestNonTextNode;
+  }
+});
+Object.defineProperty(exports, "getOffsetParent", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getOffsetParent;
+  }
+});
+Object.defineProperty(exports, "handlePositionCalculatedWith", {
+  enumerable: true,
+  get: function get() {
+    return _utils.handlePositionCalculatedWith;
+  }
+});
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _react = require("react");
+var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _styles = require("./styles");
+var _utils = require("./utils");
+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; } } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /** @jsx jsx */
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FloatingToolbar = exports.default = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(FloatingToolbar, _PureComponent);
+  var _super = _createSuper(FloatingToolbar);
+  function FloatingToolbar() {
+    (0, _classCallCheck2.default)(this, FloatingToolbar);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(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 (0, _react2.jsx)(_ui.Popup, {
+        absoluteOffset: absoluteOffset,
+        alignX: alignX,
+        alignY: alignY,
+        target: target,
+        zIndex: zIndex,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        offset: offset,
+        fitWidth: fitWidth,
+        fitHeight: fitHeight,
+        onPositionCalculated: onPositionCalculated
+      }, (0, _react2.jsx)("div", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        css: (0, _styles.container)(fitHeight),
+        "data-testid": "popup-container",
+        className: className
+      }, children));
+    }
+  }]);
+  return FloatingToolbar;
+}(_react.PureComponent);

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.container = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2;
+var container = exports.container = function container(height) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: ", " ", ";\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, ".concat(_colors.N0, ")"), height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
+};

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handlePositionCalculatedWith = exports.getOffsetParent = exports.getNearestNonTextNode = void 0;
+var getCursorHeightFrom = function getCursorHeightFrom(node) {
+  return parseFloat(window.getComputedStyle(node, undefined).lineHeight || '');
+};
+var getOffsetParent = exports.getOffsetParent = function getOffsetParent(editorViewDom, popupsMountPoint) {
+  return popupsMountPoint ? popupsMountPoint.offsetParent : editorViewDom.offsetParent;
+};
+var getNearestNonTextNode = exports.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)
+  };
+};
+var handlePositionCalculatedWith = exports.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/cjs/ui/PlaceholderFloatingToolbar/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _ui = require("@atlaskit/editor-common/ui");
+var _FloatingToolbar = _interopRequireWildcard(require("../FloatingToolbar"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+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 messages = exports.messages = (0, _reactIntlNext.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) {
+  (0, _inherits2.default)(PlaceholderFloatingToolbar, _React$Component);
+  var _super = _createSuper(PlaceholderFloatingToolbar);
+  function PlaceholderFloatingToolbar() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function (value) {
+      if (value) {
+        _this.props.insertPlaceholder(value);
+        _this.props.setFocusInEditor();
+      } else {
+        _this.props.hidePlaceholderFloatingToolbar();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function () {
+      _this.props.hidePlaceholderFloatingToolbar();
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(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 = (0, _FloatingToolbar.getOffsetParent)(editorViewDOM, popupsMountPoint);
+      var getFixedCoordinates = function getFixedCoordinates() {
+        return getFixedCoordinatesFromPos(showInsertPanelAt);
+      };
+      var handlePositionCalculated = (0, _FloatingToolbar.handlePositionCalculatedWith)(offsetParent, target, getFixedCoordinates);
+      return /*#__PURE__*/_react.default.createElement(_FloatingToolbar.default, {
+        target: (0, _FloatingToolbar.getNearestNonTextNode)(target),
+        onPositionCalculated: handlePositionCalculated,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        fitHeight: 32,
+        offset: [0, 12]
+      }, /*#__PURE__*/_react.default.createElement(_ui.PanelTextInput, {
+        placeholder: formatMessage(messages.placeholderTextPlaceholder),
+        onSubmit: this.handleSubmit,
+        onBlur: this.handleBlur,
+        autoFocus: true,
+        width: 300
+      }));
+    }
+  }]);
+  return PlaceholderFloatingToolbar;
+}(_react.default.Component);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(PlaceholderFloatingToolbar);

package/dist/es2019/actions.js

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

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

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Slice } from '@atlaskit/editor-prosemirror/model';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export class FakeTextCursorBookmark {
+  constructor(pos) {
+    _defineProperty(this, "pos", undefined);
+    _defineProperty(this, "visible", false);
+    this.pos = pos;
+  }
+  map(mapping) {
+    return new FakeTextCursorBookmark(mapping.map(this.pos));
+  }
+  resolve(doc) {
+    const $pos = doc.resolve(this.pos);
+    return Selection.near($pos);
+  }
+}
+export class FakeTextCursorSelection extends Selection {
+  constructor($pos) {
+    super($pos, $pos);
+  }
+  map(doc, mapping) {
+    const $pos = doc.resolve(mapping.map(this.$head.pos));
+    return new FakeTextCursorSelection($pos);
+  }
+  static content() {
+    return Slice.empty;
+  }
+  eq(other) {
+    return other instanceof FakeTextCursorSelection && other.head === this.head;
+  }
+  toJSON() {
+    return {
+      type: 'Cursor',
+      pos: this.head
+    };
+  }
+  static fromJSON(doc, json) {
+    return new FakeTextCursorSelection(doc.resolve(json.pos));
+  }
+  getBookmark() {
+    return new FakeTextCursorBookmark(this.anchor);
+  }
+}
+Selection.jsonID('fake-text-cursor', FakeTextCursorSelection);
+export const addFakeTextCursor = (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (selection.empty) {
+    const {
+      selection: {
+        $from
+      }
+    } = state;
+    dispatch(state.tr.setSelection(new FakeTextCursorSelection($from)));
+  }
+};
+export const removeFakeTextCursor = (state, dispatch) => {
+  if (state.selection instanceof FakeTextCursorSelection) {
+    const {
+      $from
+    } = state.selection;
+    dispatch(state.tr.setSelection(new TextSelection($from)));
+  }
+};
+export const drawFakeTextCursor = state => {
+  if (!(state.selection instanceof FakeTextCursorSelection)) {
+    return null;
+  }
+  const 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/es2019/index.js

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

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

@@ -0,0 +1,77 @@
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+const serializePlaceholderNode = node => {
+  const 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;
+  const 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 class PlaceholderTextNodeView {
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
+  }
+  stopEvent(e) {
+    if (e.type === 'mousedown' && typeof this.getPos === 'function') {
+      e.preventDefault();
+      const {
+        view
+      } = this;
+      const startNodePosition = this.getPos();
+      if (typeof startNodePosition !== 'number') {
+        return false;
+      }
+      const tr = view.state.tr;
+      tr.setSelection(Selection.near(tr.doc.resolve(startNodePosition)));
+      view.dispatch(tr);
+      return true;
+    }
+    return false;
+  }
+  ignoreMutation(record) {
+    if (typeof this.getPos !== 'function' || record.type !== 'selection') {
+      return true;
+    }
+    const {
+      view,
+      node
+    } = this;
+    const placeholderStartPosition = this.getPos();
+    if (typeof placeholderStartPosition !== 'number') {
+      return false;
+    }
+    const placeholderEndPosition = placeholderStartPosition + node.nodeSize;
+    const 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;
+    }
+    const isSelectionAtPlaceholder = selection.from === placeholderStartPosition;
+    const isSelectionAfterlaceholder = selection.from > placeholderEndPosition;
+    if (isSelectionAtPlaceholder || isSelectionAfterlaceholder) {
+      const tr = view.state.tr;
+      tr.setSelection(Selection.near(tr.doc.resolve(placeholderEndPosition)));
+      view.dispatch(tr);
+      return true;
+    }
+    return true;
+  }
+}

package/dist/es2019/plugin-key.js

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