lexical_image library

Images for lexical_core, with a resizable Flutter widget.

An image is a decorator: the model holds where it is and how big it should be, the host draws it. Unlike the other node packages this one ships its Flutter widget rather than a separate _flutter companion — a decorator with no builder renders nothing at all, so the node and the widget are one feature, not two.

final editor = LexicalEditor(nodes: imageNodes);
registerImage(editor);

LexicalEditable(
  editor: editor,
  theme: theme,
  decoratorBuilders: imageDecoratorBuilders(
    editor: editor,
    limits: const ImageSizeLimits(minWidth: 80, maxWidth: 640),
  ),
);

editor.dispatchCommand(
  insertImageCommand,
  const ImageAttributes(src: 'https://…/flowers.jpg', altText: 'Blumen'),
);

The minimum and maximum size live with the widget, not in the document: they are a policy of the application showing it, and storing them would freeze one app's layout into everyone else's copy of the file.

Markdown exchange is opt-in, exactly as it is upstream — @lexical/markdown ships no image rule and the playground adds its own:

final transformers = defaultMarkdownTransformers.extend(
  textMatches: [imageTransformer],
);

Classes

ImageAttributes
What an inserted image starts out as.
ImageNode
An image in the document.
ImageSizeLimits
How large an image is allowed to be.
LexicalImageStyle
How the selection chrome around an editable image is drawn.
LexicalImageView
An image with drag handles, drawn for an ImageNode.

Enums

ImageHandle
Which handle is being dragged.

Constants

insertImageCommand → const LexicalCommand<ImageAttributes>
Inserts an image at the selection.
markdownImageMaxWidth → const double
The maxWidth given to an image parsed from markdown.

Properties

imageNodes → List<NodeSpec<LexicalNode>>
The node specs this package contributes.
no setter
imageTransformer → TextMatchTransformer
![alt](src), in both directions.
final

Functions

$createImageNode({required String src, String altText = '', double width = 0, double height = 0, double maxWidth = ImageNode.defaultMaxWidth, bool showCaption = false, Map<String, Object?>? caption}) → ImageNode
Creates an image, applying any registered node replacement.
$insertImage(ImageAttributes attributes) → void
Inserts an image at the selection, inside a paragraph.
defaultImageResolver(String src) → ImageProvider<Object>?
Resolves http(s): URLs, data: URIs and asset paths, and nothing else.
imageDecoratorBuilders({required LexicalEditor editor, ImageSizeLimits limits = const ImageSizeLimits(), ImageResolver resolver = defaultImageResolver, bool editable = true, bool captionsEnabled = true, bool preserveAspectRatio = true, TextStyle? captionStyle, Widget placeholderBuilder(BuildContext context, String src)?, LexicalImageStyle style = const LexicalImageStyle()}) → Map<String, Widget Function(BuildContext, DecoratorNode)>
A decorator builder for image, ready to hand to the renderer.
imageMarkdownTransformer({double maxWidth = markdownImageMaxWidth}) → TextMatchTransformer
The image rule, with a maxWidth of your choosing.
registerImage(LexicalEditor editor) → Unsubscribe
Registers insertImageCommand on editor.
resizeImage({required Size start, required Offset delta, required ImageHandle handle, ImageSizeLimits limits = const ImageSizeLimits(), double? aspectRatio}) → Size
The size a drag of delta on handle produces, starting from start.

Typedefs

ImageResolver = ImageProvider<Object>? Function(String src)
Turns a node's src into something Flutter can draw.