Tiptap v3 rich-text editing for Phoenix LiveView.

Tiptapex packages a full editor integration:

• Tiptapex.Components — tiptapex_editor/1 and tiptapex_viewer/1 HEEx function components backed by the TiptapexEditor / TiptapexViewer JS hooks shipped inside this package.
• Tiptapex.Renderer — converts ProseMirror/Tiptap JSON documents to safe, escaped HTML on the server, so you never have to trust client-generated HTML.
• Tiptapex.Upload — a behaviour plus Tiptapex.Upload.Controller macro for handling editor file uploads with server-side validation.
• Tiptapex.Collab — optional realtime collaboration (Yjs) over Phoenix Channels via the Tiptapex.Collab.Channel macro.

JavaScript setup

The JS ships as raw ESM inside the Hex package. Your app bundles it with its own copy of the @tiptap/* packages (peer dependencies — install them with npm in assets/). Point esbuild's NODE_PATH at both deps and assets/node_modules, then:

import { hooks as tiptapex } from "tiptapex"

const liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...otherHooks, ...tiptapex },
})

See the README for the full installation walkthrough.