Phoenix TipTap Editor

>

>

Get Started

This example demonstrates how to use the Tiptap editor with a Phoenix form. The editor is a Phoenix.Component that uses the Tiptap editor via a hook. The editor works with phoenix FormData (to_form) and ecto changeset like any other form input.

Check out the gists below or the Source Code on GitHub

Core

lib/tiphx/notebook/note.ex

We start by creating our schema. In the core we can model changes with ecto changesets. Ecto changesets are policies for how changing data.

Data can be persist in a database or we can use embedded schemas.

Context

lib/tiphx/notebook.ex

The context is the boundary layer between our predictable core and live_view

Liveview

lib/tiphx_web/live/notebook.ex

In our LiveView, we assign our form using to_form() and handle both validate and save events. The .rich_text_editor component works like the standard .input using form field.

Check out the "👈" for the most interesting parts

Rich Text Editor Component

lib/tiphx_web/components/ui/rich_text_editor.ex

The .rich_text_editor component is a Phoenix.Component that uses the Tiptap editor via a hook. Look at the phx-debounce="blur" attribute on the .input element. This will trigger the validate event when the rich text editor loses focus.

Check out the "👈" for the most interesting parts

TipTap Hook

assets/js/hooks/tiptap_hook.js

TipTap hook is a custom phoenix hook that initializes the TipTap editor.

The html content is set to the input field when the editor is updated. When the editor looses focus, an input event is bubbling up which triggers the validate event of the form.

Check out the "👈" for the most interesting parts