@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/type-ahead/insert-utils.js

@@ -0,0 +1,119 @@
+import { TextSelection, NodeSelection } from 'prosemirror-state';
+import { Node as PMNode, Slice, Fragment } from 'prosemirror-model';
+import { normaliseNestedLayout } from '../../utils/selection';
+import { safeInsert } from '../../utils/insert';
+
+function findInsertPoint(doc, pos, nodeToInsert) {
+  const $pos = doc.resolve(pos);
+
+  const createInsertPosition = (from, to) => ({
+    from,
+    to: to || from
+  }); // Search for a valid position for nodeToInsert in progressively higher levels
+
+
+  for (let level = $pos.depth; level >= 0; level--) {
+    const nodeAtLevel = $pos.node(level); // Try to replace the empty paragraph in the level above
+    // Scenario:
+    //   doc(
+    //     table(
+    //       row(
+    //         cell(
+    //           p('{<>}'),
+    //         ),
+    //       )
+    //     )
+    //   )
+
+    const levelAbove = Math.max(level - 1, 0);
+    const parentNode = $pos.node(levelAbove); // Special case: when this is true, the 'to' position should be the end
+    // of the empty paragraph
+
+    const isNodeAtLevelEmptyParagraph = nodeAtLevel.type.name === 'paragraph' && nodeAtLevel.content.size === 0;
+    const indexAtLevelAbove = $pos.index(levelAbove);
+    const canReplaceNodeAtLevelAbove = parentNode.canReplaceWith(indexAtLevelAbove, indexAtLevelAbove, nodeToInsert.type);
+
+    if (isNodeAtLevelEmptyParagraph && canReplaceNodeAtLevelAbove) {
+      const from = $pos.posAtIndex(indexAtLevelAbove, levelAbove);
+      return createInsertPosition(from, from + nodeAtLevel.nodeSize);
+    } // Try to insert this node right after the node in the level above
+    // Scenario:
+    //   doc(
+    //     panel(
+    //       p('{<>}'),
+    //     )
+    //   )
+
+
+    const indexAfterAtLevelAbove = $pos.indexAfter(levelAbove);
+    const canInsertNodeAtLevelAbove = parentNode.canReplaceWith(indexAfterAtLevelAbove, indexAfterAtLevelAbove, nodeToInsert.type);
+
+    if (canInsertNodeAtLevelAbove) {
+      return createInsertPosition($pos.posAtIndex(indexAfterAtLevelAbove, levelAbove));
+    }
+  }
+
+  return createInsertPosition(0);
+}
+
+export const insertBlockNode = ({
+  node,
+  tr,
+  position
+}) => {
+  const {
+    start,
+    end
+  } = position;
+
+  if (node.isText) {
+    return tr.replaceWith(start, end, node);
+  }
+
+  if (node.isBlock) {
+    tr.delete(start, end);
+    const mappedStart = tr.mapping.map(start);
+    const nodeNormalized = normaliseNestedLayout(tr, node); // Handle edge cases for hr and mediaSingle
+
+    const inserted = safeInsert(nodeNormalized, mappedStart)(tr);
+
+    if (inserted) {
+      return tr;
+    }
+
+    const sliceInserted = Slice.maxOpen(Fragment.from(nodeNormalized));
+    const {
+      from,
+      to
+    } = findInsertPoint(tr.doc, mappedStart, nodeNormalized);
+    tr.replaceWith(from, to, node);
+    const openPosition = Math.min(from + (node.isAtom ? node.nodeSize : sliceInserted.openStart), tr.doc.content.size);
+    const FORWARD_DIRECTION = 1;
+    const nextSelection = TextSelection.findFrom(tr.doc.resolve(openPosition), FORWARD_DIRECTION, true);
+
+    if (nextSelection) {
+      return tr.setSelection(nextSelection);
+    }
+  }
+
+  return tr;
+};
+export const insertInlineNodeOrFragment = ({
+  maybeFragment,
+  tr,
+  position,
+  selectInlineNode
+}) => {
+  const {
+    start,
+    end
+  } = position;
+  const fragment = maybeFragment instanceof PMNode ? Fragment.from(maybeFragment) : maybeFragment;
+  tr.replaceWith(start, end, fragment);
+
+  if (selectInlineNode) {
+    return tr.setSelection(NodeSelection.create(tr.doc, start));
+  }
+
+  return tr.setSelection(TextSelection.near(tr.doc.resolve(start + fragment.size)));
+};

package/dist/es2019/plugins/type-ahead/pm-plugins/actions.js

