@rimori/react-client 0.4.9-next.3 → 0.4.9-next.4

package/dist/components/editor/MarkdownEditor.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
@@ -42,12 +42,11 @@ const EditorButton = ({ editor, action, isActive, label, disabled, title }) => {
                 .toggleHeading({ level: level })
                 .run(), className: baseClass, children: label }));
     }
-    // ChainedCommands is not index-typed; cast to call dynamic action names while keeping `.run()`
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const chain = editor.chain().focus();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const canChain = editor.can().chain().focus();
-    return (_jsx("button", { type: "button", title: title, onClick: () => chain[action]().run(), disabled: disabled ? !canChain[action]().run() : false, className: baseClass, children: label }));
+    return (_jsx("button", { type: "button", title: title, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onClick: () => editor.chain().focus()[action]().run(), 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        disabled: disabled ? !editor.can().chain()[action]().run() : false, className: baseClass, children: label }));
 };
 const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
     const [value, setValue] = useState('');
@@ -160,34 +159,24 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             return null;
         return data.url;
     }), [storage]);
-    const extensions = [
-        StarterKit.configure({
-            bulletList: {
-                HTMLAttributes: {
-                    class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-                },
-            },
-            orderedList: {
-                HTMLAttributes: {
-                    className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-                },
-            },
-        }),
+    const extensions = useMemo(() => [
+        StarterKit,
         Table.configure({ resizable: false }),
         TableRow,
         TableHeader,
         TableCell,
-        Link.configure({ protocols: ['mailto'], defaultProtocol: 'https' }),
+        Link.configure({ defaultProtocol: 'https' }),
         Youtube,
         Markdown,
         ImageUploadExtension(stableUpload),
-    ];
+    ], [stableUpload]);
     const editor = useEditor({
         extensions,
         content,
         editable,
+        autofocus: false,
         editorProps: {
-            attributes: { class: 'outline-none min-h-[200px] p-3' },
+            attributes: { class: (editable ? 'p-3 min-h-[200px] ' : '') + 'outline-none' },
         },
         onUpdate: ({ editor: ed }) => {
             const markdown = getMarkdown(ed);

package/dist/style.css

@@ -8,7 +8,7 @@ dialog::backdrop {
 
 /* Tiptap editor content styles */
 .tiptap {
-  @apply focus:outline-none min-h-[200px];
+  @apply focus:outline-none;
 }
 .tiptap h1 {
   @apply text-4xl font-bold mt-6 mb-3 first:mt-0;
@@ -19,9 +19,6 @@ dialog::backdrop {
 .tiptap h3 {
   @apply text-2xl font-semibold mt-4 mb-2 first:mt-0;
 }
-.tiptap p {
-  @apply mb-2 leading-relaxed;
-}
 .tiptap blockquote {
   @apply border-l-4 border-primary/30 pl-4 py-1 my-3 text-muted-foreground italic;
 }
@@ -50,7 +47,7 @@ dialog::backdrop {
   @apply mb-1;
 }
 .tiptap ul {
-  @apply list-disc pl-4 m-0;
+  @apply list-disc list-inside dark:text-white pl-3 [&_p]:inline m-0;
 }
 .tiptap ul p {
   @apply m-0;

package/dist/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAxCJ;AA2CE;;AACA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAxEN;AA4EE;;AACA;EACE;;AAEA;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAIJ;AACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AApCJ;AAuCE;;AACA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AApEN;AAwEE;;AACA;EACE;;AAEA;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAIJ;AACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA","file":"style.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.9-next.3",
+  "version": "0.4.9-next.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/editor/MarkdownEditor.tsx

@@ -1,4 +1,4 @@
-import { JSX, useCallback, useEffect, useRef, useState } from 'react';
+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';
@@ -72,18 +72,14 @@ const EditorButton = ({ editor, action, isActive, label, disabled, title }: Edit
     );
   }
 
-  // ChainedCommands is not index-typed; cast to call dynamic action names while keeping `.run()`
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const chain = editor.chain().focus() as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const canChain = editor.can().chain().focus() as any;
-
   return (
     <button
       type="button"
       title={title}
-      onClick={() => (chain[action]() as { run: () => void }).run()}
-      disabled={disabled ? !(canChain[action]() as { run: () => boolean }).run() : false}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onClick={() => (editor.chain().focus() as any)[action]().run()}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      disabled={disabled ? !(editor.can().chain() as any)[action]().run() : false}
       className={baseClass}
     >
       {label}
@@ -561,35 +557,28 @@ export const MarkdownEditor = ({
     [storage],
   );
 
-  const extensions = [
-    StarterKit.configure({
-      bulletList: {
-        HTMLAttributes: {
-          class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-        },
-      },
-      orderedList: {
-        HTMLAttributes: {
-          className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-        },
-      },
-    }),
-    Table.configure({ resizable: false }),
-    TableRow,
-    TableHeader,
-    TableCell,
-    Link.configure({ protocols: ['mailto'], defaultProtocol: 'https' }),
-    Youtube,
-    Markdown,
-    ImageUploadExtension(stableUpload),
-  ];
+  const extensions = useMemo(
+    () => [
+      StarterKit,
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Link.configure({ defaultProtocol: 'https' }),
+      Youtube,
+      Markdown,
+      ImageUploadExtension(stableUpload),
+    ],
+    [stableUpload],
+  );
 
   const editor = useEditor({
     extensions,
     content,
     editable,
+    autofocus: false,
     editorProps: {
-      attributes: { class: 'outline-none min-h-[200px] p-3' },
+      attributes: { class: (editable ? 'p-3 min-h-[200px] ' : '') + 'outline-none' },
     },
     onUpdate: ({ editor: ed }) => {
       const markdown = getMarkdown(ed);

package/src/style.scss

@@ -9,7 +9,7 @@ dialog::backdrop {
 
 /* Tiptap editor content styles */
 .tiptap {
-  @apply focus:outline-none min-h-[200px];
+  @apply focus:outline-none;
 
   h1 {
     @apply text-4xl font-bold mt-6 mb-3 first:mt-0;
@@ -23,10 +23,6 @@ dialog::backdrop {
     @apply text-2xl font-semibold mt-4 mb-2 first:mt-0;
   }
 
-  p {
-    @apply mb-2 leading-relaxed;
-  }
-
   blockquote {
     @apply border-l-4 border-primary/30 pl-4 py-1 my-3 text-muted-foreground italic;
   }
@@ -61,7 +57,7 @@ dialog::backdrop {
   }
 
   ul {
-    @apply list-disc pl-4 m-0;
+    @apply list-disc list-inside dark:text-white pl-3 [&_p]:inline m-0;
 
     p {
       @apply m-0;