TipTap extension (arrow InputRule)
This example shows how to set up a BlockNote editor with a TipTap extension that registers an InputRule to convert -> into →.
Try it out: Type -> anywhere in the editor and see how it's automatically converted to a single arrow unicode character.
import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { ArrowConversionExtension } from "./ArrowConversionExtension";export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ _tiptapOptions: { extensions: [ArrowConversionExtension], }, }); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} />;}import { Extension } from "@tiptap/core";export const ArrowConversionExtension = Extension.create({ name: "arrowConversion", addInputRules() { return [ { undoable: true, find: /->/g, handler: ({ state, range, chain }) => { const { from, to } = range; const tr = state.tr.replaceWith(from, to, state.schema.text("→")); chain().insertContent(tr).run(); }, }, ]; },});