Rich Text Editor with Form

[AxelReid]

How can i use the @mantine/form with the Rich Text Editor(TipTap). I wan to apply the features the form provides like invalid input

const form = useForm({
 title:'',
 text:''
})
...
<form onSubmit={form.onSubmit(submit)}>
 <TextInput label='Title' {...form.getInputProps('title')} />
 <RichTextEditor />
</form>

And how can i make tiptap controlled.
Currently, i'm getting the value like this:

 const editor = useEditor({
   ...
    onUpdate(props) {
      const val = props.editor.getHTML()
    },
  })

What is the built way of getting the value?

[rtivital]

I wan to apply the features the form provides

Create a wrapper component that will render Input.Wrapper around RichTextEditor

And how can i make tiptap controlled.

Follow tiptap useEditor hook documentation

[fer-ri]

Hi @rtivital

I've already did this

<Input.Wrapper
          withAsterisk
          label="Some label"
          description="Some description"
          error="Some error"
        >
          <TextEditor />
          {/* <Input<any> component={TextEditor} /> */}
        </Input.Wrapper>

And got this

Question is how to make to act like other input? So we can get focus border, invalidColor border, etc.

Thanks

[rtivital]

You can apply styles to the component with Styles API

[shawnmclean]

@fer-ri what else is needed to hook this into the form values?

[fer-ri]

@rtivital sorry for the late response, didn't get the email. Yes, seems like we need manually styling use Styles API

@shawnmclean I use content and onUpdate to get and set the value, something like this

const editor = useEditor({
    extensions: [
      StarterKit,
      Underline,
      Superscript,
      Subscript,
      CharacterCount.configure({
        limit,
      }),
    ],
    ...(content && { content }),
    ...(onUpdate && { onUpdate }),
  });

[jt561]

How do you set the type for onUpdate?

I have:

// types
interface RichTextEditorXProps extends Omit<RichTextEditorProps, "editor" | "children"> {}

// component
export const RichTextEditorX = (props: RichTextEditorXProps) => {
    const { content, styles, ...rest } = props;

    const editor = useEditor({
        extensions: [
            StarterKit,
            Underline,
            Link,
            Superscript,
            SubScript,
            Highlight,
            TextAlign.configure({ types: ["heading", "paragraph"] }),
        ],
        content,
        onUpdate,
    });

    return (
        <RTE
            {...rest}
            editor={editor}
        >
            <RTE.Content />
        </RTE>
    );
};

How do I add a type definition for onUpdate for my props? so that the onUpdate type matches the same one that is expected to be passed to the useEditor hook

@rtivital

[Renato6GS]

I managed to do it by implementing the context of use-form and with onUpdate method, I share with you the mantine tutorial on how to implement it, it is very well explained: https://mantine.dev/form/create-form-context/

After you have implemented it, you place the "onUpdate" method where you assign the value through the "setFieldValue", something like this:

const form = createContentFormContext();
const editor = useEditor({
    extensions: [
      StarterKit,
      otherProps
    ],
    onUpdate(props) {
      const content = props.editor.getHTML();
      form.setFieldValue("content", content);
    },
    content,
  }); 

[jamalsoueidan]

/* eslint-disable @typescript-eslint/no-unused-vars */
import { RichTextEditor, Link as RTELink } from "@mantine/tiptap";

import { useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";

interface CustomInputProps {
  value?: string;
  defaultValue?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  error?: string;
}

export const EditorInput = ({
  value,
  defaultValue,
  onChange,
  onFocus,
  onBlur,
  error,
}: CustomInputProps) => {
  const editor = useEditor({
    extensions: [StarterKit, RTELink],
    content: defaultValue,
    onUpdate({ editor }) {
      const content = editor.getHTML();
      onChange && onChange(content as never);
    },
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
};

Somewhere:

<EditorInput {...form.getInputProps("content")} />

[SqlOwl]

Does this solution work?