Image example

[stanonyime]

How do you handle image pick?

[featzima]

We use the file_selector package

[stanonyime]

What I mean is there is supposed to be a delegate at the Editor class which ties the image handling logic? That seems to be missing? Is there any example somewhere?

[featzima]

ZefyrEditor(
  focusNode: FocusNote()
  embedBuilder: ZefyrEditorEmbedBuilder(widget.filesystemRepo),
  // ...
),

class ZefyrEditorEmbedBuilder {
  final FilesystemRepo _filesystemRepo;

  ZefyrEditorEmbedBuilder(this._filesystemRepo);

  Widget call(BuildContext context, EmbedNode node) {
    if (node.value.type == "hr") {
      final theme = ZefyrTheme.of(context)!;
      return Divider(
        height: theme.paragraph.style.fontSize! * theme.paragraph.style.height!,
        thickness: 2,
        color: Colors.grey.shade200,
      );
    }
    if (node.value.type == "image") {
      final filename = node.value.data["source"] as String?;
      return Align(
        alignment: Alignment.centerLeft,
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 300),
          child: filename == null ? _buildMissedImage() : _buildExistsImage(filename),
        ),
      );
    }
    throw UnimplementedError('Embeddable type "${node.value.type}" is not supported by default embed '
        'builder of ZefyrEditor. You must pass your own builder function to '
        'embedBuilder property of ZefyrEditor or ZefyrField widgets.');
  }

  Widget _buildExistsImage(String filename) {
    return FutureBuilder<File>(
      future: _filesystemRepo.loadImage(filename),
      builder: (context, file) => file.data == null
          ? Container(
              width: 320,
              height: 240,
              color: Colors.grey.shade50,
              child: const Center(child: CircularProgressIndicator()),
            )
          : Image.file(file.data!),
    );
  }

  Widget _buildMissedImage() {
    return Container(
      width: 320,
      height: 240,
      color: Colors.grey.shade50,
      child: const Center(
        child: Icon(Icons.close, color: Colors.grey),
      ),
    );
  }
}

[cowcomic]

what is FilesystemRepo?
i need complete example code
thx

[glynskyi]

@cowcomic instead of FilesystemRepo you can use any external source of images. It depends on what you put to embedded object properties. It can be file path or raw bytes from database.

[ruolunhui]

Hello, I would like to ask how to customize the insert. Using the following two methods to insert the picture and then inserting the picture will report an error
_controller.document.root.insertBefore(lineNode);
_controller.document.insert(0, EmbeddableObject("image",data: {"source":(imageUrl)}, inline: false));

type 'double' is not a subtype of type 'int' in type cast

And the callback will not be triggered after the image is inserted

[Xiangjinxiu]

controller.document.insert(0, BlockEmbed.image(value.path));

[ManavSarkar]

but the toolbar doesn't show the image picker icon. Without that, how can we add the functionality?
Is there any way out?

[ManavSarkar]

@Xiangjinxiu