mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
55 lines (54 loc) • 3.82 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ViewLinkMenuContent;
const jsx_runtime_1 = require("react/jsx-runtime");
const Button_1 = __importDefault(require("@mui/material/Button"));
const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
const Link_1 = __importDefault(require("@mui/material/Link"));
const styles_1 = require("@mui/material/styles");
const core_1 = require("@tiptap/core");
const clsx_1 = require("clsx");
const truncate_1 = __importDefault(require("es-toolkit/compat/truncate"));
const useKeyDown_1 = __importDefault(require("../hooks/useKeyDown"));
const styles_2 = require("../styles");
const truncateMiddle_1 = __importDefault(require("../utils/truncateMiddle"));
const ViewLinkMenuContent_classes_1 = require("./ViewLinkMenuContent.classes");
const componentName = (0, styles_2.getUtilityComponentName)("ViewLinkMenuContent");
const ViewLinkMenuContentRoot = (0, styles_1.styled)("div", {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})({});
const ViewLinkMenuContentLinkPreviewText = (0, styles_1.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. */
function ViewLinkMenuContent(inProps) {
var _a, _b, _c;
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { editor, onCancel, onEdit, onRemove, labels, classes = {}, sx, } = props;
const linkRange = (0, core_1.getMarkRange)(editor.state.selection.$to, (0, core_1.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
(0, useKeyDown_1.default)("Escape", onCancel);
return ((0, jsx_runtime_1.jsxs)(ViewLinkMenuContentRoot, { className: (0, clsx_1.clsx)([ViewLinkMenuContent_classes_1.viewLinkMenuContentClasses.root, classes.root]), sx: sx, children: [(0, jsx_runtime_1.jsx)(ViewLinkMenuContentLinkPreviewText, { className: (0, clsx_1.clsx)([
ViewLinkMenuContent_classes_1.viewLinkMenuContentClasses.linkPreviewText,
classes.linkPreviewText,
]), children: (0, truncate_1.default)(linkText, {
length: 50,
omission: "…",
}) }), (0, jsx_runtime_1.jsx)(ViewLinkMenuContentLinkPreviewText, { className: (0, clsx_1.clsx)([
ViewLinkMenuContent_classes_1.viewLinkMenuContentClasses.linkPreviewText,
classes.linkPreviewText,
]), children: (0, jsx_runtime_1.jsx)(Link_1.default, { href: currentHref, target: "_blank", rel: "noopener", children: (0, truncateMiddle_1.default)(currentHref, 50) }) }), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, { sx: { px: 0 }, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Button_1.default, { 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" })] })] }));
}