@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/hooks/useModal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import Modal from '../ui/Modal';
+export default function useModal() {
+    const [modalContent, setModalContent] = useState(null);
+    const onClose = useCallback(() => {
+        setModalContent(null);
+    }, []);
+    const modal = useMemo(() => {
+        if (modalContent === null) {
+            return null;
+        }
+        const { title, content, closeOnClickOutside } = modalContent;
+        return (_jsx(Modal, { onClose: onClose, title: title, closeOnClickOutside: closeOnClickOutside, children: content }));
+    }, [modalContent, onClose]);
+    const showModal = useCallback((title, 
+    // eslint-disable-next-line no-shadow
+    getContent, closeOnClickOutside = false) => {
+        setModalContent({
+            closeOnClickOutside,
+            content: getContent(onClose),
+            title,
+        });
+    }, [onClose]);
+    return [modal, showModal];
+}

package/lib/hooks/useReport.d.ts

@@ -0,0 +1 @@
+export default function useReport(): (arg0: string) => ReturnType<typeof setTimeout>;

package/lib/hooks/useReport.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const getElement = () => {
+    let element = document.getElementById('report-container');
+    if (element === null) {
+        element = document.createElement('div');
+        element.id = 'report-container';
+        element.style.position = 'fixed';
+        element.style.top = '50%';
+        element.style.left = '50%';
+        element.style.fontSize = '32px';
+        element.style.transform = 'translate(-50%, -50px)';
+        element.style.padding = '20px';
+        element.style.background = 'rgba(240, 240, 240, 0.4)';
+        element.style.borderRadius = '20px';
+        if (document.body) {
+            document.body.appendChild(element);
+        }
+    }
+    return element;
+};
+export default function useReport() {
+    const timer = useRef(null);
+    const cleanup = useCallback(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        if (document.body) {
+            document.body.removeChild(getElement());
+        }
+    }, []);
+    useEffect(() => {
+        return cleanup;
+    }, [cleanup]);
+    return useCallback((content) => {
+        // eslint-disable-next-line no-console
+        console.log(content);
+        const element = getElement();
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+        }
+        element.innerHTML = content;
+        timer.current = setTimeout(cleanup, 1000);
+        return timer.current;
+    }, [cleanup]);
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './collab/loro';

package/lib/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+export * from './collab/loro';

package/lib/nodes/AutocompleteNode.d.ts

@@ -0,0 +1,27 @@
+import type { DOMExportOutput, EditorConfig, LexicalEditor, NodeKey, SerializedTextNode, Spread } from 'lexical';
+import { TextNode } from 'lexical';
+export type SerializedAutocompleteNode = Spread<{
+    uuid: string;
+}, SerializedTextNode>;
+export declare class AutocompleteNode extends TextNode {
+    /**
+     * A unique uuid is generated for each session and assigned to the instance.
+     * This helps to:
+     * - Ensures max one Autocomplete node per session.
+     * - Ensure that when collaboration is enabled, this node is not shown in
+     *   other sessions.
+     * See https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx
+     */
+    __uuid: string;
+    static clone(node: AutocompleteNode): AutocompleteNode;
+    static getType(): 'autocomplete';
+    static importDOM(): any;
+    static importJSON(serializedNode: SerializedAutocompleteNode): AutocompleteNode;
+    exportJSON(): SerializedAutocompleteNode;
+    constructor(text: string, uuid: string, key?: NodeKey);
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    exportDOM(_: LexicalEditor): DOMExportOutput;
+    excludeFromCopy(): boolean;
+    createDOM(config: EditorConfig): HTMLElement;
+}
+export declare function $createAutocompleteNode(text: string, uuid: string): AutocompleteNode;

