breadcrumb-the-shire/docs/todo-editorjs-image.md

TODO: Editor.js Image Tool Integration

Goal

Integrate the Editor.js Image Tool with proper upload endpoints, storage, and access control.

Why

• Editor.js expects uploads to respond with { success: 1, file: { url: "..." } }.
• We want private storage with a controlled proxy (like avatars) and optional resizing.

Open Decisions

• Public access? (e.g. impressum pages should be public)
• Allowed file types (recommended: PNG/JPG/WebP; avoid SVG for security)
• Resize policy (max width + WebP variants?)

Proposed Structure

Storage

• storage/pages/{page_uuid}/assets/{asset_uuid}/original.<ext>
• Optional variants: w1280.webp, w640.webp, etc.

DB

Create page_assets table:

• id, uuid, page_id, locale
• file_name, mime, size, width, height
• created_by, created

Endpoints

1. Upload by file
   pages/page/upload-image(none).phtml

• Accepts multipart (field name image).
• Validates MIME/size.
• Stores file + creates DB record.
• Returns { success: 1, file: { url } }.

2. Fetch by URL (optional)
   pages/page/fetch-image(none).phtml

• Accepts JSON { url: "..." }.
• Downloads, validates, stores like upload.
• Returns same response.

3. Media proxy
   pages/page/media(none).phtml?uuid=...

• Checks permissions (public vs. logged‑in).
• Reads storage file, sets headers, returns file.

Editor.js config

Add image tool to web/js/components/page-editor.js:

image: {
  class: ImageTool,
  config: {
    endpoints: {
      byFile: 'page/upload-image',
      byUrl: 'page/fetch-image'
    }
  }
}

Next Steps

• Decide public vs. private access rules.
• Implement service + migration + endpoints.
• Add tool config and i18n messages.