@atlaskit/editor-plugin-panel 0.1.0

package/dist/esm/toolbar.js

@@ -0,0 +1,286 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _panelIconMap;
+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 } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
+import { DEFAULT_BORDER_COLOR, panelBackgroundPalette } from '@atlaskit/editor-common/ui-color';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
+import InfoIcon from '@atlaskit/icon/glyph/editor/info';
+import NoteIcon from '@atlaskit/icon/glyph/editor/note';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import RemoveEmojiIcon from '@atlaskit/icon/glyph/editor/remove-emoji';
+import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
+import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { changePanelType, removePanel } from './actions';
+import { messages } from './message';
+import { findPanel } from './utils';
+export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, {
+  shortName: ':info:',
+  id: 'atlassian-info'
+}), _defineProperty(_panelIconMap, PanelType.NOTE, {
+  shortName: ':note:',
+  id: 'atlassian-note'
+}), _defineProperty(_panelIconMap, PanelType.WARNING, {
+  shortName: ':warning:',
+  id: 'atlassian-warning'
+}), _defineProperty(_panelIconMap, PanelType.ERROR, {
+  shortName: ':cross_mark:',
+  id: 'atlassian-cross_mark'
+}), _defineProperty(_panelIconMap, PanelType.SUCCESS, {
+  shortName: ':check_mark:',
+  id: 'atlassian-check_mark'
+}), _defineProperty(_panelIconMap, PanelType.TIP, {
+  shortName: ':tip:',
+  id: 'atlassian-tip'
+}), _panelIconMap);
+export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) {
+  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
+  var items = [{
+    id: 'editor.panel.info',
+    type: 'button',
+    icon: InfoIcon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
+    selected: activePanelType === PanelType.INFO,
+    title: formatMessage(messages.info),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.note',
+    type: 'button',
+    icon: NoteIcon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
+    selected: activePanelType === PanelType.NOTE,
+    title: formatMessage(messages.note),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.success',
+    type: 'button',
+    icon: SuccessIcon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
+    selected: activePanelType === PanelType.SUCCESS,
+    title: formatMessage(messages.success),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.warning',
+    type: 'button',
+    icon: WarningIcon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
+    selected: activePanelType === PanelType.WARNING,
+    title: formatMessage(messages.warning),
+    tabIndex: null
+  }, {
+    id: 'editor.panel.error',
+    type: 'button',
+    icon: ErrorIcon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
+    selected: activePanelType === PanelType.ERROR,
+    title: formatMessage(messages.error),
+    tabIndex: null
+  }];
+  if (isCustomPanelEnabled) {
+    var changeColor = function changeColor(color) {
+      return function (state, dispatch) {
+        var panelNode = findPanel(state);
+        if (panelNode === undefined) {
+          return false;
+        }
+        var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
+        var emojiInfo = panelNode.node.attrs.panelType;
+        var panelEmoji = panelIconMap[emojiInfo];
+        var previousEmoji = panelEmoji ? {
+          emoji: panelEmoji.shortName,
+          emojiId: panelEmoji.id
+        } : {};
+        if (previousColor === color) {
+          changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, _objectSpread({
+            color: color
+          }, previousEmoji), isCustomPanelEnabled)(state, dispatch);
+          return false;
+        }
+        var payload = {
+          action: ACTION.CHANGED_BACKGROUND_COLOR,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newColor: color,
+            previousColor: previousColor
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, _objectSpread({
+          color: color
+        }, previousEmoji), isCustomPanelEnabled))(state, dispatch);
+        return false;
+      };
+    };
+    var changeEmoji = function changeEmoji(emoji) {
+      return function (state, dispatch) {
+        var panelNode = findPanel(state);
+        if (panelNode === undefined) {
+          return false;
+        }
+        var previousIcon = panelNode.node.attrs.panelIcon || '';
+        if (previousIcon === emoji.shortName) {
+          changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
+            emoji: emoji.shortName,
+            emojiId: emoji.id,
+            emojiText: emoji.fallback
+          }, true)(state, dispatch);
+          return false;
+        }
+        var payload = {
+          action: ACTION.CHANGED_ICON,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            newIcon: emoji.shortName,
+            previousIcon: previousIcon
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
+          emoji: emoji.shortName,
+          emojiId: emoji.id,
+          emojiText: emoji.fallback
+        }, true))(state, dispatch);
+        return false;
+      };
+    };
+    var removeEmoji = function removeEmoji() {
+      return function (state, dispatch) {
+        var panelNode = findPanel(state);
+        if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
+          return false;
+        }
+        if (panelNode === undefined) {
+          return false;
+        }
+        var payload = {
+          action: ACTION.REMOVE_ICON,
+          actionSubject: ACTION_SUBJECT.PANEL,
+          actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+          attributes: {
+            icon: panelNode.node.attrs.panelIcon
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        withAnalytics(editorAnalyticsAPI, payload)(changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
+          emoji: undefined,
+          emojiId: undefined,
+          emojiText: undefined
+        }, isCustomPanelEnabled))(state, dispatch);
+        return false;
+      };
+    };
+    var panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
+    var defaultPalette = panelBackgroundPalette.find(function (item) {
+      return item.value === panelColor;
+    }) || {
+      label: 'Custom',
+      value: panelColor,
+      border: DEFAULT_BORDER_COLOR
+    };
+    if (isCustomPanelEditable) {
+      var colorPicker = {
+        id: 'editor.panel.colorPicker',
+        title: formatMessage(messages.backgroundColor),
+        type: 'select',
+        selectType: 'color',
+        defaultValue: defaultPalette,
+        options: panelBackgroundPalette,
+        onChange: function onChange(option) {
+          return changeColor(option.value);
+        }
+      };
+      var emojiPicker = {
+        id: 'editor.panel.emojiPicker',
+        title: formatMessage(messages.emoji),
+        type: 'select',
+        selectType: 'emoji',
+        options: [],
+        selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
+        onChange: function onChange(emoji) {
+          return changeEmoji(emoji);
+        }
+      };
+      var removeEmojiButton = {
+        id: 'editor.panel.removeEmoji',
+        type: 'button',
+        icon: RemoveEmojiIcon,
+        onClick: removeEmoji(),
+        title: formatMessage(commonMessages.removeEmoji),
+        disabled: activePanelIcon ? false : true
+      };
+      items.push(emojiPicker, removeEmojiButton, {
+        type: 'separator'
+      }, colorPicker);
+    }
+  }
+  if (state) {
+    items.push({
+      type: 'copy-button',
+      items: [{
+        type: 'separator'
+      }, {
+        state: state,
+        formatMessage: formatMessage,
+        nodeType: panelNodeType
+      }]
+    });
+  }
+  items.push({
+    type: 'separator'
+  }, {
+    id: 'editor.panel.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: RemoveIcon,
+    onClick: removePanel(editorAnalyticsAPI),
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
+    title: formatMessage(commonMessages.remove),
+    tabIndex: null
+  });
+  return items;
+};
+export var getToolbarConfig = function getToolbarConfig(state, intl) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var providerFactory = arguments.length > 3 ? arguments[3] : undefined;
+  var api = arguments.length > 4 ? arguments[4] : undefined;
+  var formatMessage = intl.formatMessage;
+  var panelObject = findPanel(state);
+  if (panelObject) {
+    var _api$analytics;
+    var nodeType = state.schema.nodes.panel;
+    var _panelObject$node$att = panelObject.node.attrs,
+      panelType = _panelObject$node$att.panelType,
+      panelColor = _panelObject$node$att.panelColor,
+      panelIcon = _panelObject$node$att.panelIcon;
+    var isStandardPanel = function isStandardPanel(panelType) {
+      return panelType !== PanelType.CUSTOM ? panelType : undefined;
+    };
+
+    // force toolbar to be turned on
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    var getDomRef = function getDomRef(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var element = findDomRefAtPos(panelObject.pos, domAtPos);
+      return element;
+    };
+    return {
+      title: 'Panel floating controls',
+      getDomRef: getDomRef,
+      nodeType: nodeType,
+      items: items,
+      scrollable: true
+    };
+  }
+  return;
+};

