@atlaskit/editor-core 189.0.1 → 189.0.3

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

@@ -1,224 +1 @@
-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 WithPluginState from '../../ui/WithPluginState';
-import { isNodeEmpty } from '@atlaskit/editor-common/utils';
-import { 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 { messages } from '../insert-block/ui/ToolbarInsertBlock/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: {
-      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)
-      }
-    }
-  });
-}
-const basePlaceholderTextPlugin = ({
-  api,
-  config: options
-}) => ({
-  name: 'placeholderText',
-  nodes() {
-    return [{
-      name: 'placeholder',
-      node: placeholder
-    }];
-  },
-  pmPlugins() {
-    return [{
-      name: 'placeholderText',
-      plugin: ({
-        dispatch
-      }) => createPlugin(dispatch, options, api)
-    }];
-  },
-  contentComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement
-  }) {
-    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();
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        placeholderTextState: pluginKey
-      },
-      render: ({
-        placeholderTextState = {}
-      }) => {
-        if (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 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;
+export { default as placeholderTextPlugin } from './plugin';

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

@@ -0,0 +1,246 @@
+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 { 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: {
+      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/{ui → plugins/placeholder-text/ui}/FloatingToolbar/styles.js

@@ -7,7 +7,7 @@ export const container = height => css`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 4px 8px;
+  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/PlaceholderFloatingToolbar/index.js

@@ -2,7 +2,7 @@ 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 '../../../../ui/FloatingToolbar';
+import FloatingToolbar, { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from '../FloatingToolbar';
 export const messages = defineMessages({
   placeholderTextPlaceholder: {
     id: 'fabric.editor.placeholderTextPlaceholder',

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "189.0.1";
+export const version = "189.0.3";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/index.js

@@ -11,7 +11,7 @@ export { default as macroPlugin } from './macro';
 export { default as maxContentSizePlugin } from './max-content-size';
 export { default as panelPlugin } from './panel';
 export { default as pastePlugin } from './paste';
-export { default as placeholderTextPlugin } from './placeholder-text';
+export { placeholderTextPlugin } from './placeholder-text';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';
 export { default as textColorPlugin } from './text-color';
 export { default as breakoutPlugin } from './breakout';