How to correctly intercept and mutate block copies/changes?

[vitallygolovanov]

Hi! I'm having an issue with BlockNote in Next.js/React.

What I'm trying to achieve:

• If a custom block is being copied via drag-n-drop (ctrl + drag), or a duplicate of the block is pasted from the clipboard, I want to reset some properties of a copy.

What I tried:

• Doing editor.updateBlock() in an onChange() listener. The problem here is that the blocks returned by getChanges() still have the same block.id as the originals, so editor.updateBlock(changedBlock) updates at random, either the source of the drag, or a duplicate (probably, whichever comes higher in the document). Also, at the time when onChange fires, editor.forEachBlock() already has the new copy (with the old id), so somehow discerning the original block from that is impossible. This is a simplified example of the logic:

    editor.onChange(async (_ed, { getChanges }) => {
      const changes = getChanges();

      // First checking if there even are changes to process.
      // This is important because the `onChange` event is called on every change,
      // and we don't want to do any work if there are no changes that match our criteria.
      if (!changes.some(c => c.type === "insert" && c.block.type === TARGET_BLOCK_TYPE)) {
        return; // no changes to process
      }

      // Some logic to separate the used ids from the new ones
      const existingIds =buildExistingIdMap(_ed, changes);

      for (const change of changes) {
        if (
          change.type === "insert" &&
          change.block.type === TARGET_BLOCK_TYPE &&
          (change.source.type === "drop" || change.source.type === "paste")
        ) {
          const oldId = change.block.props.permanentId;

          // If the insert did not remove the “source” block, it’s a copy
          // (moving produces a matching delete-change for the same blockId).
          const isMove =
            changes.some(
              c =>
                c.type === "delete" &&
                c.block.id === change.block.id /* same Yjs id */
            );

          const isDuplicate = existingIds.has(oldId) && !isMove;
          if (isDuplicate) {
            const newId = uuid();

            // Patch the block inside the editor
            _ed.updateBlock(change.block, { // <- Problem here, change.block is EXACTLY the same as the source block that was being copied, down to change.block.id.
              type: TARGET_BLOCK_TYPE,
              props: { 
                permanentId: newId,
                isArchived: false,
              }
            });
          }
        }
      }
    });

So as a first step I want to determine, if I'm even attempting this in the right spot. If not, then where should I look. If it is the right spot, then what's the procedure here?

Also, this is just the first step. The second step is achieving the same behavior when dragging/copying between editors in a multiple editor setup.

[nperez0111]

I'm not sure that I totally understand the use-case here. It seems to me that you are trying to maintain a custom identifier as being unique, when that is what the block ID is meant to already be? I would suggest trying to use just the block id if possible.

As for getChanges reporting the change as being the same block, give this PR a try: #1786 (comment) you can install it and see if the changes are more correct to what you were expecting.

[vitallygolovanov]

I would suggest trying to use just the block id if possible.

Block id's are unreliable (either intended behavior or due to bugs). For example, block id changes when a block is dragged between editors in a multi editor setup (you can see it even in the example page by inspecting a block before and after the drag & drop).

give this PR a try: #1786 (comment)

Thanks for the great tip, it seems like it might help me with some other stuff. But seems like it's unrelated to this particular issue.

I'm not sure that I totally understand the use-case here.

I need some blocks to have a stable reference to an external object in a remote database. That reference is to be persisted across any and all operations except explicit duplication via Ctrl+Drag gesture, copy/paste or similar, in which case that reference is to be dropped along with some other props. The change needs to be replicated to the collaborators.

Also there seems to be a bug with block ids on copy which is somewhat related to what I'm trying to achieve, but also is probably causing other issues: #1804