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

Link UI for Plate

import _styled, { css } from 'styled-components';
import React from 'react';
import { FloatingLink, useFloatingLinkSelectors, LinkIcon, ShortTextIcon, LaunchIcon, LinkOffIcon, Link, ELEMENT_LINK, triggerFloatingLink } from '@udecode/plate-link';
import { plateButtonCss } from '@udecode/plate-ui-button';
import { floatingInputCss, floatingRowCss, floatingButtonCss, floatingRootCss, FloatingInputWrapper, FloatingIconWrapper, FloatingVerticalDivider, ToolbarButton } from '@udecode/plate-ui-toolbar';
import { createStyles } from '@udecode/plate-styled-components';
import { usePlateEditorState, useEventPlateId, getPluginType, someNode } from '@udecode/plate-common';

const PlateFloatingLink = ({
  readOnly
}) => {
  const isEditing = useFloatingLinkSelectors().isEditing();
  if (readOnly) return null;
  const input = /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(FloatingInputWrapper, null, /*#__PURE__*/React.createElement(FloatingIconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
    width: 18
  })), /*#__PURE__*/React.createElement(_StyledFloatingLinkUrlInput, {
    placeholder: "Paste link"
  })), /*#__PURE__*/React.createElement(_StyledDiv2, null), /*#__PURE__*/React.createElement(FloatingInputWrapper, null, /*#__PURE__*/React.createElement(FloatingIconWrapper, null, /*#__PURE__*/React.createElement(ShortTextIcon, {
    width: 18
  })), /*#__PURE__*/React.createElement(_StyledFloatingLinkTextInput, {
    placeholder: "Text to display"
  })));
  const editContent = !isEditing ? /*#__PURE__*/React.createElement(_StyledDiv3, null, /*#__PURE__*/React.createElement(_StyledFloatingLinkEditButton, null, "Edit link"), /*#__PURE__*/React.createElement(FloatingVerticalDivider, null), /*#__PURE__*/React.createElement(_StyledFloatingLinkOpenLinkButton, null, /*#__PURE__*/React.createElement(LaunchIcon, {
    width: 18
  })), /*#__PURE__*/React.createElement(FloatingVerticalDivider, null), /*#__PURE__*/React.createElement(_StyledFloatingLinkUnlinkButton, null, /*#__PURE__*/React.createElement(LinkOffIcon, {
    width: 18
  }))) : input;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StyledFloatingLinkInsertRoot, null, input), /*#__PURE__*/React.createElement(_StyledFloatingLinkEditRoot, null, editContent));
};

var _StyledDiv = _styled("div").withConfig({
  displayName: "PlateFloatingLink___StyledDiv",
  componentId: "sc-1bralnd-0"
})({
  "display": "flex",
  "width": "330px",
  "flexDirection": "column"
});

var _StyledFloatingLinkUrlInput = _styled(FloatingLink.UrlInput).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkUrlInput",
  componentId: "sc-1bralnd-1"
})(["", ""], floatingInputCss);

var _StyledDiv2 = _styled("div").withConfig({
  displayName: "PlateFloatingLink___StyledDiv2",
  componentId: "sc-1bralnd-2"
})({
  "height": "1px",
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(229 231 235 / var(--tw-bg-opacity))"
});

var _StyledFloatingLinkTextInput = _styled(FloatingLink.TextInput).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkTextInput",
  componentId: "sc-1bralnd-3"
})(["", ""], floatingInputCss);

var _StyledDiv3 = _styled("div").withConfig({
  displayName: "PlateFloatingLink___StyledDiv3",
  componentId: "sc-1bralnd-4"
})(["", ""], floatingRowCss);

var _StyledFloatingLinkEditButton = _styled(FloatingLink.EditButton).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkEditButton",
  componentId: "sc-1bralnd-5"
})(["", ""], plateButtonCss);

var _StyledFloatingLinkOpenLinkButton = _styled(FloatingLink.OpenLinkButton).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkOpenLinkButton",
  componentId: "sc-1bralnd-6"
})(["", ""], floatingButtonCss);

var _StyledFloatingLinkUnlinkButton = _styled(FloatingLink.UnlinkButton).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkUnlinkButton",
  componentId: "sc-1bralnd-7"
})(["", ""], floatingButtonCss);

var _StyledFloatingLinkInsertRoot = _styled(FloatingLink.InsertRoot).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkInsertRoot",
  componentId: "sc-1bralnd-8"
})(["", ""], floatingRootCss);

var _StyledFloatingLinkEditRoot = _styled(FloatingLink.EditRoot).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkEditRoot",
  componentId: "sc-1bralnd-9"
})(["", ""], floatingRootCss);

const getLinkElementStyles = props => createStyles({
  prefixClassNames: 'LinkElement',
  ...props
}, {
  root: css(["color:#0078d4;text-decoration:initial;:hover,:visited:hover{color:#004578;text-decoration:underline;}:visited{color:#0078d4;}"])
});

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 LinkElement = props => {
  const {
    as,
    ...rootProps
  } = props;
  const {
    root
  } = getLinkElementStyles(props);
  return /*#__PURE__*/React.createElement(_StyledLinkRoot, _extends({}, rootProps, {
    $_css: root.css
  }));
};

var _StyledLinkRoot = _styled(Link.Root).withConfig({
  displayName: "LinkElement___StyledLinkRoot",
  componentId: "sc-1wp6xlj-0"
})(["", ""], p => p.$_css);

const LinkToolbarButton = ({
  id,
  getLinkUrl,
  ...props
}) => {
  const editor = usePlateEditorState(useEventPlateId(id));
  const type = getPluginType(editor, ELEMENT_LINK);
  const isLink = !!(editor !== null && editor !== void 0 && editor.selection) && someNode(editor, {
    match: {
      type
    }
  });
  return /*#__PURE__*/React.createElement(ToolbarButton, _extends({
    tooltip: {
      content: 'Link'
    },
    active: isLink,
    onClick: e => {
      e.preventDefault();
      e.stopPropagation();
      triggerFloatingLink(editor, {
        focused: true
      });
    }
  }, props));
};

export { LinkElement, LinkToolbarButton, PlateFloatingLink, getLinkElementStyles };
//# sourceMappingURL=index.es.js.map