Content Editor
The editor component allows you to create and render rich content. It's based on the block editor - Editor.js.
Potentially, the Content Editor component could support other block editors (e.g. Tip Tap). If this is something you're interested in, then consider adding it to the Petal Pro Roadmap
Example Form
<.form for={@form} phx-submit="submit">
<.content_field
field={@form[:content]}
placeholder="Start typing..."
label="Content Field" />
<.button>Render!</.button>
</.form>
<.pretty_content
json={@json}
class="py-2 px-4 rounded-md border dark:border-gray-600 dark:bg-gray-800"
/>
defmodule PetalProWeb.ContentEditorLive do
use PetalProWeb, :live_view
import PetalProWeb.ContentEditor
def mount(_params, _session, socket) do
changeset = %Ecto.Changeset{data: %{}}
form = to_form(changeset, as: :example)
{:ok,
assign(socket,
form: form,
json: nil,
)}
end
@impl true
def handle_event("submit", %{"example" => %{"content" => json}}, socket) do
{:noreply, assign(socket, :json, json)}
end
end
Content Field Properties
See
form field properties
(defaults for `class`
and `wrapper_class`
are listed below). More styles for Editor.js can be found in
`/assets/css/editorjs.css`
attr :wrapper_class, :any,
# Stolen from pc-text-input, but adjusted for div and uses "focus-within" instead of "focus":
default: [
"block w-full border border-gray-300 rounded-md shadow-sm px-4 py-2",
"focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-offset-[-1px] focus-within:ring-primary-500",
"dark:border-gray-600 dark:focus-within:border-primary-500",
"sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed",
"dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700",
"focus-within:outline-none"
],
doc: "the wrapper div classes"
attr :class, :any,
# Contents of Editor.js blocks are formatted by Tailwind Prose classes
default:
"min-h-32 prose dark:prose-invert prose-img:rounded-xl prose-pre:rounded-xl prose-img:mx-auto prose-a:text-primary-600 prose-a:dark:text-primary-300 max-w-none",
doc: "the class to add to the input"
Rendering Content
Renders Editor.js blocks to html:
<.content json="{ blocks: [] }" />
Properties for the `content` function component:
# Editor.js block json. E.g. {'blocks': []}
attr :json, :string, required: true
Rendering Content with Tailwind Prose
Renders Editor.js blocks to html with Tailwind Prose formatting:
<.pretty_content json="{ blocks: [] }" />
Properties for the `pretty_content` function component:
# Editor.js block json. E.g. {'blocks': []}
attr :json, :string, required: true
attr :prose_class, :any,
# Default Tailwind Prose classes
default: [
"prose dark:prose-invert max-w-full prose-img:rounded-xl prose-pre:rounded-xl",
"prose-img:mx-auto prose-a:text-primary-600 prose-a:dark:text-primary-300"
]
# This will merge with the prose_class attribute on the container
attr :class, :any, default: nil
How to access
Access options
This comes with Petal Pro. Purchase a membership to get access to this package. It can be used with any Phoenix project. Post-expiration, you'll retain access but won't be eligible for updates from newer versions.