# ElementorexCms v0.1.0 - Table of Contents

> A visual, drag & drop content builder for Phoenix LiveView (in the spirit of Elementor): an editor with live canvas, DOM tree, inspector and HTML/CSS view, a JSON document model, daisyUI 5 + Heroicons blocks, safe server-side rendering and generators for custom blocks and templates.

## Pages

- [ElementorexCms](readme.md)
- [Changelog](changelog.md)
- [LICENSE](license.md)

- Guides
  - [Writing blocks](blocks.md)
  - [Integrating with your app](host_integration.md)

## Modules

- [ElementorexCms](ElementorexCms.md): A visual, drag & drop content builder for Phoenix LiveView.
- [ElementorexCms.Editor.History](ElementorexCms.Editor.History.md): Undo and redo for the editor: snapshots of the document with a label.
- [ElementorexCms.Id](ElementorexCms.Id.md): Identifiers of document nodes.
- [ElementorexCms.Renderer.Context](ElementorexCms.Renderer.Context.md): What a block knows about where it is rendered

- Documents
  - [ElementorexCms.Builder](ElementorexCms.Builder.md): Builds documents in Elixir: for templates, seeds and tests.
  - [ElementorexCms.Document](ElementorexCms.Document.md): The document: a tree of nodes stored as plain JSON (a `jsonb` column).
  - [ElementorexCms.Ecto.Document](ElementorexCms.Ecto.Document.md): Ecto type for documents, stored as a map (`jsonb` in PostgreSQL).

- Blocks
  - [ElementorexCms.Block](ElementorexCms.Block.md): Defines a block: a component that can be placed in a document, configured in
the editor and rendered on your site.
  - [ElementorexCms.Block.Helpers](ElementorexCms.Block.Helpers.md): Helpers imported into every block (`use ElementorexCms.Block`).
  - [ElementorexCms.Block.Prop](ElementorexCms.Block.Prop.md): A property of a block: its type, default, label and editor control.
  - [ElementorexCms.Blocks.Accordion](ElementorexCms.Blocks.Accordion.md): daisyUI collapse as an accordion (FAQ). Built on `<details>`, so it opens and
closes without JavaScript; with *One at a time* the browser closes the others.

  - [ElementorexCms.Blocks.Alert](ElementorexCms.Blocks.Alert.md): daisyUI alert: an important message with icon, title, text and an optional button.
  - [ElementorexCms.Blocks.Avatar](ElementorexCms.Blocks.Avatar.md): daisyUI avatar: photo or initials, with status and an optional name beside it.
  - [ElementorexCms.Blocks.Badge](ElementorexCms.Blocks.Badge.md): daisyUI badge: a small label.
  - [ElementorexCms.Blocks.Button](ElementorexCms.Blocks.Button.md): daisyUI button with link, colors, styles, sizes and a Heroicon.
  - [ElementorexCms.Blocks.ButtonGroup](ElementorexCms.Blocks.ButtonGroup.md): Several buttons side by side, separate or joined (daisyUI `join`).
  - [ElementorexCms.Blocks.Card](ElementorexCms.Blocks.Card.md): daisyUI card: image, badge, title, text and a button.
  - [ElementorexCms.Blocks.Carousel](ElementorexCms.Blocks.Carousel.md): daisyUI carousel of images with scroll snapping (no JavaScript).
  - [ElementorexCms.Blocks.Chat](ElementorexCms.Blocks.Chat.md): daisyUI chat bubbles: a conversation, a testimonial, a FAQ in dialogue.
  - [ElementorexCms.Blocks.Container](ElementorexCms.Blocks.Container.md): Flexbox container: lays its children out in a row or a column, with gap,
alignment and wrapping. Rows stack on mobile unless told otherwise.

  - [ElementorexCms.Blocks.Countdown](ElementorexCms.Blocks.Countdown.md): daisyUI countdown to a date and time. The values are computed when the page is
rendered and kept ticking by the runtime script (`elementorex_cms/runtime`,
see the README); without it the countdown shows the values of the render.
  - [ElementorexCms.Blocks.Divider](ElementorexCms.Blocks.Divider.md): daisyUI divider: a line, optionally with a text in it.
  - [ElementorexCms.Blocks.Feature](ElementorexCms.Blocks.Feature.md): Icon box: an icon with a title and a text, on top or to the left.
  - [ElementorexCms.Blocks.Grid](ElementorexCms.Blocks.Grid.md): Grid of columns (CSS grid), with its own number of columns for desktop,
tablet and mobile. New grids come with two columns.

  - [ElementorexCms.Blocks.Heading](ElementorexCms.Blocks.Heading.md): A heading (`<h1>`-`<h6>`), editable by typing on the canvas.
  - [ElementorexCms.Blocks.Hero](ElementorexCms.Blocks.Hero.md): daisyUI hero: a large area with an optional background image and overlay that
centers its content. New heroes come with a heading, a text and a button.

  - [ElementorexCms.Blocks.Html](ElementorexCms.Blocks.Html.md): Hand-written HTML, sanitized with the `:html` policy of
