@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/es2019/commands.js

@@ -0,0 +1,99 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { createCommand } from './plugin-factory';
+import { getSelectedExtension } from './utils';
+
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+export function updateState(state) {
+  return createCommand({
+    type: 'UPDATE_STATE',
+    data: state
+  });
+}
+export function setEditingContextToContextPanel(processParametersBefore, processParametersAfter, applyChangeToContextPanel) {
+  return createCommand({
+    type: 'UPDATE_STATE',
+    data: {
+      showContextPanel: true,
+      processParametersBefore,
+      processParametersAfter
+    }
+  }, applyChangeToContextPanel);
+}
+export const clearEditingContext = applyChangeToContextPanel => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    showContextPanel: false,
+    processParametersBefore: undefined,
+    processParametersAfter: undefined
+  }
+}, applyChangeToContextPanel);
+export const forceAutoSave = applyChangeToContextPanel => (resolve, reject) => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    autoSaveResolve: resolve,
+    autoSaveReject: reject
+  }
+}, applyChangeToContextPanel);
+export const updateExtensionLayout = layout => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    layout
+  }
+}, (tr, state) => {
+  const selectedExtension = getSelectedExtension(state, true);
+  if (selectedExtension) {
+    const trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, {
+      ...selectedExtension.node.attrs,
+      layout
+    });
+    trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+    return trWithNewNodeMarkup;
+  }
+  return tr;
+});
+export const removeExtension = editorAnalyticsAPI => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    element: undefined
+  }
+}, (tr, state) => {
+  if (getSelectedExtension(state)) {
+    return removeSelectedNode(tr);
+  } else {
+    return checkAndRemoveExtensionNode(state, tr, editorAnalyticsAPI);
+  }
+});
+export const removeDescendantNodes = sourceNode => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    element: undefined
+  }
+}, (tr, state) => {
+  return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
+});
+export const checkAndRemoveExtensionNode = (state, tr, analyticsApi) => {
+  let nodeType = state.schema.nodes.bodiedExtension;
+  const maybeMBENode = findParentNodeOfType(state.schema.nodes.multiBodiedExtension)(state.selection);
+  if (maybeMBENode) {
+    nodeType = state.schema.nodes.multiBodiedExtension;
+    if (analyticsApi) {
+      analyticsApi.attachAnalyticsEvent({
+        action: ACTION.DELETED,
+        actionSubject: ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          extensionType: maybeMBENode.node.attrs.extensionType,
+          extensionKey: maybeMBENode.node.attrs.extensionKey,
+          localId: maybeMBENode.node.attrs.localId,
+          maxFramesCount: maybeMBENode.node.attrs.maxFrames,
+          currentFramesCount: maybeMBENode.node.content.childCount
+        }
+      })(tr);
+    }
+  }
+  return removeParentNodeOfType(nodeType)(tr);
+};

