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

package/dist/esm/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 var BlockInsertMenu = function 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/esm/ui/ToolbarInsertBlock/create-items.js

@@ -0,0 +1,210 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 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';
+var buttonToItem = memoize(function (button) {
+  return _objectSpread(_objectSpread({}, button), {}, {
+    title: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: button.content,
+      shortcutOverride: button.shortcut
+    })
+  });
+});
+var buttonToDropdownItem = memoizeOne(function (title) {
+  return memoize(function (button) {
+    return _objectSpread(_objectSpread({}, button), {}, {
+      title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: title,
+        shortcutOverride: "/"
+      })
+    });
+  });
+});
+var createInsertBlockItems = function createInsertBlockItems(config) {
+  var isTypeAheadAllowed = config.isTypeAheadAllowed,
+    tableSupported = config.tableSupported,
+    mediaUploadsEnabled = config.mediaUploadsEnabled,
+    mediaSupported = config.mediaSupported,
+    imageUploadSupported = config.imageUploadSupported,
+    imageUploadEnabled = config.imageUploadEnabled,
+    mentionsSupported = config.mentionsSupported,
+    mentionsDisabled = config.mentionsDisabled,
+    availableWrapperBlockTypes = config.availableWrapperBlockTypes,
+    actionSupported = config.actionSupported,
+    decisionSupported = config.decisionSupported,
+    showElementBrowserLink = config.showElementBrowserLink,
+    linkSupported = config.linkSupported,
+    linkDisabled = config.linkDisabled,
+    emojiDisabled = config.emojiDisabled,
+    emojiProvider = config.emojiProvider,
+    nativeStatusSupported = config.nativeStatusSupported,
+    insertMenuItems = config.insertMenuItems,
+    dateEnabled = config.dateEnabled,
+    placeholderTextEnabled = config.placeholderTextEnabled,
+    horizontalRuleEnabled = config.horizontalRuleEnabled,
+    layoutSectionEnabled = config.layoutSectionEnabled,
+    expandEnabled = config.expandEnabled,
+    numberOfButtons = config.numberOfButtons,
+    schema = config.schema,
+    formatMessage = config.formatMessage,
+    isNewMenuEnabled = config.isNewMenuEnabled;
+  var 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) {
+    var labelColumns = formatMessage(messages.columns);
+    items.push(layout({
+      content: labelColumns,
+      tooltipDescription: formatMessage(messages.columnsDescription),
+      disabled: false
+    }));
+  }
+  var blockTypes = availableWrapperBlockTypes || [];
+  var codeblockData = blockTypes.find(function (type) {
+    return type.name === 'codeblock';
+  });
+  var panelData = blockTypes.find(function (type) {
+    return type.name === 'panel';
+  });
+  var blockquoteData = blockTypes.find(function (type) {
+    return 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) {
+    var 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) {
+    var labelStatus = formatMessage(messages.status);
+    items.push(status({
+      content: labelStatus,
+      tooltipDescription: formatMessage(messages.statusDescription),
+      disabled: false
+    }));
+  }
+  if (insertMenuItems) {
+    items.push.apply(items, _toConsumableArray(insertMenuItems));
+  }
+  if (showElementBrowserLink) {
+    items.push(more({
+      content: formatMessage(messages.viewMore),
+      disabled: false
+    }));
+  }
+  var buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
+  var remainingItems = items.slice(numberOfButtons);
+  var dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
+  return [buttonItems, dropdownItems];
+};
+export var createItems = memoizeOne(createInsertBlockItems, shallowEquals);

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

@@ -0,0 +1,44 @@
+/** @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';
+var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
+  return (
+    // 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 var DropDownButton = /*#__PURE__*/React.memo(function (props) {
+  return 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": "".concat(props.label, " /"),
+    iconBefore: jsx(DropDownButtonIcon, {
+      label: ""
+    }),
+    title: jsx(ToolTipContent, {
+      description: props.label,
+      shortcutOverride: "/"
+    })
+  });
+});