@atlaskit/editor-core 189.1.11 → 189.1.13

package/dist/es2019/plugins/placeholder-text/plugin.js

@@ -1,247 +0,0 @@
-import React from 'react';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { placeholder } from '@atlaskit/adf-schema';
-import MediaServicesTextIcon from '@atlaskit/icon/glyph/media-services/text';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { isNodeEmpty } from '@atlaskit/editor-common/utils';
-import { drawFakeTextCursor, FakeTextCursorSelection } from './fake-text-cursor/cursor';
-import PlaceholderFloatingToolbar from './ui/PlaceholderFloatingToolbar';
-import { hidePlaceholderFloatingToolbar, insertPlaceholderTextAtSelection } from './actions';
-import { PlaceholderTextNodeView } from './placeholder-text-nodeview';
-import { pluginKey } from './plugin-key';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { isSelectionAtPlaceholder } from './selection-utils';
-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)
-    }];
-  },
-  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/plugins/placeholder-text/selection-utils.js

@@ -1,8 +0,0 @@
-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/plugins/placeholder-text/styles.js

@@ -1,52 +0,0 @@
-import { css } from '@emotion/react';
-import { B75, N200 } from '@atlaskit/theme/colors';
-import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-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/plugins/placeholder-text/types.js

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

package/dist/es2019/plugins/placeholder-text/ui/FloatingToolbar/index.js

@@ -1,45 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { PureComponent } from 'react';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { container } from './styles';
-export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
-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", {
-      css: container(fitHeight),
-      "data-testid": "popup-container",
-      className: className
-    }, children));
-  }
-}

package/dist/es2019/plugins/placeholder-text/ui/FloatingToolbar/styles.js

@@ -1,15 +0,0 @@
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-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/plugins/placeholder-text/ui/FloatingToolbar/utils.js

@@ -1,41 +0,0 @@
-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) => {
-  const {
-    left: offsetParentLeft,
-    top: offsetParentTop,
-    height: offsetParentHeight
-  } = offsetParent.getBoundingClientRect();
-  return {
-    left: coordinates.left - offsetParentLeft,
-    right: coordinates.right - offsetParentLeft,
-    top: coordinates.top - (offsetParentTop - cursorHeight) + offsetParent.scrollTop,
-    bottom: offsetParentHeight - (coordinates.top - (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/plugins/placeholder-text/ui/PlaceholderFloatingToolbar/index.js

@@ -1,60 +0,0 @@
-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, { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from '../FloatingToolbar';
-export const messages = defineMessages({
-  placeholderTextPlaceholder: {
-    id: 'fabric.editor.placeholderTextPlaceholder',
-    defaultMessage: 'Add placeholder text',
-    description: ''
-  }
-});
-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);