Components Content Editor

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Content Editor

The editor component allows you to create and render rich content. It's based on the block editor - Editor.js.
Example Form
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`

elixir 
          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:

heex 
          <.content json="{ blocks: [] }" />

Properties for the `content` function component:

elixir 
          # 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:

heex 
          <.pretty_content json="{ blocks: [] }" />

Properties for the `pretty_content` function component:

elixir 
          # 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

Membership
$299
-> 
See plans

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.