@atlaskit/editor-plugin-panel 0.1.0

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-panel

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin panel
+
+Panel plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-panel*
+- **npm** - [@atlaskit/editor-plugin-panel](https://www.npmjs.com/package/@atlaskit/editor-plugin-panel)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-panel)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-panel/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-panel is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin panel](https://atlaskit.atlassian.com/packages/editor/editor-plugin-panel) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/actions.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changePanelType = void 0;
+exports.insertPanelWithAnalytics = insertPanelWithAnalytics;
+exports.removePanel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _panel = require("@atlaskit/editor-common/panel");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("./utils");
+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) { (0, _defineProperty2.default)(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; }
+var removePanel = exports.removePanel = function removePanel(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var nodes = state.schema.nodes,
+      tr = state.tr;
+    var payload = {
+      action: _analytics.ACTION.DELETED,
+      actionSubject: _analytics.ACTION_SUBJECT.PANEL,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    };
+    var deleteTr = tr;
+    if ((0, _utils2.findSelectedNodeOfType)(nodes.panel)(tr.selection)) {
+      deleteTr = (0, _utils2.removeSelectedNode)(tr);
+    } else if ((0, _utils2.findParentNodeOfType)(nodes.panel)(tr.selection)) {
+      deleteTr = (0, _utils2.removeParentNodeOfType)(nodes.panel)(tr);
+    }
+    if (!deleteTr) {
+      return false;
+    }
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(deleteTr);
+      dispatch(deleteTr);
+    }
+    return true;
+  };
+};
+var changePanelType = exports.changePanelType = function changePanelType(editorAnalyticsAPI) {
+  return function (panelType) {
+    var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    return function (state, dispatch) {
+      var nodes = state.schema.nodes,
+        tr = state.tr;
+      var panelNode = (0, _utils3.findPanel)(state);
+      if (panelNode === undefined) {
+        return false;
+      }
+      var newType = panelType;
+      var previousType = panelNode.node.attrs.panelType;
+      var newTr;
+      if (allowCustomPanel) {
+        var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(previousType);
+        var previousIcon = panelNode.node.attrs.panelIcon;
+        var previousIconId = panelNode.node.attrs.panelIconId;
+        var previousIconText = panelNode.node.attrs.panelIconText;
+        var newPanelOptions = _objectSpread({
+          color: previousColor,
+          emoji: previousIcon,
+          emojiId: previousIconId,
+          emojiText: previousIconText
+        }, panelOptions);
+        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+          panelIcon: newPanelOptions.emoji,
+          panelIconId: newPanelOptions.emojiId,
+          panelIconText: newPanelOptions.emojiText,
+          panelColor: newPanelOptions.color,
+          panelType: panelType
+        });
+      } else {
+        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+          panelType: panelType
+        });
+      }
+      var payload = {
+        action: _analytics.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics.ACTION_SUBJECT.PANEL,
+        attributes: {
+          newType: newType,
+          previousType: previousType
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+
+      // Select the panel if it was previously selected
+      var newTrWithSelection = state.selection instanceof _state.NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new _state.NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
+      newTrWithSelection.setMeta('scrollIntoView', false);
+      if (dispatch) {
+        dispatch(newTrWithSelection);
+      }
+      return true;
+    };
+  };
+};
+function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
+  return (0, _editorAnalytics.withAnalytics)(analyticsAPI, {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+    attributes: {
+      inputMethod: inputMethod,
+      panelType: _adfSchema.PanelType.INFO // only info panels can be inserted via this action
+    },
+
+    eventType: _analytics.EVENT_TYPE.TRACK
+  })(function (state, dispatch) {
+    var nodes = state.schema.nodes;
+    if (nodes.panel && nodes.paragraph) {
+      return (0, _utils.wrapSelectionIn)(nodes.panel)(state, dispatch);
+    }
+    return false;
+  });
+}

