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

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

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createItems = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _item = require("./item");
+var _messages2 = require("./messages");
+var _shallowEquals = require("./shallow-equals");
+var _sortItems = require("./sort-items");
+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) { (0, _defineProperty2.default)(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; }
+var buttonToItem = (0, _memoize.default)(function (button) {
+  return _objectSpread(_objectSpread({}, button), {}, {
+    title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: button.content,
+      shortcutOverride: button.shortcut
+    })
+  });
+});
+var buttonToDropdownItem = (0, _memoizeOne.default)(function (title) {
+  return (0, _memoize.default)(function (button) {
+    return _objectSpread(_objectSpread({}, button), {}, {
+      title: /*#__PURE__*/_react.default.createElement(_keymaps.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((0, _item.action)({
+      content: formatMessage(_messages2.messages.action),
+      tooltipDescription: formatMessage(_messages2.messages.actionDescription),
+      disabled: false
+    }));
+  }
+  if (linkSupported) {
+    items.push((0, _item.link)({
+      content: formatMessage(_messages2.messages.link),
+      tooltipDescription: formatMessage(_messages2.messages.linkDescription),
+      disabled: !!linkDisabled,
+      'aria-haspopup': 'dialog'
+    }));
+  }
+  if (mediaSupported && mediaUploadsEnabled) {
+    items.push((0, _item.media)({
+      content: formatMessage(_messages2.messages.addMediaFiles),
+      tooltipDescription: formatMessage(_messages2.messages.mediaFilesDescription),
+      disabled: false
+    }));
+  }
+  if (imageUploadSupported) {
+    items.push((0, _item.imageUpload)({
+      content: formatMessage(_messages2.messages.image),
+      disabled: !imageUploadEnabled
+    }));
+  }
+  if (mentionsSupported) {
+    items.push((0, _item.mention)({
+      content: formatMessage(_messages2.messages.mention),
+      tooltipDescription: formatMessage(_messages2.messages.mentionDescription),
+      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+      'aria-haspopup': 'listbox'
+    }));
+  }
+  if (emojiProvider) {
+    items.push((0, _item.emoji)({
+      content: formatMessage(_messages2.messages.emoji),
+      tooltipDescription: formatMessage(_messages2.messages.emojiDescription),
+      disabled: emojiDisabled || !isTypeAheadAllowed,
+      'aria-haspopup': 'dialog'
+    }));
+  }
+  if (tableSupported) {
+    items.push((0, _item.table)({
+      content: formatMessage(_messages2.messages.table),
+      tooltipDescription: formatMessage(_messages2.messages.tableDescription),
+      disabled: false
+    }));
+  }
+  if (layoutSectionEnabled) {
+    var labelColumns = formatMessage(_messages2.messages.columns);
+    items.push((0, _item.layout)({
+      content: labelColumns,
+      tooltipDescription: formatMessage(_messages2.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((0, _item.codeblock)({
+      content: formatMessage(codeblockData.title),
+      tooltipDescription: formatMessage(_messages.blockTypeMessages.codeblockDescription),
+      disabled: false,
+      shortcut: '```'
+    }));
+  }
+  if (panelData) {
+    items.push((0, _item.panel)({
+      content: formatMessage(panelData.title),
+      tooltipDescription: formatMessage(_messages.blockTypeMessages.infoPanelDescription),
+      disabled: false
+    }));
+  }
+  if (blockquoteData) {
+    items.push((0, _item.blockquote)({
+      content: formatMessage(blockquoteData.title),
+      tooltipDescription: formatMessage(_messages.blockTypeMessages.blockquoteDescription),
+      disabled: false,
+      shortcut: '>'
+    }));
+  }
+  if (decisionSupported) {
+    items.push((0, _item.decision)({
+      content: formatMessage(_messages2.messages.decision),
+      tooltipDescription: formatMessage(_messages2.messages.decisionDescription),
+      disabled: false
+    }));
+  }
+  if (horizontalRuleEnabled && schema.nodes.rule) {
+    items.push((0, _item.horizontalrule)({
+      content: formatMessage(_messages2.messages.horizontalRule),
+      tooltipDescription: formatMessage(_messages2.messages.horizontalRuleDescription),
+      disabled: false
+    }));
+  }
+  if (expandEnabled && schema.nodes.expand) {
+    items.push((0, _item.expand)({
+      content: formatMessage(_messages2.messages.expand),
+      tooltipDescription: formatMessage(_messages2.messages.expandDescription),
+      disabled: false
+    }));
+  }
+  if (dateEnabled) {
+    var labelDate = formatMessage(_messages2.messages.date);
+    items.push((0, _item.date)({
+      content: labelDate,
+      tooltipDescription: formatMessage(_messages2.messages.dateDescription),
+      disabled: false
+    }));
+  }
+  if (placeholderTextEnabled) {
+    items.push((0, _item.placeholder)({
+      content: formatMessage(_messages2.messages.placeholderText),
+      disabled: false
+    }));
+  }
+  if (nativeStatusSupported) {
+    var labelStatus = formatMessage(_messages2.messages.status);
+    items.push((0, _item.status)({
+      content: labelStatus,
+      tooltipDescription: formatMessage(_messages2.messages.statusDescription),
+      disabled: false
+    }));
+  }
+  if (insertMenuItems) {
+    items.push.apply(items, (0, _toConsumableArray2.default)(insertMenuItems));
+  }
+  if (showElementBrowserLink) {
+    items.push((0, _item.more)({
+      content: formatMessage(_messages2.messages.viewMore),
+      disabled: false
+    }));
+  }
+  var buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
+  var remainingItems = items.slice(numberOfButtons);
+  var dropdownItems = (!isNewMenuEnabled ? (0, _sortItems.sortItems)(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(_messages2.messages.insertMenu)));
+  return [buttonItems, dropdownItems];
+};
+var createItems = exports.createItems = (0, _memoizeOne.default)(createInsertBlockItems, _shallowEquals.shallowEquals);

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropDownButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _styles2 = require("./styles");
+/** @jsx jsx */
+
+var DropDownButtonIcon = /*#__PURE__*/_react.default.memo(function (props) {
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _styles2.triggerWrapper
+    }, (0, _react2.jsx)(_add.default, {
+      label: props.label
+    }), (0, _react2.jsx)("span", {
+      css: _styles.expandIconWrapperStyle
+    }, (0, _react2.jsx)(_chevronDown.default, {
+      label: ""
+    })))
+  );
+});
+var DropDownButton = exports.DropDownButton = /*#__PURE__*/_react.default.memo(function (props) {
+  return (0, _react2.jsx)(_uiMenu.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: (0, _react2.jsx)(DropDownButtonIcon, {
+      label: ""
+    }),
+    title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+      description: props.label,
+      shortcutOverride: "/"
+    })
+  });
+});