@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/plugins/ImagesPlugin/index.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, $wrapNodeInElement, mergeRegister, } from '@lexical/utils';
+import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, getDOMSelectionFromTarget, isHTMLElement, } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import landscapeImage from '../../images/landscape.jpg';
+import yellowFlowerImage from '../../images/yellow-flower.jpg';
+import { $createImageNode, $isImageNode, ImageNode, } from '../../nodes/ImageNode';
+import Button from '../../ui/Button';
+import { DialogActions, DialogButtonsList } from '../../ui/Dialog';
+import FileInput from '../../ui/FileInput';
+import TextInput from '../../ui/TextInput';
+export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
+export function InsertImageUriDialogBody({ onClick, }) {
+    const [src, setSrc] = useState('');
+    const [altText, setAltText] = useState('');
+    const isDisabled = src === '';
+    return (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: "Image URL", placeholder: "i.e. https://source.unsplash.com/random", onChange: setSrc, value: src, "data-test-id": "image-modal-url-input" }), _jsx(TextInput, { label: "Alt Text", placeholder: "Random unsplash image", onChange: setAltText, value: altText, "data-test-id": "image-modal-alt-text-input" }), _jsx(DialogActions, { children: _jsx(Button, { "data-test-id": "image-modal-confirm-btn", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Confirm" }) })] }));
+}
+export function InsertImageUploadedDialogBody({ onClick, }) {
+    const [src, setSrc] = useState('');
+    const [altText, setAltText] = useState('');
+    const isDisabled = src === '';
+    const loadImage = (files) => {
+        const reader = new FileReader();
+        reader.onload = function () {
+            if (typeof reader.result === 'string') {
+                setSrc(reader.result);
+            }
+            return '';
+        };
+        if (files !== null) {
+            reader.readAsDataURL(files[0]);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FileInput, { label: "Image Upload", onChange: loadImage, accept: "image/*", "data-test-id": "image-modal-file-upload" }), _jsx(TextInput, { label: "Alt Text", placeholder: "Descriptive alternative text", onChange: setAltText, value: altText, "data-test-id": "image-modal-alt-text-input" }), _jsx(DialogActions, { children: _jsx(Button, { "data-test-id": "image-modal-file-upload-btn", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Confirm" }) })] }));
+}
+export function InsertImageDialog({ activeEditor, onClose, }) {
+    const [mode, setMode] = useState(null);
+    const hasModifier = useRef(false);
+    useEffect(() => {
+        hasModifier.current = false;
+        const handler = (e) => {
+            hasModifier.current = e.altKey;
+        };
+        document.addEventListener('keydown', handler);
+        return () => {
+            document.removeEventListener('keydown', handler);
+        };
+    }, [activeEditor]);
+    const onClick = (payload) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [!mode && (_jsxs(DialogButtonsList, { children: [_jsx(Button, { "data-test-id": "image-modal-option-sample", onClick: () => onClick(hasModifier.current
+                            ? {
+                                altText: 'Daylight fir trees forest glacier green high ice landscape',
+                                src: landscapeImage,
+                            }
+                            : {
+                                altText: 'Yellow flower in tilt shift lens',
+                                src: yellowFlowerImage,
+                            }), children: "Sample" }), _jsx(Button, { "data-test-id": "image-modal-option-url", onClick: () => setMode('url'), children: "URL" }), _jsx(Button, { "data-test-id": "image-modal-option-file", onClick: () => setMode('file'), children: "File" })] })), mode === 'url' && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === 'file' && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] }));
+}
+export default function ImagesPlugin({ captionsEnabled, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([ImageNode])) {
+            throw new Error('ImagesPlugin: ImageNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+            const imageNode = $createImageNode(payload);
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+                $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+            return $onDragStart(event);
+        }, COMMAND_PRIORITY_HIGH), editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+            return $onDragover(event);
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
+            return $onDrop(event, editor);
+        }, COMMAND_PRIORITY_HIGH));
+    }, [captionsEnabled, editor]);
+    return null;
+}
+const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+const img = document.createElement('img');
+img.src = TRANSPARENT_IMAGE;
+function $onDragStart(event) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) {
+        return false;
+    }
+    dataTransfer.setData('text/plain', '_');
+    dataTransfer.setDragImage(img, 0, 0);
+    dataTransfer.setData('application/x-lexical-drag', JSON.stringify({
+        data: {
+            altText: node.__altText,
+            caption: node.__caption,
+            height: node.__height,
+            key: node.getKey(),
+            maxWidth: node.__maxWidth,
+            showCaption: node.__showCaption,
+            src: node.__src,
+            width: node.__width,
+        },
+        type: 'image',
+    }));
+    return true;
+}
+function $onDragover(event) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    if (!canDropImage(event)) {
+        event.preventDefault();
+    }
+    return true;
+}
+function $onDrop(event, editor) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    const data = getDragImageData(event);
+    if (!data) {
+        return false;
+    }
+    const existingLink = $findMatchingParent(node, (parent) => !$isAutoLinkNode(parent) && $isLinkNode(parent));
+    event.preventDefault();
+    if (canDropImage(event)) {
+        const range = getDragSelection(event);
+        node.remove();
+        const rangeSelection = $createRangeSelection();
+        if (range !== null && range !== undefined) {
+            rangeSelection.applyDOMRange(range);
+        }
+        $setSelection(rangeSelection);
+        editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+        if (existingLink) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, existingLink.getURL());
+        }
+    }
+    return true;
+}
+function $getImageNodeInSelection() {
+    const selection = $getSelection();
+    if (!$isNodeSelection(selection)) {
+        return null;
+    }
+    const nodes = selection.getNodes();
+    const node = nodes[0];
+    return $isImageNode(node) ? node : null;
+}
+function getDragImageData(event) {
+    const dragData = event.dataTransfer?.getData('application/x-lexical-drag');
+    if (!dragData) {
+        return null;
+    }
+    const { type, data } = JSON.parse(dragData);
+    if (type !== 'image') {
+        return null;
+    }
+    return data;
+}
+function canDropImage(event) {
+    const target = event.target;
+    return !!(isHTMLElement(target) &&
+        !target.closest('code, span.editor-image') &&
+        isHTMLElement(target.parentElement) &&
+        target.parentElement.closest('div.ContentEditable__root'));
+}
+function getDragSelection(event) {
+    let range;
+    const domSelection = getDOMSelectionFromTarget(event.target);
+    if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(event.clientX, event.clientY);
+    }
+    else if (event.rangeParent && domSelection !== null) {
+        domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+        range = domSelection.getRangeAt(0);
+    }
+    else {
+        throw Error(`Cannot get the selection when dragging`);
+    }
+    return range;
+}