package/dist/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "panelPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/message.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  info: {
+    id: 'fabric.editor.info',
+    defaultMessage: 'Info',
+    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
+  },
+  note: {
+    id: 'fabric.editor.note',
+    defaultMessage: 'Note',
+    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
+  },
+  success: {
+    id: 'fabric.editor.success',
+    defaultMessage: 'Success',
+    description: 'Panels provide a way to highlight text. The success panel has a green background.'
+  },
+  warning: {
+    id: 'fabric.editor.warning',
+    defaultMessage: 'Warning',
+    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
+  },
+  error: {
+    id: 'fabric.editor.error',
+    defaultMessage: 'Error',
+    description: 'Panels provide a way to highlight text. The error panel has a red background.'
+  },
+  emoji: {
+    id: 'fabric.editor.panel.emoji',
+    defaultMessage: 'Add emoji',
+    description: 'Select the panel icon'
+  },
+  backgroundColor: {
+    id: 'fabric.editor.panel.backgroundColor',
+    defaultMessage: 'Background color',
+    description: 'Select the panel background color.'
+  }
+});

package/dist/cjs/nodeviews/panel.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelIcons = exports.getPanelNodeView = exports.PanelIcon = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _emoji = require("@atlaskit/editor-common/emoji");
+var _icons = require("@atlaskit/editor-common/icons");
+var _panel = require("@atlaskit/editor-common/panel");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
+var _utils = require("../utils");
+var panelIcons = exports.panelIcons = {
+  info: _icons.PanelInfoIcon,
+  success: _icons.PanelSuccessIcon,
+  note: _icons.PanelNoteIcon,
+  tip: _hint.default,
+  warning: _icons.PanelWarningIcon,
+  error: _icons.PanelErrorIcon,
+  custom: _icons.PanelInfoIcon
+};
+var PanelIcon = exports.PanelIcon = function PanelIcon(props) {
+  var allowCustomPanel = props.allowCustomPanel,
+    providerFactory = props.providerFactory,
+    _props$panelAttribute = props.panelAttributes,
+    panelType = _props$panelAttribute.panelType,
+    panelIcon = _props$panelAttribute.panelIcon,
+    panelIconId = _props$panelAttribute.panelIconId,
+    panelIconText = _props$panelAttribute.panelIconText;
+  if (allowCustomPanel && panelIcon && panelType === _adfSchema.PanelType.CUSTOM) {
+    return /*#__PURE__*/_react.default.createElement(_emoji.Emoji, {
+      providers: providerFactory,
+      shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
+      showTooltip: false,
+      allowTextFallback: false,
+      fitToHeight: _consts.akEditorCustomIconSize
+    });
+  }
+  var Icon = panelIcons[panelType];
+  return /*#__PURE__*/_react.default.createElement(Icon, {
+    label: "Panel ".concat(panelType)
+  });
+};
+var PanelNodeView = /*#__PURE__*/function () {
+  function PanelNodeView(node, view, getPos, pluginOptions, providerFactory) {
+    (0, _classCallCheck2.default)(this, PanelNodeView);
+    this.providerFactory = providerFactory;
+    this.pluginOptions = pluginOptions;
+    this.view = view;
+    this.node = node;
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _utils.panelAttrsToDom)(node.attrs, pluginOptions.allowCustomPanel || false)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.getPos = getPos;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.icon = this.dom.querySelector(".".concat(_panel.PanelSharedCssClassName.icon));
+    if (!this.icon) {
+      return;
+    }
+    // set contentEditable as false to be able to select the custom panels with keyboard
+    this.icon.contentEditable = 'false';
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(PanelIcon, {
+      allowCustomPanel: pluginOptions.allowCustomPanel,
+      panelAttributes: node.attrs,
+      providerFactory: this.providerFactory
+    }), this.icon);
+  }
+  (0, _createClass2.default)(PanelNodeView, [{
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      // ignore mutation if it caused by the icon.
+      var isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon;
+      // ignore mutation if it caused by the lazy load emoji inside icon.
+      var isInsideIcon = this.icon.contains(mutation.target);
+      return isIcon || isInsideIcon;
+    }
+  }]);
+  return PanelNodeView;
+}();
+var getPanelNodeView = exports.getPanelNodeView = function getPanelNodeView(pluginOptions, providerFactory) {
+  return function (node, view, getPos) {
+    return new PanelNodeView(node, view, getPos, pluginOptions, providerFactory);
+  };
+};

