@atlaskit/editor-plugin-panel 0.1.0

package/dist/esm/actions.js

@@ -0,0 +1,116 @@
+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 { PanelType } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
+import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findPanel } from './utils';
+export var removePanel = function removePanel(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var nodes = state.schema.nodes,
+      tr = state.tr;
+    var payload = {
+      action: ACTION.DELETED,
+      actionSubject: ACTION_SUBJECT.PANEL,
+      attributes: {
+        inputMethod: INPUT_METHOD.TOOLBAR
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+    var deleteTr = tr;
+    if (findSelectedNodeOfType(nodes.panel)(tr.selection)) {
+      deleteTr = removeSelectedNode(tr);
+    } else if (findParentNodeOfType(nodes.panel)(tr.selection)) {
+      deleteTr = removeParentNodeOfType(nodes.panel)(tr);
+    }
+    if (!deleteTr) {
+      return false;
+    }
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(deleteTr);
+      dispatch(deleteTr);
+    }
+    return true;
+  };
+};
+export var 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 = 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' : 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: ACTION.CHANGED_TYPE,
+        actionSubject: ACTION_SUBJECT.PANEL,
+        attributes: {
+          newType: newType,
+          previousType: previousType
+        },
+        eventType: EVENT_TYPE.TRACK
+      };
+
+      // Select the panel if it was previously selected
+      var newTrWithSelection = state.selection instanceof NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new 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;
+    };
+  };
+};
+export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
+  return withAnalytics(analyticsAPI, {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+    attributes: {
+      inputMethod: inputMethod,
+      panelType: PanelType.INFO // only info panels can be inserted via this action
+    },
+
+    eventType: EVENT_TYPE.TRACK
+  })(function (state, dispatch) {
+    var nodes = state.schema.nodes;
+    if (nodes.panel && nodes.paragraph) {
+      return wrapSelectionIn(nodes.panel)(state, dispatch);
+    }
+    return false;
+  });
+}

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default as panelPlugin } from './plugin';

package/dist/esm/message.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = 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/esm/nodeviews/panel.js

