How to get the properties of a node has been removed?

[DanielOrtel]

This is a similar question to #3186, with an added requirements.

I have an an Images node, which contain images uploaded to a CDN, and the node itself contains the ids and urls associated with the images themselves. What I'd like to do, is cleanup the assets from the CDN when a node is removed. The only issue is, registerMutationListener only returns the key of the node, but not the properties which would contain the id of the assets.

So, is there a way to access the previous properties of a deleted node when using registerUpdateListener?

[DanielOrtel]

I could not find a solution to this, so I ended up requiring the consumer of the Editor component to store and manage the ids of the assets externally. Not a pretty solution, and potentially prone to desync issues, but it is what it is. I'm leaving my solution here in case anyone runs into a similar question:

  const [imageNodes, setImageNodes] = useState({});

  const imagesListener = useCallback(
    (value) => {
      if (!value) return;

      Object.entries(value).forEach(([key, { mutation, ids }]) => {
        if (mutation === 'destroyed') {
          if (imageNodes[key]?.ids) {
            cleanupImages(imageNodes[key]?.ids);
            setImageNodes((prevState) => ({ ...prevState, [key]: { ...prevState[key], cleanup: true } }));
          } else console.error(`Failed to perform cleanup for ${key} editor carousel node`);
        } else {
          if (imageNodes[key]?.cleanup && imageNodes[key]?.ids) {
            // can't destroy assets instantly, since undo - redo is a possibility, so images are only scheduled for deletion
            undoCleanup(imageNodes[key].ids);
          }

          setImageNodes((prevState) => ({ ...prevState, [key]: { ids, cleanup: false } }));
        }
      });
    },
    [cleanupImages, undoCleanup, imageNodes]
  );

// and the `imagesListener` is passed as a prop to the ImagePlugin, which subscribes to the built-in `registerMutationListener`
  useEffect(() => {
    return editor.registerMutationListener(CarouselNode, (mutatedNodes) => {
      for (let [nodeKey, mutation] of mutatedNodes) {
        if (mutation === 'created' || mutation === 'updated') {
          const editorState = editor.getEditorState();

          editorState.read(() => {
            const carouselNode = $getNodeByKey<CarouselNode>(nodeKey);
            if (carouselNode && carouselNode.getImages().length) {
              imagesListener({ [nodeKey]: { mutation, ids: carouselNode.getImages().map(({ id }) => id) } });
            }
          });
        }

        if (mutation === 'destroyed') {
          imagesListener({ [nodeKey]: { mutation } });
        }
      }
    });
  }, [editor, imagesListener]); 

I would propose though, to surface the values of the deleted node in the destroyed mutation as well

[Alex-ray]

@DanielOrtel so the second param to the registerMutationListener callback is an object that contains prevEditorState, this editor state contains a ._nodeMap that is a mapping of all nodes keys to their node object representation. You should be able to use this to pull that nodes properties upon deletion.

i.e.

editor.registerMutationListener(CarouselNode, (mutatedNodes, { prevEditorState }) => {
 Object.entries(value).forEach(([key, { mutation, ids }]) => {
        if (mutation === 'destroyed') {
            prevEditorState._nodeMap.get(key).__anyNodeKey
        }
});
});