@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,141 @@
+import { $isLinkNode } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, isHTMLAnchorElement } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode, $getSelection, $isElementNode, $isRangeSelection, getNearestEditorFromDOMNode, } from 'lexical';
+import { useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEditorConfig } from '../../../config';
+import { getUTMUrl } from '../../../libs/utm';
+function findMatchingDOM(startNode, predicate) {
+    let node = startNode;
+    while (node != null) {
+        if (predicate(node)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+    return null;
+}
+function isSameOrigin(url) {
+    try {
+        return new URL(url, window.location.href).origin === window.location.origin;
+    }
+    catch (e) {
+        console.error(e);
+        return false;
+    }
+}
+const PHONE_NUMBER_REGEX = /^\+?[0-9\s()-]{5,}$/;
+function formatUrl(url) {
+    // Check if URL already has a protocol
+    if (url.match(/^[a-z][a-z0-9+.-]*:/i)) {
+        // URL already has a protocol, leave it as is
+        return url;
+    }
+    // Check if it's a relative path (starting with '/', '.', or '#')
+    if (url.match(/^[/#.]/)) {
+        // Relative path, leave it as is
+        return url;
+    }
+    // Check for email address
+    if (url.includes('@')) {
+        return `mailto:${url}`;
+    }
+    // Check for phone number
+    if (PHONE_NUMBER_REGEX.test(url)) {
+        return `tel:${url}`;
+    }
+    // For everything else, return with "./" prefix
+    return `./${url}`;
+}
+/**
+ * 代码复制自 @lexical/react/LexicalClickableLinkPlugin, 逻辑改动:
+ * - url origin 与 window.location.origin 相同时, 避免 newTab 方式跳转
+ * - 编辑模式下, 避免当前页面直接跳转 (#1575)
+ */
+export default function LexicalClickableLinkPlugin({ newTab = true }) {
+    const [editor] = useLexicalComposerContext();
+    const config = useEditorConfig();
+    const { boardId } = useParams();
+    const navigate = useNavigate();
+    useEffect(() => {
+        const onClick = (event) => {
+            const { target } = event;
+            if (!(target instanceof Node)) {
+                return;
+            }
+            const nearestEditor = getNearestEditorFromDOMNode(target);
+            if (nearestEditor === null) {
+                return;
+            }
+            let url = null;
+            let urlTarget = null;
+            nearestEditor.update(() => {
+                const clickedNode = $getNearestNodeFromDOMNode(target);
+                if (clickedNode !== null) {
+                    const maybeLinkNode = $findMatchingParent(clickedNode, $isElementNode);
+                    if ($isLinkNode(maybeLinkNode)) {
+                        url = maybeLinkNode.sanitizeUrl(formatUrl(maybeLinkNode.getURL()));
+                        urlTarget = maybeLinkNode.getTarget();
+                    }
+                    else {
+                        const a = findMatchingDOM(target, isHTMLAnchorElement);
+                        if (a !== null) {
+                            url = a.href;
+                            urlTarget = a.target;
+                        }
+                    }
+                }
+            });
+            if (url === null || url === '') {
+                return;
+            }
+            // Allow user to select link text without follwing url
+            const selection = editor.getEditorState().read($getSelection);
+            if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+                event.preventDefault();
+                return;
+            }
+            const isMiddle = event.type === 'auxclick' && event.button === 1;
+            if (isSameOrigin(url) && !editor.isEditable() && config.openLinkInNewTab !== true) {
+                // HOTFIX: for docs board
+                // if url starts with /docs, use navigate instead of window.open
+                if (url && url?.startsWith?.('/docs')) {
+                    // url should be /docs/:boardId/:locale/:docId, should length === 4 (after remove start trim)
+                    const segments = url.split('/').filter(Boolean);
+                    if (segments.length === 3 || segments.length === 2) {
+                        url = url.replace('/docs', `/docs/${boardId}`);
+                    }
+                    // 开启 page group 情况的处理
+                    if (window.blocklet?.pageGroup === 'doc') {
+                        url = url.replace(/^\/docs\//, '/');
+                    }
+                    navigate(url);
+                }
+                else {
+                    window.open(url, '_self');
+                }
+            }
+            else {
+                window.open(getUTMUrl(url), newTab || isMiddle || event.metaKey || event.ctrlKey || urlTarget === '_blank' ? '_blank' : '_self');
+            }
+            event.preventDefault();
+        };
+        const onMouseUp = (event) => {
+            if (event.button === 1 && editor.isEditable()) {
+                onClick(event);
+            }
+        };
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement !== null) {
+                prevRootElement.removeEventListener('click', onClick);
+                prevRootElement.removeEventListener('mouseup', onMouseUp);
+            }
+            if (rootElement !== null) {
+                rootElement.addEventListener('click', onClick);
+                rootElement.addEventListener('mouseup', onMouseUp);
+            }
+        });
+    }, [editor, newTab]);
+    return null;
+}

package/lib/main/plugins/CodeActionMenuPlugin/components/CopyButton/index.d.ts

@@ -0,0 +1,7 @@
+import { LexicalEditor } from 'lexical';
+interface Props {
+    editor: LexicalEditor;
+    getCodeDOMNode: () => HTMLElement | null;
+}
+export declare function CopyButton({ editor, getCodeDOMNode }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/main/plugins/CodeActionMenuPlugin/components/CopyButton/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { $isCodeNode } from '@lexical/code';
+import { $getNearestNodeFromDOMNode, $getSelection, $setSelection } from 'lexical';
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { useDebounce } from '../../utils';
+import { icons } from '../../../../icons';
+export function CopyButton({ editor, getCodeDOMNode }) {
+    const [isCopyCompleted, setCopyCompleted] = useState(false);
+    const removeSuccessIcon = useDebounce(() => {
+        setCopyCompleted(false);
+    }, 1000);
+    async function handleClick() {
+        const codeDOMNode = getCodeDOMNode();
+        if (!codeDOMNode) {
+            return;
+        }
+        let content = '';
+        editor.update(() => {
+            const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+            if ($isCodeNode(codeNode)) {
+                content = codeNode.getTextContent();
+            }
+            const selection = $getSelection();
+            $setSelection(selection);
+        });
+        try {
+            await navigator.clipboard.writeText(content);
+            setCopyCompleted(true);
+            removeSuccessIcon();
+        }
+        catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "menu-item", onClick: handleClick, "aria-label": "copy", style: { display: isCopyCompleted ? 'none' : 'inline-block' }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": icons.copy, "data-height": 20 }) }), _jsx("button", { className: "menu-item", "aria-label": "copy", style: { display: isCopyCompleted ? 'inline-block' : 'none' }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": icons.copySuccess, "data-height": 20 }) })] }));
+}

