feat(text-editor): add support for pasting inline images

Author: FredrikWallstrom

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

@@ -0,0 +1,87 @@
+import { Component, h, State } from '@stencil/core';
+import { ImageInserter, FileInfo } from '@limetech/lime-elements';
+/**
+ * Handling inline images
+ *
+ * To allow users to paste images directly into the text editor, you can
+ * listen to the `imagePasted` event, which is triggered when an image file
+ * is pasted into the editor.
+ *
+ * The `imagePasted` event contains an `ImageInserter` object, which you can
+ * use to insert a thumbnail of the pasted image into the editor. The
+ * `ImageInserter` object also contains the image file, which you can upload
+ * to an external file storage. When the image is uploaded, you can insert
+ * the src url of the uploaded image into the editor using the `insertImage`
+ * method. If the image upload fails, you can insert an error thumbnail
+ * using the `insertErrorThumbnail` method.
+ */
+@Component({
+    tag: 'limel-example-text-editor-with-inline-images',
+    shadow: true,
+})
+export class TextEditorWithInlineImagesExample {
+    @State()
+    private value: string = 'Copy an image file and paste it here.';
+
+    @State()
+    private readonly = false;
+
+    public render() {
+        return [
+            <limel-text-editor
+                value={this.value}
+                onChange={this.handleChange}
+                readonly={this.readonly}
+                onImagePasted={this.handleImagePasted}
+                onImageRemoved={this.handleImageRemoved}
+                contentType="html"
+            />,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+            </limel-example-controls>,
+        ];
+    }
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private handleChange = (event: CustomEvent<string>) => {
+        this.value = event.detail;
+    };
+
+    private handleImagePasted = async (event: CustomEvent<ImageInserter>) => {
+        const imageInserter = event.detail;
+
+        imageInserter.insertThumbnail();
+        const file = await this.uploadImage(imageInserter.fileInfo);
+        if (file) {
+            imageInserter.insertImage(file.src);
+        } else {
+            imageInserter.insertErrorThumbnail();
+        }
+    };
+
+    private uploadImage = async (fileInfo: FileInfo): Promise<any> => {
+        try {
+            // Upload image to external file storage
+        } catch (error) {
+            console.error('Failed to upload image', error);
+        }
+    };
+
+    private handleImageRemoved = (event: CustomEvent<string>) => {
+        const src = event.detail;
+
+        try {
+            // Delete image from external file storage
+        } catch (error) {
+            console.error('Failed to delete image', error);
+        }
+    };
+}

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

@@ -0,0 +1,189 @@
+import { Plugin, PluginKey, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { createFileInfo } from '../../../../../util/files';
+import { FileInfo } from '../../../../../global/shared-types/file.types';
+import { ImageInserter } from '../../../text-editor.types';
+import { ImageState } from './state';
+
+export const pluginKey = new PluginKey('imageInserterPlugin');
+
+export type ImagePastedCallback = (imageInserter: ImageInserter) => void;
+export type ImageRemovedCallback = (src: string) => void;
+
+export const createImageInserterPlugin = (
+    imagePastedCallback: ImagePastedCallback,
+    imageRemovedCallback: ImageRemovedCallback,
+) => {
+    return new Plugin({
+        key: pluginKey,
+        props: {
+            handlePaste: (view, event, _) => {
+                return processPasteEvent(view, event);
+            },
+            handleDOMEvents: {
+                imagePasted: (_, event) => {
+                    imagePastedCallback(event.detail);
+                },
+            },
+        },
+        state: {
+            init() {
+                return { images: [] };
+            },
+            apply(tr, pluginState) {
+                let newState = { ...pluginState };
+
+                newState.images = getImagesFromTransaction(tr);
+                findAndHandleRemovedImages(
+                    imageRemovedCallback,
+                    pluginState.images,
+                    newState.images,
+                );
+
+                return newState;
+            },
+        },
+    });
+};
+
+const getImagesFromTransaction = (tr: Transaction): string[] => {
+    const newImages: string[] = [];
+    tr.doc.descendants((node) => {
+        if (
+            node.type.name === 'image' &&
+            node.attrs.state === ImageState.SUCCESS
+        ) {
+            newImages.push(node.attrs.src);
+        }
+    });
+    return newImages;
+};
+
+const findAndHandleRemovedImages = (
+    imageRemovedCallback: ImageRemovedCallback,
+    previousImages: string[],
+    newImages: string[],
+) => {
+    const removedImages = previousImages.filter(
+        (src: string) => !newImages.includes(src),
+    );
+    for (const src of removedImages) {
+        imageRemovedCallback(src);
+    }
+};
+
+export const imageInserterFactory = (
+    view: EditorView,
+    base64Data: string,
+    fileInfo: FileInfo,
+): ImageInserter => {
+    return {
+        fileInfo: fileInfo,
+        insertThumbnail: createThumbnailInserter(view, base64Data, fileInfo),
+        insertImage: createImageInserter(view, fileInfo),
+        insertErrorThumbnail: createErrorThumbnailInserter(view, fileInfo),
+    };
+};
+
+const createThumbnailInserter =
+    (view: EditorView, base64Data: string, fileInfo: FileInfo) => () => {
+        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 transaction = state.tr.replaceSelectionWith(placeholderNode);
+
+        dispatch(transaction);
+    };
+
+const createImageInserter =
+    (view: EditorView, fileInfo: FileInfo) => (src?: string) => {
+        const { state, dispatch } = view;
+        const { schema } = state;
+
+        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,
+                });
+
+                tr.replaceWith(pos, pos + node.nodeSize, imageNode);
+
+                return false;
+            }
+        });
+
+        dispatch(tr);
+    };
+
+const createErrorThumbnailInserter =
+    (view: EditorView, fileInfo: FileInfo) => () => {
+        const { state, dispatch } = view;
+        const { schema } = state;
+
+        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,
+                });
+
+                tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);
+
+                return false;
+            }
+        });
+
+        dispatch(tr);
+    };
+
+/**
+ * Process a paste event and trigger an imagePasted event if an image file is pasted.
+ * @param view - The ProseMirror editor view.
+ * @param event - The paste event.
+ * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.
+ */
+const processPasteEvent = (
+    view: EditorView,
+    event: ClipboardEvent,
+): boolean => {
+    const clipboardData = event.clipboardData;
+    if (!clipboardData) {
+        return false;
+    }
+
+    const files = Array.from(clipboardData.files || []);
+    for (const file of files) {
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                view.dom.dispatchEvent(
+                    new CustomEvent('imagePasted', {
+                        detail: imageInserterFactory(
+                            view,
+                            reader.result as string,
+                            createFileInfo(file),
+                        ),
+                    }),
+                );
+            };
+
+            reader.readAsDataURL(file);
+        }
+    }
+
+    return files.length > 0;
+};