package/lib/nodes/AutocompleteNode.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { TextNode } from 'lexical';
+import { uuid as UUID } from '../plugins/AutocompletePlugin';
+export class AutocompleteNode extends TextNode {
+    /**
+     * A unique uuid is generated for each session and assigned to the instance.
+     * This helps to:
+     * - Ensures max one Autocomplete node per session.
+     * - Ensure that when collaboration is enabled, this node is not shown in
+     *   other sessions.
+     * See https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx
+     */
+    __uuid;
+    static clone(node) {
+        return new AutocompleteNode(node.__text, node.__uuid, node.__key);
+    }
+    static getType() {
+        return 'autocomplete';
+    }
+    static importDOM() {
+        // Never import from DOM
+        return null;
+    }
+    static importJSON(serializedNode) {
+        return $createAutocompleteNode(serializedNode.text, serializedNode.uuid).updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            uuid: this.__uuid,
+        };
+    }
+    constructor(text, uuid, key) {
+        super(text, key);
+        this.__uuid = uuid;
+    }
+    updateDOM(prevNode, dom, config) {
+        return false;
+    }
+    exportDOM(_) {
+        return { element: null };
+    }
+    excludeFromCopy() {
+        return true;
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.classList.add(config.theme.autocomplete);
+        if (this.__uuid !== UUID) {
+            dom.style.display = 'none';
+        }
+        return dom;
+    }
+}
+export function $createAutocompleteNode(text, uuid) {
+    return new AutocompleteNode(text, uuid).setMode('token');
+}

package/lib/nodes/CounterComponent.d.ts

@@ -0,0 +1,6 @@
+import type { NodeKey } from 'lexical';
+import type { JSX } from 'react';
+export default function CounterComponent({ value, nodeKey, }: {
+    value: number;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/lib/nodes/CounterComponent.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef } from 'react';
+import { $isCounterNode } from './CounterNode';
+export default function CounterComponent({ value, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const ref = useRef(null);
+    const withCounterNode = (cb, onUpdate) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isCounterNode(node)) {
+                cb(node);
+            }
+        }, { onUpdate });
+    };
+    const onDelete = useCallback((payload) => {
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isCounterNode(node)) {
+                node.remove();
+                return true;
+            }
+        }
+        return false;
+    }, [isSelected, nodeKey]);
+    const onIncrement = useCallback(() => {
+        withCounterNode((node) => {
+            node.increment();
+        });
+    }, []);
+    const onDecrement = useCallback(() => {
+        withCounterNode((node) => {
+            node.decrement();
+        });
+    }, []);
+    const onReset = useCallback(() => {
+        withCounterNode((node) => {
+            node.setValue(0);
+        });
+    }, []);
+    const onClick = useCallback((payload) => {
+        const event = payload;
+        if (event.target === ref.current) {
+            if (event.shiftKey) {
+                setSelected(!isSelected);
+            }
+            else {
+                clearSelection();
+                setSelected(true);
+            }
+            return true;
+        }
+        return false;
+    }, [isSelected, setSelected, clearSelection]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            if ($isNodeSelection($getSelection())) {
+                return false;
+            }
+            clearSelection();
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [clearSelection, editor, onClick, onDelete]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                clearSelection();
+            }
+        };
+        if (isSelected) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [clearSelection, isSelected]);
+    return (_jsxs("div", { className: `counter-component ${isSelected ? 'selected' : ''}`, ref: ref, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '8px 12px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            backgroundColor: isSelected ? '#e3f2fd' : '#f9f9f9',
+            fontFamily: 'monospace',
+            fontSize: '14px',
+            userSelect: 'none',
+            cursor: 'pointer',
+        }, children: [_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onDecrement();
+                }, style: {
+                    background: '#dc3545',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '3px',
+                    padding: '4px 8px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                }, title: "Decrement", children: "-" }), _jsx("span", { style: {
+                    minWidth: '24px',
+                    textAlign: 'center',
+                    fontWeight: 'bold',
+                }, children: value }), _jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onIncrement();
+                }, style: {
+                    background: '#28a745',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '3px',
+                    padding: '4px 8px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                }, title: "Increment", children: "+" }), _jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onReset();
+                }, style: {
+                    background: '#6c757d',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '3px',
+                    padding: '4px 8px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    marginLeft: '4px',
+                }, title: "Reset to 0 (demonstrates NodeState)", children: "R" })] }));
+}

