npm install prosemirror-state prosemirror-view prosemirror-model prosemirror-inputrules prosemirror-keymap markdown-it

Project setup

1. Copy the source/assets/js/campaign-editors/block/ directory into your project, e.g. src/editors/block/.

2. Ensure your bundler (Webpack, Vite, esbuild) resolves the internal relative imports correctly. No path alias is required since all imports are relative.

3. Add a container element to your HTML that the editor will mount into, and a sibling element with the id block-container-assets containing the icon/label elements the blocks read via document.querySelector:

<div id="block-container-assets" style="display:none">
  <span class="editor-placeholder">Start writing...</span>
  <span class="editor-button-title">Button</span>
  <span class="icon-button-alt"><!-- SVG --></span>
  <span class="editor-button-make-full-width-label">Full width</span>
  <span class="editor-button-make-centered-label">Centered</span>
  <span class="editor-layout-placeholder">Add content...</span>
  <!-- additional icon/label spans required by Image and SocialIcons blocks -->
</div>
<div id="editor-mount"></div>
<textarea id="editor-source" style="display:none">{"blocks":[]}</textarea>

4. Import and instantiate BlockEditor:

import BlockEditor from "./editors/block/index.js"
const source = document.getElementById("editor-source") as HTMLTextAreaElement
const editor = new BlockEditor("editor-mount", source)

5. No environment variables are required. The editor reads all labels and icons from DOM nodes under #block-container-assets.

Public API

BlockEditor

class BlockEditor {
  constructor(place: string, source: HTMLTextAreaElement): BlockEditor
}

place is the id of the DOM element to mount into. source is a <textarea> whose .value is a JSON string of EditorJS block data ({"blocks": [...], "version": "..."}). Instantiate once per editor mount point. The editor reads initial data from source.value on construction.

Button

class Button {
  constructor({ data, block }: { data: { label: string | null, url: string | null, centered: boolean }, block: any }): Button
  static get toolbox(): { title: string, icon: string }
  renderSettings(): Array<{ icon: string, label: string, onActivate: () => void, closeOnActivate: boolean }>
  save(_blockContent: HTMLElement): { label: string, url: string, centered: boolean }
  toggleCentered(): void
}

Register as an EditorJS tool under key "button". Use when you need a styled CTA link block inside the editor. renderSettings() exposes a toggle for full-width vs. centered rendering.

Layout

class Layout {
  constructor({ data, config, api, block }: {
    data: { blocks: any[], columns: number, ratio: string },
    config: { tools: Record<string, any> },
    api: any,
    block: any
  }): Layout
  render(): HTMLElement
  save(_blockContent: HTMLElement): Promise<{ blocks: any[], columns: number, ratio: string }>
}

Renders a CSS grid with columns columns and a ratio string like "1-1" or "1-2". Each column hosts a nested EditorJS instance initialized from config.tools. Use when multi-column newsletter layouts are required.

Image

class Image {
  constructor({ data, api, block }: {
    data: { caption: string | null, alt: string | null, title: string | null, width: string | null, image: { id: string | null, src: string | null }, link: { url: string | null }, tunes?: { alignment?: string } },
    api: any,
    block: any
  }): Image
  render(): HTMLElement
  save(_blockContent: HTMLElement): object
}

Supports left/center/right alignment via tunes, a link URL, caption, and an image picker integrated with the asset system via #block-container-assets. Use for inline images within newsletter blocks.

Working examples

Scenario - Basic editor mount

Mount the block editor onto a form textarea to capture campaign content:

import BlockEditor from "./editors/block/index.js"

document.addEventListener("DOMContentLoaded", () => {
  const sourceEl = document.getElementById("campaign-body") as HTMLTextAreaElement
  if (!sourceEl.value) {
    sourceEl.value = JSON.stringify({ time: Date.now(), blocks: [], version: "2.28.0" })
  }
  new BlockEditor("campaign-editor", sourceEl)
})

Scenario - Pre-populate with existing block data

Load saved campaign data from your backend and restore it into the editor:

import BlockEditor from "./editors/block/index.js"

async function mountEditor(campaignId: string) {
  const res = await fetch(`/api/campaigns/${campaignId}/body`)
  const json = await res.json()

  const sourceEl = document.getElementById("editor-source") as HTMLTextAreaElement
  sourceEl.value = JSON.stringify(json)

  new BlockEditor("editor-mount", sourceEl)
}

mountEditor("abc123")

Scenario - Registering only the Button block standalone with EditorJS

Use the Button block directly in your own EditorJS instance without the full BlockEditor wrapper:

import EditorJS from "@editorjs/editorjs"
import Button from "./editors/block/blocks/button/index.js"

const editor = new EditorJS({
  holder: "my-editor",
  tools: {
    button: {
      class: Button
    }
  },
  data: {
    blocks: [
      {
        type: "button",
        data: { label: "Sign up now", url: "https://example.com", centered: true }
      }
    ]
  }
})