package/dist/es2019/context-panel.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { buildExtensionNode } from './actions';
+import { clearEditingContext, forceAutoSave, updateState } from './commands';
+import { getPluginState } from './pm-plugins/main';
+import ConfigPanelLoader from './ui/ConfigPanel/ConfigPanelLoader';
+import { SaveIndicator } from './ui/SaveIndicator/SaveIndicator';
+import { getSelectedExtension } from './utils';
+const areParametersEqual = (firstParameters, secondParameters) => {
+  if (typeof firstParameters === 'object' && typeof secondParameters === 'object' && firstParameters !== null && secondParameters !== null) {
+    const firstKeys = Object.keys(firstParameters);
+    const secondKeys = Object.keys(secondParameters);
+    return firstKeys.length === secondKeys.length && firstKeys.every(key => firstParameters[key] === secondParameters[key]);
+  }
+  return firstParameters === secondParameters;
+};
+export const duplicateSelection = (selectionToDuplicate, doc) => {
+  if (selectionToDuplicate instanceof NodeSelection) {
+    return NodeSelection.create(doc, selectionToDuplicate.from);
+  } else if (selectionToDuplicate instanceof TextSelection) {
+    return TextSelection.create(doc, selectionToDuplicate.from, selectionToDuplicate.to);
+  } else if (selectionToDuplicate instanceof GapCursorSelection) {
+    return new GapCursorSelection(doc.resolve(selectionToDuplicate.from), selectionToDuplicate.side);
+  } else if (selectionToDuplicate instanceof CellSelection) {
+    return new CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
+  }
+};
+export const getContextPanel = getEditorView => (allowAutoSave, featureFlags, applyChange) => state => {
+  const nodeWithPos = getSelectedExtension(state, true);
+
+  // Adding checks to bail out early
+  if (!nodeWithPos) {
+    return;
+  }
+  const extensionState = getPluginState(state);
+  const {
+    autoSaveResolve,
+    autoSaveReject,
+    showContextPanel,
+    extensionProvider,
+    processParametersBefore,
+    processParametersAfter
+  } = extensionState;
+  if (extensionState && showContextPanel && extensionProvider && processParametersAfter) {
+    const {
+      extensionType,
+      extensionKey,
+      parameters
+    } = nodeWithPos.node.attrs;
+    const [extKey, nodeKey] = getExtensionKeyAndNodeKey(extensionKey, extensionType);
+    const configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+    return /*#__PURE__*/React.createElement(SaveIndicator, {
+      duration: 5000,
+      visible: allowAutoSave
+    }, ({
+      onSaveStarted,
+      onSaveEnded
+    }) => {
+      const editorView = getEditorView === null || getEditorView === void 0 ? void 0 : getEditorView();
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+        showHeader: true,
+        closeOnEsc: true,
+        extensionType: extensionType,
+        extensionKey: extKey,
+        nodeKey: nodeKey,
+        extensionParameters: parameters,
+        parameters: configParams,
+        extensionProvider: extensionProvider,
+        autoSave: allowAutoSave,
+        autoSaveTrigger: autoSaveResolve,
+        autoSaveReject: autoSaveReject,
+        onChange: async updatedParameters => {
+          await onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+          onSaveEnded();
+          if (autoSaveResolve) {
+            autoSaveResolve();
+          }
+          if (!allowAutoSave) {
+            clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+          }
+        },
+        onCancel: async () => {
+          if (allowAutoSave) {
+            try {
+              await new Promise((resolve, reject) => {
+                forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+              });
+            } catch (e) {
+              // Even if the save failed, we should proceed with closing the panel
+              // eslint-disable-next-line no-console
+              console.error(`Autosave failed with error`, e);
+            }
+          }
+          clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+        },
+        featureFlags: featureFlags
+      });
+    });
+  }
+};
+export async function onChangeAction(editorView, updatedParameters = {}, oldParameters = {}, nodeWithPos, onSaving) {
+  // WARNING: editorView.state stales quickly, do not unpack
+  const {
+    processParametersAfter,
+    processParametersBefore
+  } = getPluginState(editorView.state);
+  if (!processParametersAfter) {
+    return;
+  }
+  const unwrappedOldParameters = processParametersBefore ? processParametersBefore(oldParameters) : oldParameters;
+  // todo: update to only check parameters which are in the manifest's field definitions
+  if (areParametersEqual(unwrappedOldParameters, updatedParameters)) {
+    return;
+  }
+  if (onSaving) {
+    onSaving();
+  }
+  const key = Date.now();
+  const {
+    positions: previousPositions
+  } = getPluginState(editorView.state);
+  await updateState({
+    positions: {
+      ...previousPositions,
+      [key]: nodeWithPos.pos
+    }
+  })(editorView.state, editorView.dispatch);
+
+  // WARNING: after this, editorView.state may have changed
+  const newParameters = await processParametersAfter(updatedParameters);
+  const {
+    positions
+  } = getPluginState(editorView.state);
+  if (!positions) {
+    return;
+  }
+  if (!(key in positions)) {
+    return;
+  }
+  const {
+    node
+  } = nodeWithPos;
+  const newNode = buildExtensionNode(nodeWithPos.node.toJSON().type, editorView.state.schema, {
+    ...node.attrs,
+    parameters: {
+      ...oldParameters,
+      ...newParameters
+    }
+  }, node.content, node.marks);
+  if (!newNode) {
+    return;
+  }
+  const positionUpdated = positions[key];
+  const transaction = editorView.state.tr.replaceWith(positionUpdated, positionUpdated + newNode.nodeSize, newNode);
+
+  // Ensure we preserve the selection, tr.replaceWith causes it to be lost in some cases
+  // when replacing the node
+  const {
+    selection: prevSelection
+  } = editorView.state;
+  if (!prevSelection.eq(transaction.selection)) {
+    const selection = duplicateSelection(prevSelection, transaction.doc);
+    if (selection) {
+      transaction.setSelection(selection);
+    }
+  }
+  const positionsLess = {
+    ...getPluginState(editorView.state).positions
+  };
+  delete positionsLess[key];
+  await updateState({
+    positions: positionsLess
+  })(editorView.state, editorView.dispatch);
+  editorView.dispatch(transaction);
+}

