@atlaskit/editor-core 172.1.2 → 172.2.0

package/dist/es2019/analytics-api/editor-state-context.js

@@ -0,0 +1,85 @@
+import { ACTION, ACTION_SUBJECT, SELECTION_TYPE, SELECTION_POSITION } from '@atlaskit/editor-common/analytics';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findParentNode } from 'prosemirror-utils';
+import { NodeSelection } from 'prosemirror-state';
+export function getSelectionType(state) {
+  var _selection$constructo;
+
+  const {
+    selection
+  } = state;
+  let type;
+  let position;
+
+  if ((selection === null || selection === void 0 ? void 0 : (_selection$constructo = selection.constructor) === null || _selection$constructo === void 0 ? void 0 : _selection$constructo.name) === 'GapCursorSelection') {
+    type = SELECTION_TYPE.GAP_CURSOR;
+    position = selection.side;
+  } else if (selection instanceof CellSelection) {
+    type = SELECTION_TYPE.CELL;
+  } else if (selection instanceof NodeSelection) {
+    type = SELECTION_TYPE.NODE;
+  } else if (selection.from !== selection.to) {
+    type = SELECTION_TYPE.RANGED;
+  } else {
+    type = SELECTION_TYPE.CURSOR;
+    const {
+      from,
+      $from
+    } = selection;
+
+    if (from === $from.start()) {
+      position = SELECTION_POSITION.START;
+    } else if (from === $from.end()) {
+      position = SELECTION_POSITION.END;
+    } else {
+      position = SELECTION_POSITION.MIDDLE;
+    }
+  }
+
+  return {
+    type,
+    position
+  };
+}
+export function findInsertLocation(state) {
+  const {
+    selection
+  } = state;
+
+  if (selection instanceof NodeSelection) {
+    return selection.node.type.name;
+  }
+
+  if (selection instanceof CellSelection) {
+    return state.schema.nodes.table.name;
+  } // Text selection
+
+
+  const parentNodeInfo = findParentNode(node => node.type !== state.schema.nodes.paragraph)(state.selection);
+  return parentNodeInfo ? parentNodeInfo.node.type.name : state.doc.type.name;
+}
+export function getStateContext(state, payload) {
+  if (!payload.attributes) {
+    return payload;
+  }
+
+  const {
+    type,
+    position
+  } = getSelectionType(state);
+  payload.attributes.selectionType = type;
+
+  if (position) {
+    payload.attributes.selectionPosition = position;
+  }
+
+  const insertLocation = findInsertLocation(state);
+
+  if (payload.action === ACTION.INSERTED && payload.actionSubject === ACTION_SUBJECT.DOCUMENT && payload.attributes) {
+    payload.attributes.insertLocation = insertLocation;
+  } else {
+    payload.attributes.nodeLocation = insertLocation;
+  }
+
+  return payload;
+}

package/dist/es2019/analytics-api/map-attributes.js

@@ -0,0 +1,14 @@
+import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+export function mapActionSubjectIdToAttributes(payload) {
+  const documentInserted = payload.action === ACTION.INSERTED && payload.actionSubject === ACTION_SUBJECT.DOCUMENT;
+  const textFormatted = payload.action === ACTION.FORMATTED && payload.actionSubject === ACTION_SUBJECT.TEXT;
+  const hasActionSubjectId = !!payload.actionSubjectId;
+
+  if (hasActionSubjectId && (documentInserted || textFormatted)) {
+    payload.attributes = { ...payload.attributes,
+      actionSubjectId: payload.actionSubjectId
+    };
+  }
+
+  return payload;
+}

package/dist/es2019/create-editor/ReactEditorView.js

@@ -30,6 +30,10 @@ import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPD
 import { PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD, DEFAULT_SAMPLING_RATE_VALID_TRANSACTIONS } from './consts';
 import { getContextIdentifier } from '../plugins/base/pm-plugins/context-identifier';
 import ReactEditorViewContext from './ReactEditorViewContext';
