@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/pm-plugins/main.js

@@ -0,0 +1,298 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _typeof from "@babel/runtime/helpers/typeof";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler, isSelectionAtEndOfNode, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { clearEditingContext, updateState } from '../commands';
+import { createCommand, createPluginState, getPluginState } from '../plugin-factory';
+import { pluginKey } from '../plugin-key';
+import { getSelectedDomElement, getSelectedExtension } from '../utils';
+import { updateEditButton } from './utils';
+var shouldShowEditButton = function shouldShowEditButton(extensionHandler, extensionProvider) {
+  var usesLegacyMacroBrowser = !extensionHandler && !extensionProvider || typeof extensionHandler === 'function';
+  var usesModernUpdateMethod = _typeof(extensionHandler) === 'object' && typeof extensionHandler.update === 'function';
+  if (usesLegacyMacroBrowser || usesModernUpdateMethod) {
+    return true;
+  }
+  return false;
+};
+var getUpdateExtensionPromise = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(view, extensionHandler, extensionProvider) {
+    var updateMethod;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(extensionHandler && _typeof(extensionHandler) === 'object')) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return", extensionHandler.update);
+        case 4:
+          if (!extensionProvider) {
+            _context.next = 10;
+            break;
+          }
+          _context.next = 7;
+          return updateEditButton(view, extensionProvider);
+        case 7:
+          updateMethod = _context.sent;
+          if (!updateMethod) {
+            _context.next = 10;
+            break;
+          }
+          return _context.abrupt("return", updateMethod);
+        case 10:
+          throw new Error('No update method available');
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getUpdateExtensionPromise(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var createExtensionProviderHandler = function createExtensionProviderHandler(view) {
+  return /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(name, provider) {
+      var extensionProvider;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(name === 'extensionProvider' && provider)) {
+              _context2.next = 13;
+              break;
+            }
+            _context2.prev = 1;
+            _context2.next = 4;
+            return provider;
+          case 4:
+            extensionProvider = _context2.sent;
+            updateState({
+              extensionProvider: extensionProvider
+            })(view.state, view.dispatch);
+            _context2.next = 8;
+            return updateEditButton(view, extensionProvider);
+          case 8:
+            _context2.next = 13;
+            break;
+          case 10:
+            _context2.prev = 10;
+            _context2.t0 = _context2["catch"](1);
+            updateState({
+              extensionProvider: undefined
+            })(view.state, view.dispatch);
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 10]]);
+    }));
+    return function (_x4, _x5) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};
+export var createContextIdentifierProviderHandler = function createContextIdentifierProviderHandler(view) {
+  return /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(name, provider) {
+      var contextIdentifierProvider;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(name === 'contextIdentifierProvider' && provider)) {
+              _context3.next = 11;
+              break;
+            }
+            _context3.prev = 1;
+            _context3.next = 4;
+            return provider;
+          case 4:
+            contextIdentifierProvider = _context3.sent;
+            updateState({
+              contextIdentifierProvider: contextIdentifierProvider
+            })(view.state, view.dispatch);
+            _context3.next = 11;
+            break;
+          case 8:
+            _context3.prev = 8;
+            _context3.t0 = _context3["catch"](1);
+            updateState({
+              contextIdentifierProvider: undefined
+            })(view.state, view.dispatch);
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[1, 8]]);
+    }));
+    return function (_x6, _x7) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+};
+export var handleUpdate = function handleUpdate(_ref4) {
+  var view = _ref4.view,
+    prevState = _ref4.prevState,
+    domAtPos = _ref4.domAtPos,
+    extensionHandlers = _ref4.extensionHandlers,
+    applyChange = _ref4.applyChange;
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _getPluginState = getPluginState(state),
+    element = _getPluginState.element,
+    localId = _getPluginState.localId,
+    extensionProvider = _getPluginState.extensionProvider,
+    showContextPanel = _getPluginState.showContextPanel,
+    showEditButton = _getPluginState.showEditButton;
+
+  // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+  var selectedExtension = getSelectedExtension(state, true);
+  if (!selectedExtension) {
+    if (showContextPanel) {
+      clearEditingContext(applyChange)(state, dispatch);
+    }
+    return;
+  }
+  var node = selectedExtension.node;
+  var newElement = getSelectedDomElement(state.schema, domAtPos, selectedExtension);
+
+  // In some cases, showEditButton can be stale and the edit button doesn't show - @see ED-15285
+  // To be safe, we update the showEditButton state here
+  var shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !getSelectedExtension(prevState, true);
+  var isNewNodeSelected = node.attrs.localId ? localId !== node.attrs.localId :
+  // This is the current assumption and it's wrong but we are keeping it
+  // as fallback in case we need to turn off `allowLocalIdGeneration`
+  element !== newElement;
+  if (isNewNodeSelected || shouldUpdateEditButton) {
+    if (showContextPanel) {
+      clearEditingContext(applyChange)(state, dispatch);
+      return;
+    }
+    var extensionType = node.attrs.extensionType;
+    var extensionHandler = extensionHandlers[extensionType];
+
+    // showEditButton might change async based on results from extension providers
+    var _showEditButton = shouldShowEditButton(extensionHandler, extensionProvider);
+    var updateExtension = getUpdateExtensionPromise(view, extensionHandler, extensionProvider).catch(function () {
+      // do nothing;
+    });
+    updateState({
+      localId: node.attrs.localId,
+      showContextPanel: false,
+      element: newElement,
+      showEditButton: _showEditButton,
+      updateExtension: updateExtension
+    })(state, dispatch);
+  }
+  // New DOM element doesn't necessarily mean it's a new Node
+  else if (element !== newElement) {
+    updateState({
+      element: newElement
+    })(state, dispatch);
+  }
+  return true;
+};
+var createPlugin = function createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi) {
+  var _pluginInjectionApi$c;
+  var useLongPressSelection = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
+  var state = createPluginState(dispatch, {
+    showEditButton: false,
+    showContextPanel: false,
+    applyChangeToContextPanel: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.actions) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.applyChange
+  });
+  var extensionNodeViewOptions = {
+    appearance: options.appearance
+  };
+  return new SafePlugin({
+    state: state,
+    view: function view(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var extensionProviderHandler = createExtensionProviderHandler(editorView);
+      var contextIdentificationProviderHandler = createContextIdentifierProviderHandler(editorView);
+      providerFactory.subscribe('extensionProvider', extensionProviderHandler);
+      providerFactory.subscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
+      return {
+        update: function update(view, prevState) {
+          var _pluginInjectionApi$c2;
+          handleUpdate({
+            view: view,
+            prevState: prevState,
+            domAtPos: domAtPos,
+            extensionHandlers: extensionHandlers,
+            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.applyChange
+          });
+        },
+        destroy: function destroy() {
+          providerFactory.unsubscribe('extensionProvider', extensionProviderHandler);
+          providerFactory.unsubscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
+        }
+      };
+    },
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        /**
+         * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
+         * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
+         * For other part of the solution see code in: packages/editor/editor-core/src/plugins/selection/pm-plugins/events/keydown.ts
+         */
+        keydown: function keydown(view, event) {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            var _view$state = view.state,
+              schema = _view$state.schema,
+              selection = _view$state.selection,
+              $head = _view$state.selection.$head,
+              doc = _view$state.doc,
+              tr = _view$state.tr;
+            var bodiedExtension = schema.nodes.bodiedExtension;
+            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+              var maybeBodiedExtension = selection instanceof TextSelection ? findParentNodeOfTypeClosestToPos($head, bodiedExtension) : findSelectedNodeOfType(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                var end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && isSelectionAtStartOfNode($head, maybeBodiedExtension)) {
+                  var anchor = end + 1;
+
+                  // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+                  var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+                  var head = maybeBodiedExtension.pos + headOffset;
+                  var newSelection = TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && isSelectionAtEndOfNode($head, maybeBodiedExtension)) {
+                  var _anchor = maybeBodiedExtension.pos - 1;
+                  var _head = end + 1;
+                  var _newSelection = TextSelection.create(doc, Math.min(_anchor, selection.anchor), _head);
+                  view.dispatch(tr.setSelection(_newSelection));
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        }
+      },
+      nodeViews: {
+        // WARNING: referentiality-plugin also creates these nodeviews
+        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        // WARNING: referentiality-plugin also creates these nodeviews
+        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        // WARNING: referentiality-plugin also creates these nodeviews
+        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
+      },
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], function (target) {
+        return !target.closest('.extension-content');
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    }
+  });
+};
+export { pluginKey, createPlugin, createCommand, getPluginState };