package/dist/cjs/plugin.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _utils = require("@atlaskit/editor-common/utils");
+var _colors = require("@atlaskit/theme/colors");
+var _actions = require("./actions");
+var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
+var _main = require("./pm-plugins/main");
+var _toolbar = require("./toolbar");
+var panelPlugin = function panelPlugin(_ref) {
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
+  return {
+    name: 'panel',
+    nodes: function nodes() {
+      var panelNode = (0, _adfSchema.panel)(!!options.allowCustomPanel);
+      return [{
+        name: 'panel',
+        node: panelNode
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'panel',
+        plugin: function plugin(_ref2) {
+          var providerFactory = _ref2.providerFactory,
+            dispatch = _ref2.dispatch;
+          return (0, _main.createPlugin)(dispatch, providerFactory, options);
+        }
+      }, {
+        name: 'panelKeyMap',
+        plugin: function plugin() {
+          return (0, _keymaps.default)();
+        }
+      }];
+    },
+    actions: {
+      insertPanel: function insertPanel(inputMethod) {
+        var _api$analytics;
+        return (0, _actions.insertPanelWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        var quickInsertOptions = [{
+          id: 'infopanel',
+          title: formatMessage(_messages.blockTypeMessages.infoPanel),
+          keywords: ['panel'],
+          description: formatMessage(_messages.blockTypeMessages.infoPanelDescription),
+          priority: 800,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.INFO
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'notepanel',
+          title: formatMessage(_messages.blockTypeMessages.notePanel),
+          description: formatMessage(_messages.blockTypeMessages.notePanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelNote, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.NOTE
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'successpanel',
+          title: formatMessage(_messages.blockTypeMessages.successPanel),
+          description: formatMessage(_messages.blockTypeMessages.successPanelDescription),
+          keywords: ['tip'],
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelSuccess, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.SUCCESS
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'warningpanel',
+          title: formatMessage(_messages.blockTypeMessages.warningPanel),
+          description: formatMessage(_messages.blockTypeMessages.warningPanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelWarning, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.WARNING
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'errorpanel',
+          title: formatMessage(_messages.blockTypeMessages.errorPanel),
+          description: formatMessage(_messages.blockTypeMessages.errorPanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelError, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.ERROR
+              },
+              api: api
+            });
+          }
+        }];
+        if (options.allowCustomPanel && options.allowCustomPanelEdit) {
+          quickInsertOptions.push({
+            id: 'custompanel',
+            title: formatMessage(_messages.blockTypeMessages.customPanel),
+            description: formatMessage(_messages.blockTypeMessages.customPanelDescription),
+            priority: 1000,
+            icon: function icon() {
+              return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCustomPanel, null);
+            },
+            action: function action(insert, state) {
+              return createPanelAction({
+                state: state,
+                attributes: {
+                  panelType: _adfSchema.PanelType.CUSTOM,
+                  panelIcon: ':rainbow:',
+                  panelIconId: '1f308',
+                  panelIconText: '🌈',
+                  // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
+                  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                  panelColor: _colors.T50
+                },
+                api: api
+              });
+            }
+          });
+        }
+        return quickInsertOptions;
+      },
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return (0, _toolbar.getToolbarConfig)(state, intl, options, providerFactory, api);
+      }
+    }
+  };
+};
+
+/**
+ * Creates panel action and wrap selection transaction with analytics for the panel insertion.
+ *
+ * @example
+ * const tr = createPanelAction({
+ *   state: editorState,
+ *   attributes: { panelType: 'info' },
+ * });
+ * if (tr) {
+ *   applyTransaction(tr);
+ * }
+ */
+function createPanelAction(_ref4) {
+  var state = _ref4.state,
+    attributes = _ref4.attributes,
+    api = _ref4.api;
+  var tr = (0, _utils.createWrapSelectionTransaction)({
+    state: state,
+    type: state.schema.nodes.panel,
+    nodeAttributes: attributes
+  });
+  if (tr) {
+    var _api$analytics2;
+    api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+        panelType: attributes.panelType
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+  }
+  return tr;
+}
+var _default = exports.default = panelPlugin;

