@qwanyx/ai-editor 1.0.0

package/dist/plugins/InsertObjectPlugin.js

@@ -0,0 +1,464 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND, createCommand, } from 'lexical';
+import { $createImageNode, $isImageNode } from '../nodes/ImageNode';
+import { $wrapSelectionInImageLink, $isImageLinkNode } from '../nodes/ImageLinkNode';
+import { $wrapSelectionInSimpleLink, $isSimpleLinkNode } from '../nodes/LinkNode';
+// Command to open the insert object dialog
+export const INSERT_OBJECT_COMMAND = createCommand('INSERT_OBJECT_COMMAND');
+function InsertDialog({ isOpen, onClose, onInsert, initialData, isEditing }) {
+    const [objectType, setObjectType] = useState('image');
+    const [url, setUrl] = useState('');
+    const [altText, setAltText] = useState('');
+    const [copyright, setCopyright] = useState('');
+    const [photographer, setPhotographer] = useState('');
+    const [comment, setComment] = useState('');
+    // Pre-fill form when editing
+    useEffect(() => {
+        if (isOpen && initialData) {
+            setObjectType(initialData.type);
+            setUrl(initialData.url);
+            setAltText(initialData.altText);
+            setCopyright(initialData.copyright || '');
+            setPhotographer(initialData.photographer || '');
+            setComment(initialData.comment || '');
+        }
+        else if (isOpen && !initialData) {
+            setObjectType('image');
+            setUrl('');
+            setAltText('');
+            setCopyright('');
+            setPhotographer('');
+            setComment('');
+        }
+    }, [isOpen, initialData]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (url.trim()) {
+            onInsert(objectType, {
+                url: url.trim(),
+                altText: altText.trim(),
+                copyright: copyright.trim(),
+                photographer: photographer.trim(),
+                comment: comment.trim(),
+            });
+            setUrl('');
+            setAltText('');
+            setCopyright('');
+            setPhotographer('');
+            setComment('');
+            onClose();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 100000,
+        }, onClick: onClose, onKeyDown: handleKeyDown, children: _jsxs("div", { style: {
+                backgroundColor: 'white',
+                borderRadius: '8px',
+                padding: '24px',
+                minWidth: '400px',
+                maxWidth: '500px',
+                boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { style: { margin: '0 0 16px 0', fontSize: '18px', fontWeight: 600, color: '#111827' }, children: isEditing
+                        ? (initialData?.type === 'image' ? "Modifier l'image" : initialData?.type === 'link' ? 'Modifier le lien' : 'Modifier le lien image')
+                        : 'Insérer un objet' }), _jsxs("form", { onSubmit: handleSubmit, children: [!isEditing && (_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { style: { display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: "Type" }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsxs("button", { type: "button", onClick: () => setObjectType('image'), style: {
+                                                flex: 1,
+                                                padding: '8px 16px',
+                                                border: '1px solid',
+                                                borderColor: objectType === 'image' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: objectType === 'image' ? '#eff6ff' : 'white',
+                                                color: objectType === 'image' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                fontSize: '14px',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px' }, children: "image" }), "Image"] }), _jsxs("button", { type: "button", onClick: () => setObjectType('image-link'), style: {
+                                                flex: 1,
+                                                padding: '8px 16px',
+                                                border: '1px solid',
+                                                borderColor: objectType === 'image-link' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: objectType === 'image-link' ? '#eff6ff' : 'white',
+                                                color: objectType === 'image-link' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                fontSize: '14px',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '6px',
+                                            }, title: "Lien vers une image (s'ouvre en plein \u00E9cran)", children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px' }, children: "photo_library" }), "Lien image"] }), _jsxs("button", { type: "button", onClick: () => setObjectType('link'), style: {
+                                                flex: 1,
+                                                padding: '8px 16px',
+                                                border: '1px solid',
+                                                borderColor: objectType === 'link' ? '#3b82f6' : '#d1d5db',
+                                                backgroundColor: objectType === 'link' ? '#eff6ff' : 'white',
+                                                color: objectType === 'link' ? '#1d4ed8' : '#374151',
+                                                borderRadius: '6px',
+                                                cursor: 'pointer',
+                                                fontSize: '14px',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: '6px',
+                                            }, title: "Lien internet (s'ouvre dans un nouvel onglet)", children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px' }, children: "link" }), "Lien"] })] })] })), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { style: { display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: objectType === 'link' ? "URL du lien" : objectType === 'image-link' ? "URL de l'image à afficher" : "URL de l'image" }), _jsx("input", { type: "url", value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://example.com/image.jpg", autoFocus: true, style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '6px',
+                                        fontSize: '14px',
+                                        outline: 'none',
+                                        boxSizing: 'border-box',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { style: { display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: objectType === 'link' ? 'Titre (tooltip, optionnel)' : 'Texte alternatif (optionnel)' }), _jsx("input", { type: "text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: objectType === 'link' ? 'Texte affiché au survol' : 'Description de l\'image', style: {
+                                        width: '100%',
+                                        padding: '10px 12px',
+                                        border: '1px solid #d1d5db',
+                                        borderRadius: '6px',
+                                        fontSize: '14px',
+                                        outline: 'none',
+                                        boxSizing: 'border-box',
+                                    }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), objectType === 'image-link' && (_jsxs(_Fragment, { children: [_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: "camera_alt" }), "Photographe"] }), _jsx("input", { type: "text", value: photographer, onChange: (e) => setPhotographer(e.target.value), placeholder: "Nom du photographe", style: {
+                                                width: '100%',
+                                                padding: '10px 12px',
+                                                border: '1px solid #d1d5db',
+                                                borderRadius: '6px',
+                                                fontSize: '14px',
+                                                outline: 'none',
+                                                boxSizing: 'border-box',
+                                            }, 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: copyright, onChange: (e) => setCopyright(e.target.value), placeholder: "\u00A9 2024 Nom", style: {
+                                                width: '100%',
+                                                padding: '10px 12px',
+                                                border: '1px solid #d1d5db',
+                                                borderRadius: '6px',
+                                                fontSize: '14px',
+                                                outline: 'none',
+                                                boxSizing: 'border-box',
+                                            }, 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: comment, onChange: (e) => setComment(e.target.value), placeholder: "Commentaire affich\u00E9 au survol", rows: 2, style: {
+                                                width: '100%',
+                                                padding: '10px 12px',
+                                                border: '1px solid #d1d5db',
+                                                borderRadius: '6px',
+                                                fontSize: '14px',
+                                                outline: 'none',
+                                                boxSizing: 'border-box',
+                                                resize: 'vertical',
+                                                fontFamily: 'inherit',
+                                            }, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] })] })), objectType === 'image-link' && (_jsxs("div", { style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                backgroundColor: '#f3e8ff',
+                                borderRadius: '6px',
+                                fontSize: '13px',
+                                color: '#6b21a8',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
+                            }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px' }, children: "info" }), "Le texte s\u00E9lectionn\u00E9 deviendra un lien. Un clic ouvrira l'image en plein \u00E9cran."] })), objectType === 'link' && (_jsxs("div", { style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                backgroundColor: '#dbeafe',
+                                borderRadius: '6px',
+                                fontSize: '13px',
+                                color: '#1e40af',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
+                            }, children: [_jsx("span", { className: "material-icons", style: { fontSize: '18px' }, children: "info" }), "Le texte s\u00E9lectionn\u00E9 deviendra un lien. Ctrl+Clic pour ouvrir dans un nouvel onglet."] })), url && (objectType === 'image' || objectType === 'image-link') && (_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("label", { style: { display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: "Aper\u00E7u" }), _jsx("div", { style: {
+                                        border: '1px solid #e5e7eb',
+                                        borderRadius: '6px',
+                                        padding: '8px',
+                                        backgroundColor: '#f9fafb',
+                                        maxHeight: '150px',
+                                        overflow: 'hidden',
+                                    }, children: _jsx("img", { src: url, alt: altText || 'Preview', style: { maxWidth: '100%', maxHeight: '130px', display: 'block', margin: '0 auto' }, onError: (e) => {
+                                            e.target.style.display = 'none';
+                                        } }) })] })), _jsxs("div", { style: { display: 'flex', gap: '12px', justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", onClick: onClose, style: {
+                                        padding: '10px 20px',
+                                        border: '1px solid #d1d5db',
+                                        backgroundColor: 'white',
+                                        color: '#374151',
+                                        borderRadius: '6px',
+                                        cursor: 'pointer',
+                                        fontSize: '14px',
+                                        fontWeight: 500,
+                                    }, children: "Annuler" }), _jsx("button", { type: "submit", disabled: !url.trim(), style: {
+                                        padding: '10px 20px',
+                                        border: 'none',
+                                        backgroundColor: url.trim() ? '#3b82f6' : '#9ca3af',
+                                        color: 'white',
+                                        borderRadius: '6px',
+                                        cursor: url.trim() ? 'pointer' : 'not-allowed',
+                                        fontSize: '14px',
+                                        fontWeight: 500,
+                                    }, children: "Ins\u00E9rer" })] })] })] }) }));
+}
+export function InsertObjectPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [editingImageLinkNode, setEditingImageLinkNode] = useState(null);
+    const [editingImageNode, setEditingImageNode] = useState(null);
+    const [editingLinkNode, setEditingLinkNode] = useState(null);
+    const [initialData, setInitialData] = useState(null);
+    const [dialogKey, setDialogKey] = useState(0);
+    // Find ImageLinkNode at current selection
+    const getImageLinkNodeAtSelection = useCallback(() => {
+        let foundNode = null;
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                let node = anchorNode;
+                while (node) {
+                    if ($isImageLinkNode(node)) {
+                        foundNode = node;
+                        break;
+                    }
+                    const parent = node.getParent();
+                    if (!parent)
+                        break;
+                    node = parent;
+                }
+            }
+        });
+        return foundNode;
+    }, [editor]);
+    // Find ImageNode at current selection (for DecoratorNodes we check siblings)
+    const getImageNodeAtSelection = useCallback(() => {
+        let foundNode = null;
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const nodes = selection.getNodes();
+                for (const node of nodes) {
+                    if ($isImageNode(node)) {
+                        foundNode = node;
+                        break;
+                    }
+                }
+            }
+        });
+        return foundNode;
+    }, [editor]);
+    // Find SimpleLinkNode at current selection
+    const getSimpleLinkNodeAtSelection = useCallback(() => {
+        let foundNode = null;
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                let node = anchorNode;
+                while (node) {
+                    if ($isSimpleLinkNode(node)) {
+                        foundNode = node;
+                        break;
+                    }
+                    const parent = node.getParent();
+                    if (!parent)
+                        break;
+                    node = parent;
+                }
+            }
+        });
+        return foundNode;
+    }, [editor]);
+    // Handle Ctrl+K
+    useEffect(() => {
+        return editor.registerCommand(KEY_DOWN_COMMAND, (event) => {
+            if (event.ctrlKey && event.key === 'k') {
+                event.preventDefault();
+                // Check if we're on an ImageNode first
+                const imageNode = getImageNodeAtSelection();
+                if (imageNode) {
+                    setEditingImageNode(imageNode);
+                    setEditingImageLinkNode(null);
+                    setInitialData({
+                        url: imageNode.__src,
+                        altText: imageNode.__altText || '',
+                        type: 'image',
+                    });
+                    setDialogKey(k => k + 1);
+                    setIsDialogOpen(true);
+                    return true;
+                }
+                // Check if we're inside an ImageLinkNode
+                const imageLinkNode = getImageLinkNodeAtSelection();
+                if (imageLinkNode) {
+                    setEditingImageLinkNode(imageLinkNode);
+                    setEditingImageNode(null);
+                    setEditingLinkNode(null);
+                    setInitialData({
+                        url: imageLinkNode.getUrl(),
+                        altText: imageLinkNode.getAltText() || '',
+                        copyright: imageLinkNode.getCopyright() || '',
+                        photographer: imageLinkNode.getPhotographer() || '',
+                        comment: imageLinkNode.getComment() || '',
+                        type: 'image-link',
+                    });
+                    setDialogKey(k => k + 1);
+                    setIsDialogOpen(true);
+                    return true;
+                }
+                // Check if we're inside a SimpleLinkNode
+                const simpleLinkNode = getSimpleLinkNodeAtSelection();
+                if (simpleLinkNode) {
+                    setEditingLinkNode(simpleLinkNode);
+                    setEditingImageNode(null);
+                    setEditingImageLinkNode(null);
+                    setInitialData({
+                        url: simpleLinkNode.getUrl(),
+                        altText: simpleLinkNode.getTitle() || '',
+                        type: 'link',
+                    });
+                    setDialogKey(k => k + 1);
+                    setIsDialogOpen(true);
+                    return true;
+                }
+                // Create new
+                setEditingImageLinkNode(null);
+                setEditingImageNode(null);
+                setEditingLinkNode(null);
+                setInitialData(null);
+                setDialogKey(k => k + 1);
+                setIsDialogOpen(true);
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, getImageLinkNodeAtSelection, getImageNodeAtSelection, getSimpleLinkNodeAtSelection]);
+    // Handle INSERT_OBJECT_COMMAND (from toolbar)
+    useEffect(() => {
+        return editor.registerCommand(INSERT_OBJECT_COMMAND, () => {
+            // Check if we're on an ImageNode first
+            const imageNode = getImageNodeAtSelection();
+            if (imageNode) {
+                setEditingImageNode(imageNode);
+                setEditingImageLinkNode(null);
+                setInitialData({
+                    url: imageNode.__src,
+                    altText: imageNode.__altText || '',
+                    type: 'image',
+                });
+                setDialogKey(k => k + 1);
+                setIsDialogOpen(true);
+                return true;
+            }
+            const imageLinkNode = getImageLinkNodeAtSelection();
+            if (imageLinkNode) {
+                setEditingImageLinkNode(imageLinkNode);
+                setEditingImageNode(null);
+                setEditingLinkNode(null);
+                setInitialData({
+                    url: imageLinkNode.getUrl(),
+                    altText: imageLinkNode.getAltText() || '',
+                    copyright: imageLinkNode.getCopyright() || '',
+                    photographer: imageLinkNode.getPhotographer() || '',
+                    comment: imageLinkNode.getComment() || '',
+                    type: 'image-link',
+                });
+                setDialogKey(k => k + 1);
+                setIsDialogOpen(true);
+                return true;
+            }
+            const simpleLinkNode = getSimpleLinkNodeAtSelection();
+            if (simpleLinkNode) {
+                setEditingLinkNode(simpleLinkNode);
+                setEditingImageNode(null);
+                setEditingImageLinkNode(null);
+                setInitialData({
+                    url: simpleLinkNode.getUrl(),
+                    altText: simpleLinkNode.getTitle() || '',
+                    type: 'link',
+                });
+                setDialogKey(k => k + 1);
+                setIsDialogOpen(true);
+                return true;
+            }
+            setEditingImageLinkNode(null);
+            setEditingImageNode(null);
+            setEditingLinkNode(null);
+            setInitialData(null);
+            setDialogKey(k => k + 1);
+            setIsDialogOpen(true);
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, getImageLinkNodeAtSelection, getImageNodeAtSelection, getSimpleLinkNodeAtSelection]);
+    const handleInsert = useCallback((type, data) => {
+        if (editingImageNode && type === 'image') {
+            // Update existing ImageNode
+            editor.update(() => {
+                editingImageNode.setSrc(data.url);
+                editingImageNode.setAltText(data.altText || '');
+            });
+        }
+        else if (editingImageLinkNode && type === 'image-link') {
+            // Update existing ImageLinkNode
+            editor.update(() => {
+                editingImageLinkNode.setUrl(data.url);
+                editingImageLinkNode.setAltText(data.altText || undefined);
+                editingImageLinkNode.setCopyright(data.copyright || undefined);
+                editingImageLinkNode.setPhotographer(data.photographer || undefined);
+                editingImageLinkNode.setComment(data.comment || undefined);
+            });
+        }
+        else if (type === 'image') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const imageNode = $createImageNode({
+                        src: data.url,
+                        altText: data.altText || '',
+                    });
+                    selection.insertNodes([imageNode]);
+                }
+            });
+        }
+        else if (editingLinkNode && type === 'link') {
+            // Update existing LinkNode
+            editor.update(() => {
+                editingLinkNode.setUrl(data.url);
+                editingLinkNode.setTitle(data.altText || undefined);
+            });
+        }
+        else if (type === 'image-link') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+                    $wrapSelectionInImageLink(selection, data.url, data.altText || '', data.copyright || '', data.photographer || '', data.comment || '');
+                }
+            });
+        }
+        else if (type === 'link') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+                    $wrapSelectionInSimpleLink(selection, data.url, data.altText || undefined);
+                }
+            });
+        }
+    }, [editor, editingImageNode, editingImageLinkNode, editingLinkNode]);
+    const handleClose = useCallback(() => {
+        setIsDialogOpen(false);
+        setEditingImageLinkNode(null);
+        setEditingImageNode(null);
+        setEditingLinkNode(null);
+        setInitialData(null);
+    }, []);
+    return (_jsx(InsertDialog, { isOpen: isDialogOpen, onClose: handleClose, onInsert: handleInsert, initialData: initialData, isEditing: !!(editingImageNode || editingImageLinkNode || editingLinkNode) }, dialogKey));
+}