@@ -1,8 +1,11 @@
-export const ACTIONS = {
-  SELECT_PREV: 'SELECT_PREV',
-  SELECT_NEXT: 'SELECT_NEXT',
-  SELECT_CURRENT: 'SELECT_CURRENT',
-  SET_CURRENT_INDEX: 'SET_CURRENT_INDEX',
-  SET_QUERY: 'SET_QUERY',
-  ITEMS_LIST_UPDATED: 'ITEMS_LIST_UPDATED'
-};
+export let ACTIONS;
+
+(function (ACTIONS) {
+  ACTIONS["OPEN_TYPEAHEAD_AT_CURSOR"] = "OPEN_TYPEAHEAD_AT_CURSOR";
+  ACTIONS["CLOSE_TYPE_AHEAD"] = "CLOSE_TYPE_AHEAD";
+  ACTIONS["CHANGE_QUERY"] = "CHANGE_QUERY";
+  ACTIONS["INSERT_ITEM"] = "INSERT_ITEM";
+  ACTIONS["INSERT_RAW_QUERY"] = "INSERT_RAW_QUERY";
+  ACTIONS["UPDATE_LIST_ITEMS"] = "UPDATE_LIST_ITEMS";
+  ACTIONS["UPDATE_SELECTED_INDEX"] = "UPDATE_SELECTED_INDEX";
+})(ACTIONS || (ACTIONS = {}));

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -0,0 +1,211 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { TextSelection } from 'prosemirror-state';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+import { B400 } from '@atlaskit/theme/colors';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { IntlProvider } from 'react-intl';
+import { redo, undo } from 'prosemirror-history';
+import { TYPE_AHEAD_DECORATION_KEY, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
+import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
+import { StatsModifier } from '../stats-modifier';
+import { getTypeAheadQuery } from '../utils';
+import { closeTypeAhead } from '../transforms/close-type-ahead';
+export const factoryDecorations = ({
+  intl,
+  popupMountRef,
+  createAnalyticsEvent
+}) => {
+  const createDecorations = (tr, {
+    triggerHandler,
+    inputMethod,
+    reopenQuery
+  }) => {
+    const {
+      selection
+    } = tr;
+
+    if (!(selection instanceof TextSelection) || !selection.$cursor) {
+      return {
+        decorationSet: DecorationSet.empty,
+        stats: null,
+        decorationElement: null
+      };
+    }
+
+    const decorationId = `decoration_id_${TYPE_AHEAD_DECORATION_KEY}_${uuid()}`;
+    const {
+      $cursor
+    } = selection;
+    const typeaheadComponent = document.createElement('mark');
+    const stats = new StatsModifier();
+    let shouldFocusCursorInsideQuery = true;
+    const deco = Decoration.widget($cursor.pos, (editorView, getDecorationPosition) => {
+      var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+
+      typeaheadComponent.setAttribute('id', decorationId);
+      typeaheadComponent.setAttribute('role', 'search');
+      typeaheadComponent.setAttribute('aria-label', `On ${triggerHandler.id}`);
+      typeaheadComponent.dataset.typeAheadQuery = 'true';
+      typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
+      // we need that cuz the clickAreaHelper
+      // will try to hijack any click event coming
+      // from the inside of the Editor
+      // packages/editor/editor-core/src/ui/Addon/click-area-helper.ts
+
+      typeaheadComponent.dataset.editorPopup = 'true';
+      typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
+      typeaheadComponent.style.color = B400;
+      typeaheadComponent.style.backgroundColor = 'transparent';
+
+      const onUndoRedo = inputType => {
+        if (!['historyUndo', 'historyRedo'].includes(inputType)) {
+          return false;
+        }
+
+        const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+        const currentQuery = getTypeAheadQuery(editorView.state);
+
+        if (hasReopenQuery || currentQuery.length === 0) {
+          const command = inputType === 'historyUndo' ? undo : redo;
+          let tr = editorView.state.tr;
+
+          const fakeDispatch = customTr => {
+            tr = customTr;
+          };
+
+          const result = command(editorView.state, fakeDispatch);
+
+          if (result) {
+            closeTypeAhead(tr);
+            editorView.dispatch(tr);
+            editorView.focus();
+          }
+
+          return result;
+        }
+
+        return false;
+      };
+
+      ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: intl.locale || 'en',
+        messages: intl.messages,
+        formats: intl.formats
+      }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
+        triggerHandler: triggerHandler,
+        editorView: editorView,
+        anchorElement: typeaheadComponent,
+        createAnalyticsEvent: createAnalyticsEvent,
+        inputMethod: inputMethod,
+        getDecorationPosition: getDecorationPosition,
+        shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
+        popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+        popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+        popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
+        onUndoRedo: onUndoRedo,
+        reopenQuery: reopenQuery
+      })), typeaheadComponent);
+      shouldFocusCursorInsideQuery = false;
+      return typeaheadComponent;
+    }, {
+      isTypeAheadDecoration: true,
+      key: decorationId,
+      side: 0,
+      stopEvent: e => {
+        const key = keyNameNormalized(e);
+        const sel = document.getSelection();
+
+        if ('ArrowLeft' === key && (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          return false;
+        }
+
+        return true;
+      },
+      ignoreSelection: false
+    });
+    return {
+      decorationSet: DecorationSet.create(tr.doc, [deco]),
+      decorationElement: typeaheadComponent,
+      stats
+    };
+  };
+
+  const removeDecorations = decorationSet => {
+    if (!decorationSet || decorationSet === DecorationSet.empty) {
+      return false;
+    }
+
+    const typeAheadDecorations = decorationSet.find(undefined, undefined, spec => {
+      return spec.isTypeAheadDecoration;
+    });
+
+    if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
+      return false;
+    }
+
+    typeAheadDecorations.forEach(({
+      spec
+    }) => {
+      if (!spec.key) {
+        return;
+      }
+
+      const decoElement = document.querySelector(`#${spec.key}`);
+
+      if (!decoElement) {
+        return;
+      }
+
+      ReactDOM.unmountComponentAtNode(decoElement);
+    });
+    return true;
+  };
+
+  return {
+    createDecorations,
+    removeDecorations
+  };
+};
+export const isSelectionInsideTypeAhead = ({
+  decorationSet,
+  selection
+}) => {
+  if (!decorationSet || decorationSet === DecorationSet.empty) {
+    return false;
+  }
+
+  const typeAheadDecorations = decorationSet.find(undefined, undefined, spec => {
+    return spec.isTypeAheadDecoration;
+  });
+
+  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
+    return false;
+  }
+
+  return typeAheadDecorations.some(dec => {
+    return dec.from === selection.from && dec.to === selection.to;
+  });
+};
+export const findDecorationElement = ({
+  selection,
+  decorationSet
+}) => {
+  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
+    return null;
+  }
+
+  const {
+    $cursor: {
+      pos
+    }
+  } = selection;
+  const decoration = decorationSet.find(pos, pos, spec => spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration);
+
+  if (!decoration || decoration.length !== 1) {
+    return null;
+  }
+
+  return document.querySelector(`#${decoration[0].spec.key}`);
+};