package/lib/plugins/InlineImagePlugin/index.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+import '../../nodes/InlineImageNode/InlineImageNode.css';
+import { LexicalCommand, LexicalEditor } from 'lexical';
+import { InlineImagePayload } from '../../nodes/InlineImageNode/InlineImageNode';
+export type InsertInlineImagePayload = Readonly<InlineImagePayload>;
+export declare const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InlineImagePayload>;
+export declare function InsertInlineImageDialog({ activeEditor, onClose, }: {
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}): JSX.Element;
+export default function InlineImagePlugin(): JSX.Element | null;
+declare global {
+    interface DragEvent {
+        rangeOffset?: number;
+        rangeParent?: Node;
+    }
+}

package/lib/plugins/InlineImagePlugin/index.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '../../nodes/InlineImageNode/InlineImageNode.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, getDOMSelectionFromTarget, isHTMLElement, } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import { $createInlineImageNode, $isInlineImageNode, InlineImageNode, } from '../../nodes/InlineImageNode/InlineImageNode';
+import Button from '../../ui/Button';
+import { DialogActions } from '../../ui/Dialog';
+import FileInput from '../../ui/FileInput';
+import Select from '../../ui/Select';
+import TextInput from '../../ui/TextInput';
+export const INSERT_INLINE_IMAGE_COMMAND = createCommand('INSERT_INLINE_IMAGE_COMMAND');
+export function InsertInlineImageDialog({ activeEditor, onClose, }) {
+    const hasModifier = useRef(false);
+    const [src, setSrc] = useState('');
+    const [altText, setAltText] = useState('');
+    const [showCaption, setShowCaption] = useState(false);
+    const [position, setPosition] = useState('left');
+    const isDisabled = src === '';
+    const handleShowCaptionChange = (e) => {
+        setShowCaption(e.target.checked);
+    };
+    const handlePositionChange = (e) => {
+        setPosition(e.target.value);
+    };
+    const loadImage = (files) => {
+        const reader = new FileReader();
+        reader.onload = function () {
+            if (typeof reader.result === 'string') {
+                setSrc(reader.result);
+            }
+            return '';
+        };
+        if (files !== null) {
+            reader.readAsDataURL(files[0]);
+        }
+    };
+    useEffect(() => {
+        hasModifier.current = false;
+        const handler = (e) => {
+            hasModifier.current = e.altKey;
+        };
+        document.addEventListener('keydown', handler);
+        return () => {
+            document.removeEventListener('keydown', handler);
+        };
+    }, [activeEditor]);
+    const handleOnClick = () => {
+        const payload = { altText, position, showCaption, src };
+        activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload);
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginBottom: '1em' }, children: _jsx(FileInput, { label: "Image Upload", onChange: loadImage, accept: "image/*", "data-test-id": "image-modal-file-upload" }) }), _jsx("div", { style: { marginBottom: '1em' }, children: _jsx(TextInput, { label: "Alt Text", placeholder: "Descriptive alternative text", onChange: setAltText, value: altText, "data-test-id": "image-modal-alt-text-input" }) }), _jsxs(Select, { style: { marginBottom: '1em', width: '290px' }, label: "Position", name: "position", id: "position-select", onChange: handlePositionChange, children: [_jsx("option", { value: "left", children: "Left" }), _jsx("option", { value: "right", children: "Right" }), _jsx("option", { value: "full", children: "Full Width" })] }), _jsxs("div", { className: "Input__wrapper", children: [_jsx("input", { id: "caption", className: "InlineImageNode_Checkbox", type: "checkbox", checked: showCaption, onChange: handleShowCaptionChange }), _jsx("label", { htmlFor: "caption", children: "Show Caption" })] }), _jsx(DialogActions, { children: _jsx(Button, { "data-test-id": "image-modal-file-upload-btn", disabled: isDisabled, onClick: () => handleOnClick(), children: "Confirm" }) })] }));
+}
+export default function InlineImagePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([InlineImageNode])) {
+            throw new Error('ImagesPlugin: ImageNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_INLINE_IMAGE_COMMAND, (payload) => {
+            const imageNode = $createInlineImageNode(payload);
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+                $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+            return $onDragStart(event);
+        }, COMMAND_PRIORITY_HIGH), editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+            return $onDragover(event);
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
+            return $onDrop(event, editor);
+        }, COMMAND_PRIORITY_HIGH));
+    }, [editor]);
+    return null;
+}
+const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+const img = document.createElement('img');
+img.src = TRANSPARENT_IMAGE;
+function $onDragStart(event) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) {
+        return false;
+    }
+    dataTransfer.setData('text/plain', '_');
+    dataTransfer.setDragImage(img, 0, 0);
+    dataTransfer.setData('application/x-lexical-drag', JSON.stringify({
+        data: {
+            altText: node.__altText,
+            caption: node.__caption,
+            height: node.__height,
+            key: node.getKey(),
+            showCaption: node.__showCaption,
+            src: node.__src,
+            width: node.__width,
+        },
+        type: 'image',
+    }));
+    return true;
+}
+function $onDragover(event) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    if (!canDropImage(event)) {
+        event.preventDefault();
+    }
+    return true;
+}
+function $onDrop(event, editor) {
+    const node = $getImageNodeInSelection();
+    if (!node) {
+        return false;
+    }
+    const data = getDragImageData(event);
+    if (!data) {
+        return false;
+    }
+    event.preventDefault();
+    if (canDropImage(event)) {
+        const range = getDragSelection(event);
+        node.remove();
+        const rangeSelection = $createRangeSelection();
+        if (range !== null && range !== undefined) {
+            rangeSelection.applyDOMRange(range);
+        }
+        $setSelection(rangeSelection);
+        editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data);
+    }
+    return true;
+}
+function $getImageNodeInSelection() {
+    const selection = $getSelection();
+    if (!$isNodeSelection(selection)) {
+        return null;
+    }
+    const nodes = selection.getNodes();
+    const node = nodes[0];
+    return $isInlineImageNode(node) ? node : null;
+}
+function getDragImageData(event) {
+    const dragData = event.dataTransfer?.getData('application/x-lexical-drag');
+    if (!dragData) {
+        return null;
+    }
+    const { type, data } = JSON.parse(dragData);
+    if (type !== 'image') {
+        return null;
+    }
+    return data;
+}
+function canDropImage(event) {
+    const target = event.target;
+    return !!(isHTMLElement(target) &&
+        !target.closest('code, span.editor-image') &&
+        isHTMLElement(target.parentElement) &&
+        target.parentElement.closest('div.ContentEditable__root'));
+}
+function getDragSelection(event) {
+    let range;
+    const domSelection = getDOMSelectionFromTarget(event.target);
+    if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(event.clientX, event.clientY);
+    }
+    else if (event.rangeParent && domSelection !== null) {
+        domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+        range = domSelection.getRangeAt(0);
+    }
+    else {
+        throw Error('Cannot get the selection when dragging');
+    }
+    return range;
+}