package/lib/nodes/CounterNode.d.ts

@@ -0,0 +1,23 @@
+import type { LexicalNode } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorNode } from 'lexical';
+export declare const counterValueState: import("lexical").StateConfig<"counterValue", number>;
+export declare class CounterNode extends DecoratorNode<JSX.Element> {
+    $config(): import("lexical").StaticNodeConfigRecord<"counter", {
+        extends: typeof DecoratorNode;
+        stateConfigs: {
+            flat: true;
+            stateConfig: import("lexical").StateConfig<"counterValue", number>;
+        }[];
+    }>;
+    getValue(): number;
+    setValue(value: number): this;
+    increment(): this;
+    decrement(): this;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+    isIsolated(): true;
+}
+export declare function $isCounterNode(node: LexicalNode | null | undefined): node is CounterNode;
+export declare function $createCounterNode(value?: number): CounterNode;

package/lib/nodes/CounterNode.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $getState, $setState, createState, DecoratorNode, } from 'lexical';
+import * as React from 'react';
+const CounterComponent = React.lazy(() => import('./CounterComponent'));
+export const counterValueState = createState('counterValue', {
+    parse: (v) => (typeof v === 'number' ? v : 0),
+});
+export class CounterNode extends DecoratorNode {
+    $config() {
+        return this.config('counter', {
+            extends: DecoratorNode,
+            stateConfigs: [{ flat: true, stateConfig: counterValueState }],
+        });
+    }
+    getValue() {
+        return $getState(this, counterValueState);
+    }
+    setValue(value) {
+        return $setState(this, counterValueState, value);
+    }
+    increment() {
+        return $setState(this, counterValueState, prev => prev + 1);
+    }
+    decrement() {
+        return $setState(this, counterValueState, prev => prev - 1);
+    }
+    createDOM() {
+        const div = document.createElement('div');
+        div.className = 'counter-node';
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        return (_jsx(React.Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(CounterComponent, { value: this.getValue(), nodeKey: this.getKey() }) }));
+    }
+    isIsolated() {
+        return true;
+    }
+}
+export function $isCounterNode(node) {
+    return node instanceof CounterNode;
+}
+export function $createCounterNode(value = 0) {
+    return new CounterNode().setValue(value);
+}