package/dist/es2019/plugins/type-ahead/pm-plugins/input-rules.js

@@ -1,46 +1,32 @@
-import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { pluginKey as typeAheadPluginKey } from './main'; // We cannot set a proper plugin key on input rule plugins, so instead, once
-// the plugin is created we save its key to this variable
-
-export let typeAheadInputRulesPluginKey = '';
+import { openTypeAheadAtCursor } from '../transforms/open-typeahead-at-cursor';
+import { INPUT_METHOD } from '../../analytics';
+import { createRule, createPlugin } from '../../../utils/input-rules';
 export function inputRulePlugin(schema, typeAheads, featureFlags) {
-  const triggersRegex = typeAheads.map(t => t.customRegex || t.trigger).join('|');
-
-  if (!triggersRegex.length) {
+  if (!typeAheads || typeAheads.length === 0) {
     return;
   }
 
-  const regex = new RegExp(`(^|[.!?\\s${leafNodeReplacementCharacter}])(${triggersRegex})$`);
-  const typeAheadInputRule = createRule(regex, (state, match) => {
-    const typeAheadState = typeAheadPluginKey.getState(state);
-    /**
-     * Why using match 2 and 3?  Regex:
-     * (allowed characters before trigger)(joined|triggers|(sub capture groups))
-     *            match[1]                     match[2]          match[3] – optional
-     */
-
-    const trigger = match[3] || match[2];
+  const rules = typeAheads.reduce((acc, typeAhead) => {
+    const trigger = typeAhead.customRegex || typeAhead.trigger;
 
-    if (!typeAheadState.isAllowed || !trigger) {
-      return null;
+    if (!trigger) {
+      return acc;
     }
 
-    const mark = schema.mark('typeAheadQuery', {
-      trigger
-    });
-    const {
-      tr,
-      selection
-    } = state;
-    const marks = selection.$from.marks();
-    return tr.replaceSelectionWith(schema.text(trigger, [mark, ...marks]), false);
-  });
-  const plugin = createPlugin('type-ahead', [typeAheadInputRule], {
+    const regex = new RegExp(`(^|[.!?\\s${leafNodeReplacementCharacter}])(${trigger})$`);
+    acc.push(createRule(regex, (state, match) => {
+      return openTypeAheadAtCursor({
+        triggerHandler: typeAhead,
+        inputMethod: INPUT_METHOD.KEYBOARD
+      })(state.tr);
+    }));
+    return acc;
+  }, []);
+  const plugin = createPlugin('type-ahead', rules, {
     allowInsertTextOnDocument: false,
     useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
   });
-  typeAheadInputRulesPluginKey = plugin.key;
   return plugin;
 }
 export default inputRulePlugin;

package/dist/es2019/plugins/type-ahead/pm-plugins/insert-item-plugin.js

@@ -0,0 +1,19 @@
+import { Plugin } from 'prosemirror-state';
+import { ACTIONS } from './actions';
+import { isInsertionTransaction } from './utils';
+export function createPlugin() {
+  return new Plugin({
+    appendTransaction(transactions, _oldState, newState) {
+      const insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_ITEM);
+
+      if (insertItemCallback) {
+        const tr = insertItemCallback(newState);
+
+        if (tr) {
+          return tr;
+        }
+      }
+    }
+
+  });
+}