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
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.