`ElementorexCms.HTML.Sanitizer` (no scripts, iframes, forms or event
handlers). Tailwind and daisyUI classes work if your CSS build includes them.

  - [ElementorexCms.Blocks.Icon](ElementorexCms.Blocks.Icon.md): A Heroicon, with size, color and an optional circle behind it.
  - [ElementorexCms.Blocks.Image](ElementorexCms.Blocks.Image.md): An image with optional link, caption, rounded corners, daisyUI mask and shadow.
  - [ElementorexCms.Blocks.Kbd](ElementorexCms.Blocks.Kbd.md): daisyUI kbd: keyboard keys, e.g. `⌘ + K`.
  - [ElementorexCms.Blocks.Link](ElementorexCms.Blocks.Link.md): daisyUI link: a text link with color and hover underline.
  - [ElementorexCms.Blocks.List](ElementorexCms.Blocks.List.md): List of items, each with a Heroicon (checks, benefits, steps...).
  - [ElementorexCms.Blocks.Mockup](ElementorexCms.Blocks.Mockup.md): daisyUI mockups: browser, phone or window frames around an image, or a code block.
  - [ElementorexCms.Blocks.Options](ElementorexCms.Blocks.Options.md): Option lists shared by the built-in blocks (labels are translated when shown).
  - [ElementorexCms.Blocks.Progress](ElementorexCms.Blocks.Progress.md): daisyUI progress bar or radial progress with its value.
  - [ElementorexCms.Blocks.Quote](ElementorexCms.Blocks.Quote.md): A quote or testimonial with its author.
  - [ElementorexCms.Blocks.Rating](ElementorexCms.Blocks.Rating.md): daisyUI rating (read only): stars or hearts, with halves.
  - [ElementorexCms.Blocks.Root](ElementorexCms.Blocks.Root.md): The root of every document. It is not in the palette and cannot be removed;
select it in the tree to style the whole document (padding, background...) or
to write CSS for it.

  - [ElementorexCms.Blocks.Section](ElementorexCms.Blocks.Section.md): A section of the page: full width or boxed, with its children stacked.
  - [ElementorexCms.Blocks.Spacer](ElementorexCms.Blocks.Spacer.md): Empty vertical space.
  - [ElementorexCms.Blocks.Stats](ElementorexCms.Blocks.Stats.md): daisyUI stats: figures with title, value, description and icon.
  - [ElementorexCms.Blocks.Steps](ElementorexCms.Blocks.Steps.md): daisyUI steps: a process with done and pending steps.
  - [ElementorexCms.Blocks.Tabs](ElementorexCms.Blocks.Tabs.md): daisyUI tabs with content, switched with radio inputs (no JavaScript).
  - [ElementorexCms.Blocks.Text](ElementorexCms.Blocks.Text.md): Rich text: paragraphs, lists, links and formatting.
  - [ElementorexCms.Blocks.Timeline](ElementorexCms.Blocks.Timeline.md): daisyUI timeline: dated milestones, vertical or horizontal.
  - [ElementorexCms.Blocks.Video](ElementorexCms.Blocks.Video.md): A YouTube or Vimeo video (embedded with its canonical player URL) or a video
file (`.mp4`, `.webm`).
  - [ElementorexCms.Registry](ElementorexCms.Registry.md): The set of blocks a document can use.

- Rendering
  - [ElementorexCms.CSS](ElementorexCms.CSS.md): Validation of the CSS that documents carry.
  - [ElementorexCms.Components](ElementorexCms.Components.md): Components to show documents on your site.
  - [ElementorexCms.HTML.Sanitizer](ElementorexCms.HTML.Sanitizer.md): Allow-list HTML sanitizer for the rich text and the HTML of documents.
  - [ElementorexCms.Heroicons](ElementorexCms.Heroicons.md): [Heroicons](https://heroicons.com) v2.2 rendered as inline SVG.
  - [ElementorexCms.Renderer](ElementorexCms.Renderer.md): Renders documents and nodes with the blocks of a registry.
  - [ElementorexCms.Style](ElementorexCms.Style.md): Builds the stylesheet of a document from the styles of its nodes.
  - [ElementorexCms.URL](ElementorexCms.URL.md): Sanitizes the URLs that end up in `href`, `src` and CSS `url()`.

- Editor
  - [ElementorexCms.Canvas](ElementorexCms.Canvas.md): How the editor canvas looks: the stylesheets of your site, the attributes of
`<html>` and `<body>` and an optional frame around the content.
  - [ElementorexCms.Editor](ElementorexCms.Editor.md): The visual editor, as a LiveComponent.
  - [ElementorexCms.I18n](ElementorexCms.I18n.md): Translations of the editor interface and the built-in blocks.
  - [ElementorexCms.Media](ElementorexCms.Media.md): Behaviour to connect the editor's image fields to your file storage.
  - [ElementorexCms.Templates](ElementorexCms.Templates.md): Ready-made sections the editor can insert (*Templates* panel).

## Mix Tasks

- [mix elementorex.gen.block](Mix.Tasks.Elementorex.Gen.Block.md): Generates a block for the visual editor, with props for the inspector, its
render function and a test.
- [mix elementorex.gen.cms](Mix.Tasks.Elementorex.Gen.Cms.md): Generates everything to manage pages built with the visual editor: migration,
schema, context, an admin list, the editor page and the public page.
- [mix elementorex.gen.template](Mix.Tasks.Elementorex.Gen.Template.md): Generates a templates module (see `ElementorexCms.Templates`): sections that
the editor inserts from its *Templates* panel.
- [mix elementorex.install](Mix.Tasks.Elementorex.Install.md): Checks the steps that connect ElementorexCms to a Phoenix app and prints the
snippet for any missing one. It does not modify files.