@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/plugin.js

@@ -0,0 +1,140 @@
+import { bodiedExtension, extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { createEditSelectedExtensionAction } from './actions';
+import { forceAutoSave } from './commands';
+import { getContextPanel } from './context-panel';
+import { createExtensionAPI } from './extension-api';
+import keymapPlugin from './pm-plugins/keymap';
+import { createPlugin as createMacroPlugin } from './pm-plugins/macro';
+import { insertMacroFromMacroBrowser, runMacroAutoConvert } from './pm-plugins/macro/actions';
+import { createPlugin, pluginKey } from './pm-plugins/main';
+import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+import { getToolbarConfig } from './toolbar';
+export var extensionPlugin = function extensionPlugin(_ref) {
+  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$decorations, _api$contextPanel3, _api$analytics4, _api$contextPanel4;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    _api = _ref.api;
+  var featureFlags = (_api === null || _api === void 0 || (_api$featureFlags = _api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  var editorViewRef = {
+    current: null
+  };
+  return {
+    name: 'extension',
+    nodes: function nodes() {
+      var extensionNodes = [{
+        name: 'extension',
+        node: extension
+      }, {
+        name: 'bodiedExtension',
+        node: bodiedExtension
+      }, {
+        name: 'inlineExtension',
+        node: inlineExtension
+      }];
+
+      // Revert to returning all nodes without local variable, once FF is removed
+      if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
+        extensionNodes.push({
+          name: 'extensionFrame',
+          node: extensionFrame
+        });
+        extensionNodes.push({
+          name: 'multiBodiedExtension',
+          node: multiBodiedExtension
+        });
+      }
+      return extensionNodes;
+    },
+    getSharedState: function getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      var pluginState = pluginKey.getState(state);
+      return {
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+      };
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'extension',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch,
+            providerFactory = _ref2.providerFactory,
+            portalProviderAPI = _ref2.portalProviderAPI,
+            eventDispatcher = _ref2.eventDispatcher;
+          var extensionHandlers = options.extensionHandlers || {};
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, _api, options.useLongPressSelection, {
+            appearance: options.appearance
+          });
+        }
+      }, {
+        name: 'extensionKeymap',
+        plugin: function plugin() {
+          var _api$contextPanel;
+          return keymapPlugin(_api === null || _api === void 0 || (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+        }
+      }, {
+        name: 'extensionUniqueId',
+        plugin: function plugin() {
+          return createUniqueIdPlugin();
+        }
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              // Do not cleanup the editorViewRef on destroy
+              // because some functions may point to a stale
+              // reference and this means we will return null.
+              // EditorView is assumed to be stable so we do not need to
+              // cleanup.
+              // See: #hot-106316
+              editorViewRef.current = editorView;
+              return {};
+            }
+          });
+        }
+      }, {
+        name: 'macro',
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch,
+            providerFactory = _ref3.providerFactory;
+          return createMacroPlugin(dispatch, providerFactory);
+        }
+      }];
+    },
+    actions: {
+      api: function api() {
+        var _api$contextPanel2, _api$analytics;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: _api === null || _api === void 0 || (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange,
+          editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics = _api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+        });
+      },
+      insertMacroFromMacroBrowser: insertMacroFromMacroBrowser(_api === null || _api === void 0 || (_api$analytics2 = _api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+      editSelectedExtension: createEditSelectedExtensionAction({
+        editorViewRef: editorViewRef,
+        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics3 = _api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions
+      }),
+      runMacroAutoConvert: runMacroAutoConvert,
+      forceAutoSave: forceAutoSave
+    },
+    pluginsOptions: {
+      floatingToolbar: getToolbarConfig({
+        breakoutEnabled: options.breakoutEnabled,
+        hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
+        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
+        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+      }),
+      contextPanel: getContextPanel(function () {
+        var _editorViewRef$curren;
+        return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
+      })(options.allowAutoSave, featureFlags, _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
+    }
+  };
+};

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