package/dist/cjs/pm-plugins/keymaps.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.keymapPlugin = keymapPlugin;
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+function findParentNode(selection, nodeType) {
+  var parentPosition = (0, _utils2.findParentNodeOfType)(nodeType)(selection);
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+  return null;
+}
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  var parentNode = findParentNode(selection, nodeType);
+  return parentNode && (0, _utils.isEmptyNode)(schema)(parentNode);
+}
+
+// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+function keymapPlugin() {
+  var deleteCurrentItem = function deleteCurrentItem($from, tr) {
+    return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
+  };
+  var keymaps = {
+    Backspace: function Backspace(state, dispatch) {
+      var _nodeBeforePanel$type;
+      var selection = state.selection,
+        nodes = state.schema.nodes,
+        tr = state.tr;
+      var panel = nodes.panel,
+        blockquote = nodes.blockquote;
+      var $from = selection.$from,
+        $to = selection.$to;
+      // Don't do anything if selection is a range
+      if ($from.pos !== $to.pos) {
+        return false;
+      }
+
+      // If not at the start of a panel, no joining will happen so allow default behaviour (backspacing characters etc..)
+      if ($from.parentOffset !== 0) {
+        return false;
+      }
+      var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
+      var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
+      var parentNodeType = $from.parent.type;
+      var isPreviousNodeAPanel = previousNodeType === panel;
+      var isParentNodeAPanel = parentNodeType === panel;
+      var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
+
+      // Stops merging panels when deleting empty paragraph in between
+      // Stops merging blockquotes with panels when deleting from start of blockquote
+
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || (0, _utils2.hasParentNodeOfType)(blockquote)(selection) ||
+      // Lift line of panel content up and out of the panel, when backspacing
+      // at the start of a panel, if the node before the panel is an 'isolating' node
+      // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
+      // behaviour will fallback to 'select node backward' logic because the node
+      // before is an isolating node.
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && (0, _utils2.hasParentNodeOfType)(panel)(selection)) {
+        var content = $from.node($from.depth).content;
+        var insertPos = $previousPos.pos;
+        deleteCurrentItem($from, tr).insert(insertPos, content);
+        if (dispatch) {
+          dispatch((0, _utils2.setTextSelection)(insertPos)(tr).scrollIntoView());
+        }
+        return true;
+      }
+      var nodeType = $from.node().type;
+      if (nodeType !== panel) {
+        return false;
+      }
+      return true;
+    }
+  };
+  return (0, _keymap.keymap)(keymaps);
+}
+var _default = exports.default = keymapPlugin;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _panel = require("@atlaskit/editor-common/panel");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection = require("@atlaskit/editor-common/selection");
+var _panel2 = require("../nodeviews/panel");
+var _types = require("../types");
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
+  var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
+    useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
+  return new _safePlugin.SafePlugin({
+    key: _types.pluginKey,
+    props: {
+      nodeViews: {
+        panel: (0, _panel2.getPanelNodeView)(pluginOptions, providerFactory)
+      },
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['panel'], function (target) {
+        return !!target.closest(".".concat(_panel.PanelSharedCssClassName.prefix));
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    }
+  });
+};