@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,185 @@
+/**
+ * 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 { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
+import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
+import { $isParagraphNode, $isTextNode } from 'lexical';
+import { $createImageNode, $isImageNode, ImageNode } from '../../nodes/ImageNode';
+export const HR = {
+    dependencies: [HorizontalRuleNode],
+    export: (node) => {
+        return $isHorizontalRuleNode(node) ? '***' : null;
+    },
+    regExp: /^(---|\*\*\*|___)\s?$/,
+    replace: (parentNode, _1, _2, isImport) => {
+        const line = $createHorizontalRuleNode();
+        // TODO: Get rid of isImport flag
+        if (isImport || parentNode.getNextSibling() != null) {
+            parentNode.replace(line);
+        }
+        else {
+            parentNode.insertBefore(line);
+        }
+        line.selectNext();
+    },
+    type: 'element',
+};
+export const IMAGE = {
+    dependencies: [ImageNode],
+    export: (node) => {
+        if (!$isImageNode(node)) {
+            return null;
+        }
+        return `![${node.getAltText()}](${node.getSrc()})`;
+    },
+    importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
+    regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
+    replace: (textNode, match) => {
+        const [, altText, src] = match;
+        const imageNode = $createImageNode({
+            altText,
+            maxWidth: 800,
+            src,
+        });
+        textNode.replace(imageNode);
+    },
+    trigger: ')',
+    type: 'text-match',
+};
+// Very primitive table setup
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+export const TABLE = {
+    dependencies: [TableNode, TableRowNode, TableCellNode],
+    export: (node) => {
+        if (!$isTableNode(node)) {
+            return null;
+        }
+        const output = [];
+        for (const row of node.getChildren()) {
+            const rowOutput = [];
+            if (!$isTableRowNode(row)) {
+                // eslint-disable-next-line no-continue
+                continue;
+            }
+            let isHeaderRow = false;
+            for (const cell of row.getChildren()) {
+                // It's TableCellNode so it's just to make flow happy
+                if ($isTableCellNode(cell)) {
+                    rowOutput.push($convertToMarkdownString(PLAYGROUND_TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+                    if (cell.__headerState === TableCellHeaderStates.ROW) {
+                        isHeaderRow = true;
+                    }
+                }
+            }
+            output.push(`| ${rowOutput.join(' | ')} |`);
+            if (isHeaderRow) {
+                output.push(`| ${rowOutput.map((_) => '---').join(' | ')} |`);
+            }
+        }
+        return output.join('\n');
+    },
+    regExp: TABLE_ROW_REG_EXP,
+    replace: (parentNode, _1, match) => {
+        // Header row
+        if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
+            const table = parentNode.getPreviousSibling();
+            if (!table || !$isTableNode(table)) {
+                return;
+            }
+            const rows = table.getChildren();
+            const lastRow = rows[rows.length - 1];
+            if (!lastRow || !$isTableRowNode(lastRow)) {
+                return;
+            }
+            // Add header state to row cells
+            lastRow.getChildren().forEach((cell) => {
+                if (!$isTableCellNode(cell)) {
+                    return;
+                }
+                cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+            });
+            // Remove line
+            parentNode.remove();
+            return;
+        }
+        const matchCells = mapToTableCells(match[0]);
+        if (matchCells == null) {
+            return;
+        }
+        const rows = [matchCells];
+        let sibling = parentNode.getPreviousSibling();
+        let maxCells = matchCells.length;
+        while (sibling) {
+            if (!$isParagraphNode(sibling)) {
+                break;
+            }
+            if (sibling.getChildrenSize() !== 1) {
+                break;
+            }
+            const firstChild = sibling.getFirstChild();
+            if (!$isTextNode(firstChild)) {
+                break;
+            }
+            const cells = mapToTableCells(firstChild.getTextContent());
+            if (cells == null) {
+                break;
+            }
+            maxCells = Math.max(maxCells, cells.length);
+            rows.unshift(cells);
+            const previousSibling = sibling.getPreviousSibling();
+            sibling.remove();
+            sibling = previousSibling;
+        }
+        const table = $createTableNode();
+        for (const cells of rows) {
+            const tableRow = $createTableRowNode();
+            table.append(tableRow);
+            for (let i = 0; i < maxCells; i++) {
+                tableRow.append(i < cells.length ? cells[i] : $createTableCell(''));
+            }
+        }
+        const previousSibling = parentNode.getPreviousSibling();
+        if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+            previousSibling.append(...table.getChildren());
+            parentNode.remove();
+        }
+        else {
+            parentNode.replace(table);
+        }
+        table.selectEnd();
+    },
+    type: 'element',
+};
+function getTableColumnsSize(table) {
+    const row = table.getFirstChild();
+    return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+const $createTableCell = (textContent) => {
+    textContent = textContent.replace(/\\n/g, '\n');
+    const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+    $convertFromMarkdownString(textContent, PLAYGROUND_TRANSFORMERS, cell);
+    return cell;
+};
+const mapToTableCells = (textContent) => {
+    const match = textContent.match(TABLE_ROW_REG_EXP);
+    if (!match || !match[1]) {
+        return null;
+    }
+    return match[1].split('|').map((text) => $createTableCell(text));
+};
+export const PLAYGROUND_TRANSFORMERS = [
+    TABLE,
+    HR,
+    IMAGE,
+    CHECK_LIST,
+    ...ELEMENT_TRANSFORMERS,
+    ...MULTILINE_ELEMENT_TRANSFORMERS,
+    ...TEXT_FORMAT_TRANSFORMERS,
+    ...TEXT_MATCH_TRANSFORMERS,
+];

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

@@ -0,0 +1,10 @@
+/**
+ * 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 MaxLengthPlugin({ maxLength }: {
+    maxLength: number;
+}): null;

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $trimTextContentFromAnchor } from '@lexical/selection';
+import { $restoreEditorState } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, RootNode } from 'lexical';
+import { useEffect } from 'react';
+export function MaxLengthPlugin({ maxLength }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        let lastRestoredEditorState = null;
+        return editor.registerNodeTransform(RootNode, (rootNode) => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+                return;
+            }
+            const prevEditorState = editor.getEditorState();
+            const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize());
+            const textContentSize = rootNode.getTextContentSize();
+            if (prevTextContentSize !== textContentSize) {
+                const delCount = textContentSize - maxLength;
+                const { anchor } = selection;
+                if (delCount > 0) {
+                    // Restore the old editor state instead if the last
+                    // text content was already at the limit.
+                    if (prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState) {
+                        lastRestoredEditorState = prevEditorState;
+                        $restoreEditorState(editor, prevEditorState);
+                    }
+                    else {
+                        $trimTextContentFromAnchor(editor, anchor, delCount);
+                    }
+                }
+            }
+        });
+    }, [editor, maxLength]);
+    return null;
+}

package/lib/main/plugins/MentionsPlugin/HighlightStyle.d.ts

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

package/lib/main/plugins/MentionsPlugin/HighlightStyle.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditorConfig } from '../../../config';
+export default function HighlightStyle() {
+    const { userService } = useEditorConfig();
+    const currentUserDid = userService?.getCurrentUserDid?.();
+    if (currentUserDid) {
+        return (_jsx("style", { children: `.mention[data-did="${currentUserDid}"] {
+            color: #222!important;
+            background-color: #fff9cc!important;
+          }` }));
+    }
+    return null;
+}

package/lib/main/plugins/MentionsPlugin/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 NewMentionsPlugin(): JSX.Element | null;

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

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-useless-concat */
+/**
+ * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalTypeaheadMenuPlugin, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { $createTextNode, $insertNodes } from 'lexical';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Box } from '@mui/material';
+import { $createMentionNode } from '../../nodes/MentionNode';
+import { useEditorConfig } from '../../../config';
+import HighlightStyle from './HighlightStyle';
+import sortArrayByKey from '../../../libs/sort-array-by-key';
+import { TypeaheadOption } from '../LexicalTypeaheadMenuPlugin';
+import createPortal from '../../../components/createPortal';
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+const NAME = `\\b[A-Z][^\\s${PUNCTUATION}]`;
+const DocumentMentionsRegex = {
+    NAME,
+    PUNCTUATION,
+};
+const PUNC = DocumentMentionsRegex.PUNCTUATION;
+const TRIGGERS = ['@'].join('');
+// Chars we expect to see in a mention (non-space, non-punctuation).
+const VALID_CHARS = `[^${TRIGGERS}${PUNC}\\s]`;
+// Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+const VALID_JOINS = '(?:' +
+    '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+    ' |' + // E.g. " " in "Josh Duck"
+    `[${PUNC}]|` + // E.g. "-' in "Salier-Hellendag"
+    ')';
+const LENGTH_LIMIT = 75;
+const AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + `[${TRIGGERS}]` + `((?:${VALID_CHARS}${VALID_JOINS}){0,${LENGTH_LIMIT}})` + ')$');
+// 50 is the longest alias length limit.
+const ALIAS_LENGTH_LIMIT = 50;
+// Regex used to match alias.
+const AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + `[${TRIGGERS}]` + `((?:${VALID_CHARS}){0,${ALIAS_LENGTH_LIMIT}})` + ')$');
+// At most, 5 suggestions are shown in the popup.
+const SUGGESTION_LIST_LENGTH_LIMIT = 5;
+const mentionsCache = new Map();
+function useMentionLookupService(mentionString) {
+    const { userService } = useEditorConfig();
+    const [results, setResults] = useState([]);
+    const { current: search } = useRef(debounce(async (_mentionString) => {
+        if (userService) {
+            const searchUsers = await userService.search(_mentionString);
+            const users = sortArrayByKey(searchUsers, _mentionString, 'fullName');
+            if (Array.isArray(users)) {
+                mentionsCache.set(_mentionString, users);
+                setResults(users);
+            }
+        }
+    }, 300));
+    useEffect(() => {
+        const cachedResults = mentionsCache.get(mentionString);
+        if (mentionString == null) {
+            setResults([]);
+            return;
+        }
+        if (cachedResults === null) {
+            return;
+        }
+        if (cachedResults !== undefined) {
+            setResults(cachedResults);
+            return;
+        }
+        mentionsCache.set(mentionString, null);
+        search(mentionString);
+    }, [mentionString]);
+    return results;
+}
+function checkForAtSignMentions(text, minMatchLength) {
+    // 输入 @ 符号立即显示用户列表 (#383)
+    if (/([\s]|^)@$/.test(text)) {
+        return {
+            leadOffset: 1,
+            matchingString: '',
+            replaceableString: '@',
+        };
+    }
+    let match = AtSignMentionsRegex.exec(text);
+    if (match === null) {
+        match = AtSignMentionsRegexAliasRegex.exec(text);
+    }
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[3];
+        if (matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString,
+                replaceableString: match[2],
+            };
+        }
+    }
+    return null;
+}
+function getPossibleQueryMatch(text) {
+    return checkForAtSignMentions(text, 1);
+}
+class MentionTypeaheadOption extends TypeaheadOption {
+    user;
+    constructor(user) {
+        super(user.fullName);
+        this.user = user;
+    }
+}
+function MentionsTypeaheadMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (_jsxs("li", { tabIndex: -1, className: className, style: { display: 'flex', alignItems: 'center', gap: 8 }, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: `typeahead-item-${index}`, onMouseEnter: onMouseEnter, onClick: onClick, children: [option.user.avatar ? (_jsx("div", { className: "mention-typeahead-item-avatar", style: { backgroundImage: `url(${option.user.avatar})` } })) : (_jsx("i", { className: "icon user" })), _jsx("span", { className: "text", children: option.user.fullName })] }, option.key));
+}
+export default function NewMentionsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [queryString, setQueryString] = useState(null);
+    const results = useMentionLookupService(queryString);
+    const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+        minLength: 0,
+    });
+    const options = useMemo(() => results.map((result) => new MentionTypeaheadOption(result)).slice(0, SUGGESTION_LIST_LENGTH_LIMIT), [results]);
+    const onSelectOption = useCallback((selectedOption, nodeToReplace, closeMenu) => {
+        editor.update(() => {
+            const mentionNode = $createMentionNode(selectedOption.user.did, selectedOption.user.fullName);
+            if (nodeToReplace) {
+                nodeToReplace.replace(mentionNode);
+            }
+            mentionNode.select();
+            $insertNodes([$createTextNode(' ')]);
+            closeMenu();
+        });
+    }, [editor]);
+    const checkForMentionMatch = useCallback((text) => {
+        const slashMatch = checkForSlashTriggerMatch(text, editor);
+        if (slashMatch !== null) {
+            return null;
+        }
+        return getPossibleQueryMatch(text);
+    }, [checkForSlashTriggerMatch, editor]);
+    return (_jsxs(_Fragment, { children: [_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+                    return anchorElementRef.current && results.length
+                        ? createPortal(_jsx(Box, { className: "typeahead-popover mentions-menu", sx: {
+                                border: 1,
+                                borderColor: 'divider',
+                                color: 'text.primary',
+                                bgcolor: 'background.default',
+                                'li.selected': {
+                                    bgcolor: 'action.selected',
+                                },
+                                'li:hover': {
+                                    bgcolor: 'action.hover',
+                                },
+                            }, children: _jsx("ul", { children: options.map((option, i) => (_jsx(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                                        setHighlightedIndex(i);
+                                        selectOptionAndCleanUp(option);
+                                    }, onMouseEnter: () => {
+                                        setHighlightedIndex(i);
+                                        // hover option 时显示用户 did
+                                        if (option?.ref?.current) {
+                                            option.ref.current.title = option.user.did;
+                                        }
+                                    }, option: option }, option.key))) }) }), anchorElementRef.current)
+                        : null;
+                } }), _jsx(HighlightStyle, {})] }));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * 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 default function TabFocusPlugin(): null;

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

@@ -0,0 +1,41 @@
+/**
+ * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, $setSelection, FOCUS_COMMAND } from 'lexical';
+import { useEffect } from 'react';
+const COMMAND_PRIORITY_LOW = 1;
+const TAB_TO_FOCUS_INTERVAL = 100;
+let lastTabKeyDownTimestamp = 0;
+let hasRegisteredKeyDownListener = false;
+function registerKeyTimeStampTracker() {
+    window.addEventListener('keydown', (event) => {
+        // Tab
+        if (event.keyCode === 9) {
+            lastTabKeyDownTimestamp = event.timeStamp;
+        }
+    }, true);
+}
+export default function TabFocusPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!hasRegisteredKeyDownListener) {
+            registerKeyTimeStampTracker();
+            hasRegisteredKeyDownListener = true;
+        }
+        return editor.registerCommand(FOCUS_COMMAND, (event) => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                if (lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL > event.timeStamp) {
+                    $setSelection(selection.clone());
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/TableActionMenuPlugin/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 { ReactPortal } from 'react';
+export default function TableActionMenuPlugin({ anchorElem, cellMerge, }: {
+    anchorElem?: HTMLElement;
+    cellMerge?: boolean;
+}): null | ReactPortal;