package/lib/plugins/KeywordsPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function KeywordsPlugin(): JSX.Element | null;

package/lib/plugins/KeywordsPlugin/index.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalTextEntity } from '@lexical/react/useLexicalTextEntity';
+import { useCallback, useEffect } from 'react';
+import { $createKeywordNode, KeywordNode } from '../../nodes/KeywordNode';
+const KEYWORDS_REGEX = /(^|$|[^A-Za-zªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԧԱ-Ֆՙա-ևא-תװ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠࢢ-ࢬऄ-हऽॐक़-ॡॱ-ॷॹ-ॿঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-ళవ-హఽౘౙౠౡಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-ഐഒ-ഺഽൎൠൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏼᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᜀ-ᜌᜎ-ᜑᜠ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤜᥐ-ᥭᥰ-ᥴᦀ-ᦫᧁ-ᧇᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭋᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᳩ-ᳬᳮ-ᳱᳵᳶᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕℙ-ℝℤΩℨK-ℭℯ-ℹℼ-ℿⅅ-ⅉⅎↃↄⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞⸯ々〆〱-〵〻〼ぁ-ゖゝ-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿌ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚗꚠ-ꛥꜗ-ꜟꜢ-ꞈꞋ-ꞎꞐ-ꞓꞠ-Ɦꟸ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꪀ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꯀ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ])(congrats|congratulations|gratuluju|gratuluji|gratulujeme|blahopřeju|blahopřeji|blahopřejeme|Til lykke|Tillykke|Glückwunsch|Gratuliere|felicitaciones|enhorabuena|paljon onnea|onnittelut|Félicitations|gratula|gratulálok|gratulálunk|congratulazioni|complimenti|おめでとう|おめでとうございます|축하해|축하해요|gratulerer|Gefeliciteerd|gratulacje|Parabéns|parabéns|felicitações|felicitări|мои поздравления|поздравляем|поздравляю|gratulujem|blahoželám|ยินดีด้วย|ขอแสดงความยินดี|tebrikler|tebrik ederim|恭喜|祝贺你|恭喜你|恭喜|恭喜|baie geluk|veels geluk|অভিনন্দন|Čestitam|Čestitke|Čestitamo|Συγχαρητήρια|Μπράβο|અભિનંદન|badhai|बधाई|अभिनंदन|Честитам|Свака част|hongera|வாழ்த்துகள்|வாழ்த்துக்கள்|అభినందనలు|അഭിനന്ദനങ്ങൾ|Chúc mừng|מזל טוב|mazel tov|mazal tov)(^|$|[^A-Za-zªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԧԱ-Ֆՙա-ևא-תװ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠࢢ-ࢬऄ-हऽॐक़-ॡॱ-ॷॹ-ॿঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-ళవ-హఽౘౙౠౡಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-ഐഒ-ഺഽൎൠൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏼᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᜀ-ᜌᜎ-ᜑᜠ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤜᥐ-ᥭᥰ-ᥴᦀ-ᦫᧁ-ᧇᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭋᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᳩ-ᳬᳮ-ᳱᳵᳶᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕℙ-ℝℤΩℨK-ℭℯ-ℹℼ-ℿⅅ-ⅉⅎↃↄⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞⸯ々〆〱-〵〻〼ぁ-ゖゝ-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿌ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚗꚠ-ꛥꜗ-ꜟꜢ-ꞈꞋ-ꞎꞐ-ꞓꞠ-Ɦꟸ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꪀ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꯀ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ])/i;
+export default function KeywordsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([KeywordNode])) {
+            throw new Error('KeywordsPlugin: KeywordNode not registered on editor');
+        }
+    }, [editor]);
+    const $createKeywordNode_ = useCallback((textNode) => {
+        return $createKeywordNode(textNode.getTextContent());
+    }, []);
+    const getKeywordMatch = useCallback((text) => {
+        const matchArr = KEYWORDS_REGEX.exec(text);
+        if (matchArr === null) {
+            return null;
+        }
+        const hashtagLength = matchArr[2].length;
+        const startOffset = matchArr.index + matchArr[1].length;
+        const endOffset = startOffset + hashtagLength;
+        return {
+            end: endOffset,
+            start: startOffset,
+        };
+    }, []);
+    useLexicalTextEntity(getKeywordMatch, KeywordNode, $createKeywordNode_);
+    return null;
+}

