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

Media embed UI for Plate

import React from 'react';
import { usePlateEditorRef, getPluginOptions, getHandler } from '@udecode/plate-common';
import { getMentionOnSelectItem, ELEMENT_MENTION } from '@udecode/plate-mention';
import { Combobox } from '@udecode/plate-ui-combobox';
import { createStyles, getRootProps } from '@udecode/plate-styled-components';
import _styled, { css } from 'styled-components';
import { useSelected, useFocused } from 'slate-react';

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 = ELEMENT_MENTION,
  id = pluginKey,
  ...props
}) => {
  const editor = usePlateEditorRef();
  const {
    trigger
  } = getPluginOptions(editor, pluginKey);
  return /*#__PURE__*/React.createElement(Combobox, _extends({
    id: id,
    trigger: trigger,
    controlled: true,
    onSelectItem: getMentionOnSelectItem({
      key: pluginKey
    })
  }, props));
};

const getMentionElementStyles = props => 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)"
  }, 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 = getRootProps(props);
  const selected = useSelected();
  const focused = useFocused();
  const styles = getMentionElementStyles({ ...props,
    selected,
    focused
  });
  return /*#__PURE__*/React.createElement(_StyledSpan$1, _extends({}, attributes, {
    "data-slate-value": element.value,
    className: styles.root.className,
    contentEditable: false,
    onClick: getHandler(onClick, element)
  }, rootProps, nodeProps, {
    $_css: styles.root.css
  }), prefix, renderLabel ? renderLabel(element) : element.value, children);
};

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

const getMentionInputElementStyles = props => 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)"
  }, 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 = getRootProps(props);
  const selected = useSelected();
  const focused = useFocused();
  const styles = getMentionInputElementStyles({ ...props,
    selected,
    focused
  });
  return /*#__PURE__*/React.createElement(_StyledSpan, _extends({}, attributes, {
    as: as,
    "data-slate-value": element.value,
    className: styles.root.className,
    onClick: getHandler(onClick, element)
  }, rootProps, nodeProps, {
    $_css: styles.root.css
  }), children);
};

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

export { MentionCombobox, MentionElement, MentionInputElement, getMentionElementStyles, getMentionInputElementStyles };
//# sourceMappingURL=index.es.js.map