64 lines
1.7 KiB
Markdown
64 lines
1.7 KiB
Markdown
|
# 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`:
|
|||
|
|
```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.
|