mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
118 lines (117 loc) • 6.62 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = HeadingWithAnchorComponent;
const jsx_runtime_1 = require("react/jsx-runtime");
const Link_1 = __importDefault(require("@mui/icons-material/Link"));
const styles_1 = require("@mui/material/styles");
const core_1 = require("@tiptap/core");
const react_1 = require("@tiptap/react");
const clsx_1 = require("clsx");
const react_2 = require("react");
const styles_2 = require("../styles");
const slugify_1 = __importDefault(require("../utils/slugify"));
const HeadingWithAnchorComponent_classes_1 = require("./HeadingWithAnchorComponent.classes");
const componentName = (0, styles_2.getUtilityComponentName)("HeadingWithAnchorComponent");
const HeadingWithAnchorComponentRoot = (0, styles_1.styled)(react_1.NodeViewWrapper, {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
// Unlike default behavior of `styled`, allow the 'as' prop be forwarded to
// NodeViewWrapper, which itself supports `as`. Otherwise providing `as` will
// sidestep using NodeViewWrapper altogether.
shouldForwardProp: (prop) => prop !== "ownerState" && prop !== "theme" && prop !== "sx",
})({
// Reference the "link" class defined below so that when the header is
// hovered over, we make the anchor link visible.
[`&:hover .${HeadingWithAnchorComponent_classes_1.headingWithAnchorComponentClasses.link}`]: {
opacity: 100,
},
});
const HeadingWithAnchorComponentContainer = (0, styles_1.styled)("span", {
name: componentName,
slot: "container",
overridesResolver: (props, styles) => styles.container,
})({
// Use inline-block so that the container is only as big as the inner
// heading content
display: "inline-block",
// Use relative position so that the link is positioned relative to
// the inner heading content position (via this common container)
position: "relative",
});
const HeadingWithAnchorComponentLink = (0, styles_1.styled)("a", {
name: componentName,
slot: "link",
overridesResolver: (props, styles) => styles.link,
})(({ theme }) => ({
position: "absolute",
left: -21,
color: `${theme.palette.text.secondary} !important`,
opacity: 0, // This is changed by the root hover above
transition: theme.transitions.create("opacity"),
textDecoration: "none",
outline: "none",
[theme.breakpoints.down("sm")]: {
left: -18,
},
// As described here https://github.com/ueberdosis/tiptap/issues/3775,
// updates to editor isEditable do not trigger re-rendering of node views.
// Even editor state changes external to a given ReactNodeView component
// will not trigger re-render (which is probably a good thing most of the
// time, in terms of performance). As such, we always render the link in the
// DOM, but hide it with CSS when the editor is editable.
'.ProseMirror[contenteditable="true"] &': {
display: "none",
},
}));
const HeadingWithAnchorComponentLinkIcon = (0, styles_1.styled)(Link_1.default, {
name: componentName,
slot: "linkIcon",
overridesResolver: (props, styles) => styles.linkIcon,
})(({ theme }) => ({
// Looks better to have at an angle, similar to the GitHub icon
transform: "rotate(-45deg)",
fontSize: "1.25rem",
[theme.breakpoints.down("sm")]: {
fontSize: "1.15rem",
},
}));
function HeadingWithAnchorComponent(inProps) {
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { editor, node, extension, classes = {}, sx } = props;
// Some of the logic here is based on the renderHTML definition from the
// original Heading Node
// (https://github.com/ueberdosis/tiptap/blob/c9eb6a6299796450c7c1cfdc3552d76070c78c65/packages/extension-heading/src/heading.ts#L58-L65)
const hasLevel = extension.options.levels.includes(node.attrs.level);
const level = hasLevel ? node.attrs.level : extension.options.levels[0];
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
const HeadingTag = `h${level}`;
// Create an anchor ID based on the text content of the header (like
// GitHub/GitLab do). Note that we use Tiptap's `getText` rather than
// `node.textContent` so that nodes like Mentions can produce text for this
// purpose (see https://github.com/ueberdosis/tiptap/pull/1875 and
// https://github.com/ueberdosis/tiptap/issues/1336 for instance)
const textSerializers = (0, react_2.useMemo)(() => (0, core_1.getTextSerializersFromSchema)(editor.schema), [editor.schema]);
const headingId = (0, slugify_1.default)((0, core_1.getText)(node, {
textSerializers: textSerializers,
}));
return ((0, jsx_runtime_1.jsx)(HeadingWithAnchorComponentRoot, Object.assign({ as: HeadingTag, id: headingId }, extension.options.HTMLAttributes, { className: (0, clsx_1.clsx)([HeadingWithAnchorComponent_classes_1.headingWithAnchorComponentClasses.root, classes.root]),
// Handle @tiptap/extension-text-align. Ideally we'd be able to inherit
// this style from TextAlign's GlobalAttributes directly, but those are
// only applied via `renderHTML` and not the `NodeView` renderer
// (https://github.com/ueberdosis/tiptap/blob/6c34dec33ac39c9f037a0a72e4525f3fc6d422bf/packages/extension-text-align/src/text-align.ts#L43-L49),
// so we have to do this manually/redundantly here.
style: { textAlign: node.attrs.textAlign }, sx: sx, children: (0, jsx_runtime_1.jsxs)(HeadingWithAnchorComponentContainer, { className: (0, clsx_1.clsx)([
HeadingWithAnchorComponent_classes_1.headingWithAnchorComponentClasses.container,
classes.container,
]), children: [(0, jsx_runtime_1.jsx)(HeadingWithAnchorComponentLink, { href: `#${headingId}`, contentEditable: false, className: (0, clsx_1.clsx)([
HeadingWithAnchorComponent_classes_1.headingWithAnchorComponentClasses.link,
classes.link,
]), children: (0, jsx_runtime_1.jsx)(HeadingWithAnchorComponentLinkIcon, { className: (0, clsx_1.clsx)([
HeadingWithAnchorComponent_classes_1.headingWithAnchorComponentClasses.linkIcon,
classes.linkIcon,
]) }) }), (0, jsx_runtime_1.jsx)(react_1.NodeViewContent, { as: "span" })] }) })));
}