Setup

You can find a full example here.

Basic Setup

import { useState } from "react";
import TiptapEditor, { type JSONContent } from "feza";
 
const MyEditor = () => {
  const [content, setContent] = useState<JSONContent | undefined>(undefined);
  // The actual HTML content you will render in the webpage
  const [htmlContent, setHtmlContent] = useState<string | undefined>(undefined);
 
  return (
    <TiptapEditor
      initialContent={content}
      editorProps={{
        onUpdate: ({ editor }) => {
          setContent(editor.getJSON());
          setHtmlContent(editor.getHTML());
        },
      }}
    />
  );
};
 
export default MyEditor;

onUpdate runs on every content change in the editor. Consider using debounce to avoid unnecessary state changes.

import { useDebouncedCallback } from "use-debounce"; 
 
import { type Editor } from "feza"; 
 
// Previous code
 
const debouncedUpdates = useDebouncedCallback((editor: Editor) => {
  const json = editor.getJSON();
  const html = editor.getHTML();
 
  setContent(json);
  setHtmlContent(html);
}, 700);
 
<TiptapEditor
  initialContent={content}
  editorProps={{
    onUpdate: ({ editor }) => debouncedUpdates(editor),
  }}
  // Other props
/>;

Configure Extensions

Please refer to the Extensions guide for more information.

import {
  StarterKit,
  Bold,
  Italic,
  Heading,
  // ...
} from "feza";
 
const extensions = [
  StarterKit,
  Bold.configure({
    showInToolbar: false, // Hide from the toolbar
    levels: [1, 2, 3],
  }),
  Italic,
  Heading.configure({
    showDividerAfter: true, // Add a divider after the heading button
  }),
  // ...
];
 
<TiptapEditor
  extensions={extensions}
  // Other props
/>;

Feza

Setup

Basic Setup

Configure Extensions

On this page