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

@@ -1723,6 +1723,8 @@ export namespace JSX {
         // @alpha
         "onImageRemoved"?: (event: LimelProsemirrorAdapterCustomEvent<ImageInfo>) => void;
         // @alpha
+        "onMetadataChange"?: (event: LimelProsemirrorAdapterCustomEvent<MetadataInfo>) => void;
+        // @alpha
         "triggerCharacters"?: TriggerCharacter[];
         "ui"?: EditorUiType;
         "value"?: string;
@@ -1846,9 +1848,11 @@ export namespace JSX {
         "onChange"?: (event: LimelTextEditorCustomEvent<string>) => void;
         // @alpha
         "onImagePasted"?: (event: LimelTextEditorCustomEvent<ImageInserter>) => void;
-        // @alpha
+        // @alpha @deprecated
         "onImageRemoved"?: (event: LimelTextEditorCustomEvent<ImageInfo>) => void;
         // @alpha
+        "onMetadataChange"?: (event: LimelTextEditorCustomEvent<MetadataInfo>) => void;
+        // @alpha
         "onTriggerChange"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
         // @alpha
         "onTriggerStart"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
@@ -2368,6 +2372,12 @@ export interface Link {
     title?: string;
 }
 
+// @alpha (undocumented)
+export interface LinkInfo {
+    href: string;
+    text: string;
+}
+
 // @public
 export interface ListComponent {
     name: string;
@@ -2425,6 +2435,12 @@ export type MenuLoader = (item: MenuItem) => Promise<Array<MenuItem | ListSepara
 // @public
 export type MenuSearcher = (query: string) => Promise<Array<MenuItem | ListSeparator>>;
 
+// @alpha
+export interface MetadataInfo {
+    images: ImageInfo[];
+    links: LinkInfo[];
+}
+
 // @public (undocumented)
 export type OfficeViewer = 'microsoft-office' | 'google-drive';
 

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

@@ -5,6 +5,8 @@ import {
     ImageInfo,
     LimelTextEditorCustomEvent,
     LimelCheckboxCustomEvent,
+    MetadataInfo,
+    ImageState,
 } from '@limetech/lime-elements';
 /**
  * Handling inline images (with external file storage)
@@ -41,14 +43,16 @@ export class TextEditorWithInlineImagesExample {
     @State()
     private uploadImageFails = false;
 
+    private metadata: MetadataInfo = { 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 +113,44 @@ export class TextEditorWithInlineImagesExample {
         }
     };
 
-    private handleImageRemoved = (
-        event: LimelTextEditorCustomEvent<ImageInfo>,
+    private handleMetadataChange = (
+        event: LimelTextEditorCustomEvent<MetadataInfo>,
     ) => {
-        const imageInfo = event.detail;
-        console.log(`Image deleted: ${imageInfo.fileInfoId}`);
+        const removedImages = this.getRemovedImages(
+            this.metadata,
+            event.detail,
+        );
+
+        removedImages.forEach((image) => {
+            console.log(`Image removed: ${image.fileInfoId}`);
+
+            if (image.state === ImageState.SUCCESS) {
+                this.removeImage(image);
+            }
+        });
+
+        this.metadata = event.detail;
+    };
+
+    private getRemovedImages(
+        oldMetadata: MetadataInfo,
+        newMetadata: MetadataInfo,
+    ): ImageInfo[] {
+        return oldMetadata.images.filter(
+            (oldImage) =>
+                !newMetadata.images.some(
+                    (newImage) => newImage.fileInfoId === oldImage.fileInfoId,
+                ),
+        );
+    }
+
+    private removeImage(image: ImageInfo) {
+        // Remove image from external file storage if desired.
 
         try {
             throw new Error('Not implemented.');
         } catch (error) {
-            console.error(
-                `Failed to delete image ${imageInfo.fileInfoId}`,
-                error,
-            );
+            console.error(`Failed to remove image ${image.fileInfoId}`, error);
         }
-    };
+    }
 }

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

@@ -1,28 +1,16 @@
-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, ImageState } from '../../../text-editor.types';
 import { Node, Slice, Fragment } from 'prosemirror-model';
-import { imageCache } 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,57 +24,7 @@ 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 = (

src/components/text-editor/prosemirror-adapter/plugins/link-plugin.ts

@@ -4,16 +4,12 @@ import { schema } from 'prosemirror-schema-basic';
 import { Mark } from 'prosemirror-model';
 import { isExternalLink, isValidUrl } from '../menu/menu-commands';
 import { EditorMenuTypes, MouseButtons } from '../menu/types';
+import { LinkInfo } from '../../text-editor.types';
 
 export const linkPluginKey = new PluginKey('linkPlugin');
 
 export type UpdateLinkCallback = (text: string, href: string) => void;
 
-export interface EditorLinkMenuEventDetail {
-    href: string;
-    text: string;
-}
-
 const updateLink = (
     view: EditorView,
     updateLinkCallback?: UpdateLinkCallback,
@@ -138,14 +134,11 @@ const processModClickEvent = (view: EditorView, event: MouseEvent): boolean => {
 };
 
 const openLinkMenu = (view: EditorView, href: string, text: string) => {
-    const event = new CustomEvent<EditorLinkMenuEventDetail>(
-        'open-editor-link-menu',
-        {
-            detail: { href: href, text: text },
-            bubbles: true,
-            composed: true,
-        },
-    );
+    const event = new CustomEvent<LinkInfo>('open-editor-link-menu', {
+        detail: { href: href, text: text },
+        bubbles: true,
+        composed: true,
+    });
     view.dom.dispatchEvent(event);
 };
 

src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx

@@ -34,10 +34,7 @@ import { isItem } from 'src/components/action-bar/isItem';
 import { cloneDeep, debounce } from 'lodash-es';
 import { Languages } from '../../date-picker/date.types';
 import { strikethrough } from './menu/menu-schema-extender';
-import {
-    EditorLinkMenuEventDetail,
-    createLinkPlugin,
-} from './plugins/link-plugin';
+import { createLinkPlugin } from './plugins/link-plugin';
 import { createImageInserterPlugin } from './plugins/image/inserter';
 import { createImageViewPlugin } from './plugins/image/view';
 import { createMenuStateTrackingPlugin } from './plugins/menu-state-tracking-plugin';
@@ -49,10 +46,16 @@ import {
     TriggerCharacter,
     ImageInserter,
     ImageInfo,
+    MetadataInfo,
+    LinkInfo,
 } from '../text-editor.types';
 import { getTableNodes, getTableEditingPlugins } from './plugins/table-plugin';
 import { getImageNode, imageCache } from './plugins/image/node';
 import { EditorUiType } from '../types';
+import {
+    getMetadataFromDoc,
+    hasMetadataChanged,
+} from '../utils/metadata-utils';
 
 const DEBOUNCE_TIMEOUT = 300;
 
@@ -153,6 +156,8 @@ export class ProsemirrorAdapter {
     private lastEmittedValue: string;
     private changeWaiting = false;
 
+    private metadata: MetadataInfo = { images: [], links: [] };
+
     /**
      *  Used to stop change event emitting as result of getting updated value from consumer
      */
@@ -182,6 +187,15 @@ export class ProsemirrorAdapter {
     @Event()
     private imageRemoved: EventEmitter<ImageInfo>;
 
+    /**
+     * Dispatched when the metadata of the editor changes (images and links)
+     *
+     * @private
+     * @alpha
+     */
+    @Event()
+    private metadataChange: EventEmitter<MetadataInfo>;
+
     constructor() {
         this.portalId = createRandomString();
     }
@@ -404,10 +418,7 @@ export class ProsemirrorAdapter {
                     this.contentConverter,
                 ),
                 createLinkPlugin(this.handleNewLinkSelection),
-                createImageInserterPlugin(
-                    this.imagePasted.emit,
-                    this.imageRemoved.emit,
-                ),
+                createImageInserterPlugin(this.imagePasted.emit),
                 createImageViewPlugin(this.language),
                 createMenuStateTrackingPlugin(
                     editorMenuTypesArray,
@@ -456,6 +467,10 @@ export class ProsemirrorAdapter {
         const tr = this.view.state.tr;
         tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);
         this.view.dispatch(tr);
+
+        const metadata = getMetadataFromDoc(this.view.state.doc);
+        this.metadataEmitter(metadata);
+
         this.suppressChangeEvent = false;
     }
 
@@ -473,11 +488,39 @@ export class ProsemirrorAdapter {
             return;
         }
 
+        const metadata = getMetadataFromDoc(newState.doc);
+        this.metadataEmitter(metadata);
+
         this.lastEmittedValue = content;
         this.changeWaiting = true;
         this.changeEmitter(content);
     };
 
+    private metadataEmitter(metadata: MetadataInfo) {
+        if (hasMetadataChanged(this.metadata, metadata)) {
+            this.removeImagesFromCache(metadata, this.metadata);
+            this.metadata = metadata;
+            this.metadataChange.emit(metadata);
+        }
+    }
+
+    private removeImagesFromCache(
+        newMetadata: MetadataInfo,
+        oldMetadata: MetadataInfo,
+    ) {
+        const removedImages = oldMetadata.images.filter(
+            (oldImage) =>
+                !newMetadata.images.some(
+                    (newImage) => newImage.fileInfoId === oldImage.fileInfoId,
+                ),
+        );
+
+        removedImages.forEach((image) => {
+            imageCache.delete(image.fileInfoId);
+            this.imageRemoved.emit(image);
+        });
+    }
+
     private handleActionBarItem = (
         event: CustomEvent<ActionBarItem<EditorMenuTypes>>,
     ) => {
@@ -534,9 +577,7 @@ export class ProsemirrorAdapter {
         this.link.href = href || 'https://';
     };
 
-    private handleOpenLinkMenu = (
-        event: CustomEvent<EditorLinkMenuEventDetail>,
-    ) => {
+    private handleOpenLinkMenu = (event: CustomEvent<LinkInfo>) => {
         event.stopImmediatePropagation();
         const { href, text } = event.detail;
         this.link = { href: href, text: text };