package/lib/nodes/DateTimeNode/DateTimeComponent.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import 'react-day-picker/style.css';
+import './DateTimeNode.css';
+import { NodeKey } from 'lexical';
+export default function DateTimeComponent({ dateTime, nodeKey, }: {
+    dateTime: Date | undefined;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/lib/nodes/DateTimeNode/DateTimeComponent.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-day-picker/style.css';
+import './DateTimeNode.css';
+import { autoUpdate, flip, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from '@floating-ui/react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { setHours, setMinutes } from 'date-fns';
+import { $getNodeByKey } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { $isDateTimeNode } from './DateTimeNode';
+const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+export default function DateTimeComponent({ dateTime, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const [selected, setSelected] = useState(dateTime);
+    const [includeTime, setIncludeTime] = useState(false);
+    const [timeValue, setTimeValue] = useState('00:00');
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection(nodeKey);
+    const { refs, floatingStyles, context } = useFloating({
+        elements: {
+            reference: ref.current,
+        },
+        middleware: [
+            offset(5),
+            flip({
+                fallbackPlacements: ['top-start'],
+            }),
+            shift({ padding: 10 }),
+        ],
+        onOpenChange: setIsOpen,
+        open: isOpen,
+        placement: 'bottom-start',
+        strategy: 'fixed',
+        whileElementsMounted: autoUpdate,
+    });
+    const role = useRole(context, { role: 'dialog' });
+    const dismiss = useDismiss(context);
+    const { getFloatingProps } = useInteractions([role, dismiss]);
+    useEffect(() => {
+        const dateTimePillRef = ref.current;
+        function onClick(e) {
+            e.preventDefault();
+            setIsOpen(true);
+        }
+        if (dateTimePillRef) {
+            dateTimePillRef.addEventListener('click', onClick);
+        }
+        return () => {
+            if (dateTimePillRef) {
+                dateTimePillRef.removeEventListener('click', onClick);
+            }
+        };
+    }, [refs, editor]);
+    const withDateTimeNode = (cb, onUpdate) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isDateTimeNode(node)) {
+                cb(node);
+            }
+        }, { onUpdate });
+    };
+    const handleCheckboxChange = (e) => {
+        withDateTimeNode((node) => {
+            if (e.target.checked) {
+                setIncludeTime(true);
+            }
+            else {
+                if (selected) {
+                    const newSelectedDate = setHours(setMinutes(selected, 0), 0);
+                    node.setDateTime(newSelectedDate);
+                }
+                setIncludeTime(false);
+                setTimeValue('00:00');
+            }
+        });
+    };
+    const handleTimeChange = (e) => {
+        withDateTimeNode((node) => {
+            const time = e.target.value;
+            if (!selected) {
+                setTimeValue(time);
+                return;
+            }
+            const [hours, minutes] = time
+                .split(':')
+                .map((str) => parseInt(str, 10));
+            const newSelectedDate = setHours(setMinutes(selected, minutes), hours);
+            setSelected(newSelectedDate);
+            node.setDateTime(newSelectedDate);
+            setTimeValue(time);
+        });
+    };
+    const handleDaySelect = (date) => {
+        withDateTimeNode((node) => {
+            if (!timeValue || !date) {
+                setSelected(date);
+                return;
+            }
+            const [hours, minutes] = timeValue
+                .split(':')
+                .map((str) => parseInt(str, 10));
+            const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes);
+            node.setDateTime(newDate);
+            setSelected(newDate);
+        });
+    };
+    return (_jsxs("div", { className: `dateTimePill ${isNodeSelected ? 'selected' : ''}`, ref: ref, style: { cursor: 'pointer', width: 'fit-content' }, children: [dateTime?.toDateString() + (includeTime ? ' ' + timeValue : '') ||
+                'Invalid Date', isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingOverlay, { lockScroll: true, children: _jsx(FloatingFocusManager, { context: context, initialFocus: -1, children: _jsxs("div", { className: 'dateTimePicker', ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: [_jsx(DayPicker, { captionLayout: "dropdown", navLayout: "after", fixedWeeks: false, showOutsideDays: false, mode: "single", selected: selected, required: true, 
+                                    // timeZone="BST" TODO: Support time zone selection
+                                    onSelect: handleDaySelect, startMonth: new Date(1925, 0), endMonth: new Date(2042, 7) }), _jsx("form", { style: { marginBlockEnd: '1em' }, children: _jsxs("div", { style: {
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            width: '300px',
+                                        }, children: [_jsx("input", { type: "checkbox", id: "option1", name: "option1", value: "value1", checked: includeTime, onChange: handleCheckboxChange }), _jsx("label", { children: _jsx("input", { type: "time", value: timeValue, onChange: handleTimeChange, disabled: !includeTime }) }), _jsxs("span", { children: [" ", userTimeZone] })] }) })] }) }) }) }))] }));
+}

package/lib/nodes/DateTimeNode/DateTimeNode.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from 'react';
+import { DecoratorNode, DOMExportOutput, LexicalNode, SerializedLexicalNode, Spread, StateConfigValue, StateValueOrUpdater } from 'lexical';
+export type SerializedDateTimeNode = Spread<{
+    dateTime?: string;
+}, SerializedLexicalNode>;
+declare const dateTimeState: import("lexical").StateConfig<"dateTime", Date>;
+export declare class DateTimeNode extends DecoratorNode<JSX.Element> {
+    $config(): import("lexical").StaticNodeConfigRecord<"datetime", {
+        extends: typeof DecoratorNode;
+        importDOM: import("lexical").DOMConversionMap<HTMLElement>;
+        stateConfigs: {
+            flat: true;
+            stateConfig: import("lexical").StateConfig<"dateTime", Date>;
+        }[];
+    }>;
+    getDateTime(): StateConfigValue<typeof dateTimeState>;
+    setDateTime(valueOrUpdater: StateValueOrUpdater<typeof dateTimeState>): this;
+    getTextContent(): string;
+    exportDOM(): DOMExportOutput;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    isInline(): boolean;
+    decorate(): JSX.Element;
+}
+export declare function $createDateTimeNode(dateTime: Date): DateTimeNode;
+export declare function $isDateTimeNode(node: LexicalNode | null | undefined): node is DateTimeNode;
+export {};

