@skbkontur/markdown 2.7.0-alpha.0 → 2.7.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.3",
   "packageManager": "yarn@4.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -67,7 +67,7 @@
     "@storybook/react": "8.2.8",
     "@storybook/react-vite": "8.2.8",
     "@storybook/test-runner": "0.19.1",
-    "@swc/core": "1.3.50",
+    "@swc/core": "1.15.11",
     "@swc/jest": "0.2.26",
     "@swc/plugin-styled-components": "5.0.0",
     "@types/jest": "29.5.0",
@@ -121,4 +121,4 @@
   "resolutions": {
     "@types/react": "18.0.28"
   }
-}
+}

package/src/Markdown/Markdown.creevey.js

@@ -82,5 +82,41 @@ kind('Markdown', () => {
                 openedEmojiPicker,
             });
         });
+        test('autoContinueNumberedList', async (context) => {
+            const textarea = context.webdriver.locator('textarea').nth(0);
+            await textarea.click();
+            await textarea.type('1. Первый');
+            await textarea.press('Enter');
+            const autoContinueNumberedList = await context.takeScreenshot();
+            await context.matchImages({ autoContinueNumberedList });
+        });
+        test('autoContinueNumberedListWithTail', async (context) => {
+            const textarea = context.webdriver.locator('textarea').nth(0);
+            await textarea.click();
+            await textarea.type('1. Первый');
+            await textarea.press('Enter');
+            await textarea.type('Второй');
+            await textarea.press('Control+Home');
+            await textarea.press('End');
+            await textarea.press('Enter');
+            const autoContinueNumberedListWithTail = await context.takeScreenshot();
+            await context.matchImages({ autoContinueNumberedListWithTail });
+        });
+        test('autoContinueUnorderedList', async (context) => {
+            const textarea = context.webdriver.locator('textarea').nth(0);
+            await textarea.click();
+            await textarea.type('- Первый');
+            await textarea.press('Enter');
+            const autoContinueUnorderedList = await context.takeScreenshot();
+            await context.matchImages({ autoContinueUnorderedList });
+        });
+        test('autoContinueCheckboxList', async (context) => {
+            const textarea = context.webdriver.locator('textarea').nth(0);
+            await textarea.click();
+            await textarea.type('- [ ] Первый');
+            await textarea.press('Enter');
+            const autoContinueCheckboxList = await context.takeScreenshot();
+            await context.matchImages({ autoContinueCheckboxList });
+        });
     });
 });

package/src/Markdown/MarkdownHelpers/markdownHelpers.js

