@lapsha/plugin-image

Image block for Lapsha: file / URL upload, caption, and layout tunes (align, stretch, border, background) — Editor.js-style.

Data

{
  src: string
  caption: string
  alt?: string
  withBorder: boolean
  withBackground: boolean
  stretched: boolean
  align: 'left' | 'center' | 'right'
}

Usage

import { imagePlugin } from '@lapsha/plugin-image'
import {
  ImageBlock,
  imageBlockConfigKey,
  type ImageBlockConfig,
} from '@lapsha/plugin-image/vue'
import { provide } from 'vue'

provide(imageBlockConfigKey, {
  captionPlaceholder: 'Caption',
  uploader: {
    async uploadByFile(file) {
      const form = new FormData()
      form.append('image', file)
      const res = await fetch('/api/upload', { method: 'POST', body: form })
      const json = await res.json()
      return { url: json.url }
    },
    async uploadByUrl(url) {
      return { url }
    },
  },
} satisfies ImageBlockConfig)

const plugins = [imagePlugin()]
const components = { image: ImageBlock }

Without uploader.uploadByFile, the block uses URL.createObjectURL (fine for demos; replace in production).