package/lib/plugins/LayoutPlugin/InsertLayoutDialog.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import { LexicalEditor } from 'lexical';
+export default function InsertLayoutDialog({ activeEditor, onClose, }: {
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}): JSX.Element;

package/lib/plugins/LayoutPlugin/InsertLayoutDialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Button from '../../ui/Button';
+import DropDown, { DropDownItem } from '../../ui/DropDown';
+import { INSERT_LAYOUT_COMMAND } from './LayoutPlugin';
+const LAYOUTS = [
+    { label: '2 columns (equal width)', value: '1fr 1fr' },
+    { label: '2 columns (25% - 75%)', value: '1fr 3fr' },
+    { label: '3 columns (equal width)', value: '1fr 1fr 1fr' },
+    { label: '3 columns (25% - 50% - 25%)', value: '1fr 2fr 1fr' },
+    { label: '4 columns (equal width)', value: '1fr 1fr 1fr 1fr' },
+];
+export default function InsertLayoutDialog({ activeEditor, onClose, }) {
+    const [layout, setLayout] = useState(LAYOUTS[0].value);
+    const buttonLabel = LAYOUTS.find((item) => item.value === layout)?.label;
+    const onClick = () => {
+        activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, layout);
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DropDown, { buttonClassName: "toolbar-item dialog-dropdown", buttonLabel: buttonLabel, children: LAYOUTS.map(({ label, value }) => (_jsx(DropDownItem, { className: "item", onClick: () => setLayout(value), children: _jsx("span", { className: "text", children: label }) }, value))) }), _jsx(Button, { onClick: onClick, children: "Insert" })] }));
+}