+import { pluginKey as widthPluginKey } from '../plugins/width';
+import { createInsertNodeAPI } from '../insert-api/api';
+import { createEditorAnalyticsAPI } from '../analytics-api/api';
+import { createEditorSelectionAPI } from '../selection-api/api';
 
 function handleEditorFocus(view) {
   if (view.hasFocus()) {
@@ -157,7 +161,8 @@ export class ReactEditorView extends React.Component {
 
 
       this.blur();
-      this.config = processPluginsList(this.getPlugins(props.editorProps, this.props.editorProps, this.props.createAnalyticsEvent));
+      const editorPlugins = this.getPlugins(props.editorProps, this.props.editorProps, this.props.createAnalyticsEvent);
+      this.config = processPluginsList(editorPlugins);
       const state = this.editorState;
       const plugins = createPMPlugins({
         schema: state.schema,
@@ -193,6 +198,8 @@ export class ReactEditorView extends React.Component {
       fireAnalyticsEvent(this.props.createAnalyticsEvent)(payload);
     });
 
+    _defineProperty(this, "editorPlugins", []);
+
     _defineProperty(this, "createEditorState", options => {
       let schema;
 
@@ -713,19 +720,41 @@ export class ReactEditorView extends React.Component {
     }
 
     this.eventDispatcher.destroy(); // this.view will be destroyed when React unmounts in handleEditorViewRef
-  } // Helper to allow tests to inject plugins directly
-
+  }
 
+  // Helper to allow tests to inject plugins directly
   getPlugins(editorProps, prevEditorProps, createAnalyticsEvent) {
     var _editorProps$dangerou, _editorProps$dangerou2;
 
     const editorPlugins = (_editorProps$dangerou = (_editorProps$dangerou2 = editorProps.dangerouslyAppendPlugins) === null || _editorProps$dangerou2 === void 0 ? void 0 : _editorProps$dangerou2.__plugins) !== null && _editorProps$dangerou !== void 0 ? _editorProps$dangerou : [];
-    const builtinPlugins = createPluginList(editorProps, prevEditorProps, createAnalyticsEvent);
+    const insertNodeAPI = createInsertNodeAPI({
+      getEditorView: () => this.view,
+      getEditorPlugins: () => this.editorPlugins
+    });
+    const editorAnalyticsAPI = createEditorAnalyticsAPI({
+      getEditorView: () => this.view,
+      getCreateUIAnalyticsEvent: () => createAnalyticsEvent
+    });
+    const editorSelectionAPI = createEditorSelectionAPI();
+
+    const getEditorContainerWidth = () => {
+      if (!this.view) {
+        return null;
+      }
+
+      const {
+        state
+      } = this.view;
+      return widthPluginKey.getState(state) || null;
+    };
+
+    const builtinPlugins = createPluginList(editorProps, prevEditorProps, createAnalyticsEvent, insertNodeAPI, editorAnalyticsAPI, editorSelectionAPI, getEditorContainerWidth);
 
     if (editorPlugins && editorPlugins.length > 0) {
       builtinPlugins.push(...editorPlugins);
     }
 
+    this.editorPlugins = builtinPlugins;
     return builtinPlugins;
   }
 

package/dist/es2019/create-editor/ReactEditorViewContext.js

@@ -1,3 +1,2 @@
-import React from 'react';
-const ReactEditorViewContext = /*#__PURE__*/React.createContext({});
+import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
 export default ReactEditorViewContext;

package/dist/es2019/create-editor/create-plugins-list.js

@@ -1,4 +1,6 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, // tablesPlugin,
+tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin } from '../plugins'; // import { tablesPlugin } from '@atlaskit/editor-plugin-table';
+
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -107,7 +109,7 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
  * their placement in the editor toolbar
  */
 
-export default function createPluginsList(props, prevProps, createAnalyticsEvent) {
+export default function createPluginsList(props, prevProps, createAnalyticsEvent, insertNodeAPI, editorAnalyticsAPI, editorSelectionAPI, getEditorContainerWidth) {
   var _props$linking3;
 
   const appearance = props.appearance;
@@ -117,6 +119,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   const preset = createDefaultPreset(getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent));
   const featureFlags = createFeatureFlagsFromProps(props);
 
+  const getEditorFeatureFlags = () => featureFlags;
+
   if (props.allowAnalyticsGASV3) {
     const {
       performanceTracking
@@ -211,7 +215,11 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
       breakoutEnabled: props.appearance === 'full-page',
       allowContextualMenu: !isMobile,
       fullWidthEnabled: props.appearance === 'full-width',
-      wasFullWidthEnabled: prevProps && prevProps.appearance === 'full-width'
+      wasFullWidthEnabled: prevProps && prevProps.appearance === 'full-width',
+      editorAnalyticsAPI,
+      editorSelectionAPI,
+      getEditorContainerWidth,
+      getEditorFeatureFlags
     }]);
   }
 
@@ -382,7 +390,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     horizontalRuleEnabled: props.allowRule,
     nativeStatusSupported: !statusMenuDisabled,
     showElementBrowserLink: props.elementBrowser && props.elementBrowser.showModal || false,
-    replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false
+    replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false,
+    insertNodeAPI
   }]);
 
   const hasBeforePrimaryToolbar = components => {

package/dist/es2019/event-dispatcher/index.js

@@ -1,60 +1 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-export class EventDispatcher {
-  constructor() {
-    _defineProperty(this, "listeners", {});
-  }
-
-  on(event, cb) {
-    if (!this.listeners[event]) {
-      this.listeners[event] = new Set();
-    }
-
-    this.listeners[event].add(cb);
-  }
-
-  has(event, cb) {
-    if (!this.listeners[event]) {
-      return false;
-    }
-
-    return this.listeners[event].has(cb);
-  }
-
-  off(event, cb) {
-    if (!this.listeners[event]) {
-      return;
-    }
-
-    if (this.listeners[event].has(cb)) {
-      this.listeners[event].delete(cb);
-    }
-  }
-
-  emit(event, data) {
-    if (!this.listeners[event]) {
-      return;
-    }
-
-    this.listeners[event].forEach(cb => cb(data));
-  }
-
-  destroy() {
-    this.listeners = {};
-  }
-
-}
-/**
- * Creates a dispatch function that can be called inside ProseMirror Plugin
- * to notify listeners about that plugin's state change.
- */
-
-export function createDispatch(eventDispatcher) {
-  return (eventName, data) => {
-    if (!eventName) {
-      throw new Error('event name is required!');
-    }
-
-    const event = typeof eventName === 'string' ? eventName : eventName.key;
-    eventDispatcher.emit(event, data);
-  };
-}
+export { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';

package/dist/es2019/insert-api/api.js

@@ -0,0 +1,43 @@
+import { handleInsertContent } from './insert-content-handlers';
+import { addAnalytics } from '../plugins/analytics';
+export const createInsertNodeAPI = ({
+  getEditorView,
+  getEditorPlugins
+}) => {
+  return {
+    insert: ({
+      node,
+      options
+    }) => {
+      const editorView = getEditorView();
+
+      if (!editorView) {
+        return false;
+      }
+
+      const {
+        state: {
+          tr
+        }
+      } = editorView;
+      const editorPlugins = getEditorPlugins();
+      handleInsertContent({
+        editorPlugins,
+        node,
+        options
+      })(tr); // TODO: ED-14676 This approach to send analytics should be temporary only for the table work
+
+      if (options.analyticsPayload) {
+        addAnalytics(editorView.state, tr, options.analyticsPayload);
+      }
+
+      editorView.dispatch(tr);
+      return true;
+    } // TODO: ED-14676 - Implement the append behavior
+    // append: ({ node, options }) => (tr) => {
+    //   const editorPlugins = getEditorPlugins();
+    //   return insertContent({ editorPlugins, node, options })(tr);
+    // },
+
+  };
+};

package/dist/es2019/insert-api/insert-content-handlers.js

@@ -0,0 +1,85 @@
+import { insertProseMirrorContent } from './insert-node-helpers';
+export const findCreateNodeHandler = ({
+  node,
+  editorPlugins
+}) => {
+  var _editorPluginHandler$;
+
+  if (!node) {
+    return null;
+  }
+
+  const nodeName = typeof node === 'string' ? node : null;
+  const editorPluginHandler = nodeName ? editorPlugins.find(plugin => {
+    if (!plugin.nodes) {
+      return false;
+    }
+
+    return plugin.nodes().find(nodeConfig => nodeConfig.name === nodeName);
+  }) : null; // That is how we allow the insertion behavior to be extended. (for now)
+  // Any plugin, following the rank order and respecting the node name, can override the node insertion output.
+  // To guarantee an insertion
+
+  return (editorPluginHandler === null || editorPluginHandler === void 0 ? void 0 : (_editorPluginHandler$ = editorPluginHandler.pluginsOptions) === null || _editorPluginHandler$ === void 0 ? void 0 : _editorPluginHandler$.createNodeHandler) || null;
+};
+export const handleInsertContent = ({
+  node,
+  options,
+  editorPlugins
+}) => tr => {
+  // TODO: ED-14676 - Probably, we should use the options.insertAt here
+  const position = tr.selection;
+  const createNodeHandler = findCreateNodeHandler({
+    node,
+    editorPlugins
+  });
+  const nodeName = typeof node === 'string' ? node : null; //  TODO: ED-14676 Once we fix the coupled table code issue (ED-15503) we should enable this API to insert any ProseMirror Node
+  //  if (node instanceof PMNode || node instanceof Fragment) {
+  //    insertProseMirrorContent({
+  //      tr,
+  //      node,
+  //      position,
+  //      selectNodeInserted: options.selectNodeInserted,
+  //    });
+  //  } else
+
+  if (nodeName && createNodeHandler) {
+    const nodeOverride = createNodeHandler({
+      nodeName,
+      schema: tr.doc.type.schema
+    });
+    insertProseMirrorContent({
+      tr,
+      node: nodeOverride,
+      position,
+      selectNodeInserted: options.selectNodeInserted
+    });
+  } else if (nodeName) {
+    const nodeType = tr.doc.type.schema.nodes[nodeName];
+
+    if (!nodeType) {
+      return false;
+    }
+
+    insertProseMirrorContent({
+      tr,
+      node: nodeType.createAndFill(),
+      position,
+      selectNodeInserted: options.selectNodeInserted
+    });
+  } else {
+    return false;
+  } // TODO: ED-14676  Implement the attachPluginMessage behavior
+  // if (editorPluginHandler?.nodes && options.attachPluginMessage) {
+  //   const pluginKey = editorPluginHandler
+  //     .nodes()
+  //     .find((nodeConfig) => nodeConfig.name === nodeName)?.pluginKey;
+  //   if (pluginKey) {
+  //     tr.setMeta(pluginKey, options.attachPluginMessage);
+  //   }
+  // }
+
+
+  tr.scrollIntoView();
+  return true;
+};

package/dist/es2019/insert-api/insert-node-helpers.js

@@ -0,0 +1,149 @@
+/* Copied from type-ahead */
+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 {
+    $from: {
+      pos: start
+    },
+    $to: {
+      pos: 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 {
+    $from: {
+      pos: start
+    },
+    $to: {
+      pos: 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)));
+};
+export const insertProseMirrorContent = ({
+  tr,
+  node,
+  position,
+  selectNodeInserted
+}) => {
+  if (node instanceof PMNode && node.isBlock) {
+    insertBlockNode({
+      node,
+      tr,
+      position
+    });
+  } else {
+    insertInlineNodeOrFragment({
+      maybeFragment: node,
+      tr,
+      position,
+      selectInlineNode: selectNodeInserted
+    });
+  }
+};