feat(text-editor): add metadata event for notifying about metadata changes (images and links)

Deprecated the `imageRemoved`. Use the `metadataChange` event instead to track image removals.

Author: FredrikWallstrom

etc/lime-elements.api.md

@@ -820,6 +820,25 @@ export interface DockMenu {
     };
 }
 
+// @alpha (undocumented)
+export interface EditorImage {
+    fileInfoId: string;
+    src: string;
+    state: ImageState;
+}
+
+// @alpha (undocumented)
+export interface EditorLink {
+    href: string;
+    text: string;
+}
+
+// @alpha
+export interface EditorMetadata {
+    images: EditorImage[];
+    links: EditorLink[];
+}
+
 // @beta
 export type EditorTextLink = {
     text?: string;
@@ -986,13 +1005,6 @@ interface Image_2 {
 }
 export { Image_2 as Image }
 
-// @alpha (undocumented)
-export interface ImageInfo {
-    fileInfoId: string;
-    src: string;
-    state: ImageState;
-}
-
 // @alpha (undocumented)
 export interface ImageInserter {
     // (undocumented)
@@ -1721,7 +1733,9 @@ export namespace JSX {
         // @alpha
         "onImagePasted"?: (event: LimelProsemirrorAdapterCustomEvent<ImageInserter>) => void;
         // @alpha
-        "onImageRemoved"?: (event: LimelProsemirrorAdapterCustomEvent<ImageInfo>) => void;
+        "onImageRemoved"?: (event: LimelProsemirrorAdapterCustomEvent<EditorImage>) => void;
+        // @alpha
+        "onMetadataChange"?: (event: LimelProsemirrorAdapterCustomEvent<EditorMetadata>) => void;
         // @alpha
         "triggerCharacters"?: TriggerCharacter[];
         "ui"?: EditorUiType;
@@ -1846,8 +1860,10 @@ export namespace JSX {
         "onChange"?: (event: LimelTextEditorCustomEvent<string>) => void;
         // @alpha
         "onImagePasted"?: (event: LimelTextEditorCustomEvent<ImageInserter>) => void;
+        // @alpha @deprecated
+        "onImageRemoved"?: (event: LimelTextEditorCustomEvent<EditorImage>) => void;
         // @alpha
-        "onImageRemoved"?: (event: LimelTextEditorCustomEvent<ImageInfo>) => void;
+        "onMetadataChange"?: (event: LimelTextEditorCustomEvent<EditorMetadata>) => void;
         // @alpha
         "onTriggerChange"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
         // @alpha

src/components/text-editor/examples/text-editor-with-inline-images-file-storage.tsx

@@ -2,9 +2,10 @@ import { Component, h, State, Host } from '@stencil/core';
 import {
     ImageInserter,
     FileInfo,
-    ImageInfo,
+    EditorImage,
     LimelTextEditorCustomEvent,
     LimelCheckboxCustomEvent,
+    EditorMetadata,
 } from '@limetech/lime-elements';
 /**
  * Handling inline images (with external file storage)
@@ -41,14 +42,16 @@ export class TextEditorWithInlineImagesExample {
     @State()
     private uploadImageFails = false;
 
+    private metadata: EditorMetadata = { links: [], images: [] };
+
     public render() {
         return (
             <Host>
                 <limel-text-editor
                     value={this.value}
                     onChange={this.handleChange}
                     onImagePasted={this.handleImagePasted}
-                    onImageRemoved={this.handleImageRemoved}
+                    onMetadataChange={this.handleMetadataChange}
                 />
                 <limel-checkbox
                     label="Upload image fails - insert failed thumbnail"
@@ -109,19 +112,38 @@ export class TextEditorWithInlineImagesExample {
         }
     };
 
-    private handleImageRemoved = (
-        event: LimelTextEditorCustomEvent<ImageInfo>,
+    private handleMetadataChange = (
+        event: LimelTextEditorCustomEvent<EditorMetadata>,
     ) => {
-        const imageInfo = event.detail;
-        console.log(`Image deleted: ${imageInfo.fileInfoId}`);
+        const removedImages = this.getRemovedImages(
+            this.metadata,
+            event.detail,
+        );
 
-        try {
-            throw new Error('Not implemented.');
-        } catch (error) {
-            console.error(
-                `Failed to delete image ${imageInfo.fileInfoId}`,
-                error,
-            );
-        }
+        removedImages.forEach((image) => {
+            if (image.state === 'success') {
+                this.removeImage(image);
+            }
+        });
+
+        this.metadata = event.detail;
     };
+
+    private getRemovedImages(
+        oldMetadata: EditorMetadata,
+        newMetadata: EditorMetadata,
+    ): EditorImage[] {
+        const newImageIds = new Set(
+            newMetadata.images.map((image) => image.fileInfoId),
+        );
+
+        return oldMetadata.images.filter(
+            (image) => !newImageIds.has(image.fileInfoId),
+        );
+    }
+
+    private removeImage(image: EditorImage) {
+        // Remove image from external file storage if desired.
+        console.log(`Image removed: ${image.fileInfoId}`);
+    }
 }

src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts

@@ -1,28 +1,17 @@
-import { Plugin, PluginKey, Transaction, StateField } from 'prosemirror-state';
+import { Plugin, PluginKey } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { createFileInfo } from '../../../../../util/files';
 import { FileInfo } from '../../../../../global/shared-types/file.types';
-import {
-    ImageInserter,
-    ImageInfo,
-    ImageState,
-} from '../../../text-editor.types';
+import { ImageInserter, EditorImageState } from '../../../text-editor.types';
 import { Node, Slice, Fragment } from 'prosemirror-model';
-import { imageCache } from './node';
+import { ImageNodeAttrs } from './node';
 
 export const pluginKey = new PluginKey('imageInserterPlugin');
 
 type ImagePastedCallback = (data: ImageInserter) => CustomEvent<ImageInserter>;
 
-type ImageRemovedCallback = (data: ImageInfo) => CustomEvent<ImageInfo>;
-
-type PluginState = {
-    insertedImages: Record<string, Node>;
-};
-
 export const createImageInserterPlugin = (
     imagePastedCallback: ImagePastedCallback,
-    imageRemovedCallback: ImageRemovedCallback,
 ) => {
     return new Plugin({
         key: pluginKey,
@@ -36,59 +25,9 @@ export const createImageInserterPlugin = (
                 },
             },
         },
-        state: {
-            init: (): PluginState => {
-                return { insertedImages: {} };
-            },
-            apply: (tr, pluginState): PluginState => {
-                const newState = { ...pluginState };
-
-                newState.insertedImages = getImagesFromTransaction(tr);
-                findAndHandleRemovedImages(
-                    imageRemovedCallback,
-                    pluginState.insertedImages,
-                    newState.insertedImages,
-                );
-
-                return newState;
-            },
-        } as StateField<PluginState>,
     });
 };
 
-const getImagesFromTransaction = (tr: Transaction): Record<string, Node> => {
-    const images: Record<string, Node> = {};
-    tr.doc.descendants((node) => {
-        if (node.type.name === 'image') {
-            images[node.attrs.fileInfoId] = node;
-        }
-    });
-
-    return images;
-};
-
-const findAndHandleRemovedImages = (
-    imageRemovedCallback: ImageRemovedCallback,
-    previousImages: Record<string, Node>,
-    newImages: Record<string, Node>,
-) => {
-    const removedKeys = Object.keys(previousImages).filter(
-        (key) => !(key in newImages),
-    );
-
-    for (const removedKey of removedKeys) {
-        const removedImage = previousImages[removedKey];
-        const imageInfo: ImageInfo = {
-            fileInfoId: removedImage.attrs.fileInfoId,
-            src: removedImage.attrs.src,
-            state: removedImage.attrs.state,
-        };
-        imageRemovedCallback(imageInfo);
-
-        imageCache.delete(removedImage.attrs.fileInfoId);
-    }
-};
-
 export const imageInserterFactory = (
     view: EditorView,
     base64Data: string,
@@ -107,12 +46,12 @@ const createThumbnailInserter =
         const { state, dispatch } = view;
         const { schema } = state;
 
-        const placeholderNode = schema.nodes.image.create({
-            src: base64Data,
-            alt: fileInfo.filename,
-            fileInfoId: fileInfo.id,
-            state: ImageState.LOADING,
-        });
+        const imageNodeAttrs = createImageNodeAttrs(
+            base64Data,
+            fileInfo,
+            'loading',
+        );
+        const placeholderNode = schema.nodes.image.create(imageNodeAttrs);
 
         const transaction = state.tr.replaceSelectionWith(placeholderNode);
 
@@ -127,12 +66,12 @@ const createImageInserter =
         const tr = state.tr;
         state.doc.descendants((node, pos) => {
             if (node.attrs.fileInfoId === fileInfo.id) {
-                const imageNode = schema.nodes.image.create({
-                    src: src ? src : node.attrs.src,
-                    alt: fileInfo.filename,
-                    fileInfoId: fileInfo.id,
-                    state: ImageState.SUCCESS,
-                });
+                const imageNodeAttrs = createImageNodeAttrs(
+                    src ? src : node.attrs.src,
+                    fileInfo,
+                    'success',
+                );
+                const imageNode = schema.nodes.image.create(imageNodeAttrs);
 
                 tr.replaceWith(pos, pos + node.nodeSize, imageNode);
 
@@ -151,12 +90,13 @@ const createFailedThumbnailInserter =
         const tr = state.tr;
         state.doc.descendants((node, pos) => {
             if (node.attrs.fileInfoId === fileInfo.id) {
-                const errorPlaceholderNode = schema.nodes.image.create({
-                    src: node.attrs.src,
-                    alt: fileInfo.filename,
-                    fileInfoId: fileInfo.id,
-                    state: ImageState.FAILED,
-                });
+                const imageNodeAttrs = createImageNodeAttrs(
+                    node.attrs.src,
+                    fileInfo,
+                    'failed',
+                );
+                const errorPlaceholderNode =
+                    schema.nodes.image.create(imageNodeAttrs);
 
                 tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);
 
@@ -167,6 +107,19 @@ const createFailedThumbnailInserter =
         dispatch(tr);
     };
 
+function createImageNodeAttrs(
+    src: string,
+    fileInfo: FileInfo,
+    state: EditorImageState,
+): ImageNodeAttrs {
+    return {
+        src: src,
+        alt: fileInfo.filename,
+        fileInfoId: fileInfo.id,
+        state: state,
+    };
+}
+
 /**
  * Check if a given ProseMirror node or fragment contains any image nodes.
  * @param node - The ProseMirror node or fragment to check.