mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
31 lines (30 loc) • 1.39 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import { styled, useThemeProps } from "@mui/material/styles";
import { clsx } from "clsx";
import { getUtilityComponentName } from "../styles";
import DebounceRender from "../utils/DebounceRender";
import { menuControlsContainerClasses, } from "./MenuControlsContainer.classes";
const componentName = getUtilityComponentName("MenuControlsContainer");
const MenuControlsContainerRoot = styled(Box, {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
display: "flex",
rowGap: theme.spacing(0.3),
columnGap: theme.spacing(0.3),
alignItems: "center",
flexWrap: "wrap",
}));
/** Provides consistent spacing between different editor controls components. */
export default function MenuControlsContainer(inProps) {
const props = useThemeProps({ props: inProps, name: componentName });
const { children, className, classes = {}, sx, debounced, DebounceProps, ...boxProps } = props;
const content = (_jsx(MenuControlsContainerRoot, { ...boxProps, className: clsx([
menuControlsContainerClasses.root,
className,
classes.root,
]), sx: sx, children: children }));
return debounced ? (_jsx(DebounceRender, { ...DebounceProps, children: content })) : (content);
}