@atlaskit/editor-plugin-panel 0.1.0

package/dist/es2019/plugin.js

@@ -0,0 +1,191 @@
+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';
+const panelPlugin = ({
+  config: options = {},
+  api
+}) => ({
+  name: 'panel',
+  nodes() {
+    const panelNode = panel(!!options.allowCustomPanel);
+    return [{
+      name: 'panel',
+      node: panelNode
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'panel',
+      plugin: ({
+        providerFactory,
+        dispatch
+      }) => createPlugin(dispatch, providerFactory, options)
+    }, {
+      name: 'panelKeyMap',
+      plugin: () => keymap()
+    }];
+  },
+  actions: {
+    insertPanel(inputMethod) {
+      var _api$analytics;
+      return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+    }
+  },
+  pluginsOptions: {
+    quickInsert: ({
+      formatMessage
+    }) => {
+      let quickInsertOptions = [{
+        id: 'infopanel',
+        title: formatMessage(blockTypeMessages.infoPanel),
+        keywords: ['panel'],
+        description: formatMessage(blockTypeMessages.infoPanelDescription),
+        priority: 800,
+        icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
+        action(insert, state) {
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.INFO
+            },
+            api
+          });
+        }
+      }, {
+        id: 'notepanel',
+        title: formatMessage(blockTypeMessages.notePanel),
+        description: formatMessage(blockTypeMessages.notePanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
+        action(insert, state) {
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.NOTE
+            },
+            api
+          });
+        }
+      }, {
+        id: 'successpanel',
+        title: formatMessage(blockTypeMessages.successPanel),
+        description: formatMessage(blockTypeMessages.successPanelDescription),
+        keywords: ['tip'],
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
+        action(insert, state) {
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.SUCCESS
+            },
+            api
+          });
+        }
+      }, {
+        id: 'warningpanel',
+        title: formatMessage(blockTypeMessages.warningPanel),
+        description: formatMessage(blockTypeMessages.warningPanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
+        action(insert, state) {
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.WARNING
+            },
+            api
+          });
+        }
+      }, {
+        id: 'errorpanel',
+        title: formatMessage(blockTypeMessages.errorPanel),
+        description: formatMessage(blockTypeMessages.errorPanelDescription),
+        priority: 1000,
+        icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
+        action(insert, state) {
+          return createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.ERROR
+            },
+            api
+          });
+        }
+      }];
+      if (options.allowCustomPanel && options.allowCustomPanelEdit) {
+        quickInsertOptions.push({
+          id: 'custompanel',
+          title: formatMessage(blockTypeMessages.customPanel),
+          description: formatMessage(blockTypeMessages.customPanelDescription),
+          priority: 1000,
+          icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
+          action(insert, state) {
+            return createPanelAction({
+              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
+            });
+          }
+        });
+      }
+      return quickInsertOptions;
+    },
+    floatingToolbar: (state, intl, providerFactory) => 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({
+  state,
+  attributes,
+  api
+}) {
+  const tr = createWrapSelectionTransaction({
+    state,
+    type: state.schema.nodes.panel,
+    nodeAttributes: attributes
+  });
+  if (tr) {
+    var _api$analytics2;
+    api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? 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/es2019/pm-plugins/keymaps.js

@@ -0,0 +1,82 @@
+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) {
+  const parentPosition = findParentNodeOfType(nodeType)(selection);
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+  return null;
+}
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  const parentNode = findParentNode(selection, nodeType);
+  return parentNode && isEmptyNode(schema)(parentNode);
+}
+
+// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+export function keymapPlugin() {
+  const deleteCurrentItem = ($from, tr) => {
+    return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
+  };
+  const keymaps = {
+    Backspace: (state, dispatch) => {
+      var _nodeBeforePanel$type, _nodeBeforePanel$type2;
+      const {
+        selection,
+        schema: {
+          nodes
+        },
+        tr
+      } = state;
+      const {
+        panel,
+        blockquote
+      } = nodes;
+      const {
+        $from,
+        $to
+      } = selection;
+      // 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;
+      }
+      const $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
+      const previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
+      const parentNodeType = $from.parent.type;
+      const isPreviousNodeAPanel = previousNodeType === panel;
+      const isParentNodeAPanel = parentNodeType === panel;
+      const 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$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panel)(selection)) {
+        const content = $from.node($from.depth).content;
+        const insertPos = $previousPos.pos;
+        deleteCurrentItem($from, tr).insert(insertPos, content);
+        if (dispatch) {
+          dispatch(setTextSelection(insertPos)(tr).scrollIntoView());
+        }
+        return true;
+      }
+      const nodeType = $from.node().type;
+      if (nodeType !== panel) {
+        return false;
+      }
+      return true;
+    }
+  };
+  return keymap(keymaps);
+}
+export default keymapPlugin;

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

@@ -0,0 +1,21 @@
+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 const createPlugin = (dispatch, providerFactory, pluginOptions) => {
+  const {
+    useLongPressSelection = false
+  } = pluginOptions;
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        panel: getPanelNodeView(pluginOptions, providerFactory)
+      },
+      handleClickOn: createSelectionClickHandler(['panel'], target => !!target.closest(`.${PanelSharedCssClassName.prefix}`), {
+        useLongPressSelection
+      })
+    }
+  });
+};

package/dist/es2019/toolbar.js