@@ -0,0 +1,15 @@
+import { bindKeymapWithCommand, escape } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { clearEditingContext } from '../commands';
+import { getPluginState } from './main';
+export default function keymapPlugin(applyChange) {
+  var list = {};
+  bindKeymapWithCommand(escape.common, function (state, dispatch) {
+    var extensionState = getPluginState(state);
+    if (!extensionState.showContextPanel) {
+      return false;
+    }
+    return clearEditingContext(applyChange)(state, dispatch);
+  }, list);
+  return keymap(list);
+}

package/dist/esm/pm-plugins/macro/actions.js

@@ -0,0 +1,179 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
+import assert from 'assert';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
+import { normaliseNestedLayout } from '@atlaskit/editor-common/insert';
+import { getValidNode } from '@atlaskit/editor-common/validator';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findSelectedNodeOfType, replaceParentNodeOfType, replaceSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getPluginState as getExtensionPluginState } from '../../plugin-factory';
+import { pluginKey } from './plugin-key';
+export var insertMacroFromMacroBrowser = function insertMacroFromMacroBrowser(editorAnalyticsAPI) {
+  return function (macroProvider, macroNode, isEditing) {
+    return /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(view) {
+        var newMacro, state, dispatch, currentLayout, node, selection, schema, _schema$nodes, extension, inlineExtension, bodiedExtension, extensionState, targetSelectionSource, tr, isBodiedExtensionSelected, pos, _macroNode$attrs, extensionType, extensionKey, layout, localId;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (macroProvider) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 2:
+              _context.next = 4;
+              return macroProvider.openMacroBrowser(macroNode);
+            case 4:
+              newMacro = _context.sent;
+              if (!(newMacro && macroNode)) {
+                _context.next = 20;
+                break;
+              }
+              state = view.state, dispatch = view.dispatch;
+              currentLayout = macroNode && macroNode.attrs.layout || 'default';
+              node = resolveMacro(newMacro, state, {
+                layout: currentLayout
+              });
+              if (node) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 11:
+              selection = state.selection, schema = state.schema;
+              _schema$nodes = schema.nodes, extension = _schema$nodes.extension, inlineExtension = _schema$nodes.inlineExtension, bodiedExtension = _schema$nodes.bodiedExtension;
+              extensionState = getExtensionPluginState(state);
+              targetSelectionSource = TARGET_SELECTION_SOURCE.CURRENT_SELECTION;
+              tr = state.tr;
+              isBodiedExtensionSelected = !!findSelectedNodeOfType([bodiedExtension])(selection); // When it's a bodiedExtension but not selected
+              if (macroNode.type === bodiedExtension && !isBodiedExtensionSelected) {
+                // `isEditing` is `false` when we are inserting from insert-block toolbar
+                tr = isEditing ? replaceParentNodeOfType(bodiedExtension, node)(tr) : safeInsert(node)(tr);
+                // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+                tr.setSelection(TextSelection.create(tr.doc, state.selection.anchor));
+              }
+              // If any extension is currently selected
+              else if (findSelectedNodeOfType([extension, bodiedExtension, inlineExtension])(selection)) {
+                tr = replaceSelectedNode(node)(tr);
+                // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+                tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(state.selection.anchor)));
+              }
+              // When we loose the selection. This usually happens when Synchrony resets or changes
+              // the selection when user is in the middle of updating an extension.
+              else if (extensionState.element) {
+                pos = view.posAtDOM(extensionState.element, -1);
+                if (pos > -1) {
+                  tr = tr.replaceWith(pos, pos + macroNode.nodeSize, node);
+                  tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+                  targetSelectionSource = TARGET_SELECTION_SOURCE.HTML_ELEMENT;
+                }
+              }
+
+              // Only scroll if we have anything to update, best to avoid surprise scroll
+              if (dispatch && tr.docChanged) {
+                _macroNode$attrs = macroNode.attrs, extensionType = _macroNode$attrs.extensionType, extensionKey = _macroNode$attrs.extensionKey, layout = _macroNode$attrs.layout, localId = _macroNode$attrs.localId;
+                editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+                  action: ACTION.UPDATED,
+                  actionSubject: ACTION_SUBJECT.EXTENSION,
+                  actionSubjectId: macroNode.type.name,
+                  eventType: EVENT_TYPE.TRACK,
+                  attributes: {
+                    inputMethod: isEditing ? INPUT_METHOD.MACRO_BROWSER : INPUT_METHOD.TOOLBAR,
+                    extensionType: extensionType,
+                    extensionKey: extensionKey,
+                    layout: layout,
+                    localId: localId,
+                    selection: tr.selection.toJSON(),
+                    targetSelectionSource: targetSelectionSource
+                  }
+                })(tr);
+                dispatch(tr.scrollIntoView());
+              }
+              return _context.abrupt("return", true);
+            case 20:
+              return _context.abrupt("return", false);
+            case 21:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  };
+};
+export var resolveMacro = function resolveMacro(macro, state, optionalAttrs) {
+  if (!macro || !state) {
+    return null;
+  }
+  var schema = state.schema;
+  var _getValidNode = getValidNode(macro, schema),
+    type = _getValidNode.type,
+    attrs = _getValidNode.attrs;
+  var node = null;
+  if (type === 'extension') {
+    node = schema.nodes.extension.create(_objectSpread(_objectSpread({}, attrs), optionalAttrs));
+  } else if (type === 'bodiedExtension') {
+    node = schema.nodes.bodiedExtension.create(_objectSpread(_objectSpread({}, attrs), optionalAttrs), schema.nodeFromJSON(macro).content);
+  } else if (type === 'inlineExtension') {
+    node = schema.nodes.inlineExtension.create(attrs);
+  }
+  return node && normaliseNestedLayout(state, node);
+};
+
+// gets the macroProvider from the state and tries to autoConvert a given text
+export var runMacroAutoConvert = function runMacroAutoConvert(state, text) {
+  var macroPluginState = pluginKey.getState(state);
+  var macroProvider = macroPluginState && macroPluginState.macroProvider;
+  if (!macroProvider || !macroProvider.autoConvert) {
+    return null;
+  }
+  var macroAttributes = macroProvider.autoConvert(text);
+  if (!macroAttributes) {
+    return null;
+  }
+
+  // decides which kind of macro to render (inline|bodied|bodyless)
+  return resolveMacro(macroAttributes, state);
+};
+export var setMacroProvider = function setMacroProvider(provider) {
+  return /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(view) {
+      var resolvedProvider;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            _context2.next = 3;
+            return provider;
+          case 3:
+            resolvedProvider = _context2.sent;
+            assert(resolvedProvider && resolvedProvider.openMacroBrowser, "MacroProvider promise did not resolve to a valid instance of MacroProvider - ".concat(resolvedProvider));
+            _context2.next = 10;
+            break;
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](0);
+            resolvedProvider = null;
+          case 10:
+            view.dispatch(view.state.tr.setMeta(pluginKey, {
+              macroProvider: resolvedProvider
+            }));
+            return _context2.abrupt("return", true);
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 7]]);
+    }));
+    return function (_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};

package/dist/esm/pm-plugins/macro/index.js

@@ -0,0 +1,42 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { setMacroProvider } from './actions';
+import { pluginKey } from './plugin-key';
+export { insertMacroFromMacroBrowser, resolveMacro, runMacroAutoConvert, setMacroProvider } from './actions';
+export var createPlugin = function createPlugin(dispatch, providerFactory) {
+  return new SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          macroProvider: null
+        };
+      },
+      apply: function apply(tr, state) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var newState = _objectSpread(_objectSpread({}, state), meta);
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return state;
+      }
+    },
+    key: pluginKey,
+    view: function view(_view) {
+      var handleProvider = function handleProvider(_name, provider) {
+        return provider && setMacroProvider(provider)(_view);
+      };
+      // make sure editable DOM node is mounted
+      if (_view.dom.parentNode) {
+        providerFactory.subscribe('macroProvider', handleProvider);
+      }
+      return {
+        destroy: function destroy() {
+          providerFactory.unsubscribe('macroProvider', handleProvider);
+        }
+      };
+    }
+  });
+};

package/dist/esm/pm-plugins/macro/plugin-key.js

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

package/dist/esm/pm-plugins/macro/types.js

@@ -0,0 +1 @@
+export {};