fix wrong custom embed key

[theachoem]

_node.value.type & node.value.type has different value in custom embed case which lead to error, should always use node.value.type.

See how it error In editor.dart:

if (builders != null) {
  var _node = node;

  // Creates correct node for custom embed
  if (node.value.type == BlockEmbed.customType) {
    _node = Embed(CustomBlockEmbed.fromJsonString(node.value.data));
  }

  // error here since it can't find that key
  for (final builder in builders) {
    if (builder.key == _node.value.type) {
      return builder.build(context, controller, _node, readOnly);
    }
  }
}

throw UnimplementedError(
  'Embeddable type "${node.value.type}" is not supported by supplied '
  'embed builders. You must pass your own builder function to '
  'embedBuilders property of QuillEditor or QuillField widgets.',
);

[Jon-Salmon]

@singerdmx I do not believe this fix is correct and I think it should be reverted.

@theachoem What was the motivation for this change? In the original code, multiple custom builders can be provided, each corresponding to a custom type. After this change, a single builder has to be used to handle any type that isn't image, video or function.

As all the nodes of custom builders are stored in the following form, it has to be decoded before the type can be compared with the builders.

custom: "{custom_type: data}"

[singerdmx]

I can see _node is being changed during the loop

[singerdmx]

@Jon-Salmon could you submit a PR to revert it please?

[theachoem]

@Jon-Salmon @singerdmx

In block embed, we have image, fomula, video & custom. If user decide to custom, we can do in that custom widget. It will not mix up between custom & original block embed. Revert changes break the previous user data. I will send sample data later.

Here is how I handle it.

QuillEditor(
  embedBuilders: [
    QuillImageRenderer(),
    QuillCustomRenderer(),
  ],
  ...
}

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:spooky/views/detail/quill_renderer/custom_date_block_renderer.dart';
import 'package:spooky/views/detail/quill_renderer/quill_unsupported_renderer.dart';
import 'package:spooky/views/detail/quill_renderer_helper/date_block_embed.dart';

class QuillCustomRenderer extends quill.EmbedBuilder {
  @override
  String get key => quill.BlockEmbed.customType;

  @override
  Widget build(BuildContext context, quill.QuillController controller, quill.Embed node, bool readOnly) {
    quill.Embeddable block = node.value;

    switch (block.type) {
      case DateBlockEmbed.blockType:
        return CustomDateBlockRenderer(
          block: block as quill.CustomBlockEmbed,
          readOnly: readOnly,
          controller: controller,
        );
      default:
        return const QuillUnsupportedRenderer();
    }
  }
}

[theachoem]

In lib/src/models/documents/nodes/embeddable.dart.

[theachoem]

We can just do builder.key == _node.value.type || builder.key == node.value.type instead. But it will make some inconsistency on data.

[theachoem]

Data sample:

[
  { "insert": "Journey!\n\n" },
  {
    "insert": {
      "custom": "{\"date\":\"[{\\\"insert\\\":\\\"2022-09-28T07:51:20.595740\\\\n\\\"}]\"}"
    }
  },
  { "insert": "\n\n" },
  {
    "insert": {
      "image": "~/Library/Developer/CoreSimulator/Devices/B5F51001-AAA2-4155-8033-62F671A24B66/data/Containers/Data/Application/42C2A551-F56E-4864-9535-8B91C0FA4F83/tmp/image_picker_6A40603C-3BD4-4F07-B7E1-8F72FD5072D9-10323-000001C059405FC3.jpg"
    }
  },
  { "insert": "\n" }
]

[singerdmx]

@Jon-Salmon Your thought?

[Jon-Salmon]

@theachoem this doesn't break existing user data, instead your custom builder should look like:

class QuillCustomRenderer extends quill.EmbedBuilder {
  @override
  String get key => DateBlockEmbed.blockType;

  @override
  Widget build(BuildContext context, quill.QuillController controller, quill.Embed node, bool readOnly) {
    quill.Embeddable block = node.value;

    return CustomDateBlockRenderer(
        block: block as quill.CustomBlockEmbed,
        readOnly: readOnly,
        controller: controller,
      );
  }
}