package/dist/esm/pm-plugins/unique-id.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { uuid } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+var pluginKey = new PluginKey('extensionUniqueIdPlugin');
+var createPlugin = function createPlugin() {
+  return new SafePlugin({
+    // TODO: @see ED-8839
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var tr = newState.tr;
+      var selectionBookmark = tr.selection.getBookmark();
+      var modified = false;
+      var _newState$schema$node = newState.schema.nodes,
+        extension = _newState$schema$node.extension,
+        bodiedExtension = _newState$schema$node.bodiedExtension,
+        inlineExtension = _newState$schema$node.inlineExtension,
+        multiBodiedExtension = _newState$schema$node.multiBodiedExtension;
+      var extensionTypes = new Set([extension, bodiedExtension, inlineExtension, multiBodiedExtension]);
+      var idsObserved = new Set();
+      transactions.forEach(function (transaction) {
+        if (!transaction.docChanged) {
+          return;
+        }
+        var isAddingExtension = transaction.steps.some(function (step) {
+          return stepAddsOneOf(step, extensionTypes);
+        });
+        if (isAddingExtension) {
+          // Can't simply look at changed nodes, as we could be adding an extension
+          newState.doc.descendants(function (node, pos) {
+            var localId = node.attrs.localId;
+
+            // Dealing with an extension - make sure it's a unique ID
+            if (!!node.type && extensionTypes.has(node.type)) {
+              if (localId && !idsObserved.has(localId)) {
+                idsObserved.add(localId);
+                // Also add a localId if it happens to not have one,
+              } else if (!localId || idsObserved.has(localId)) {
+                modified = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  localId: uuid.generate()
+                }));
+              }
+              /**
+               * If it's a multiBodiedExtension or bodiedExtension, we'll need to keep digging;
+               * since we can have more extension nodes within the contents of that
+               */
+              if ([multiBodiedExtension, bodiedExtension].includes(node.type)) {
+                return true;
+              }
+              return false;
+            }
+
+            /**
+             * Otherwise continue traversing, we can encounter extensions nested in
+             * expands/bodiedExtensions
+             */
+            return true;
+          });
+        }
+      });
+      if (modified) {
+        // We want to restore to the original selection but w/o applying the mapping
+        // @see https://github.com/ProseMirror/prosemirror/issues/645
+        return tr.setSelection(selectionBookmark.resolve(tr.doc));
+      }
+      return;
+    },
+    key: pluginKey
+  });
+};
+export { createPlugin };

