@mantine/tiptap
Version:
Rich text editor based on tiptap
78 lines (77 loc) • 3.21 kB
JavaScript
"use client";
require("../_virtual/_rolldown/runtime.cjs");
const require_RichTextEditor_module = require("../RichTextEditor.module.cjs");
const require_RichTextEditor_context = require("../RichTextEditor.context.cjs");
let _mantine_core = require("@mantine/core");
let _tiptap_react = require("@tiptap/react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorControl.tsx
const defaultProps = { interactive: true };
const RichTextEditorControl = (0, _mantine_core.factory)((_props) => {
const { classNames, className, style, styles, vars, interactive, active, onMouseDown, disabled, ...others } = (0, _mantine_core.useProps)("RichTextEditorControl", defaultProps, _props);
const ctx = require_RichTextEditor_context.useRichTextEditorContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
...others,
...ctx.getStyles("control", {
className,
style,
classNames,
styles
}),
disabled,
"data-rich-text-editor-control": true,
tabIndex: interactive ? 0 : -1,
"data-interactive": interactive || void 0,
"data-disabled": disabled || void 0,
"data-active": active || void 0,
"aria-pressed": active && interactive || void 0,
"aria-hidden": !interactive || void 0,
unstyled: ctx.unstyled,
variant: ctx.variant || "default",
onMouseDown: (event) => {
event.preventDefault();
onMouseDown?.(event);
}
});
});
RichTextEditorControl.classes = require_RichTextEditor_module.default;
RichTextEditorControl.displayName = "@mantine/tiptap/RichTextEditorControl";
function RichTextEditorControlBase({ className, icon: Icon, ...others }) {
const ctx = require_RichTextEditor_context.useRichTextEditorContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditorControl, {
...others,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { ...ctx.getStyles("controlIcon") })
});
}
RichTextEditorControlBase.displayName = "@mantine/tiptap/RichTextEditorControlBase";
function createControl({ label, isActive, operation, icon, isDisabled }) {
const Control = (props) => {
const { editor, labels } = require_RichTextEditor_context.useRichTextEditorContext();
const _label = labels[label];
const editorState = (0, _tiptap_react.useEditorState)({
editor: editor ?? null,
selector: (ctx) => ({
active: isActive?.name ? ctx.editor?.isActive(isActive.name, isActive.attributes) ?? false : false,
disabled: isDisabled?.(ctx.editor) ?? false
})
});
const active = editorState?.active ?? false;
const disabled = editorState?.disabled ?? false;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditorControlBase, {
"aria-label": _label,
title: _label,
active,
icon: props.icon || icon,
disabled,
...props,
onClick: () => editor?.chain().focus()[operation.name](operation.attributes).run()
});
};
Control.displayName = `@mantine/tiptap/${label}`;
return Control;
}
//#endregion
exports.RichTextEditorControl = RichTextEditorControl;
exports.RichTextEditorControlBase = RichTextEditorControlBase;
exports.createControl = createControl;
//# sourceMappingURL=RichTextEditorControl.cjs.map