package/lib/main/plugins/CodeActionMenuPlugin/index.css

@@ -0,0 +1,46 @@
+.code-action-menu-container {
+  height: 35.8px;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  user-select: none;
+}
+
+.code-action-menu-container .code-highlight-language {
+  margin-right: 4px;
+}
+
+.code-action-menu-container button.menu-item {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 4px;
+  background: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.code-action-menu-container button.menu-item i.format {
+  height: 16px;
+  width: 16px;
+  opacity: 0.6;
+  display: flex;
+  color: rgba(0, 0, 0, 0.5);
+  background-size: contain;
+}
+
+.code-action-menu-container button.menu-item:hover {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+}
+
+.code-action-menu-container button.menu-item:active {
+  /* background-color: rgba(223, 232, 250);
+  border: 1px solid rgba(0, 0, 0, 0.45); */
+}

package/lib/main/plugins/CodeActionMenuPlugin/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 './index.css';
+import * as React from 'react';
+export default function CodeActionMenuPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): React.ReactPortal | null;

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import './index.css';
+import { $isCodeNode, CodeNode } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CopyButton } from './components/CopyButton';
+import { useDebounce } from './utils';
+const CODE_PADDING = 8;
+function CodeActionMenuContainer({ anchorElem }) {
+    const [editor] = useLexicalComposerContext();
+    const [lang, setLang] = useState('');
+    const [isShown, setShown] = useState(false);
+    const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false);
+    const [position, setPosition] = useState({
+        right: '0',
+        top: '0',
+    });
+    const codeSetRef = useRef(new Set());
+    const codeDOMNodeRef = useRef(null);
+    function getCodeDOMNode() {
+        return codeDOMNodeRef.current;
+    }
+    const debouncedOnMouseMove = useDebounce((event) => {
+        const { codeDOMNode, isOutside } = getMouseInfo(event);
+        if (isOutside) {
+            setShown(false);
+            return;
+        }
+        if (!codeDOMNode) {
+            return;
+        }
+        codeDOMNodeRef.current = codeDOMNode;
+        let codeNode = null;
+        let _lang = '';
+        editor.update(() => {
+            const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+            if ($isCodeNode(maybeCodeNode)) {
+                codeNode = maybeCodeNode;
+                _lang = codeNode.getLanguage() || '';
+            }
+        });
+        if (codeNode) {
+            const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
+            const { y, right } = codeDOMNode.getBoundingClientRect();
+            setLang(_lang);
+            setShown(true);
+            setPosition({
+                right: `${editorElemRight - right + CODE_PADDING}px`,
+                top: `${y - editorElemY}px`,
+            });
+        }
+    }, 50, 1000);
+    useEffect(() => {
+        if (!shouldListenMouseMove) {
+            return;
+        }
+        document.addEventListener('mousemove', debouncedOnMouseMove);
+        return () => {
+            setShown(false);
+            debouncedOnMouseMove.cancel();
+            document.removeEventListener('mousemove', debouncedOnMouseMove);
+        };
+    }, [shouldListenMouseMove, debouncedOnMouseMove]);
+    useEffect(() => {
+        return editor.registerMutationListener(CodeNode, (mutations) => {
+            editor.getEditorState().read(() => {
+                for (const [key, type] of mutations) {
+                    switch (type) {
+                        case 'created':
+                            codeSetRef.current.add(key);
+                            break;
+                        case 'destroyed':
+                            codeSetRef.current.delete(key);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+            setShouldListenMouseMove(codeSetRef.current.size > 0);
+        }, { skipInitialization: false });
+    }, [editor]);
+    return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    _jsx(_Fragment, { children: isShown ? (_jsx("div", { className: "code-action-menu-container", style: { ...position }, children: _jsx(CopyButton, { editor: editor, getCodeDOMNode: getCodeDOMNode }) })) : null }));
+}
+function getMouseInfo(event) {
+    const { target } = event;
+    if (isHTMLElement(target)) {
+        const codeDOMNode = target.closest('code');
+        const isOutside = !(codeDOMNode || target.closest('div.code-action-menu-container'));
+        return { codeDOMNode, isOutside };
+    }
+    return { codeDOMNode: null, isOutside: true };
+}
+export default function CodeActionMenuPlugin({ anchorElem = document.body, }) {
+    return createPortal(_jsx(CodeActionMenuContainer, { anchorElem: anchorElem }), anchorElem);
+}

package/lib/main/plugins/CodeActionMenuPlugin/utils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="lodash" />
+export declare function useDebounce<T extends (...args: never[]) => void>(fn: T, ms: number, maxWait?: number): import("lodash").DebouncedFunc<(...args: Parameters<T>) => void>;

package/lib/main/plugins/CodeActionMenuPlugin/utils.js

@@ -0,0 +1,18 @@
+/**
+ * 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 debounce from 'lodash/debounce';
+import { useMemo, useRef } from 'react';
+export function useDebounce(fn, ms, maxWait) {
+    const funcRef = useRef(null);
+    funcRef.current = fn;
+    return useMemo(() => debounce((...args) => {
+        if (funcRef.current) {
+            funcRef.current(...args);
+        }
+    }, ms, { maxWait }), [ms, maxWait]);
+}

package/lib/main/plugins/CodeHighlightPlugin/index.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.
+ *
+ */
+import { type JSX } from 'react';
+export default function CodeHighlightPlugin(): JSX.Element | null;

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

@@ -0,0 +1,17 @@
+/**
+ * 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 { registerCodeHighlighting } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export default function CodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/CollapsiblePlugin/Collapsible.css

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Collapsible__container {
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  margin-bottom: 8px;
+}
+
+.Collapsible__title {
+  cursor: pointer;
+  padding: 5px 5px 5px 24px;
+  position: relative;
+  font-weight: bold;
+  list-style: none;
+  outline: none;
+}
+
+.Collapsible__title > p {
+  margin: 0;
+}
+
+.Collapsible__title::marker,
+.Collapsible__title::-webkit-details-marker {
+  display: none;
+}
+
+.Collapsible__title:before {
+  border-style: solid;
+  border-color: transparent;
+  border-width: 4px 6px 4px 6px;
+  border-left-color: #000;
+  display: block;
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.Collapsible__container[open] > .Collapsible__title:before {
+  border-color: transparent;
+  border-width: 6px 4px 0 4px;
+  border-top-color: #000;
+}
+
+.Collapsible__container[open] > .Collapsible__content {
+  padding: 0 5px 5px 24px;
+}
+
+.Collapsible__collapsed .Collapsible__content {
+  display: none;
+  user-select: none;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * 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, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';
+type SerializedCollapsibleContainerNode = Spread<{
+    open: boolean;
+}, SerializedElementNode>;
+export declare function $convertDetailsElement(domNode: HTMLDetailsElement): DOMConversionOutput | null;
+export declare class CollapsibleContainerNode extends ElementNode {
+    __open: boolean;
+    constructor(open: boolean, key?: NodeKey);
+    static getType(): string;
+    static clone(node: CollapsibleContainerNode): CollapsibleContainerNode;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: CollapsibleContainerNode, dom: HTMLDetailsElement): boolean;
+    static importDOM(): DOMConversionMap<HTMLDetailsElement> | null;
+    static importJSON(serializedNode: SerializedCollapsibleContainerNode): CollapsibleContainerNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedCollapsibleContainerNode;
+    setOpen(open: boolean): void;
+    getOpen(): boolean;
+    toggleOpen(): void;
+}
+export declare function $createCollapsibleContainerNode(isOpen: boolean): CollapsibleContainerNode;
+export declare function $isCollapsibleContainerNode(node: LexicalNode | null | undefined): node is CollapsibleContainerNode;
+export {};

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

@@ -0,0 +1,120 @@
+/**
+ * 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, isHTMLElement, } from 'lexical';
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
+import { setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertDetailsElement(domNode) {
+    const isOpen = domNode.open !== undefined ? domNode.open : true;
+    const node = $createCollapsibleContainerNode(isOpen);
+    return {
+        node,
+    };
+}
+export class CollapsibleContainerNode extends ElementNode {
+    __open;
+    constructor(open, key) {
+        super(key);
+        this.__open = open;
+    }
+    static getType() {
+        return 'collapsible-container';
+    }
+    static clone(node) {
+        return new CollapsibleContainerNode(node.__open, node.__key);
+    }
+    createDOM(config, editor) {
+        // details is not well supported in Chrome #5582
+        let dom;
+        if (IS_CHROME) {
+            dom = document.createElement('div');
+            if (this.__open) {
+                dom.setAttribute('open', '');
+            }
+        }
+        else {
+            const detailsDom = document.createElement('details');
+            detailsDom.open = this.__open;
+            detailsDom.addEventListener('toggle', () => {
+                const open = editor.getEditorState().read(() => this.getOpen());
+                if (open !== detailsDom.open) {
+                    editor.update(() => this.toggleOpen());
+                }
+            });
+            dom = detailsDom;
+        }
+        dom.classList.add('Collapsible__container');
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        const currentOpen = this.__open;
+        if (prevNode.__open !== currentOpen) {
+            // details is not well supported in Chrome #5582
+            if (IS_CHROME) {
+                const contentDom = dom.children[1];
+                invariant(isHTMLElement(contentDom), 'Expected contentDom to be an HTMLElement');
+                if (currentOpen) {
+                    dom.setAttribute('open', '');
+                    contentDom.hidden = false;
+                }
+                else {
+                    dom.removeAttribute('open');
+                    setDomHiddenUntilFound(contentDom);
+                }
+            }
+            else {
+                dom.open = this.__open;
+            }
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            details: (domNode) => {
+                return {
+                    conversion: $convertDetailsElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        const node = $createCollapsibleContainerNode(serializedNode.open);
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('details');
+        element.classList.add('Collapsible__container');
+        element.setAttribute('open', this.__open.toString());
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            open: this.__open,
+            type: 'collapsible-container',
+            version: 1,
+        };
+    }
+    setOpen(open) {
+        const writable = this.getWritable();
+        writable.__open = open;
+    }
+    getOpen() {
+        return this.getLatest().__open;
+    }
+    toggleOpen() {
+        this.setOpen(!this.getOpen());
+    }
+}
+export function $createCollapsibleContainerNode(isOpen) {
+    return new CollapsibleContainerNode(isOpen);
+}
+export function $isCollapsibleContainerNode(node) {
+    return node instanceof CollapsibleContainerNode;
+}

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContentNode.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, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, SerializedElementNode } from 'lexical';
+type SerializedCollapsibleContentNode = SerializedElementNode;
+export declare function $convertCollapsibleContentElement(domNode: HTMLElement): DOMConversionOutput | null;
+export declare class CollapsibleContentNode extends ElementNode {
+    static getType(): string;
+    static clone(node: CollapsibleContentNode): CollapsibleContentNode;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    updateDOM(prevNode: CollapsibleContentNode, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    static importJSON(serializedNode: SerializedCollapsibleContentNode): CollapsibleContentNode;
+    isShadowRoot(): boolean;
+    exportJSON(): SerializedCollapsibleContentNode;
+}
+export declare function $createCollapsibleContentNode(): CollapsibleContentNode;
+export declare function $isCollapsibleContentNode(node: LexicalNode | null | undefined): node is CollapsibleContentNode;
+export {};