@sanity/form-builder/lib/inputs/PortableText/toolbar/helpers.js

Sanity form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getActionIcon = getActionIcon;
exports.getBlockStyles = getBlockStyles;
exports.getInsertMenuItems = getInsertMenuItems;
exports.getPTEToolbarActionGroups = getPTEToolbarActionGroups;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _icons = require("@sanity/icons");
var _portableTextEditor = require("@sanity/portable-text-editor");
var _react = _interopRequireDefault(require("react"));
var _CustomIcon = require("./CustomIcon");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function getPTEFormatActions(editor, disabled, hotkeyOpts) {
  var features = _portableTextEditor.PortableTextEditor.getPortableTextFeatures(editor);
  return features.decorators.map(decorator => {
    var _decorator$blockEdito;
    var shortCutKey = Object.keys(hotkeyOpts.marks).find(key => hotkeyOpts.marks[key] === decorator.value);
    var hotkeys;
    if (shortCutKey) {
      hotkeys = [shortCutKey];
    }
    return {
      type: 'format',
      disabled: disabled,
      icon: (_decorator$blockEdito = decorator.blockEditor) === null || _decorator$blockEdito === void 0 ? void 0 : _decorator$blockEdito.icon,
      key: decorator.value,
      handle: () => {
        _portableTextEditor.PortableTextEditor.toggleMark(editor, decorator.value);
        _portableTextEditor.PortableTextEditor.focus(editor);
      },
      hotkeys,
      title: decorator.title
    };
  });
}
function getPTEListActions(editor, disabled) {
  var features = _portableTextEditor.PortableTextEditor.getPortableTextFeatures(editor);
  return features.lists.map(listItem => {
    var _listItem$blockEditor;
    return {
      type: 'listStyle',
      key: listItem.value,
      disabled: disabled,
      icon: (_listItem$blockEditor = listItem.blockEditor) === null || _listItem$blockEditor === void 0 ? void 0 : _listItem$blockEditor.icon,
      handle: () => {
        _portableTextEditor.PortableTextEditor.toggleList(editor, listItem.value);
      },
      title: listItem.title
    };
  });
}
function getAnnotationIcon(item) {
  return (0, _get2.default)(item, 'icon') || (0, _get2.default)(item, 'blockEditor.icon') || (0, _get2.default)(item, 'type.icon') || (0, _get2.default)(item, 'type.to.icon') || (0, _get2.default)(item, 'type.to[0].icon');
}
function getPTEAnnotationActions(editor, disabled, onInsert) {
  var features = _portableTextEditor.PortableTextEditor.getPortableTextFeatures(editor);
  var focusChild = _portableTextEditor.PortableTextEditor.focusChild(editor);
  var hasText = focusChild && focusChild.text;
  return features.annotations.map(item => {
    return {
      type: 'annotation',
      disabled: !hasText || disabled,
      icon: getAnnotationIcon(item),
      key: item.value,
      handle: active => {
        if (active) {
          _portableTextEditor.PortableTextEditor.removeAnnotation(editor, item.type);
          _portableTextEditor.PortableTextEditor.focus(editor);
        } else {
          onInsert(item.type);
        }
      },
      title: item.title
    };
  });
}
function getPTEToolbarActionGroups(editor, disabled, onInsertAnnotation, hotkeyOpts) {
  return [{
    name: 'format',
    actions: getPTEFormatActions(editor, disabled, hotkeyOpts)
  }, {
    name: 'list',
    actions: getPTEListActions(editor, disabled)
  }, {
    name: 'annotation',
    actions: getPTEAnnotationActions(editor, disabled, onInsertAnnotation)
  }];
}
function getBlockStyles(features) {
  return features.styles.map(style => {
    return {
      key: "style-".concat(style.value),
      style: style.value,
      styleComponent: style && style.blockEditor && style.blockEditor.render,
      title: style.title
    };
  });
}
function getInsertMenuIcon(type, fallbackIcon) {
  var referenceIcon = (0, _get2.default)(type, 'to[0].icon');
  return type.icon || type.type && type.type.icon || referenceIcon || fallbackIcon;
}
function getInsertMenuItems(features, disabled, onInsertBlock, onInsertInline) {
  var blockItems = features.types.blockObjects.map((type, index) => ({
    handle: () => onInsertBlock(type),
    icon: getInsertMenuIcon(type, _icons.BlockElementIcon),
    inline: false,
    key: "block-".concat(index),
    type: type
  }));
  var inlineItems = features.types.inlineObjects.map((type, index) => ({
    handle: () => onInsertInline(type),
    icon: getInsertMenuIcon(type, _icons.InlineElementIcon),
    inline: true,
    key: "inline-".concat(index),
    type: type
  }));

  // Do not include items that are supposed to be hidden
  var filteredBlockItems = blockItems.concat(inlineItems).filter(item => {
    var _item$type;
    return !((_item$type = item.type) !== null && _item$type !== void 0 && _item$type.hidden);
  });
  return filteredBlockItems;
}
var annotationIcons = {
  link: _icons.LinkIcon
};
var formatIcons = {
  strong: _icons.BoldIcon,
  em: _icons.ItalicIcon,
  'strike-through': _icons.StrikethroughIcon,
  underline: _icons.UnderlineIcon,
  code: _icons.CodeIcon
};
var listStyleIcons = {
  number: _icons.OlistIcon,
  bullet: _icons.UlistIcon
};
function getActionIcon(action, active) {
  if (action.icon) {
    if (typeof action.icon === 'string') {
      return /*#__PURE__*/_react.default.createElement(_CustomIcon.CustomIcon, {
        active: active,
        icon: action.icon
      });
    }
    return action.icon;
  }
  if (action.type === 'annotation') {
    return annotationIcons[action.key] || _icons.UnknownIcon;
  }
  if (action.type === 'listStyle') {
    return listStyleIcons[action.key] || _icons.UnknownIcon;
  }
  return formatIcons[action.key] || _icons.UnknownIcon;
}