package/dist/esm/pm-plugins/utils.js

@@ -0,0 +1,68 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getExtensionModuleNode } from '@atlaskit/editor-common/extensions';
+import { updateState } from '../commands';
+import { getSelectedExtension } from '../utils';
+var maybeGetUpdateMethodFromExtensionProvider = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(view, extensionProvider) {
+    var nodeWithPos, _nodeWithPos$node$att, extensionType, extensionKey, extensionModuleNode, newNodeWithPos;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          nodeWithPos = getSelectedExtension(view.state, true);
+          if (nodeWithPos) {
+            _context.next = 3;
+            break;
+          }
+          throw new Error('There is no selection');
+        case 3:
+          _nodeWithPos$node$att = nodeWithPos.node.attrs, extensionType = _nodeWithPos$node$att.extensionType, extensionKey = _nodeWithPos$node$att.extensionKey;
+          _context.next = 6;
+          return getExtensionModuleNode(extensionProvider, extensionType, extensionKey);
+        case 6:
+          extensionModuleNode = _context.sent;
+          newNodeWithPos = getSelectedExtension(view.state, true);
+          if (!(newNodeWithPos && newNodeWithPos.node.attrs.extensionType === extensionType && newNodeWithPos.node.attrs.extensionKey === extensionKey && newNodeWithPos.pos === nodeWithPos.pos && extensionModuleNode)) {
+            _context.next = 10;
+            break;
+          }
+          return _context.abrupt("return", extensionModuleNode.update);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function maybeGetUpdateMethodFromExtensionProvider(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var updateEditButton = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(view, extensionProvider) {
+    var updateMethod;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return maybeGetUpdateMethodFromExtensionProvider(view, extensionProvider);
+        case 3:
+          updateMethod = _context2.sent;
+          updateState({
+            showEditButton: !!updateMethod,
+            updateExtension: updateMethod && Promise.resolve(updateMethod) || undefined
+          })(view.state, view.dispatch);
+          return _context2.abrupt("return", updateMethod);
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](0);
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 8]]);
+  }));
+  return function updateEditButton(_x3, _x4) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/dist/esm/reducer.js

@@ -0,0 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export default function (pluginState, action) {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
+    default:
+      return pluginState;
+  }
+}