@mantine/tiptap/esm/RichTextEditorControl/RichTextEditorSourceCodeControl.mjs

Rich text editor based on tiptap

'use client';
import { jsx } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import { useProps, rem } from '@mantine/core';
import { IconBraces } from '../icons/Icons.mjs';
import { useRichTextEditorContext } from '../RichTextEditor.context.mjs';
import { RichTextEditorControl } from './RichTextEditorControl.mjs';

const defaultProps = {};
const RichTextEditorSourceCodeControl = forwardRef((props, ref) => {
  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(), 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(),
      ref,
      children: /* @__PURE__ */ jsx(IconBraces, { style: { width: rem(16), height: rem(16) } })
    }
  );
});
RichTextEditorSourceCodeControl.displayName = "@mantine/tiptap/RichTextEditorSourceCodeControl";

export { RichTextEditorSourceCodeControl };
//# sourceMappingURL=RichTextEditorSourceCodeControl.mjs.map