package/dist/plugins/LinkPlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function SimpleLinkPlugin(): null;
+//# sourceMappingURL=LinkPlugin.d.ts.map

package/dist/plugins/LinkPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPlugin.d.ts","sourceRoot":"","sources":["../../src/plugins/LinkPlugin.tsx"],"names":[],"mappings":"AAYA,wBAAgB,gBAAgB,SA6C/B"}

package/dist/plugins/LinkPlugin.js

@@ -0,0 +1,45 @@
+'use client';
+import { useEffect, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, CLICK_COMMAND, } from 'lexical';
+import { $isSimpleLinkNode } from '../nodes/LinkNode';
+export function SimpleLinkPlugin() {
+    const [editor] = useLexicalComposerContext();
+    // Find SimpleLinkNode at current selection
+    const getSimpleLinkNodeAtSelection = useCallback(() => {
+        let foundNode = null;
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                // Check if we're inside a SimpleLinkNode
+                let node = anchorNode;
+                while (node) {
+                    if ($isSimpleLinkNode(node)) {
+                        foundNode = node;
+                        break;
+                    }
+                    const parent = node.getParent();
+                    if (!parent)
+                        break;
+                    node = parent;
+                }
+            }
+        });
+        return foundNode;
+    }, [editor]);
+    // Handle Ctrl+Click on SimpleLinkNode to open in new tab
+    useEffect(() => {
+        return editor.registerCommand(CLICK_COMMAND, (event) => {
+            const linkNode = getSimpleLinkNodeAtSelection();
+            if (linkNode && event.ctrlKey) {
+                // Ctrl+Click opens in new tab
+                event.preventDefault();
+                window.open(linkNode.getUrl(), '_blank', 'noopener,noreferrer');
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, getSimpleLinkNodeAtSelection]);
+    return null;
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@qwanyx/ai-editor",
+  "version": "1.0.0",
+  "description": "AI-powered WYSIWYG rich text editor",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@lexical/react": "^0.17.0",
+    "@lexical/rich-text": "^0.17.0",
+    "@lexical/history": "^0.17.0",
+    "@lexical/list": "^0.17.0",
+    "@lexical/link": "^0.17.0",
+    "@lexical/selection": "^0.17.0",
+    "lexical": "^0.17.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}