@udecode/plate-ui-mention/dist/index.js

Media embed UI for Plate

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var plateCommon = require('@udecode/plate-common');
var plateMention = require('@udecode/plate-mention');
var plateUiCombobox = require('@udecode/plate-ui-combobox');
var plateStyledComponents = require('@udecode/plate-styled-components');
var _styled = require('styled-components');
var slateReact = require('slate-react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };
  return _extends.apply(this, arguments);
}

const MentionCombobox = ({
  pluginKey = plateMention.ELEMENT_MENTION,
  id = pluginKey,
  ...props
}) => {
  const editor = plateCommon.usePlateEditorRef();
  const {
    trigger
  } = plateCommon.getPluginOptions(editor, pluginKey);
  return /*#__PURE__*/React__default["default"].createElement(plateUiCombobox.Combobox, _extends({
    id: id,
    trigger: trigger,
    controlled: true,
    onSelectItem: plateMention.getMentionOnSelectItem({
      key: pluginKey
    })
  }, props));
};

const getMentionElementStyles = props => plateStyledComponents.createStyles({
  prefixClassNames: 'MentionElement',
  ...props
}, {
  root: [{
    "marginLeft": "1px",
    "marginRight": "1px",
    "marginTop": "0px",
    "marginBottom": "0px",
    "display": "inline-block",
    "verticalAlign": "baseline"
  }, props.selected && props.focused && {
    "--tw-shadow": "0 0 0 2px #B4D5FF",
    "--tw-shadow-colored": "0 0 0 2px var(--tw-shadow-color)",
    "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
  }, _styled.css(["padding:3px 3px 2px;border-radius:4px;background-color:#eee;font-size:0.9em;"])]
});

const MentionElement = props => {
  const {
    attributes,
    children,
    nodeProps,
    element,
    prefix,
    onClick,
    renderLabel
  } = props;
  const rootProps = plateStyledComponents.getRootProps(props);
  const selected = slateReact.useSelected();
  const focused = slateReact.useFocused();
  const styles = getMentionElementStyles({ ...props,
    selected,
    focused
  });
  return /*#__PURE__*/React__default["default"].createElement(_StyledSpan$1, _extends({}, attributes, {
    "data-slate-value": element.value,
    className: styles.root.className,
    contentEditable: false,
    onClick: plateCommon.getHandler(onClick, element)
  }, rootProps, nodeProps, {
    $_css: styles.root.css
  }), prefix, renderLabel ? renderLabel(element) : element.value, children);
};

var _StyledSpan$1 = _styled__default["default"]("span").withConfig({
  displayName: "MentionElement___StyledSpan",
  componentId: "sc-1oqi1vc-0"
})(["", ""], p => p.$_css);

const getMentionInputElementStyles = props => plateStyledComponents.createStyles({
  prefixClassNames: 'MentionInputElement',
  ...props
}, {
  root: [{
    "marginLeft": "1px",
    "marginRight": "1px",
    "marginTop": "0px",
    "marginBottom": "0px",
    "display": "inline-block",
    "verticalAlign": "baseline"
  }, props.selected && props.focused && {
    "--tw-shadow": "0 0 0 2px #B4D5FF",
    "--tw-shadow-colored": "0 0 0 2px var(--tw-shadow-color)",
    "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
  }, _styled.css(["padding:3px 3px 2px;border-radius:4px;background-color:#eee;font-size:0.9em;"])]
});

const MentionInputElement = props => {
  const {
    attributes,
    children,
    nodeProps,
    element,
    as,
    onClick
  } = props;
  const rootProps = plateStyledComponents.getRootProps(props);
  const selected = slateReact.useSelected();
  const focused = slateReact.useFocused();
  const styles = getMentionInputElementStyles({ ...props,
    selected,
    focused
  });
  return /*#__PURE__*/React__default["default"].createElement(_StyledSpan, _extends({}, attributes, {
    as: as,
    "data-slate-value": element.value,
    className: styles.root.className,
    onClick: plateCommon.getHandler(onClick, element)
  }, rootProps, nodeProps, {
    $_css: styles.root.css
  }), children);
};

var _StyledSpan = _styled__default["default"]("span").withConfig({
  displayName: "MentionInputElement___StyledSpan",
  componentId: "sc-7amwcf-0"
})(["", ""], p => p.$_css);

exports.MentionCombobox = MentionCombobox;
exports.MentionElement = MentionElement;
exports.MentionInputElement = MentionInputElement;
exports.getMentionElementStyles = getMentionElementStyles;
exports.getMentionInputElementStyles = getMentionInputElementStyles;
//# sourceMappingURL=index.js.map