@@ -0,0 +1,87 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PanelType } from '@atlaskit/adf-schema';
+import { Emoji } from '@atlaskit/editor-common/emoji';
+import { PanelErrorIcon, PanelInfoIcon, PanelNoteIcon, PanelSuccessIcon, PanelWarningIcon } from '@atlaskit/editor-common/icons';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import TipIcon from '@atlaskit/icon/glyph/editor/hint';
+import { panelAttrsToDom } from '../utils';
+export var panelIcons = {
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
+  tip: TipIcon,
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
+  custom: PanelInfoIcon
+};
+export var 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 === PanelType.CUSTOM) {
+    return /*#__PURE__*/React.createElement(Emoji, {
+      providers: providerFactory,
+      shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
+      showTooltip: false,
+      allowTextFallback: false,
+      fitToHeight: akEditorCustomIconSize
+    });
+  }
+  var Icon = panelIcons[panelType];
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: "Panel ".concat(panelType)
+  });
+};
+var PanelNodeView = /*#__PURE__*/function () {
+  function PanelNodeView(node, view, getPos, pluginOptions, providerFactory) {
+    _classCallCheck(this, PanelNodeView);
+    this.providerFactory = providerFactory;
+    this.pluginOptions = pluginOptions;
+    this.view = view;
+    this.node = node;
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, 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(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.render( /*#__PURE__*/React.createElement(PanelIcon, {
+      allowCustomPanel: pluginOptions.allowCustomPanel,
+      panelAttributes: node.attrs,
+      providerFactory: this.providerFactory
+    }), this.icon);
+  }
+  _createClass(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;
+}();
+export var getPanelNodeView = function getPanelNodeView(pluginOptions, providerFactory) {
+  return function (node, view, getPos) {
+    return new PanelNodeView(node, view, getPos, pluginOptions, providerFactory);
+  };
+};

package/dist/esm/plugin.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { panel, PanelType } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { T50 } from '@atlaskit/theme/colors';
+import { insertPanelWithAnalytics } from './actions';
+import keymap from './pm-plugins/keymaps';
+import { createPlugin } from './pm-plugins/main';
+import { getToolbarConfig } from './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 = 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 createPlugin(dispatch, providerFactory, options);
+        }
+      }, {
+        name: 'panelKeyMap',
+        plugin: function plugin() {
+          return keymap();
+        }
+      }];
+    },
+    actions: {
+      insertPanel: function insertPanel(inputMethod) {
+        var _api$analytics;
+        return 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(blockTypeMessages.infoPanel),
+          keywords: ['panel'],
+          description: formatMessage(blockTypeMessages.infoPanelDescription),
+          priority: 800,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconPanel, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.INFO
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'notepanel',
+          title: formatMessage(blockTypeMessages.notePanel),
+          description: formatMessage(blockTypeMessages.notePanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconPanelNote, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.NOTE
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'successpanel',
+          title: formatMessage(blockTypeMessages.successPanel),
+          description: formatMessage(blockTypeMessages.successPanelDescription),
+          keywords: ['tip'],
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.SUCCESS
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'warningpanel',
+          title: formatMessage(blockTypeMessages.warningPanel),
+          description: formatMessage(blockTypeMessages.warningPanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconPanelWarning, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.WARNING
+              },
+              api: api
+            });
+          }
+        }, {
+          id: 'errorpanel',
+          title: formatMessage(blockTypeMessages.errorPanel),
+          description: formatMessage(blockTypeMessages.errorPanelDescription),
+          priority: 1000,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconPanelError, null);
+          },
+          action: function action(insert, state) {
+            return createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.ERROR
+              },
+              api: api
+            });
+          }
+        }];
+        if (options.allowCustomPanel && options.allowCustomPanelEdit) {
+          quickInsertOptions.push({
+            id: 'custompanel',
+            title: formatMessage(blockTypeMessages.customPanel),
+            description: formatMessage(blockTypeMessages.customPanelDescription),
+            priority: 1000,
+            icon: function icon() {
+              return /*#__PURE__*/React.createElement(IconCustomPanel, null);
+            },
+            action: function action(insert, state) {
+              return createPanelAction({
+                state: state,
+                attributes: {
+                  panelType: 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: T50
+                },
+                api: api
+              });
+            }
+          });
+        }
+        return quickInsertOptions;
+      },
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return 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 = 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: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod: INPUT_METHOD.QUICK_INSERT,
+        panelType: attributes.panelType
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+  }
+  return tr;
+}
+export default panelPlugin;

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

@@ -0,0 +1,74 @@
+import { isEmptyNode } from '@atlaskit/editor-common/utils';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { findParentNodeOfType, hasParentNodeOfType, setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+function findParentNode(selection, nodeType) {
+  var parentPosition = findParentNodeOfType(nodeType)(selection);
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+  return null;
+}
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  var parentNode = findParentNode(selection, nodeType);
+  return parentNode && isEmptyNode(schema)(parentNode);
+}
+
+// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+export 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) || 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 && hasParentNodeOfType(panel)(selection)) {
+        var content = $from.node($from.depth).content;
+        var insertPos = $previousPos.pos;
+        deleteCurrentItem($from, tr).insert(insertPos, content);
+        if (dispatch) {
+          dispatch(setTextSelection(insertPos)(tr).scrollIntoView());
+        }
+        return true;
+      }
+      var nodeType = $from.node().type;
+      if (nodeType !== panel) {
+        return false;
+      }
+      return true;
+    }
+  };
+  return keymap(keymaps);
+}
+export default keymapPlugin;

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

@@ -0,0 +1,22 @@
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { getPanelNodeView } from '../nodeviews/panel';
+import { pluginKey } from '../types';
+export var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
+  var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
+    useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        panel: getPanelNodeView(pluginOptions, providerFactory)
+      },
+      handleClickOn: createSelectionClickHandler(['panel'], function (target) {
+        return !!target.closest(".".concat(PanelSharedCssClassName.prefix));
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    }
+  });
+};