@mantine/tiptap
Version:
Rich text editor based on tiptap
38 lines (37 loc) • 1.7 kB
JavaScript
"use client";
import { useRichTextEditorContext } from "../RichTextEditor.context.mjs";
import { IconBraces } from "../icons/Icons.mjs";
import { RichTextEditorControl } from "./RichTextEditorControl.mjs";
import { useState } from "react";
import { rem, useProps } from "@mantine/core";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorSourceCodeControl.tsx
const defaultProps = {};
function RichTextEditorSourceCodeControl(props) {
const { ...others } = useProps("RichTextEditorSourceCodeControl", defaultProps, props);
const { editor, labels, variant, onSourceCodeTextSwitch } = useRichTextEditorContext();
const [isSourceCodeModeActive, setIsSourceCodeModeActive] = useState(false);
const handleStateChange = () => {
if (isSourceCodeModeActive) editor?.commands.setContent(editor.getText(), { emitUpdate: true });
else editor?.commands.setContent(`<textarea>${editor.getHTML()}</textarea>`);
const isSourceCodeModeActiveNew = !isSourceCodeModeActive;
setIsSourceCodeModeActive(isSourceCodeModeActiveNew);
onSourceCodeTextSwitch?.(isSourceCodeModeActiveNew);
};
return /* @__PURE__ */ jsx(RichTextEditorControl, {
...others,
variant,
active: isSourceCodeModeActive,
"aria-label": labels.sourceCodeControlLabel,
title: labels.sourceCodeControlLabel,
onClick: () => handleStateChange(),
children: /* @__PURE__ */ jsx(IconBraces, { style: {
width: rem(16),
height: rem(16)
} })
});
}
RichTextEditorSourceCodeControl.displayName = "@mantine/tiptap/RichTextEditorSourceCodeControl";
//#endregion
export { RichTextEditorSourceCodeControl };
//# sourceMappingURL=RichTextEditorSourceCodeControl.mjs.map