mui-tiptap/dist/esm/RichTextContent.js

A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap

import { jsx as _jsx } from "react/jsx-runtime";
import { styled, useThemeProps } from "@mui/material/styles";
import { EditorContent } from "@tiptap/react";
import { clsx } from "clsx";
import { useMemo } from "react";
import { richTextContentClasses, } from "./RichTextContent.classes";
import { useRichTextEditorContext } from "./context";
import { getEditorStyles, getUtilityComponentName } from "./styles";
const componentName = getUtilityComponentName("RichTextContent");
const RichTextContentRoot = styled(EditorContent, {
    name: componentName,
    slot: "root",
    overridesResolver: (props, styles) => [
        styles.root,
        props.ownerState.editable ? styles.editable : styles.readonly,
    ],
})(({ theme, ownerState }) => ownerState.disableDefaultStyles
    ? {}
    : {
        "& .ProseMirror": { ...getEditorStyles(theme) },
    });
/**
 * A component for rendering a MUI-styled version of Tiptap rich text editor
 * content.
 *
 * Must be a child of the RichTextEditorProvider so that the `editor` context is
 * available.
 */
export default function RichTextContent(inProps) {
    const props = useThemeProps({ props: inProps, name: componentName });
    const { innerRef, className, classes = {}, disableDefaultStyles = false, sx, } = props;
    const editor = useRichTextEditorContext();
    const editable = !!(editor === null || editor === void 0 ? void 0 : editor.isEditable);
    const ownerState = {
        editable,
        disableDefaultStyles,
    };
    const editorClasses = useMemo(() => clsx([
        richTextContentClasses.root,
        className,
        classes.root,
        editable
            ? [richTextContentClasses.editable, classes.editable]
            : [richTextContentClasses.readonly, classes.readonly],
    ]), [className, classes.root, classes.editable, classes.readonly, editable]);
    return (_jsx(RichTextContentRoot, { editor: editor, ...(innerRef ? { innerRef } : {}), ownerState: ownerState, className: editorClasses, sx: sx }));
}