@rimori/react-client 0.4.10 → 0.4.11-next.1

package/dist/components/editor/MarkdownEditor.js

@@ -12,6 +12,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
+import { Paragraph } from '@tiptap/extension-paragraph';
 import Table from '@tiptap/extension-table';
 import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
@@ -26,6 +27,28 @@ import { AiOutlineUnorderedList } from 'react-icons/ai';
 import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
+// Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
+// Standard markdown collapses consecutive blank lines, losing empty paragraph nodes.
+// Since tiptap-markdown enables html:true by default, <p></p> survives the round-trip.
+const ParagraphPreserveEmpty = Paragraph.extend({
+    addStorage() {
+        return {
+            markdown: {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                serialize(state, node) {
+                    if (node.childCount === 0) {
+                        state.write('<p></p>');
+                    }
+                    else {
+                        state.renderInline(node);
+                    }
+                    state.closeBlock(node);
+                },
+                parse: {},
+            },
+        };
+    },
+});
 function getMarkdown(editor) {
     return editor.storage.markdown.getMarkdown();
 }
@@ -160,7 +183,8 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         return data.url;
     }), [storage]);
     const extensions = useMemo(() => [
-        StarterKit,
+        StarterKit.configure({ paragraph: false }),
+        ParagraphPreserveEmpty,
         Table.configure({ resizable: false }),
         TableRow,
         TableHeader,
@@ -184,7 +208,8 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
         },
     });
-    // Sync external content changes (e.g. AI autofill) without triggering update loop
+    // Sync external content changes (e.g. AI autofill) without triggering update loop.
+    // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
     useEffect(() => {
         if (!editor)
             return;
@@ -192,7 +217,7 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         if (incoming === lastEmittedRef.current)
             return;
         lastEmittedRef.current = incoming;
-        editor.commands.setContent(incoming);
+        editor.commands.setContent(incoming, false);
     }, [editor, content]);
     // Sync editable prop
     useEffect(() => {

package/dist/style.css

@@ -47,7 +47,7 @@ dialog::backdrop {
   @apply mb-1;
 }
 .tiptap ul {
-  @apply list-disc list-inside dark:text-white pl-3 [&_p]:inline m-0;
+  @apply list-disc list-outside dark:text-white pl-6 m-0 [&_p]:inline;
 }
 .tiptap ul p {
   @apply m-0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.10",
+  "version": "0.4.11-next.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.18",
+    "@rimori/client": "2.5.19-next.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -32,6 +32,7 @@
     "@tiptap/core": "^2.26.1",
     "@tiptap/extension-image": "^2.26.1",
     "@tiptap/extension-link": "^2.26.1",
+    "@tiptap/extension-paragraph": "^2.26.1",
     "@tiptap/extension-table": "^2.26.1",
     "@tiptap/extension-table-cell": "^2.26.1",
     "@tiptap/extension-table-header": "^2.26.1",
@@ -46,7 +47,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.18",
+    "@rimori/client": "2.5.19-next.5",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/editor/MarkdownEditor.tsx

@@ -2,6 +2,7 @@ import { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
+import { Paragraph } from '@tiptap/extension-paragraph';
 import Table from '@tiptap/extension-table';
 import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
@@ -28,6 +29,28 @@ import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
 
+// Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
+// Standard markdown collapses consecutive blank lines, losing empty paragraph nodes.
+// Since tiptap-markdown enables html:true by default, <p></p> survives the round-trip.
+const ParagraphPreserveEmpty = Paragraph.extend({
+  addStorage() {
+    return {
+      markdown: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        serialize(state: any, node: any) {
+          if (node.childCount === 0) {
+            state.write('<p></p>');
+          } else {
+            state.renderInline(node);
+          }
+          state.closeBlock(node);
+        },
+        parse: {},
+      },
+    };
+  },
+});
+
 function getMarkdown(editor: Editor): string {
   return (editor.storage as { markdown: { getMarkdown: () => string } }).markdown.getMarkdown();
 }
@@ -559,7 +582,8 @@ export const MarkdownEditor = ({
 
   const extensions = useMemo(
     () => [
-      StarterKit,
+      StarterKit.configure({ paragraph: false }),
+      ParagraphPreserveEmpty,
       Table.configure({ resizable: false }),
       TableRow,
       TableHeader,
@@ -587,13 +611,14 @@ export const MarkdownEditor = ({
     },
   });
 
-  // Sync external content changes (e.g. AI autofill) without triggering update loop
+  // Sync external content changes (e.g. AI autofill) without triggering update loop.
+  // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
   useEffect(() => {
     if (!editor) return;
     const incoming = content ?? '';
     if (incoming === lastEmittedRef.current) return;
     lastEmittedRef.current = incoming;
-    editor.commands.setContent(incoming);
+    editor.commands.setContent(incoming, false);
   }, [editor, content]);
 
   // Sync editable prop

package/src/style.scss

@@ -57,7 +57,7 @@ dialog::backdrop {
   }
 
   ul {
-    @apply list-disc list-inside dark:text-white pl-3 [&_p]:inline m-0;
+    @apply list-disc list-outside dark:text-white pl-6 m-0 [&_p]:inline;
 
     p {
       @apply m-0;

package/tsconfig.json

@@ -14,5 +14,6 @@
   },
   "include": [
     "src/**/*"
-  ]
+  ],
+  "exclude": ["node_modules", "dist", "build"]
 }