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

Link UI for Plate

'use strict';

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

var _styled = require('styled-components');
var React = require('react');
var plateLink = require('@udecode/plate-link');
var plateUiButton = require('@udecode/plate-ui-button');
var plateUiToolbar = require('@udecode/plate-ui-toolbar');
var plateStyledComponents = require('@udecode/plate-styled-components');
var plateCommon = require('@udecode/plate-common');

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

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

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

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

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

var _StyledDiv2 = _styled__default["default"]("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__default["default"](plateLink.FloatingLink.TextInput).withConfig({
  displayName: "PlateFloatingLink___StyledFloatingLinkTextInput",
  componentId: "sc-1bralnd-3"
})(["", ""], plateUiToolbar.floatingInputCss);

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

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

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

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

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

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

const getLinkElementStyles = props => plateStyledComponents.createStyles({
  prefixClassNames: 'LinkElement',
  ...props
}, {
  root: _styled.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__default["default"].createElement(_StyledLinkRoot, _extends({}, rootProps, {
    $_css: root.css
  }));
};

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

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

exports.LinkElement = LinkElement;
exports.LinkToolbarButton = LinkToolbarButton;
exports.PlateFloatingLink = PlateFloatingLink;
exports.getLinkElementStyles = getLinkElementStyles;
//# sourceMappingURL=index.js.map