package/dist/es2019/extension-api.js

@@ -0,0 +1,284 @@
+import { validator } from '@atlaskit/adf-utils/validator';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { Fragment, Mark } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+import { setEditingContextToContextPanel } from './commands';
+import { insertMacroFromMacroBrowser } from './pm-plugins/macro/actions';
+import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
+import { findNodePosWithLocalId, getDataConsumerMark, getNodeTypesReferenced, getSelectedExtension } from './utils';
+export const getEditInLegacyMacroBrowser = ({
+  view,
+  macroProvider,
+  editorAnalyticsAPI
+}) => {
+  return () => {
+    if (!view) {
+      throw new Error(`Missing view. Can't update without EditorView`);
+    }
+    if (!macroProvider) {
+      throw new Error(`Missing macroProvider. Can't use the macro browser for updates`);
+    }
+    const nodeWithPos = getSelectedExtension(view.state, true);
+    if (!nodeWithPos) {
+      throw new Error(`Missing nodeWithPos. Can't determine position of node`);
+    }
+    insertMacroFromMacroBrowser(editorAnalyticsAPI)(macroProvider, nodeWithPos.node, true)(view);
+  };
+};
+const extensionAPICallPayload = functionName => ({
+  action: ACTION.INVOKED,
+  actionSubject: ACTION_SUBJECT.EXTENSION,
+  actionSubjectId: ACTION_SUBJECT_ID.EXTENSION_API,
+  attributes: {
+    functionName
+  },
+  eventType: EVENT_TYPE.TRACK
+});
+export const createExtensionAPI = options => {
+  const {
+    editorView: {
+      state: {
+        schema
+      }
+    },
+    editorAnalyticsAPI
+  } = options;
+  const nodes = Object.keys(schema.nodes);
+  const marks = Object.keys(schema.marks);
+  const validate = validator(nodes, marks, {
+    allowPrivateAttributes: true
+  });
+
+  /**
+   * Finds the node and its position by `localId`. Throws if the node could not be found.
+   *
+   * @returns {NodeWithPos}
+   */
+  const ensureNodePosByLocalId = (localId, {
+    opName
+  }) => {
+    // Be extra cautious since 3rd party devs can use regular JS without type safety
+    if (typeof localId !== 'string' || localId === '') {
+      throw new Error(`${opName}(): Invalid localId '${localId}'.`);
+    }
+
+    // Find the node + position matching the given ID
+    const {
+      editorView: {
+        state
+      }
+    } = options;
+    const nodePos = findNodePosWithLocalId(state, localId);
+    if (!nodePos) {
+      throw new Error(`${opName}(): Could not find node with ID '${localId}'.`);
+    }
+    return nodePos;
+  };
+  const doc = {
+    insertAfter: (localId, adf, opt) => {
+      try {
+        validate(adf);
+      } catch (e) {
+        throw new Error(`insertAfter(): Invalid ADF given.`);
+      }
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'insertAfter'
+      });
+      const {
+        editorView
+      } = options;
+      const {
+        dispatch,
+        state
+      } = editorView;
+
+      // Validate the given ADF
+      const {
+        tr,
+        schema
+      } = state;
+      const nodeType = schema.nodes[adf.type];
+      if (!nodeType) {
+        throw new Error(`insertAfter(): Invalid ADF type '${adf.type}'.`);
+      }
+      const fragment = Fragment.fromJSON(schema, adf.content);
+      const marks = (adf.marks || []).map(markEntity => Mark.fromJSON(schema, markEntity));
+      const newNode = nodeType === null || nodeType === void 0 ? void 0 : nodeType.createChecked(adf.attrs, fragment, marks);
+      if (!newNode) {
+        throw new Error('insertAfter(): Could not create a node for given ADFEntity.');
+      }
+      const insertPosition = nodePos.pos + nodePos.node.nodeSize;
+      tr.insert(insertPosition, newNode);
+
+      // Validate if the document is valid at this point
+      try {
+        tr.doc.check();
+      } catch (err) {
+        throw new Error(`insertAfter(): The given ADFEntity cannot be inserted in the current position.\n${err}`);
+      }
+
+      // Analytics - tracking the api call
+      const apiCallPayload = extensionAPICallPayload('insertAfter');
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(apiCallPayload)(tr);
+
+      // Analytics - tracking node types added
+      const nodesAdded = [newNode];
+      newNode.descendants(node => {
+        nodesAdded.push(node);
+        return true;
+      });
+      nodesAdded.forEach(node => {
+        const {
+          extensionKey,
+          extensionType
+        } = node.attrs;
+        const dataConsumerMark = getDataConsumerMark(node);
+        const stringIds = (dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : dataConsumerMark.attrs.sources.map(sourceId => sourceId)) || [];
+        const hasReferentiality = !!dataConsumerMark;
+        const nodeTypesReferenced = hasReferentiality ? getNodeTypesReferenced(stringIds, state) : undefined;
+
+        // fire off analytics for this ADF
+        const payload = {
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          attributes: {
+            nodeType: node.type.name,
+            inputMethod: INPUT_METHOD.EXTENSION_API,
+            hasReferentiality,
+            nodeTypesReferenced,
+            layout: node.attrs.layout,
+            extensionType,
+            extensionKey
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      });
+      if (opt && opt.allowSelectionToNewNode) {
+        tr.setSelection(new NodeSelection(tr.doc.resolve(insertPosition)));
+      }
+      dispatch(tr);
+    },
+    scrollTo: localId => {
+      const nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'scrollTo'
+      });
+
+      // Analytics - tracking the api call
+      const apiCallPayload = extensionAPICallPayload('scrollTo');
+      const {
+        editorView: {
+          dispatch,
+          state
+        }
+      } = options;
+      let {
+        tr
+      } = state;
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(apiCallPayload)(tr);
+      tr = setTextSelection(nodePos.pos)(tr);
+      tr = tr.scrollIntoView();
+      dispatch(tr);
+    },
+    update: (localId, mutationCallback) => {
+      var _changedValues$marks;
+      const {
+        node,
+        pos
+      } = ensureNodePosByLocalId(localId, {
+        opName: 'update'
+      });
+      const {
+        editorView: {
+          dispatch,
+          state
+        }
+      } = options;
+      const {
+        tr,
+        schema
+      } = state;
+      const changedValues = mutationCallback({
+        content: nodeToJSON(node).content,
+        attrs: node.attrs,
+        marks: node.marks.map(pmMark => ({
+          type: pmMark.type.name,
+          attrs: pmMark.attrs
+        }))
+      });
+      const ensureValidMark = mark => {
+        if (typeof mark !== 'object' || Array.isArray(mark)) {
+          throw new Error(`update(): Invalid mark given.`);
+        }
+        const {
+          parent
+        } = state.doc.resolve(pos);
+        // Ensure that the given mark is present in the schema
+        const markType = schema.marks[mark.type];
+        if (!markType) {
+          throw new Error(`update(): Invalid ADF mark type '${mark.type}'.`);
+        }
+        if (!parent.type.allowsMarkType(markType)) {
+          throw new Error(`update(): Parent of type '${parent.type.name}' does not allow marks of type '${mark.type}'.`);
+        }
+        return {
+          mark: markType,
+          attrs: mark.attrs
+        };
+      };
+      const newMarks = changedValues.hasOwnProperty('marks') ? (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(({
+        mark,
+        attrs
+      }) => mark.create(attrs)) : node.marks;
+      const newContent = changedValues.hasOwnProperty('content') ? Fragment.fromJSON(schema, changedValues.content) : node.content;
+      const newAttrs = changedValues.hasOwnProperty('attrs') ? changedValues.attrs : node.attrs;
+
+      // Validate if the new attributes, content and marks result in a valid node and adf.
+      try {
+        const newNode = node.type.createChecked(newAttrs, newContent, newMarks);
+        const newNodeAdf = new JSONTransformer().encodeNode(newNode);
+        validate(newNodeAdf);
+        tr.replaceWith(pos, pos + node.nodeSize, newNode);
+
+        // Keep selection if content does not change
+        if (newContent === node.content) {
+          tr.setSelection(Selection.fromJSON(tr.doc, state.selection.toJSON()));
+        }
+      } catch (err) {
+        throw new Error(`update(): The given ADFEntity cannot be inserted in the current position.\n${err}`);
+      }
+
+      // Analytics - tracking the api call
+      const apiCallPayload = extensionAPICallPayload('update');
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(apiCallPayload)(tr);
+      dispatch(tr);
+    }
+  };
+  return {
+    editInContextPanel: (transformBefore, transformAfter) => {
+      const {
+        editorView
+      } = options;
+      setEditingContextToContextPanel(transformBefore, transformAfter, options.applyChange)(editorView.state, editorView.dispatch, editorView);
+    },
+    _editInLegacyMacroBrowser: () => {
+      const {
+        editorView
+      } = options;
+      let editInLegacy = options.editInLegacyMacroBrowser;
+      if (!editInLegacy) {
+        const macroState = macroPluginKey.getState(editorView.state);
+        editInLegacy = getEditInLegacyMacroBrowser({
+          view: options.editorView,
+          macroProvider: (macroState === null || macroState === void 0 ? void 0 : macroState.macroProvider) || undefined,
+          editorAnalyticsAPI
+        });
+      }
+      editInLegacy();
+    },
+    doc
+  };
+};

package/dist/es2019/index.js

@@ -1 +1 @@
-export {};
+export { extensionPlugin } from './plugin';

package/dist/es2019/plugin-factory.js

@@ -0,0 +1,26 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+const factory = pluginFactory(pluginKey, reducer, {
+  mapping(tr, state) {
+    const {
+      positions: previousPositions
+    } = state;
+    if (!previousPositions) {
+      return state;
+    }
+    const positions = {
+      ...previousPositions
+    };
+    for (const key in positions) {
+      positions[key] = tr.mapping.map(positions[key]);
+    }
+    return {
+      ...state,
+      positions
+    };
+  }
+});
+export const createPluginState = factory.createPluginState;
+export const createCommand = factory.createCommand;
+export const getPluginState = factory.getPluginState;

package/dist/es2019/plugin-key.js

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