editor.save().then(output => {
  console.log(output)
})

File walkthrough

• assets/js/campaign-editors/block/index.js - Orchestrates all tools and tunes into a single EditorJS configuration; the only entry point buyers should import.
• assets/js/campaign-editors/block/blocks/button/index.js - Self-contained button block; reads DOM for labels, handles centering toggle via renderSettings.
• assets/js/campaign-editors/block/blocks/image/index.js - Image block with alignment tunes, ResizeObserver for responsive display, and caption/link fields.
• assets/js/campaign-editors/block/blocks/layout/index.js - Creates nested EditorJS instances per column; forwards config.tools so nested editors share the same tool set.
• assets/js/campaign-editors/block/blocks/social-icons/index.js - Manages a list of known social platforms with brand colors; renders icon rows with per-icon URL/color overrides.
• assets/js/campaign-editors/block/blocks/separator.js - Minimal block rendering an <hr> with no configurable data.
• assets/js/campaign-editors/block/tools/alignment.js - Inline toolbar tool that wraps selected content in an alignment span.
• assets/js/campaign-editors/block/tools/text-color.js - Inline toolbar tool applying a color style to selected text.
• assets/js/campaign-editors/block/tunes/alignment.js - Block-level tune adding alignment CSS classes to entire blocks.
• assets/js/campaign-editors/markdown/ - Alternative ProseMirror-based editor for markdown campaigns; independent of the block editor.
• assets/css/ - SCSS styles including _markdown_wysiwyg.scss and app.scss for editor chrome.
• lib/ - Elixir/Phoenix backend: campaign delivery, contacts, forms, API. Not used on the JS side.
• config/ - Elixir runtime and environment config. Irrelevant to the JS editor.
• priv/ - Phoenix static assets, migrations, gettext translations.

Common pitfalls and fixes

• document.querySelector("#block-container-assets .editor-button-title") returns null: All blocks call document.querySelector at render/toolbox time against a hidden DOM node. Mount this node before instantiating BlockEditor or you will get null-reference errors.
• Nested EditorJS in Layout does not propagate changes: Layout calls this.block.dispatchChange() in the nested editor's onChange. If you override onChange at the top level, ensure you do not replace the inner handler; use the top-level onChange config key only.
• EditorJS save() on Layout is async: Layout.save() calls editor.save() on each nested instance, returning a Promise. Callers of the top-level editor.save() must await to get fully resolved column data.
• Tailwind purge removes dynamic grid classes: Layout uses grid-cols-2, grid-cols-3, col-span-1, etc. built at runtime from the ratio string. Add them to your Tailwind safelist or rely on the _requiredClasses comment pattern already present in the source.
• @editorjs/nested-list vs @editorjs/list version mismatch: The source imports @editorjs/nested-list specifically, not the plain list package. Installing @editorjs/list instead will cause a missing-tool error at runtime.
• ESM/CJS interop with EditorJS: EditorJS ships as an ESM bundle. If your bundler requires explicit interop (e.g., Webpack esModuleInterop), ensure @editorjs/editorjs is not transpiled as CommonJS or you will see EditorJS is not a constructor.

Vibe-coding prompt template

I have purchased the Keila Block Campaign Editor source code located in the `source/` directory.
I also have a `USAGE.md` integration guide in the same directory.

The upstream project is `keila` (https://github.com/pentacent/keila).
The main entry point is `source/assets/js/campaign-editors/block/index.js`, which exports a
default class `BlockEditor`.

Please integrate this editor into my existing project step by step:
1. Read `USAGE.md` fully before making any changes.
2. Install all required npm dependencies listed in the `## Required dependencies` section.
3. Copy the block editor source files into `src/editors/block/` in my project.
4. Add the required `#block-container-assets` DOM node to my HTML template using the structure
   shown in `USAGE.md` under `## Project setup`.
5. Create a TypeScript module `src/mountEditor.ts` that imports `BlockEditor` from
   `src/editors/block/index.js` and mounts it to a `<div id="editor-mount">` in my page,
   reading initial data from a `<textarea id="editor-source">`.
6. Confirm that the `Layout` block receives the correct `config.tools` object so nested
   editors share the same tool configuration as the top-level editor.
7. Point out any Tailwind safelist entries I need to add based on the dynamic class names
   used in `Layout`.
Show me each file you create or modify.

License and credit

Keila is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). Any project that incorporates this source and is accessible over a network must make its full source code available under the same license. See source/LICENSE.md for the full text.

Upstream repository: https://github.com/pentacent/keila

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

完全なインストールガイドと統合プロンプトは購入後に解放されます。

Self-Hosted Newsletter and Mailing List Manager

PHP, Laravel & Business Scripts

無料