Halka

Image

Insert and update images with inline or block layout.

Try this feature →

Import

typescript 
import { imagePlugin, inferImageLayout } from 'halka/plugins/image';

Usage

  • Click an image to select it, then use the toolbar image button to edit
  • layout: "inline" places the image inside the current paragraph (like text flow)
  • layout: "block" creates a dedicated <p><img></p> on its own line
  • Inline layout applies display: inline by default; block layout applies display: block and max-width: 100%
  • Layout is inferred from DOM structure in image.active — no layout classes required
  • image.update can convert inline ↔ block by restructuring the DOM
  • Optional style: { width, height, maxWidth } for sizing; display can be overridden via style

Commands

CommandDescription
image.insertInsert image at cursor; layout: "inline" (default) or "block"
image.updateUpdate selected image src, alt, title, layout, and sizing styles

State

Read plugin state with editor.getState(name). Listen to formatChange to refresh UI when the selection moves.

StateDescription
image.active{ src, alt, title, layout: "inline" | "block", style } or null
typescript 
const image = editor.getState('image.active') as {
  src: string;
  alt: string;
  title: string;
  layout: 'inline' | 'block';
  style: { display: string; width: string; height: string; maxWidth: string };
} | null;

// null when the caret is in text; set when an <img> is selected
const imageSelected = image !== null;
const canEditLayout = image?.layout;

editor.on('formatChange', () => {
  const active = editor.getState('image.active');
});

Example

typescript 
// Inline image in a sentence
editor.execCommand('image.insert', {
  src: 'https://example.com/icon.png',
  alt: 'Icon',
  layout: 'inline'
});

// Block image on its own line
editor.execCommand('image.insert', {
  src: 'https://example.com/photo.jpg',
  alt: 'Photo',
  layout: 'block',
  style: { width: '300px' }
});

// Detect layout from existing HTML
const layout = inferImageLayout(imgElement, editor.root);

Notes

Block images are detected when the image is the only meaningful child of a paragraph. Inline images share a paragraph with text or other content.

MIT · Halka Editor