package/lib/plugins/LayoutPlugin/LayoutPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { LexicalCommand, NodeKey } from 'lexical';
+export declare const INSERT_LAYOUT_COMMAND: LexicalCommand<string>;
+export declare const UPDATE_LAYOUT_COMMAND: LexicalCommand<{
+    template: string;
+    nodeKey: NodeKey;
+}>;
+export declare function LayoutPlugin(): null;

package/lib/plugins/LayoutPlugin/LayoutPlugin.js

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister, } from '@lexical/utils';
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, createCommand, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from 'lexical';
+import { useEffect } from 'react';
+import { $createLayoutContainerNode, $isLayoutContainerNode, LayoutContainerNode, } from '../../nodes/LayoutContainerNode';
+import { $createLayoutItemNode, $isLayoutItemNode, LayoutItemNode, } from '../../nodes/LayoutItemNode';
+export const INSERT_LAYOUT_COMMAND = createCommand();
+export const UPDATE_LAYOUT_COMMAND = createCommand();
+export function LayoutPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
+            throw new Error('LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor');
+        }
+        const $onEscape = (before) => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) &&
+                selection.isCollapsed() &&
+                selection.anchor.offset === 0) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isLayoutContainerNode);
+                if ($isLayoutContainerNode(container)) {
+                    const parent = container.getParent();
+                    const child = parent &&
+                        (before
+                            ? parent.getFirstChild()
+                            : parent?.getLastChild());
+                    const descendant = before
+                        ? container.getFirstDescendant()?.getKey()
+                        : container.getLastDescendant()?.getKey();
+                    if (parent !== null &&
+                        child === container &&
+                        selection.anchor.key === descendant) {
+                        if (before) {
+                            container.insertBefore($createParagraphNode());
+                        }
+                        else {
+                            container.insertAfter($createParagraphNode());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        const $fillLayoutItemIfEmpty = (node) => {
+            if (node.isEmpty()) {
+                node.append($createParagraphNode());
+            }
+        };
+        const $removeIsolatedLayoutItem = (node) => {
+            const parent = node.getParent();
+            if (!$isLayoutContainerNode(parent)) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+                return true;
+            }
+            return false;
+        };
+        return mergeRegister(
+        // When layout is the last child pressing down/right arrow will insert paragraph
+        // below it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if trailing paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, () => $onEscape(false), COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, () => $onEscape(false), COMMAND_PRIORITY_LOW), 
+        // When layout is the first child pressing up/left arrow will insert paragraph
+        // above it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if leading paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_UP_COMMAND, () => $onEscape(true), COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, () => $onEscape(true), COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_LAYOUT_COMMAND, (template) => {
+            editor.update(() => {
+                const container = $createLayoutContainerNode(template);
+                const itemsCount = getItemsCountFromTemplate(template);
+                for (let i = 0; i < itemsCount; i++) {
+                    container.append($createLayoutItemNode().append($createParagraphNode()));
+                }
+                $insertNodeToNearestRoot(container);
+                container.selectStart();
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(UPDATE_LAYOUT_COMMAND, ({ template, nodeKey }) => {
+            editor.update(() => {
+                const container = $getNodeByKey(nodeKey);
+                if (!$isLayoutContainerNode(container)) {
+                    return;
+                }
+                const itemsCount = getItemsCountFromTemplate(template);
+                const prevItemsCount = getItemsCountFromTemplate(container.getTemplateColumns());
+                // Add or remove extra columns if new template does not match existing one
+                if (itemsCount > prevItemsCount) {
+                    for (let i = prevItemsCount; i < itemsCount; i++) {
+                        container.append($createLayoutItemNode().append($createParagraphNode()));
+                    }
+                }
+                else if (itemsCount < prevItemsCount) {
+                    for (let i = prevItemsCount - 1; i >= itemsCount; i--) {
+                        const layoutItem = container.getChildAtIndex(i);
+                        if ($isLayoutItemNode(layoutItem)) {
+                            layoutItem.remove();
+                        }
+                    }
+                }
+                container.setTemplateColumns(template);
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(LayoutItemNode, (node) => {
+            // Structure enforcing transformers for each node type. In case nesting structure is not
+            // "Container > Item" it'll unwrap nodes and convert it back
+            // to regular content.
+            const isRemoved = $removeIsolatedLayoutItem(node);
+            if (!isRemoved) {
+                // Layout item should always have a child. this function will listen
+                // for any empty layout item and fill it with a paragraph node
+                $fillLayoutItemIfEmpty(node);
+            }
+        }), editor.registerNodeTransform(LayoutContainerNode, (node) => {
+            const children = node.getChildren();
+            if (!children.every($isLayoutItemNode)) {
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }));
+    }, [editor]);
+    return null;
+}
+function getItemsCountFromTemplate(template) {
+    return template.trim().split(/\s+/).length;
+}

package/lib/plugins/LinkPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type Props = {
+    hasLinkAttributes?: boolean;
+};
+export default function LinkPlugin({ hasLinkAttributes, }: Props): JSX.Element;
+export {};

package/lib/plugins/LinkPlugin/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { validateUrl } from '../../utils/url';
+export default function LinkPlugin({ hasLinkAttributes = false, }) {
+    return (_jsx(LexicalLinkPlugin, { validateUrl: validateUrl, attributes: hasLinkAttributes
+            ? {
+                rel: 'noopener noreferrer',
+                target: '_blank',
+            }
+            : undefined }));
+}

package/lib/plugins/MarkdownShortcutPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function MarkdownPlugin(): JSX.Element;

package/lib/plugins/MarkdownShortcutPlugin/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { PLAYGROUND_TRANSFORMERS } from '../MarkdownTransformers';
+export default function MarkdownPlugin() {
+    return _jsx(MarkdownShortcutPlugin, { transformers: PLAYGROUND_TRANSFORMERS });
+}

package/lib/plugins/MarkdownTransformers/index.d.ts

@@ -0,0 +1,8 @@
+import { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
+export declare const HR: ElementTransformer;
+export declare const IMAGE: TextMatchTransformer;
+export declare const EMOJI: TextMatchTransformer;
+export declare const EQUATION: TextMatchTransformer;
+export declare const TWEET: ElementTransformer;
+export declare const TABLE: ElementTransformer;
+export declare const PLAYGROUND_TRANSFORMERS: Array<Transformer>;