package/dist/esm/types.js

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

package/dist/esm/utils.js

@@ -0,0 +1,46 @@
+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 { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export var findPanel = function findPanel(state, selection) {
+  var panel = state.schema.nodes.panel;
+  return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
+};
+export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
+  var panelColor = attrs.panelColor,
+    panelType = attrs.panelType,
+    panelIcon = attrs.panelIcon,
+    panelIconId = attrs.panelIconId,
+    panelIconText = attrs.panelIconText;
+  var isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
+  var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
+  var tokenColor = panelColor && hexToEditorBackgroundPaletteColor(panelColor);
+  var panelBackgroundColor = tokenColor || panelColor;
+  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;')].join('');
+  var panelAttrs = {
+    class: PanelSharedCssClassName.prefix,
+    'data-panel-type': panelType || PanelType.INFO,
+    style: style
+  };
+  if (panelColor && isCustomPanel) {
+    panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
+      'data-panel-color': panelColor,
+      'data-panel-icon-id': panelIconId,
+      'data-panel-icon-text': panelIconText
+    });
+  }
+  var iconDiv = ['div', {
+    class: PanelSharedCssClassName.icon
+  }];
+  var contentDiv = ['div', {
+    class: PanelSharedCssClassName.content
+  }, 0];
+  if (hasIcon) {
+    return ['div', panelAttrs, iconDiv, contentDiv];
+  } else {
+    return ['div', panelAttrs, contentDiv];
+  }
+};