package/lib/nodes/DateTimeNode/DateTimeNode.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $getState, $setState, buildImportMap, createState, DecoratorNode, } from 'lexical';
+import * as React from 'react';
+const DateTimeComponent = React.lazy(() => import('./DateTimeComponent'));
+const getDateTimeText = (dateTime) => {
+    if (dateTime === undefined) {
+        return '';
+    }
+    const hours = dateTime?.getHours();
+    const minutes = dateTime?.getMinutes();
+    return (dateTime.toDateString() +
+        (hours === 0 && minutes === 0
+            ? ''
+            : ` ${hours.toString().padStart(2, '0')}:${minutes
+                .toString()
+                .padStart(2, '0')}`));
+};
+function $convertDateTimeElement(domNode) {
+    const dateTimeValue = domNode.getAttribute('data-lexical-datetime');
+    if (dateTimeValue) {
+        const node = $createDateTimeNode(new Date(Date.parse(dateTimeValue)));
+        return { node };
+    }
+    return null;
+}
+const dateTimeState = createState('dateTime', {
+    parse: (v) => new Date(v),
+    unparse: (v) => v.toISOString(),
+});
+export class DateTimeNode extends DecoratorNode {
+    $config() {
+        return this.config('datetime', {
+            extends: DecoratorNode,
+            importDOM: buildImportMap({
+                span: (domNode) => domNode.getAttribute('data-lexical-datetime') !== null
+                    ? {
+                        conversion: $convertDateTimeElement,
+                        priority: 2,
+                    }
+                    : null,
+            }),
+            stateConfigs: [{ flat: true, stateConfig: dateTimeState }],
+        });
+    }
+    getDateTime() {
+        return $getState(this, dateTimeState);
+    }
+    setDateTime(valueOrUpdater) {
+        return $setState(this, dateTimeState, valueOrUpdater);
+    }
+    getTextContent() {
+        const dateTime = this.getDateTime();
+        return getDateTimeText(dateTime);
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.textContent = getDateTimeText(this.getDateTime());
+        element.setAttribute('data-lexical-datetime', this.getDateTime()?.toString() || '');
+        return { element };
+    }
+    createDOM() {
+        const element = document.createElement('span');
+        element.setAttribute('data-lexical-datetime', this.getDateTime()?.toString() || '');
+        element.style.display = 'inline-block';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    isInline() {
+        return true;
+    }
+    decorate() {
+        return (_jsx(DateTimeComponent, { dateTime: this.getDateTime(), nodeKey: this.__key }));
+    }
+}
+export function $createDateTimeNode(dateTime) {
+    return new DateTimeNode().setDateTime(dateTime);
+}
+export function $isDateTimeNode(node) {
+    return node instanceof DateTimeNode;
+}

package/lib/nodes/EmojiNode.d.ts

@@ -0,0 +1,18 @@
+import type { EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread } from 'lexical';
+import { TextNode } from 'lexical';
+export type SerializedEmojiNode = Spread<{
+    className: string;
+}, SerializedTextNode>;
+export declare class EmojiNode extends TextNode {
+    __className: string;
+    static getType(): string;
+    static clone(node: EmojiNode): EmojiNode;
+    constructor(className: string, text: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    static importJSON(serializedNode: SerializedEmojiNode): EmojiNode;
+    exportJSON(): SerializedEmojiNode;
+    getClassName(): string;
+}
+export declare function $isEmojiNode(node: LexicalNode | null | undefined): node is EmojiNode;
+export declare function $createEmojiNode(className: string, emojiText: string): EmojiNode;