@@ -84,27 +84,24 @@ export const usePasteFromClipboard = (textarea, uploadFileApi, downloadFileApi,
     const { uploadFile } = useFileLogic(uploadFileApi, downloadFileApi, fileApiUrl, textarea);
     const textareaNode = textarea?.node;
     useEffect(() => {
-        if (downloadFileApi && uploadFileApi) {
-            const handlePaste = (event) => {
-                const files = event?.clipboardData?.files;
-                const html = event?.clipboardData
-                    ?.getData('text/html')
-                    ?.replace(`<meta charset='utf-8'>`, '')
-                    ?.replace(`<meta charset="utf-8">`, '');
-                if (files?.length) {
-                    event.preventDefault();
-                    void uploadFile(files[0]);
-                    return;
-                }
-                if (html) {
-                    getPastedHtml(html, event, textareaNode);
-                    return;
-                }
-            };
-            if (textareaNode) {
-                textareaNode.addEventListener('paste', handlePaste);
+        const handlePaste = (event) => {
+            const files = event?.clipboardData?.files;
+            const html = event?.clipboardData
+                ?.getData('text/html')
+                ?.replace(`<meta charset='utf-8'>`, '')
+                ?.replace(`<meta charset="utf-8">`, '');
+            if (downloadFileApi && uploadFileApi && files?.length) {
+                event.preventDefault();
+                void uploadFile(files[0]);
+                return;
             }
-            return () => textareaNode?.removeEventListener('paste', handlePaste);
-        }
+            if (html) {
+                getPastedHtml(html, event, textareaNode);
+                return;
+            }
+        };
+        if (textareaNode)
+            textareaNode.addEventListener('paste', handlePaste);
+        return () => textareaNode?.removeEventListener('paste', handlePaste);
     }, [downloadFileApi, textareaNode, uploadFile, uploadFileApi]);
 };

package/src/Markdown/MarkdownHelpers/markdownListEnterHelpers.js

@@ -1,4 +1,20 @@
 import { onInsertText } from '../utils/onInsertText';
+/**
+ * RegExp для парсинга markdown-like list item.
+ *
+ * Поддерживает:
+ * - unordered lists: "- item", "* item", "+ item";
+ * - ordered lists: "1. item", "1) item";
+ * - checkbox items: "- [ ] item", "- [x] item done", "- [X] item done".
+ *
+ * Группы:
+ * - spacesBeforeMarker: отступы перед маркером списка;
+ * - orderedListNumber: номер ordered-list элемента;
+ * - orderedListDelimiter: разделитель ordered-list: "." или ")";
+ * - unorderedListMarker: маркер unordered-list: "*", "-" или "+";
+ * - checkboxListMarker: checkbox-маркер: "[ ]", "[x]" или "[X]";
+ * - text: текст элемента списка, может быть пустым.
+ */
 const listItemRegExp = /^(?<spacesBeforeMarker> *)(?:(?<orderedListNumber>\d+)(?<orderedListDelimiter>[.)])|(?<unorderedListMarker>[*+-])(?: +(?<checkboxListMarker>\[[ xX]]))?)(?: +(?<text>.*)|$)$/;
 export function handleMarkdownListEnter(event, textareaNode) {
     const { selectionStart, selectionEnd, value } = textareaNode;
@@ -20,12 +36,24 @@ export function handleMarkdownListEnter(event, textareaNode) {
     const { spacesBeforeMarker, orderedListNumber, orderedListDelimiter, unorderedListMarker, checkboxListMarker, text, } = listLineMatch.groups;
     event.stopPropagation();
     event.preventDefault();
+    /* Если пункт списка пустой, удаляем маркер и завершаем список */
     if (!text?.trim()) {
         textareaNode.setSelectionRange(currentLineStartIndex, currentLineEndIndex);
         return document.execCommand('delete');
     }
-    if (orderedListNumber && orderedListDelimiter)
-        return onInsertText(`\n${spacesBeforeMarker}${Number(orderedListNumber) + 1}${orderedListDelimiter} `);
+    if (orderedListNumber && orderedListDelimiter) {
+        const nextOrderedListNumber = Number(orderedListNumber) + 1;
+        const newLine = `\n${spacesBeforeMarker}${nextOrderedListNumber}${orderedListDelimiter} `;
+        const { isChanged, listEndIndex, renumberedList } = getRenumberedListLines(value, currentLineEndIndex, spacesBeforeMarker, orderedListDelimiter, nextOrderedListNumber + 1);
+        if (isChanged) {
+            const currentLineTextAfterCursor = value.slice(selectionStart, currentLineEndIndex);
+            textareaNode.setSelectionRange(selectionStart, listEndIndex);
+            onInsertText(`${newLine}${currentLineTextAfterCursor}${renumberedList}`);
+            const cursorPosition = selectionStart + newLine.length;
+            return textareaNode.setSelectionRange(cursorPosition, cursorPosition);
+        }
+        return onInsertText(newLine);
+    }
     if (checkboxListMarker)
         return onInsertText(`\n${spacesBeforeMarker}${unorderedListMarker} ${checkboxListMarker} `);
     if (unorderedListMarker)
@@ -43,3 +71,32 @@ function getCurrentLineEndIndex(text, cursorPosition) {
         return text.length;
     return currentLineEndIndex;
 }
+function getRenumberedListLines(value, currentLineEndIndex, spacesBeforeMarker, orderedListDelimiter, nextOrderedListNumber) {
+    let nextLineStartIndex = currentLineEndIndex + 1;
+    let currentOrderedListNumber = nextOrderedListNumber;
+    let isChanged = false;
+    let renumberedList = '';
+    let listEndIndex = currentLineEndIndex;
+    while (nextLineStartIndex < value.length) {
+        const nextLineEndIndex = getCurrentLineEndIndex(value, nextLineStartIndex);
+        const line = value.slice(nextLineStartIndex, nextLineEndIndex);
+        const listLineMatch = line.match(listItemRegExp);
+        const groups = listLineMatch?.groups;
+        if (!groups?.orderedListNumber ||
+            groups.spacesBeforeMarker !== spacesBeforeMarker ||
+            groups.orderedListDelimiter !== orderedListDelimiter)
+            break;
+        const renumberedLine = line.replace(`${spacesBeforeMarker}${groups.orderedListNumber}${orderedListDelimiter}`, `${spacesBeforeMarker}${currentOrderedListNumber}${orderedListDelimiter}`);
+        if (renumberedLine !== line)
+            isChanged = true;
+        renumberedList += `\n${renumberedLine}`;
+        listEndIndex = nextLineEndIndex;
+        nextLineStartIndex = nextLineEndIndex + 1;
+        currentOrderedListNumber += 1;
+    }
+    return {
+        isChanged,
+        listEndIndex,
+        renumberedList,
+    };
+}