package/dist/types/actions.d.ts

@@ -0,0 +1,12 @@
+import { PanelType } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { PanelOptions } from './pm-plugins/main';
+export type DomAtPos = (pos: number) => {
+    node: HTMLElement;
+    offset: number;
+};
+export declare const removePanel: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changePanelType: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (panelType: PanelType, panelOptions?: PanelOptions, allowCustomPanel?: boolean) => Command;
+export declare function insertPanelWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as panelPlugin } from './plugin';
+export type { PanelPlugin } from './plugin';
+export type { PanelPluginConfig } from './types';

package/dist/types/message.d.ts

@@ -0,0 +1,37 @@
+export declare const messages: {
+    info: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    note: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    success: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    warning: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    error: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emoji: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    backgroundColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/nodeviews/panel.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { PanelAttributes } from '@atlaskit/adf-schema';
+import { PanelType } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PanelPluginOptions } from '../types';
+export declare const panelIcons: {
+    [key in PanelType]: React.ComponentType<{
+        label: string;
+    }>;
+};
+interface PanelIconAttributes {
+    panelAttributes: PanelAttributes;
+    providerFactory?: ProviderFactory;
+    allowCustomPanel?: boolean;
+}
+export declare const PanelIcon: (props: PanelIconAttributes) => JSX.Element;
+declare class PanelNodeView {
+    node: Node;
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    icon: HTMLElement;
+    getPos: getPosHandlerNode;
+    view: EditorView;
+    providerFactory?: ProviderFactory;
+    pluginOptions: PanelPluginOptions;
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, pluginOptions: PanelPluginOptions, providerFactory?: ProviderFactory);
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
+}
+export declare const getPanelNodeView: (pluginOptions: PanelPluginOptions, providerFactory?: ProviderFactory) => (node: Node, view: EditorView, getPos: getPosHandler) => PanelNodeView;
+export {};

package/dist/types/plugin.d.ts

@@ -0,0 +1,17 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { PanelPluginOptions } from './types';
+export type PanelPlugin = NextEditorPlugin<'panel', {
+    pluginConfiguration: PanelPluginOptions | undefined;
+    dependencies: [
+        typeof decorationsPlugin,
+        OptionalPlugin<typeof analyticsPlugin>
+    ];
+    actions: {
+        insertPanel: (inputMethod: INPUT_METHOD) => Command;
+    };
+}>;
+declare const panelPlugin: PanelPlugin;
+export default panelPlugin;

package/dist/types/pm-plugins/keymaps.d.ts

@@ -0,0 +1,3 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function keymapPlugin(): SafePlugin | undefined;
+export default keymapPlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { PanelPluginOptions } from '../types';
+export type PanelOptions = {
+    color?: string;
+    emoji?: string;
+    emojiId?: string;
+    emojiText?: string;
+};
+export declare const createPlugin: (dispatch: Dispatch, providerFactory: ProviderFactory, pluginOptions: PanelPluginOptions) => SafePlugin<any>;

package/dist/types/toolbar.d.ts

@@ -0,0 +1,15 @@
+import type { IntlShape } from 'react-intl-next';
+import { PanelType } from '@atlaskit/adf-schema';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { Command, ExtractInjectionAPI, FloatingToolbarConfig, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EmojiInfo, PanelPluginOptions } from './types';
+import type { PanelPlugin } from './index';
+export declare const panelIconMap: {
+    [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
+};
+export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState) => FloatingToolbarItem<Command>[];
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;

package/dist/types/types.d.ts

