@atlaskit/editor-plugin-insert-block 0.1.0 → 0.2.0

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import InsertMenu from '../ElementBrowser/InsertMenu';
+import { DropDownButton } from './dropdown-button';
+export const BlockInsertElementBrowser = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
+    target: props.plusButtonRef,
+    fitHeight: 500,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    preventOverflow: true,
+    alignX: "right"
+  }, /*#__PURE__*/React.createElement(InsertMenu, {
+    editorView: props.editorView,
+    dropdownItems: props.items,
+    onInsert: props.onInsert,
+    toggleVisiblity: props.togglePlusMenuVisibility,
+    showElementBrowserLink: props.showElementBrowserLink,
+    pluginInjectionApi: props.pluginInjectionApi
+  })), /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
+    handleRef: props.onRef,
+    selected: props.open,
+    disabled: props.disabled,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    spacing: props.spacing,
+    label: props.label,
+    "aria-keyshortcuts": "/"
+  }));
+};

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { DropDownButton } from './dropdown-button';
+export const BlockInsertMenuLegacy = props => {
+  const {
+    items
+  } = props;
+  const dropdownItems = React.useMemo(() => [{
+    items
+  }], [items]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    items: dropdownItems,
+    onItemActivated: props.onItemActivated,
+    onOpenChange: props.onOpenChange,
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    isOpen: props.open,
+    fitHeight: 188,
+    fitWidth: 175,
+    zIndex: akEditorMenuZIndex
+  }, /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
+    handleRef: props.onRef,
+    selected: props.open,
+    disabled: props.disabled,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    spacing: props.spacing,
+    label: props.label,
+    "aria-keyshortcuts": "/"
+  }));
+};

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BlockInsertElementBrowser } from './block-insert-element-browser';
+import { BlockInsertMenuLegacy } from './block-insert-menu-legacy';
+import { DropDownButton } from './dropdown-button';
+export const BlockInsertMenu = props => {
+  if (props.items.length === 0) {
+    return null;
+  }
+  if (props.disabled) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {
+      "aria-expanded": props.open,
+      "aria-haspopup": true,
+      handleRef: props.onRef,
+      selected: props.open,
+      disabled: props.disabled,
+      onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
+      spacing: props.spacing,
+      label: props.label,
+      "aria-keyshortcuts": "/"
+    }));
+  }
+  if (props.replacePlusMenuWithElementBrowser) {
+    return /*#__PURE__*/React.createElement(BlockInsertElementBrowser, {
+      disabled: props.disabled,
+      editorView: props.editorView,
+      items: props.items,
+      label: props.label,
+      onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
+      onInsert: props.onInsert,
+      onRef: props.onPlusButtonRef,
+      open: props.open,
+      plusButtonRef: props.plusButtonRef,
+      popupsBoundariesElement: props.popupsBoundariesElement,
+      popupsMountPoint: props.popupsMountPoint,
+      popupsScrollableElement: props.popupsScrollableElement,
+      spacing: props.spacing,
+      togglePlusMenuVisibility: props.togglePlusMenuVisibility,
+      showElementBrowserLink: props.showElementBrowserLink,
+      pluginInjectionApi: props.pluginInjectionApi
+    });
+  }
+  return /*#__PURE__*/React.createElement(BlockInsertMenuLegacy, {
+    disabled: props.disabled,
+    items: props.items,
+    label: props.label,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    onItemActivated: props.onItemActivated,
+    onOpenChange: props.onOpenChange,
+    onRef: props.onRef,
+    open: props.open,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    spacing: props.spacing
+  });
+};

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import memoize from 'lodash/memoize';
+import memoizeOne from 'memoize-one';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table } from './item';
+import { messages } from './messages';
+import { shallowEquals } from './shallow-equals';
+import { sortItems } from './sort-items';
+const buttonToItem = memoize(button => ({
+  ...button,
+  title: /*#__PURE__*/React.createElement(ToolTipContent, {
+    description: button.content,
+    shortcutOverride: button.shortcut
+  })
+}));
+const buttonToDropdownItem = memoizeOne(title => memoize(button => ({
+  ...button,
+  title: /*#__PURE__*/React.createElement(ToolTipContent, {
+    description: title,
+    shortcutOverride: "/"
+  })
+})));
+const createInsertBlockItems = config => {
+  const {
+    isTypeAheadAllowed,
+    tableSupported,
+    mediaUploadsEnabled,
+    mediaSupported,
+    imageUploadSupported,
+    imageUploadEnabled,
+    mentionsSupported,
+    mentionsDisabled,
+    availableWrapperBlockTypes,
+    actionSupported,
+    decisionSupported,
+    showElementBrowserLink,
+    linkSupported,
+    linkDisabled,
+    emojiDisabled,
+    emojiProvider,
+    nativeStatusSupported,
+    insertMenuItems,
+    dateEnabled,
+    placeholderTextEnabled,
+    horizontalRuleEnabled,
+    layoutSectionEnabled,
+    expandEnabled,
+    numberOfButtons,
+    schema,
+    formatMessage,
+    isNewMenuEnabled
+  } = config;
+  const items = [];
+  if (actionSupported) {
+    items.push(action({
+      content: formatMessage(messages.action),
+      tooltipDescription: formatMessage(messages.actionDescription),
+      disabled: false
+    }));
+  }
+  if (linkSupported) {
+    items.push(link({
+      content: formatMessage(messages.link),
+      tooltipDescription: formatMessage(messages.linkDescription),
+      disabled: !!linkDisabled,
+      'aria-haspopup': 'dialog'
+    }));
+  }
+  if (mediaSupported && mediaUploadsEnabled) {
+    items.push(media({
+      content: formatMessage(messages.addMediaFiles),
+      tooltipDescription: formatMessage(messages.mediaFilesDescription),
+      disabled: false
+    }));
+  }
+  if (imageUploadSupported) {
+    items.push(imageUpload({
+      content: formatMessage(messages.image),
+      disabled: !imageUploadEnabled
+    }));
+  }
+  if (mentionsSupported) {
+    items.push(mention({
+      content: formatMessage(messages.mention),
+      tooltipDescription: formatMessage(messages.mentionDescription),
+      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+      'aria-haspopup': 'listbox'
+    }));
+  }
+  if (emojiProvider) {
+    items.push(emoji({
+      content: formatMessage(messages.emoji),
+      tooltipDescription: formatMessage(messages.emojiDescription),
+      disabled: emojiDisabled || !isTypeAheadAllowed,
+      'aria-haspopup': 'dialog'
+    }));
+  }
+  if (tableSupported) {
+    items.push(table({
+      content: formatMessage(messages.table),
+      tooltipDescription: formatMessage(messages.tableDescription),
+      disabled: false
+    }));
+  }
+  if (layoutSectionEnabled) {
+    const labelColumns = formatMessage(messages.columns);
+    items.push(layout({
+      content: labelColumns,
+      tooltipDescription: formatMessage(messages.columnsDescription),
+      disabled: false
+    }));
+  }
+  const blockTypes = availableWrapperBlockTypes || [];
+  const codeblockData = blockTypes.find(type => type.name === 'codeblock');
+  const panelData = blockTypes.find(type => type.name === 'panel');
+  const blockquoteData = blockTypes.find(type => type.name === 'blockquote');
+  if (codeblockData) {
+    items.push(codeblock({
+      content: formatMessage(codeblockData.title),
+      tooltipDescription: formatMessage(blockTypeMessages.codeblockDescription),
+      disabled: false,
+      shortcut: '```'
+    }));
+  }
+  if (panelData) {
+    items.push(panel({
+      content: formatMessage(panelData.title),
+      tooltipDescription: formatMessage(blockTypeMessages.infoPanelDescription),
+      disabled: false
+    }));
+  }
+  if (blockquoteData) {
+    items.push(blockquote({
+      content: formatMessage(blockquoteData.title),
+      tooltipDescription: formatMessage(blockTypeMessages.blockquoteDescription),
+      disabled: false,
+      shortcut: '>'
+    }));
+  }
+  if (decisionSupported) {
+    items.push(decision({
+      content: formatMessage(messages.decision),
+      tooltipDescription: formatMessage(messages.decisionDescription),
+      disabled: false
+    }));
+  }
+  if (horizontalRuleEnabled && schema.nodes.rule) {
+    items.push(horizontalrule({
+      content: formatMessage(messages.horizontalRule),
+      tooltipDescription: formatMessage(messages.horizontalRuleDescription),
+      disabled: false
+    }));
+  }
+  if (expandEnabled && schema.nodes.expand) {
+    items.push(expand({
+      content: formatMessage(messages.expand),
+      tooltipDescription: formatMessage(messages.expandDescription),
+      disabled: false
+    }));
+  }
+  if (dateEnabled) {
+    const labelDate = formatMessage(messages.date);
+    items.push(date({
+      content: labelDate,
+      tooltipDescription: formatMessage(messages.dateDescription),
+      disabled: false
+    }));
+  }
+  if (placeholderTextEnabled) {
+    items.push(placeholder({
+      content: formatMessage(messages.placeholderText),
+      disabled: false
+    }));
+  }
+  if (nativeStatusSupported) {
+    const labelStatus = formatMessage(messages.status);
+    items.push(status({
+      content: labelStatus,
+      tooltipDescription: formatMessage(messages.statusDescription),
+      disabled: false
+    }));
+  }
+  if (insertMenuItems) {
+    items.push(...insertMenuItems);
+  }
+  if (showElementBrowserLink) {
+    items.push(more({
+      content: formatMessage(messages.viewMore),
+      disabled: false
+    }));
+  }
+  const buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
+  const remainingItems = items.slice(numberOfButtons);
+  const dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
+  return [buttonItems, dropdownItems];
+};
+export const createItems = memoizeOne(createInsertBlockItems, shallowEquals);

package/dist/es2019/ui/ToolbarInsertBlock/dropdown-button.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import AddIcon from '@atlaskit/icon/glyph/editor/add';
+import { triggerWrapper } from './styles';
+const DropDownButtonIcon = /*#__PURE__*/React.memo(props =>
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+jsx("span", {
+  css: triggerWrapper
+}, jsx(AddIcon, {
+  label: props.label
+}), jsx("span", {
+  css: expandIconWrapperStyle
+}, jsx(ExpandIcon, {
+  label: ""
+}))));
+export const DropDownButton = /*#__PURE__*/React.memo(props => jsx(ToolbarButton, {
+  ref: props.handleRef,
+  selected: props.selected,
+  disabled: props.disabled,
+  onClick: props.onClick,
+  onKeyDown: props.onKeyDown,
+  spacing: props.spacing,
+  "aria-expanded": props['aria-expanded'],
+  "aria-haspopup": props['aria-haspopup'],
+  "aria-keyshortcuts": props['aria-keyshortcuts'],
+  "aria-label": `${props.label} /`,
+  iconBefore: jsx(DropDownButtonIcon, {
+    label: ""
+  }),
+  title: jsx(ToolTipContent, {
+    description: props.label,
+    shortcutOverride: "/"
+  })
+}));