@qwanyx/ai-editor 1.0.0

package/dist/nodes/ImageNode.d.ts

@@ -0,0 +1,62 @@
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import React from 'react';
+export type ImageFloatType = 'none' | 'left' | 'right';
+export interface ImagePayload {
+    src: string;
+    altText?: string;
+    width?: number;
+    height?: number;
+    copyright?: string;
+    photographer?: string;
+    comment?: string;
+    float?: ImageFloatType;
+}
+export type SerializedImageNode = Spread<{
+    src: string;
+    altText: string;
+    width?: number;
+    height?: number;
+    copyright?: string;
+    photographer?: string;
+    comment?: string;
+    float?: ImageFloatType;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<React.ReactElement> {
+    __src: string;
+    __altText: string;
+    __width?: number;
+    __height?: number;
+    __copyright?: string;
+    __photographer?: string;
+    __comment?: string;
+    __float?: ImageFloatType;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    constructor(src: string, altText?: string, width?: number, height?: number, copyright?: string, photographer?: string, comment?: string, float?: ImageFloatType, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    setSrc(src: string): void;
+    getSrc(): string;
+    setAltText(altText: string): void;
+    getAltText(): string;
+    setWidth(width: number | undefined): void;
+    setHeight(height: number | undefined): void;
+    getWidth(): number | undefined;
+    getHeight(): number | undefined;
+    setCopyright(copyright: string | undefined): void;
+    getCopyright(): string | undefined;
+    setPhotographer(photographer: string | undefined): void;
+    getPhotographer(): string | undefined;
+    setComment(comment: string | undefined): void;
+    getComment(): string | undefined;
+    setFloat(float: ImageFloatType | undefined): void;
+    getFloat(): ImageFloatType | undefined;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportJSON(): SerializedImageNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    decorate(): React.ReactElement;
+}
+export declare function $createImageNode(payload: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+//# sourceMappingURL=ImageNode.d.ts.map

package/dist/nodes/ImageNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/nodes/ImageNode.tsx"],"names":[],"mappings":"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"}

package/dist/nodes/ImageNode.js

@@ -0,0 +1,487 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DecoratorNode, $getNodeByKey, } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useRef, useState, useEffect } from 'react';
+function ImageComponent({ src, altText, width, height, copyright: initialCopyright, photographer: initialPhotographer, comment: initialComment, float: initialFloat, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    const [isSelected, setIsSelected] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const [showMetadataEditor, setShowMetadataEditor] = useState(false);
+    const [showFullscreen, setShowFullscreen] = useState(false);
+    const [currentWidth, setCurrentWidth] = useState(width);
+    // Local state for display (updated after save)
+    const [displayCopyright, setDisplayCopyright] = useState(initialCopyright);
+    const [displayPhotographer, setDisplayPhotographer] = useState(initialPhotographer);
+    const [displayComment, setDisplayComment] = useState(initialComment);
+    const [displayFloat, setDisplayFloat] = useState(initialFloat || 'none');
+    // Edit form state
+    const [editSrc, setEditSrc] = useState('');
+    const [editAltText, setEditAltText] = useState('');
+    const [editCopyright, setEditCopyright] = useState('');
+    const [editPhotographer, setEditPhotographer] = useState('');
+    const [editComment, setEditComment] = useState('');
+    const [editFloat, setEditFloat] = useState('none');
+    const startX = useRef(0);
+    const startWidth = useRef(0);
+    // Handle click to select
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        setIsSelected(true);
+    }, []);
+    // Click outside to deselect
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setIsSelected(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Handle resize start
+    const handleResizeStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        startX.current = e.clientX;
+        startWidth.current = imageRef.current?.offsetWidth || currentWidth || 300;
+    }, [currentWidth]);
+    // Handle resize move
+    useEffect(() => {
+        if (!isResizing)
+            return;
+        const handleMouseMove = (e) => {
+            const diff = e.clientX - startX.current;
+            const newWidth = Math.max(50, startWidth.current + diff);
+            setCurrentWidth(newWidth);
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if (node && $isImageNode(node)) {
+                    node.setWidth(currentWidth);
+                }
+            });
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, editor, nodeKey, currentWidth]);
+    // Open metadata editor
+    const openMetadataEditor = useCallback(() => {
+        // Use props for src/altText (always current)
+        setEditSrc(src);
+        setEditAltText(altText);
+        // Read other values from node
+        editor.getEditorState().read(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (node && $isImageNode(node)) {
+                setEditCopyright(node.getCopyright() || '');
+                setEditPhotographer(node.getPhotographer() || '');
+                setEditComment(node.getComment() || '');
+                setEditFloat(node.getFloat() || 'none');
+            }
+        });
+        setShowMetadataEditor(true);
+    }, [editor, nodeKey, src, altText]);
+    // Save metadata
+    const saveMetadata = useCallback(() => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (node && $isImageNode(node)) {
+                if (editSrc)
+                    node.setSrc(editSrc);
+                node.setAltText(editAltText);
+                node.setCopyright(editCopyright || undefined);
+                node.setPhotographer(editPhotographer || undefined);
+                node.setComment(editComment || undefined);
+                node.setFloat(editFloat);
+            }
+        });
+        // Update display state
+        setDisplayCopyright(editCopyright || undefined);
+        setDisplayPhotographer(editPhotographer || undefined);
+        setDisplayComment(editComment || undefined);
+        setDisplayFloat(editFloat);
+        setShowMetadataEditor(false);
+    }, [editor, nodeKey, editSrc, editAltText, editCopyright, editPhotographer, editComment, editFloat]);
+    // Get float styles
+    const getFloatStyles = () => {
+        if (displayFloat === 'left') {
+            return { float: 'left', marginRight: '16px', marginBottom: '8px' };
+        }
+        if (displayFloat === 'right') {
+            return { float: 'right', marginLeft: '16px', marginBottom: '8px' };
+        }
+        return { margin: '8px 0' };
+    };
+    return (_jsxs("span", { ref: containerRef, style: {
+            display: 'inline-block',
+            position: 'relative',
+            ...getFloatStyles(),
+        }, onClick: handleClick, children: [_jsx("img", { ref: imageRef, src: src, alt: altText, title: displayComment || undefined, style: {
+                    maxWidth: '100%',
+                    height: 'auto',
+                    width: currentWidth ? `${currentWidth}px` : 'auto',
+                    display: 'block',
+                    borderRadius: '4px',
+                    outline: isSelected ? '2px solid #3b82f6' : 'none',
+                    cursor: 'pointer',
+                }, draggable: false }), (displayCopyright || displayPhotographer) && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    bottom: '6px',
+                    left: '6px',
+                    color: 'white',
+                    fontSize: '9px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '2px',
+                    textShadow: '0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5)',
+                }, children: [displayCopyright && (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '10px' }, children: "copyright" }), displayCopyright] })), displayPhotographer && (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '10px' }, children: "photo_camera" }), displayPhotographer] }))] })), isSelected && (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    openMetadataEditor();
+                }, style: {
+                    position: 'absolute',
+                    top: '-6px',
+                    right: '50px',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#3b82f6',
+                    border: '2px solid white',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                }, title: "Modifier les m\u00E9tadonn\u00E9es", children: _jsx("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "edit" }) })), isSelected && (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setShowFullscreen(true);
+                }, style: {
+                    position: 'absolute',
+                    top: '-6px',
+                    right: '20px',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#3b82f6',
+                    border: '2px solid white',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                }, title: "Voir en plein \u00E9cran", children: _jsx("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "fullscreen" }) })), isSelected && (_jsx("div", { onMouseDown: handleResizeStart, style: {
+                    position: 'absolute',
+                    right: '-6px',
+                    bottom: '-6px',
+                    width: '12px',
+                    height: '12px',
+                    backgroundColor: '#3b82f6',
+                    borderRadius: '2px',
+                    cursor: 'se-resize',
+                    border: '2px solid white',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                } })), showMetadataEditor && (_jsx("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 100000,
+                }, onClick: () => setShowMetadataEditor(false), children: _jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                        backgroundColor: 'white',
+                        borderRadius: '12px',
+                        padding: '24px',
+                        boxShadow: '0 25px 50px rgba(0,0,0,0.25)',
+                        minWidth: '360px',
+                        maxWidth: '450px',
+                    }, children: [_jsx("h3", { style: { margin: '0 0 20px 0', fontSize: '18px', fontWeight: 600, color: '#111827' }, children: "Propri\u00E9t\u00E9s de l'image" }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "link" }), "URL de l'image"] }), _jsx("input", { type: "url", value: editSrc, onChange: (e) => setEditSrc(e.target.value), placeholder: "https://example.com/image.jpg", style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        boxSizing: 'border-box',
+                                        outline: 'none',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "description" }), "Texte alternatif"] }), _jsx("input", { type: "text", value: editAltText, onChange: (e) => setEditAltText(e.target.value), placeholder: "Description de l'image", style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        boxSizing: 'border-box',
+                                        outline: 'none',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsx("hr", { style: { border: 'none', borderTop: '1px solid #e5e7eb', margin: '20px 0' } }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "photo_camera" }), "Photographe"] }), _jsx("input", { type: "text", value: editPhotographer, onChange: (e) => setEditPhotographer(e.target.value), placeholder: "Nom du photographe", autoFocus: true, style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        boxSizing: 'border-box',
+                                        outline: 'none',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "copyright" }), "Copyright"] }), _jsx("input", { type: "text", value: editCopyright, onChange: (e) => setEditCopyright(e.target.value), placeholder: "Ex: \u00A9 2024 Nom", style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        boxSizing: 'border-box',
+                                        outline: 'none',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "chat" }), "Commentaire (tooltip)"] }), _jsx("textarea", { value: editComment, onChange: (e) => setEditComment(e.target.value), placeholder: "Commentaire affich\u00E9 au survol de l'image", rows: 3, style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        resize: 'vertical',
+                                        boxSizing: 'border-box',
+                                        outline: 'none',
+                                        fontFamily: 'inherit',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsxs("div", { style: { marginBottom: '24px' }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "wrap_text" }), "Habillage du texte"] }), _jsxs("div", { style: { display: 'flex', gap: '8px', width: '100%' }, children: [_jsx("button", { type: "button", onClick: () => setEditFloat('none'), style: {
+                                                flex: 1,
+                                                minWidth: 0,
+                                                padding: '12px',
+                                                border: '1px solid',
+                                                borderColor: editFloat === 'none' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: editFloat === 'none' ? '#eff6ff' : 'white',
+                                                color: editFloat === 'none' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '4px',
+                                            }, title: "Aucun habillage", children: _jsx("span", { className: "material-icons", style: { fontSize: '24px' }, children: "image" }) }), _jsx("button", { type: "button", onClick: () => setEditFloat('left'), style: {
+                                                flex: 1,
+                                                minWidth: 0,
+                                                padding: '12px',
+                                                border: '1px solid',
+                                                borderColor: editFloat === 'left' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: editFloat === 'left' ? '#eff6ff' : 'white',
+                                                color: editFloat === 'left' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '4px',
+                                            }, title: "Image \u00E0 gauche", children: _jsx("span", { className: "material-icons", style: { fontSize: '24px' }, children: "west" }) }), _jsx("button", { type: "button", onClick: () => setEditFloat('right'), style: {
+                                                flex: 1,
+                                                minWidth: 0,
+                                                padding: '12px',
+                                                border: '1px solid',
+                                                borderColor: editFloat === 'right' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: editFloat === 'right' ? '#eff6ff' : 'white',
+                                                color: editFloat === 'right' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '4px',
+                                            }, title: "Image \u00E0 droite", children: _jsx("span", { className: "material-icons", style: { fontSize: '24px' }, children: "east" }) })] })] }), _jsxs("div", { style: { display: 'flex', gap: '12px', justifyContent: 'flex-end' }, children: [_jsx("button", { onClick: () => setShowMetadataEditor(false), style: {
+                                        padding: '10px 20px',
+                                        border: '1px solid #d1d5db',
+                                        backgroundColor: 'white',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        fontWeight: 500,
+                                        cursor: 'pointer',
+                                        color: '#374151',
+                                    }, children: "Annuler" }), _jsx("button", { onClick: saveMetadata, style: {
+                                        padding: '10px 20px',
+                                        border: 'none',
+                                        backgroundColor: '#3b82f6',
+                                        color: 'white',
+                                        borderRadius: '8px',
+                                        fontSize: '14px',
+                                        fontWeight: 500,
+                                        cursor: 'pointer',
+                                    }, children: "Enregistrer" })] })] }) })), showFullscreen && (_jsxs("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 100000,
+                    cursor: 'pointer',
+                }, onClick: () => setShowFullscreen(false), children: [_jsx("button", { onClick: () => setShowFullscreen(false), style: {
+                            position: 'absolute',
+                            top: '20px',
+                            right: '20px',
+                            width: '40px',
+                            height: '40px',
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            border: 'none',
+                            borderRadius: '50%',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'background-color 0.2s',
+                        }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer", children: _jsx("span", { className: "material-icons", style: { fontSize: '24px', color: 'white' }, children: "close" }) }), _jsx("img", { src: src, alt: altText, style: {
+                            maxWidth: '95vw',
+                            maxHeight: '95vh',
+                            objectFit: 'contain',
+                            borderRadius: '4px',
+                            boxShadow: '0 25px 50px rgba(0,0,0,0.5)',
+                        }, onClick: (e) => e.stopPropagation() }), (displayCopyright || displayPhotographer || displayComment) && (_jsxs("div", { style: {
+                            position: 'absolute',
+                            bottom: '20px',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            color: 'white',
+                            fontSize: '14px',
+                            textAlign: 'center',
+                            textShadow: '0 2px 4px rgba(0,0,0,0.8)',
+                            maxWidth: '80vw',
+                        }, children: [displayComment && (_jsx("div", { style: { marginBottom: '8px', fontSize: '16px' }, children: displayComment })), _jsxs("div", { style: { display: 'flex', gap: '16px', justifyContent: 'center', fontSize: '12px', opacity: 0.8 }, children: [displayCopyright && (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '14px' }, children: "copyright" }), displayCopyright] })), displayPhotographer && (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '14px' }, children: "photo_camera" }), displayPhotographer] }))] })] }))] }))] }));
+}
+export class ImageNode extends DecoratorNode {
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__width, node.__height, node.__copyright, node.__photographer, node.__comment, node.__float, node.__key);
+    }
+    constructor(src, altText = '', width, height, copyright, photographer, comment, float, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__width = width;
+        this.__height = height;
+        this.__copyright = copyright;
+        this.__photographer = photographer;
+        this.__comment = comment;
+        this.__float = float;
+    }
+    createDOM() {
+        const span = document.createElement('span');
+        span.style.display = 'block';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    setWidth(width) {
+        const writable = this.getWritable();
+        writable.__width = width;
+    }
+    setHeight(height) {
+        const writable = this.getWritable();
+        writable.__height = height;
+    }
+    getWidth() {
+        return this.__width;
+    }
+    getHeight() {
+        return this.__height;
+    }
+    setCopyright(copyright) {
+        const writable = this.getWritable();
+        writable.__copyright = copyright;
+    }
+    getCopyright() {
+        return this.__copyright;
+    }
+    setPhotographer(photographer) {
+        const writable = this.getWritable();
+        writable.__photographer = photographer;
+    }
+    getPhotographer() {
+        return this.__photographer;
+    }
+    setComment(comment) {
+        const writable = this.getWritable();
+        writable.__comment = comment;
+    }
+    getComment() {
+        return this.__comment;
+    }
+    setFloat(float) {
+        const writable = this.getWritable();
+        writable.__float = float;
+    }
+    getFloat() {
+        return this.__float;
+    }
+    static importJSON(serializedNode) {
+        const { src, altText, width, height, copyright, photographer, comment, float } = serializedNode;
+        return $createImageNode({ src, altText, width, height, copyright, photographer, comment, float });
+    }
+    exportJSON() {
+        return {
+            type: 'image',
+            version: 1,
+            src: this.__src,
+            altText: this.__altText,
+            width: this.__width,
+            height: this.__height,
+            copyright: this.__copyright,
+            photographer: this.__photographer,
+            comment: this.__comment,
+            float: this.__float,
+        };
+    }
+    exportDOM() {
+        const img = document.createElement('img');
+        img.src = this.__src;
+        img.alt = this.__altText;
+        if (this.__width)
+            img.width = this.__width;
+        if (this.__height)
+            img.height = this.__height;
+        return { element: img };
+    }
+    static importDOM() {
+        return {
+            img: () => ({
+                conversion: (domNode) => {
+                    const img = domNode;
+                    const src = img.src;
+                    const altText = img.alt || '';
+                    const width = img.width || undefined;
+                    const height = img.height || undefined;
+                    return { node: $createImageNode({ src, altText, width, height }) };
+                },
+                priority: 0,
+            }),
+        };
+    }
+    decorate() {
+        return (_jsx(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, copyright: this.__copyright, photographer: this.__photographer, comment: this.__comment, float: this.__float, nodeKey: this.__key }));
+    }
+}
+export function $createImageNode(payload) {
+    return new ImageNode(payload.src, payload.altText || '', payload.width, payload.height, payload.copyright, payload.photographer, payload.comment, payload.float);
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

package/dist/nodes/LinkNode.d.ts

@@ -0,0 +1,33 @@
+import { ElementNode, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread } from 'lexical';
+export interface SimpleLinkPayload {
+    url: string;
+    title?: string;
+}
+export type SerializedSimpleLinkNode = Spread<{
+    url: string;
+    title?: string;
+}, SerializedElementNode>;
+export declare class SimpleLinkNode extends ElementNode {
+    __url: string;
+    __title?: string;
+    static getType(): string;
+    static clone(node: SimpleLinkNode): SimpleLinkNode;
+    constructor(url: string, title?: string, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(prevNode: SimpleLinkNode, dom: HTMLAnchorElement): boolean;
+    getUrl(): string;
+    setUrl(url: string): void;
+    getTitle(): string | undefined;
+    setTitle(title: string | undefined): void;
+    static importJSON(serializedNode: SerializedSimpleLinkNode): SimpleLinkNode;
+    exportJSON(): SerializedSimpleLinkNode;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+    canBeEmpty(): boolean;
+    isInline(): boolean;
+    extractWithChild(): boolean;
+}
+export declare function $createSimpleLinkNode(payload: SimpleLinkPayload): SimpleLinkNode;
+export declare function $isSimpleLinkNode(node: LexicalNode | null | undefined): node is SimpleLinkNode;
+export declare function $wrapSelectionInSimpleLink(selection: RangeSelection, url: string, title?: string): void;
+//# sourceMappingURL=LinkNode.d.ts.map

package/dist/nodes/LinkNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkNode.d.ts","sourceRoot":"","sources":["../../src/nodes/LinkNode.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,EACX,WAAW,EACX,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAC3C;IACE,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,EACD,qBAAqB,CACtB,CAAA;AAED,qBAAa,cAAe,SAAQ,WAAW;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc;gBAItC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAMtD,SAAS,IAAI,WAAW;IAcxB,SAAS,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,EAAE,iBAAiB,GAAG,OAAO;IAcpE,MAAM,IAAI,MAAM;IAIhB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKzB,QAAQ,IAAI,MAAM,GAAG,SAAS;IAI9B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI;IAKzC,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,wBAAwB,GAAG,cAAc;IAW3E,UAAU,IAAI,wBAAwB;IAUtC,mBAAmB,IAAI,OAAO;IAI9B,kBAAkB,IAAI,OAAO;IAI7B,UAAU,IAAI,OAAO;IAIrB,QAAQ,IAAI,OAAO;IAInB,gBAAgB,IAAI,OAAO;CAG5B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,iBAAiB,GAAG,cAAc,CAEhF;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,cAAc,CAE9F;AAGD,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,MAAM,GACb,IAAI,CAYN"}