@blocklet/editor 2.2.37 → 2.2.39

package/lib/ext/PasteMarkdownPlugin/CustomTransformers.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 { ElementTransformer, Transformer } from '@lexical/markdown';
+export declare const HR: ElementTransformer;
+export declare const TABLE: ElementTransformer;
+export declare const CUSTOM_TRANSFORMERS: Array<Transformer>;

package/lib/ext/PasteMarkdownPlugin/CustomTransformers.js

@@ -0,0 +1,161 @@
+/**
+ * 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, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, 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';
+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',
+};
+// 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(CUSTOM_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);
+            });
+            // 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, CUSTOM_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 CUSTOM_TRANSFORMERS = [
+    ...TRANSFORMERS,
+    TABLE,
+    HR,
+    CHECK_LIST,
+    ...ELEMENT_TRANSFORMERS,
+    ...TEXT_FORMAT_TRANSFORMERS,
+    ...TEXT_MATCH_TRANSFORMERS,
+];

package/lib/ext/PasteMarkdownPlugin/index.js

@@ -1,9 +1,11 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { COMMAND_PRIORITY_CRITICAL, PASTE_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode, } from 'lexical';
 import { useEffect } from 'react';
-import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
+import { $convertFromMarkdownString } from '@lexical/markdown';
 import isEmpty from 'lodash/isEmpty';
 import { lexer } from 'marked';
+import { isValidUrl } from '../utils';
+import { CUSTOM_TRANSFORMERS } from './CustomTransformers';
 function isHtml(str) {
     const doc = new DOMParser().parseFromString(str, 'text/html');
     return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
@@ -18,6 +20,9 @@ export function isMarkdownText(text) {
     if (isHtml(text)) {
         return false;
     }
+    if (isValidUrl(text)) {
+        return false;
+    }
     function containsNonTextTokens(tokens) {
         return tokens.some((token) => {
             if (token.type !== 'text' && token.type !== 'paragraph') {
@@ -32,13 +37,22 @@ export function isMarkdownText(text) {
     const tokens = lexer(text);
     return containsNonTextTokens(tokens);
 }
+function getMarkdownText(e) {
+    const markdownText = e.clipboardData?.types
+        .map((type) => {
+        const data = e.clipboardData?.getData(type);
+        return data;
+    })
+        .find((data) => data && isMarkdownText(data));
+    return markdownText;
+}
 export default function PasteMarkdownPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         const unregister = editor.registerCommand(PASTE_COMMAND, (e) => {
             if (e instanceof ClipboardEvent) {
-                const markdownText = e.clipboardData?.getData('text/html') || e.clipboardData?.getData('text/plain');
-                if (markdownText && isMarkdownText(markdownText)) {
+                const markdownText = getMarkdownText(e);
+                if (markdownText) {
                     editor.update(() => {
                         // 获取当前选区
                         const selection = $getSelection();
@@ -74,7 +88,7 @@ export default function PasteMarkdownPlugin() {
                             selection.insertNodes([containerNode]);
                         }
                         // 将Markdown内容转换并插入到D区域中
-                        $convertFromMarkdownString(markdownText, TRANSFORMERS, containerNode);
+                        $convertFromMarkdownString(markdownText, CUSTOM_TRANSFORMERS, containerNode);
                     });
                     return true;
                 }

package/lib/ext/PasteMarkdownPlugin/index.spec.js

@@ -23,4 +23,7 @@ describe('isMarkdownText', () => {
     it('should return false if text is not valid Markdown', () => {
         expect(isMarkdownText('{ not: markdown }')).toBe(false);
     });
+    it('should return false if text is valid url', () => {
+        expect(isMarkdownText('https://team.arcblock.io/comment/discussions/a51d0ae6-22d9-48b6-93e8-72628e08ff24/#f8b75cae-cdcc-4bcb-b9c0-fde32218b55a')).toBe(false);
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.2.37",
+  "version": "2.2.39",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -62,13 +62,14 @@
     "markerjs2": "^2.32.2",
     "medium-zoom": "^1.1.0",
     "path-parser": "^6.1.0",
+    "split-pane-react": "^0.1.3",
     "react-player": "^2.16.0",
     "react-popper": "^2.3.0",
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
     "marked": "^15.0.8",
-    "@blocklet/pdf": "^2.2.37"
+    "@blocklet/pdf": "^2.2.39"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",