mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
71 lines (70 loc) • 3.33 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MenuBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
const styles_1 = require("@mui/material/styles");
const clsx_1 = require("clsx");
const MenuBar_classes_1 = require("./MenuBar.classes");
const styles_2 = require("./styles");
const componentName = (0, styles_2.getUtilityComponentName)("MenuBar");
const MenuBarRoot = (0, styles_1.styled)(Collapse_1.default, {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => [
styles.root,
props.ownerState.disableSticky ? styles.nonSticky : styles.sticky,
],
})(({ theme, ownerState }) => (Object.assign({ borderBottomColor: theme.palette.divider, borderBottomStyle: "solid", borderBottomWidth: 1 }, (ownerState.disableSticky
? {}
: {
position: "sticky",
top: ownerState.stickyOffset,
zIndex: styles_2.Z_INDEXES.MENU_BAR,
background: theme.palette.background.default,
}))));
const MenuBarContent = (0, styles_1.styled)("div", {
name: componentName,
slot: "content",
overridesResolver: (props, styles) => styles.content,
})({});
/**
* A collapsible, optionally-sticky container for showing editor controls atop
* the editor content.
*/
function MenuBar(inProps) {
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { hide, disableSticky, stickyOffset = 0, children, className, classes = {}, unmountOnExit = true, sx } = props, collapseProps = __rest(props, ["hide", "disableSticky", "stickyOffset", "children", "className", "classes", "unmountOnExit", "sx"]);
const ownerState = {
hide,
disableSticky,
stickyOffset,
unmountOnExit,
};
return ((0, jsx_runtime_1.jsx)(MenuBarRoot, Object.assign({}, collapseProps, { in: !hide, unmountOnExit: unmountOnExit,
// Note that we have to apply the sticky CSS classes to the container
// (rather than the menu bar itself) in order for it to behave
// properly
className: (0, clsx_1.clsx)([
MenuBar_classes_1.menuBarClasses.root,
classes.root,
disableSticky
? [MenuBar_classes_1.menuBarClasses.nonSticky, classes.nonSticky]
: [MenuBar_classes_1.menuBarClasses.sticky, classes.sticky],
className,
]), ownerState: ownerState, sx: sx, children: (0, jsx_runtime_1.jsx)(MenuBarContent, { className: (0, clsx_1.clsx)([MenuBar_classes_1.menuBarClasses.content, classes.content]), ownerState: ownerState, children: children }) })));
}