@blocklet/editor-lite 2.6.0

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContentNode.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { ElementNode, } from 'lexical';
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
+import { $isCollapsibleContainerNode } from './CollapsibleContainerNode';
+import { domOnBeforeMatch, setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertCollapsibleContentElement(domNode) {
+    const node = $createCollapsibleContentNode();
+    return {
+        node,
+    };
+}
+export class CollapsibleContentNode extends ElementNode {
+    static getType() {
+        return 'collapsible-content';
+    }
+    static clone(node) {
+        return new CollapsibleContentNode(node.__key);
+    }
+    createDOM(config, editor) {
+        const dom = document.createElement('div');
+        dom.classList.add('Collapsible__content');
+        if (IS_CHROME) {
+            editor.getEditorState().read(() => {
+                const containerNode = this.getParentOrThrow();
+                invariant($isCollapsibleContainerNode(containerNode), 'Expected parent node to be a CollapsibleContainerNode');
+                if (!containerNode.__open) {
+                    setDomHiddenUntilFound(dom);
+                }
+            });
+            domOnBeforeMatch(dom, () => {
+                editor.update(() => {
+                    const containerNode = this.getParentOrThrow().getLatest();
+                    invariant($isCollapsibleContainerNode(containerNode), 'Expected parent node to be a CollapsibleContainerNode');
+                    if (!containerNode.__open) {
+                        containerNode.toggleOpen();
+                    }
+                });
+            });
+        }
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        return false;
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-collapsible-content')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertCollapsibleContentElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.classList.add('Collapsible__content');
+        element.setAttribute('data-lexical-collapsible-content', 'true');
+        return { element };
+    }
+    static importJSON(serializedNode) {
+        return $createCollapsibleContentNode();
+    }
+    isShadowRoot() {
+        return true;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'collapsible-content',
+            version: 1,
+        };
+    }
+}
+export function $createCollapsibleContentNode() {
+    return new CollapsibleContentNode();
+}
+export function $isCollapsibleContentNode(node) {
+    return node instanceof CollapsibleContentNode;
+}

package/lib/main/plugins/CollapsiblePlugin/CollapsibleTitleNode.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { DOMConversionMap, DOMConversionOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, RangeSelection, SerializedElementNode } from 'lexical';
+type SerializedCollapsibleTitleNode = SerializedElementNode;
+export declare function $convertSummaryElement(domNode: HTMLElement): DOMConversionOutput | null;
+export declare class CollapsibleTitleNode extends ElementNode {
+    static getType(): string;
+    static clone(node: CollapsibleTitleNode): CollapsibleTitleNode;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: CollapsibleTitleNode, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedCollapsibleTitleNode): CollapsibleTitleNode;
+    exportJSON(): SerializedCollapsibleTitleNode;
+    collapseAtStart(_selection: RangeSelection): boolean;
+    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ElementNode;
+}
+export declare function $createCollapsibleTitleNode(): CollapsibleTitleNode;
+export declare function $isCollapsibleTitleNode(node: LexicalNode | null | undefined): node is CollapsibleTitleNode;
+export {};