@@ -0,0 +1,21 @@
+import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const pluginKey: PluginKey<any>;
+export interface PanelPluginOptions extends LongPressSelectionPluginOptions, PanelPluginConfig {
+}
+export interface PanelPluginConfig {
+    allowCustomPanel?: boolean;
+    allowCustomPanelEdit?: boolean;
+}
+export type DomPanelAtrrs = {
+    class: string;
+    'data-panel-type': string;
+    'data-panel-color'?: string;
+    'data-panel-icon-id'?: string;
+    'data-panel-icon-text'?: string;
+    style: string;
+};
+export type EmojiInfo = {
+    shortName: string;
+    id: string;
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,5 @@
+import type { PanelAttributes } from '@atlaskit/adf-schema';
+import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const findPanel: (state: EditorState, selection?: Selection | null) => import("prosemirror-utils/dist/types").FindResult;
+export declare const panelAttrsToDom: (attrs: PanelAttributes, allowCustomPanel: boolean) => DOMOutputSpec;

package/dist/types-ts4.5/actions.d.ts

@@ -0,0 +1,12 @@
+import { PanelType } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { PanelOptions } from './pm-plugins/main';
+export type DomAtPos = (pos: number) => {
+    node: HTMLElement;
+    offset: number;
+};
+export declare const removePanel: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changePanelType: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (panelType: PanelType, panelOptions?: PanelOptions, allowCustomPanel?: boolean) => Command;
+export declare function insertPanelWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,3 @@
+export { default as panelPlugin } from './plugin';
+export type { PanelPlugin } from './plugin';
+export type { PanelPluginConfig } from './types';

package/dist/types-ts4.5/message.d.ts

@@ -0,0 +1,37 @@
+export declare const messages: {
+    info: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    note: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    success: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    warning: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    error: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emoji: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    backgroundColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/nodeviews/panel.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { PanelAttributes } from '@atlaskit/adf-schema';
+import { PanelType } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PanelPluginOptions } from '../types';
+export declare const panelIcons: {
+    [key in PanelType]: React.ComponentType<{
+        label: string;
+    }>;
+};
+interface PanelIconAttributes {
+    panelAttributes: PanelAttributes;
+    providerFactory?: ProviderFactory;
+    allowCustomPanel?: boolean;
+}
+export declare const PanelIcon: (props: PanelIconAttributes) => JSX.Element;
+declare class PanelNodeView {
+    node: Node;
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    icon: HTMLElement;
+    getPos: getPosHandlerNode;
+    view: EditorView;
+    providerFactory?: ProviderFactory;
+    pluginOptions: PanelPluginOptions;
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, pluginOptions: PanelPluginOptions, providerFactory?: ProviderFactory);
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
+}
+export declare const getPanelNodeView: (pluginOptions: PanelPluginOptions, providerFactory?: ProviderFactory) => (node: Node, view: EditorView, getPos: getPosHandler) => PanelNodeView;
+export {};

package/dist/types-ts4.5/plugin.d.ts

@@ -0,0 +1,17 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { PanelPluginOptions } from './types';
+export type PanelPlugin = NextEditorPlugin<'panel', {
+    pluginConfiguration: PanelPluginOptions | undefined;
+    dependencies: [
+        typeof decorationsPlugin,
+        OptionalPlugin<typeof analyticsPlugin>
+    ];
+    actions: {
+        insertPanel: (inputMethod: INPUT_METHOD) => Command;
+    };
+}>;
+declare const panelPlugin: PanelPlugin;
+export default panelPlugin;

package/dist/types-ts4.5/pm-plugins/keymaps.d.ts

@@ -0,0 +1,3 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function keymapPlugin(): SafePlugin | undefined;
+export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { PanelPluginOptions } from '../types';
+export type PanelOptions = {
+    color?: string;
+    emoji?: string;
+    emojiId?: string;
+    emojiText?: string;
+};
+export declare const createPlugin: (dispatch: Dispatch, providerFactory: ProviderFactory, pluginOptions: PanelPluginOptions) => SafePlugin<any>;

package/dist/types-ts4.5/toolbar.d.ts

@@ -0,0 +1,15 @@
+import type { IntlShape } from 'react-intl-next';
+import { PanelType } from '@atlaskit/adf-schema';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { Command, ExtractInjectionAPI, FloatingToolbarConfig, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EmojiInfo, PanelPluginOptions } from './types';
+import type { PanelPlugin } from './index';
+export declare const panelIconMap: {
+    [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
+};
+export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState) => FloatingToolbarItem<Command>[];
+export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;