@mantine/tiptap
Version:
Rich text editor based on tiptap
75 lines (74 loc) • 2.82 kB
JavaScript
"use client";
import RichTextEditor_module_default from "../RichTextEditor.module.mjs";
import { useRichTextEditorContext } from "../RichTextEditor.context.mjs";
import { UnstyledButton, factory, useProps } from "@mantine/core";
import { useEditorState } from "@tiptap/react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorControl.tsx
const defaultProps = { interactive: true };
const RichTextEditorControl = factory((_props) => {
const { classNames, className, style, styles, vars, interactive, active, onMouseDown, disabled, ...others } = useProps("RichTextEditorControl", defaultProps, _props);
const ctx = useRichTextEditorContext();
return /* @__PURE__ */ jsx(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 = RichTextEditor_module_default;
RichTextEditorControl.displayName = "@mantine/tiptap/RichTextEditorControl";
function RichTextEditorControlBase({ className, icon: Icon, ...others }) {
const ctx = useRichTextEditorContext();
return /* @__PURE__ */ jsx(RichTextEditorControl, {
...others,
children: /* @__PURE__ */ jsx(Icon, { ...ctx.getStyles("controlIcon") })
});
}
RichTextEditorControlBase.displayName = "@mantine/tiptap/RichTextEditorControlBase";
function createControl({ label, isActive, operation, icon, isDisabled }) {
const Control = (props) => {
const { editor, labels } = useRichTextEditorContext();
const _label = labels[label];
const editorState = 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__ */ 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
export { RichTextEditorControl, RichTextEditorControlBase, createControl };
//# sourceMappingURL=RichTextEditorControl.mjs.map