package/lib/main/plugins/CollapsiblePlugin/CollapsibleTitleNode.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $createParagraphNode, $isElementNode, ElementNode, } from 'lexical';
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
+import { $isCollapsibleContainerNode } from './CollapsibleContainerNode';
+import { $isCollapsibleContentNode } from './CollapsibleContentNode';
+export function $convertSummaryElement(domNode) {
+    const node = $createCollapsibleTitleNode();
+    return {
+        node,
+    };
+}
+export class CollapsibleTitleNode extends ElementNode {
+    static getType() {
+        return 'collapsible-title';
+    }
+    static clone(node) {
+        return new CollapsibleTitleNode(node.__key);
+    }
+    createDOM(config, editor) {
+        const dom = document.createElement('summary');
+        dom.classList.add('Collapsible__title');
+        if (IS_CHROME) {
+            dom.addEventListener('click', () => {
+                editor.update(() => {
+                    const collapsibleContainer = this.getLatest().getParentOrThrow();
+                    invariant($isCollapsibleContainerNode(collapsibleContainer), 'Expected parent node to be a CollapsibleContainerNode');
+                    collapsibleContainer.toggleOpen();
+                });
+            });
+        }
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        return false;
+    }
+    static importDOM() {
+        return {
+            summary: (domNode) => {
+                return {
+                    conversion: $convertSummaryElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        return $createCollapsibleTitleNode();
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'collapsible-title',
+            version: 1,
+        };
+    }
+    collapseAtStart(_selection) {
+        this.getParentOrThrow().insertBefore(this);
+        return true;
+    }
+    insertNewAfter(_, restoreSelection = true) {
+        const containerNode = this.getParentOrThrow();
+        if (!$isCollapsibleContainerNode(containerNode)) {
+            throw new Error('CollapsibleTitleNode expects to be child of CollapsibleContainerNode');
+        }
+        if (containerNode.getOpen()) {
+            const contentNode = this.getNextSibling();
+            if (!$isCollapsibleContentNode(contentNode)) {
+                throw new Error('CollapsibleTitleNode expects to have CollapsibleContentNode sibling');
+            }
+            const firstChild = contentNode.getFirstChild();
+            if ($isElementNode(firstChild)) {
+                return firstChild;
+            }
+            const paragraph = $createParagraphNode();
+            contentNode.append(paragraph);
+            return paragraph;
+        }
+        const paragraph = $createParagraphNode();
+        containerNode.insertAfter(paragraph, restoreSelection);
+        return paragraph;
+    }
+}
+export function $createCollapsibleTitleNode() {
+    return new CollapsibleTitleNode();
+}
+export function $isCollapsibleTitleNode(node) {
+    return node instanceof CollapsibleTitleNode;
+}

package/lib/main/plugins/CollapsiblePlugin/CollapsibleUtils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function setDomHiddenUntilFound(dom: HTMLElement): void;
+export declare function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void;

package/lib/main/plugins/CollapsiblePlugin/CollapsibleUtils.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function setDomHiddenUntilFound(dom) {
+    // @ts-expect-error
+    dom.hidden = 'until-found';
+}
+export function domOnBeforeMatch(dom, callback) {
+    // @ts-expect-error
+    dom.onbeforematch = callback;
+}

package/lib/main/plugins/CollapsiblePlugin/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Collapsible.css';
+export declare const INSERT_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<void>;
+export declare const TOGGLE_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<string>;
+export default function CollapsiblePlugin(): null;

package/lib/main/plugins/CollapsiblePlugin/index.js

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Collapsible.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, createCommand, DELETE_CHARACTER_COMMAND, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from 'lexical';
+import { useEffect } from 'react';
+import { $createCollapsibleContainerNode, $isCollapsibleContainerNode, CollapsibleContainerNode, } from './CollapsibleContainerNode';
+import { $createCollapsibleContentNode, $isCollapsibleContentNode, CollapsibleContentNode, } from './CollapsibleContentNode';
+import { $createCollapsibleTitleNode, $isCollapsibleTitleNode, CollapsibleTitleNode } from './CollapsibleTitleNode';
+export const INSERT_COLLAPSIBLE_COMMAND = createCommand();
+export const TOGGLE_COLLAPSIBLE_COMMAND = createCommand();
+export default function CollapsiblePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([CollapsibleContainerNode, CollapsibleTitleNode, CollapsibleContentNode])) {
+            throw new Error('CollapsiblePlugin: CollapsibleContainerNode, CollapsibleTitleNode, or CollapsibleContentNode not registered on editor');
+        }
+        const $onEscapeUp = () => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed() && selection.anchor.offset === 0) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
+                if ($isCollapsibleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null &&
+                        parent.getFirstChild() === container &&
+                        selection.anchor.key === container.getFirstDescendant()?.getKey()) {
+                        container.insertBefore($createParagraphNode());
+                    }
+                }
+            }
+            return false;
+        };
+        const $onEscapeDown = () => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed()) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
+                if ($isCollapsibleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null && parent.getLastChild() === container) {
+                        const titleParagraph = container.getFirstDescendant();
+                        const contentParagraph = container.getLastDescendant();
+                        if ((contentParagraph !== null &&
+                            selection.anchor.key === contentParagraph.getKey() &&
+                            selection.anchor.offset === contentParagraph.getTextContentSize()) ||
+                            (titleParagraph !== null &&
+                                selection.anchor.key === titleParagraph.getKey() &&
+                                selection.anchor.offset === titleParagraph.getTextContentSize())) {
+                            container.insertAfter($createParagraphNode());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return mergeRegister(
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Title + Content" it'll unwrap nodes and convert it back
+        // to regular content.
+        editor.registerNodeTransform(CollapsibleContentNode, (node) => {
+            const parent = node.getParent();
+            if (!$isCollapsibleContainerNode(parent)) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), editor.registerNodeTransform(CollapsibleTitleNode, (node) => {
+            const parent = node.getParent();
+            if (!$isCollapsibleContainerNode(parent)) {
+                node.replace($createParagraphNode().append(...node.getChildren()));
+            }
+        }), editor.registerNodeTransform(CollapsibleContainerNode, (node) => {
+            const children = node.getChildren();
+            if (children.length !== 2 || !$isCollapsibleTitleNode(children[0]) || !$isCollapsibleContentNode(children[1])) {
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), 
+        // This handles the case when container is collapsed and we delete its previous sibling
+        // into it, it would cause collapsed content deleted (since it's display: none, and selection
+        // swallows it when deletes single char). Instead we expand container, which is although
+        // not perfect, but avoids bigger problem
+        editor.registerCommand(DELETE_CHARACTER_COMMAND, () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) {
+                return false;
+            }
+            const anchorNode = selection.anchor.getNode();
+            const topLevelElement = anchorNode.getTopLevelElement();
+            if (topLevelElement === null) {
+                return false;
+            }
+            const container = topLevelElement.getPreviousSibling();
+            if (!$isCollapsibleContainerNode(container) || container.getOpen()) {
+                return false;
+            }
+            container.setOpen(true);
+            return true;
+        }, COMMAND_PRIORITY_LOW), 
+        // When collapsible 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, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), 
+        // When collapsible 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, $onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), 
+        // Enter goes from Title to Content rather than a new line inside Title
+        editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isCollapsibleTitleNode(node));
+                if ($isCollapsibleTitleNode(titleNode)) {
+                    const container = titleNode.getParent();
+                    if (container && $isCollapsibleContainerNode(container)) {
+                        if (!container.getOpen()) {
+                            container.toggleOpen();
+                        }
+                        titleNode.getNextSibling()?.selectEnd();
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_COLLAPSIBLE_COMMAND, () => {
+            editor.update(() => {
+                const title = $createCollapsibleTitleNode();
+                const paragraph = $createParagraphNode();
+                $insertNodeToNearestRoot($createCollapsibleContainerNode(true).append(title.append(paragraph), $createCollapsibleContentNode().append($createParagraphNode())));
+                paragraph.select();
+            });
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/ComponentPickerPlugin/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
+export declare const INSERT_COMPONENT_COMMAND: import("lexical").LexicalCommand<unknown>;
+export default function ComponentPickerMenuPlugin(): JSX.Element;
+export declare const uploadFile: (editor: LexicalEditor) => void;