@mantine/tiptap/cjs/RichTextEditorControl/RichTextEditorSourceCodeControl.cjs

Rich text editor based on tiptap

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var core = require('@mantine/core');
var Icons = require('../icons/Icons.cjs');
var RichTextEditor_context = require('../RichTextEditor.context.cjs');
var RichTextEditorControl = require('./RichTextEditorControl.cjs');

const defaultProps = {};
const RichTextEditorSourceCodeControl = react.forwardRef((props, ref) => {
  const { ...others } = core.useProps("RichTextEditorSourceCodeControl", defaultProps, props);
  const { editor, labels, variant, onSourceCodeTextSwitch } = RichTextEditor_context.useRichTextEditorContext();
  const [isSourceCodeModeActive, setIsSourceCodeModeActive] = react.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__ */ jsxRuntime.jsx(
    RichTextEditorControl.RichTextEditorControl,
    {
      ...others,
      variant,
      active: isSourceCodeModeActive,
      "aria-label": labels.sourceCodeControlLabel,
      title: labels.sourceCodeControlLabel,
      onClick: () => handleStateChange(),
      ref,
      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconBraces, { style: { width: core.rem(16), height: core.rem(16) } })
    }
  );
});
RichTextEditorSourceCodeControl.displayName = "@mantine/tiptap/RichTextEditorSourceCodeControl";

exports.RichTextEditorSourceCodeControl = RichTextEditorSourceCodeControl;
//# sourceMappingURL=RichTextEditorSourceCodeControl.cjs.map