mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
49 lines (48 loc) • 3.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Button from "@mui/material/Button";
import DialogActions from "@mui/material/DialogActions";
import Link from "@mui/material/Link";
import { styled, useThemeProps } from "@mui/material/styles";
import { getMarkRange, getMarkType } from "@tiptap/core";
import { clsx } from "clsx";
import truncate from "es-toolkit/compat/truncate";
import useKeyDown from "../hooks/useKeyDown";
import { getUtilityComponentName } from "../styles";
import truncateMiddle from "../utils/truncateMiddle";
import { viewLinkMenuContentClasses, } from "./ViewLinkMenuContent.classes";
const componentName = getUtilityComponentName("ViewLinkMenuContent");
const ViewLinkMenuContentRoot = styled("div", {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})({});
const ViewLinkMenuContentLinkPreviewText = styled("div", {
name: componentName,
slot: "linkPreviewText",
overridesResolver: (props, styles) => styles.linkPreviewText,
})({
overflowWrap: "anywhere",
});
/** Shown when a user is viewing the details of an existing Link for Tiptap. */
export default function ViewLinkMenuContent(inProps) {
var _a, _b, _c;
const props = useThemeProps({ props: inProps, name: componentName });
const { editor, onCancel, onEdit, onRemove, labels, classes = {}, sx, } = props;
const linkRange = getMarkRange(editor.state.selection.$to, getMarkType("link", editor.schema));
const linkText = linkRange
? editor.state.doc.textBetween(linkRange.from, linkRange.to)
: "";
const currentHref = (_a = editor.getAttributes("link").href) !== null && _a !== void 0 ? _a : "";
// If the user presses escape, we should cancel
useKeyDown("Escape", onCancel);
return (_jsxs(ViewLinkMenuContentRoot, { className: clsx([viewLinkMenuContentClasses.root, classes.root]), sx: sx, children: [_jsx(ViewLinkMenuContentLinkPreviewText, { className: clsx([
viewLinkMenuContentClasses.linkPreviewText,
classes.linkPreviewText,
]), children: truncate(linkText, {
length: 50,
omission: "…",
}) }), _jsx(ViewLinkMenuContentLinkPreviewText, { className: clsx([
viewLinkMenuContentClasses.linkPreviewText,
classes.linkPreviewText,
]), children: _jsx(Link, { href: currentHref, target: "_blank", rel: "noopener", children: truncateMiddle(currentHref, 50) }) }), _jsxs(DialogActions, { sx: { px: 0 }, children: [_jsx(Button, { onClick: onEdit, color: "primary", variant: "outlined", size: "small", children: (_b = labels === null || labels === void 0 ? void 0 : labels.viewLinkEditButtonLabel) !== null && _b !== void 0 ? _b : "Edit" }), _jsx(Button, { onClick: onRemove, color: "error", variant: "outlined", size: "small", children: (_c = labels === null || labels === void 0 ? void 0 : labels.viewLinkRemoveButtonLabel) !== null && _c !== void 0 ? _c : "Remove" })] })] }));
}