@@ -0,0 +1,279 @@
+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 const panelIconMap = {
+  [PanelType.INFO]: {
+    shortName: ':info:',
+    id: 'atlassian-info'
+  },
+  [PanelType.NOTE]: {
+    shortName: ':note:',
+    id: 'atlassian-note'
+  },
+  [PanelType.WARNING]: {
+    shortName: ':warning:',
+    id: 'atlassian-warning'
+  },
+  [PanelType.ERROR]: {
+    shortName: ':cross_mark:',
+    id: 'atlassian-cross_mark'
+  },
+  [PanelType.SUCCESS]: {
+    shortName: ':check_mark:',
+    id: 'atlassian-check_mark'
+  },
+  [PanelType.TIP]: {
+    shortName: ':tip:',
+    id: 'atlassian-tip'
+  }
+};
+export const 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
+  const 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) {
+    const changeColor = color => (state, dispatch) => {
+      const panelNode = findPanel(state);
+      if (panelNode === undefined) {
+        return false;
+      }
+      let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
+      const emojiInfo = panelNode.node.attrs.panelType;
+      const panelEmoji = panelIconMap[emojiInfo];
+      const previousEmoji = panelEmoji ? {
+        emoji: panelEmoji.shortName,
+        emojiId: panelEmoji.id
+      } : {};
+      if (previousColor === color) {
+        changePanelType(editorAnalyticsAPI)(PanelType.CUSTOM, {
+          color,
+          ...previousEmoji
+        }, isCustomPanelEnabled)(state, dispatch);
+        return false;
+      }
+      const 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, {
+        color,
+        ...previousEmoji
+      }, isCustomPanelEnabled))(state, dispatch);
+      return false;
+    };
+    const changeEmoji = emoji => (state, dispatch) => {
+      const panelNode = findPanel(state);
+      if (panelNode === undefined) {
+        return false;
+      }
+      let 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;
+      }
+      const 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;
+    };
+    const removeEmoji = () => (state, dispatch) => {
+      const panelNode = findPanel(state);
+      if (activePanelType === PanelType.CUSTOM && !activePanelIcon) {
+        return false;
+      }
+      if (panelNode === undefined) {
+        return false;
+      }
+      const 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;
+    };
+    const panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
+    const defaultPalette = panelBackgroundPalette.find(item => item.value === panelColor) || {
+      label: 'Custom',
+      value: panelColor,
+      border: DEFAULT_BORDER_COLOR
+    };
+    if (isCustomPanelEditable) {
+      const colorPicker = {
+        id: 'editor.panel.colorPicker',
+        title: formatMessage(messages.backgroundColor),
+        type: 'select',
+        selectType: 'color',
+        defaultValue: defaultPalette,
+        options: panelBackgroundPalette,
+        onChange: option => changeColor(option.value)
+      };
+      const emojiPicker = {
+        id: 'editor.panel.emojiPicker',
+        title: formatMessage(messages.emoji),
+        type: 'select',
+        selectType: 'emoji',
+        options: [],
+        selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
+        onChange: emoji => changeEmoji(emoji)
+      };
+      const 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,
+        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 const getToolbarConfig = (state, intl, options = {}, providerFactory, api) => {
+  const {
+    formatMessage
+  } = intl;
+  const panelObject = findPanel(state);
+  if (panelObject) {
+    var _api$analytics;
+    const nodeType = state.schema.nodes.panel;
+    const {
+      panelType,
+      panelColor,
+      panelIcon
+    } = panelObject.node.attrs;
+    const isStandardPanel = panelType => {
+      return panelType !== PanelType.CUSTOM ? panelType : undefined;
+    };
+
+    // force toolbar to be turned on
+    const 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 ? 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);
+    const getDomRef = editorView => {
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      const element = findDomRefAtPos(panelObject.pos, domAtPos);
+      return element;
+    };
+    return {
+      title: 'Panel floating controls',
+      getDomRef,
+      nodeType,
+      items,
+      scrollable: true
+    };
+  }
+  return;
+};

package/dist/es2019/types.js

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

package/dist/es2019/utils.js

@@ -0,0 +1,48 @@
+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 const findPanel = (state, selection) => {
+  const {
+    panel
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
+};
+export const panelAttrsToDom = (attrs, allowCustomPanel) => {
+  const {
+    panelColor,
+    panelType,
+    panelIcon,
+    panelIconId,
+    panelIconText
+  } = attrs;
+  const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
+  const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
+  const tokenColor = panelColor && hexToEditorBackgroundPaletteColor(panelColor);
+  const panelBackgroundColor = tokenColor || panelColor;
+  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelBackgroundColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;'}`].join('');
+  let panelAttrs = {
+    class: PanelSharedCssClassName.prefix,
+    'data-panel-type': panelType || PanelType.INFO,
+    style
+  };
+  if (panelColor && isCustomPanel) {
+    panelAttrs = {
+      ...panelAttrs,
+      'data-panel-color': panelColor,
+      'data-panel-icon-id': panelIconId,
+      'data-panel-icon-text': panelIconText
+    };
+  }
+  const iconDiv = ['div', {
+    class: PanelSharedCssClassName.icon
+  }];
+  const contentDiv = ['div', {
+    class: PanelSharedCssClassName.content
+  }, 0];
+  if (hasIcon) {
+    return ['div', panelAttrs, iconDiv, contentDiv];
+  } else {
+    return ['div', panelAttrs, contentDiv];
+  }
+};