Skip to content

Commit

Permalink
Update RichTextEditor types to support Tiptap 2.5+ options
Browse files Browse the repository at this point in the history
Fixes #249 while still
remaining backward compatible, allowing mui-tiptap users to use the new
React-specific editor options
(https://tiptap.dev/blog/release-notes/say-hello-to-tiptap-2-5-our-most-performant-editor-yet),
like:

```ts
<RichTextEditor extensions={[]} immediatelyRender />
```
  • Loading branch information
sjdemartini committed Jul 24, 2024
1 parent 27b22b1 commit 9e98e24
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions src/RichTextEditor.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEditor, type Editor, type EditorOptions } from "@tiptap/react";
import { useEditor, type Editor } from "@tiptap/react";
import {
forwardRef,
useEffect,
Expand All @@ -9,8 +9,16 @@ import type { Except, SetRequired } from "type-fest";
import RichTextEditorProvider from "./RichTextEditorProvider";
import RichTextField, { type RichTextFieldProps } from "./RichTextField";

// We define our own `UseEditorOptions` type here based on the signature of
// `useEditor` so that we can support both Tiptap 2.5+ which uses a new
// `UseEditorOptions` type
// (https://github.com/ueberdosis/tiptap/commit/df5609cdff27f97e11860579a7af852cf3e50ce5#diff-13acb5e551812e195c1140c10ba5ac298a0005996d07756cfd77c2d4194cb350R16),
// as well as Tiptap <2.5 where `useEditor` used the `EditorOptions` type and
// `UseEditorOptions` didn't yet exist.
type UseEditorOptions = NonNullable<Parameters<typeof useEditor>[0]>;

export interface RichTextEditorProps
extends SetRequired<Partial<EditorOptions>, "extensions"> {
extends SetRequired<Partial<UseEditorOptions>, "extensions"> {
/**
* Render the controls content to show inside the menu bar atop the editor
* content. Typically you will want to render a <MenuControlsContainer>
Expand Down Expand Up @@ -78,14 +86,14 @@ const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>(
editorDependencies = [],
// We default to `editable=true` just like `useEditor` does
editable = true,
...editorProps
...editorOptions
}: RichTextEditorProps,
ref
) {
const editor = useEditor(
{
editable: editable,
...editorProps,
...editorOptions,
},
editorDependencies
);
Expand Down

0 comments on commit 9e98e24

Please sign in to comment.