@kyro-cms/admin 0.9.9 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.9",
+  "version": "0.10.1",
   "engines": {
     "node": ">=22"
   },
@@ -120,7 +120,7 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.9.8",
+    "@kyro-cms/core": "^0.10.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/components/fields/RichTextField.tsx

@@ -521,23 +521,58 @@ export default function RichTextField({
   error,
   disabled,
 }: RichTextFieldProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [panelWidth, setPanelWidth] = useState(0);
-  const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
+  if (!isMounted) {
+    return (
+      <FieldLayout field={field} error={error}>
+        <div
+          className={`border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
+          ${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
+          ${disabled ? "opacity-60 cursor-not-allowed" : ""}`}
+        >
+          <div className="flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]"></div>
+          <div className="overflow-y-auto min-h-[160px] max-h-[400px] p-4"></div>
+        </div>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <RichTextEditor
+      field={field}
+      value={value}
+      onChange={onChange}
+      error={error}
+      disabled={disabled}
+    />
+  );
+}
+
+function RichTextEditor({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: RichTextFieldProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [panelWidth, setPanelWidth] = useState(0);
+  const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
+
   useEffect(() => {
     if (!isExpanded) {
       setPanelWidth(0);
       return;
     }
 
+    const panel = document.querySelector('[data-kyro-slide-panel="true"]');
+
     const updateWidth = () => {
-      const panel = document.querySelector('[data-kyro-slide-panel="true"]');
       if (panel) {
         setPanelWidth(panel.getBoundingClientRect().width);
       } else {
@@ -547,12 +582,10 @@ export default function RichTextField({
 
     updateWidth();
 
-    let observer: ResizeObserver | null = null;
-    const panel = document.querySelector('[data-kyro-slide-panel="true"]');
-    if (panel && typeof ResizeObserver !== "undefined") {
-      observer = new ResizeObserver(() => {
-        updateWidth();
-      });
+    const observer = new MutationObserver(() => {
+      updateWidth();
+    });
+    if (panel) {
       observer.observe(panel);
     }
 
@@ -593,7 +626,7 @@ export default function RichTextField({
       TextStyle,
       Color,
     ],
-    content: value || { type: "doc", content: [] },
+    content: Array.isArray(value) ? { type: "doc", content: value } : (value || { type: "doc", content: [] }),
     editable: !disabled,
     onUpdate: ({ editor }: { editor: any }) => {
       onChange(editor.getJSON());
@@ -608,25 +641,10 @@ export default function RichTextField({
 
   useEffect(() => {
     if (editor && value && JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
-      editor.commands.setContent(value);
+      editor.commands.setContent(Array.isArray(value) ? { type: "doc", content: value } : value);
     }
   }, [value, editor]);
 
-  if (!isMounted) {
-    return (
-      <FieldLayout field={field} error={error}>
-        <div
-          className={`border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
-          ${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
-          ${disabled ? "opacity-60 cursor-not-allowed" : ""}`}
-        >
-          <div className="flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]"></div>
-          <div className="overflow-y-auto min-h-[160px] max-h-[400px] p-4"></div>
-        </div>
-      </FieldLayout>
-    );
-  }
-
   return (
     <FieldLayout field={field} error={error}>
       {isExpanded ? (

package/src/hooks/examples/sample-hook-2.ts

@@ -6,8 +6,6 @@ export default function registerSampleHook2() {
   onAdminReady((ctx: AdminContext) => {
     // Minimal side-effect demonstration
     void ctx;
-    // eslint-disable-next-line no-console
-    console.log("[KyroAdmin] sample-hook-2 ready");
     return { success: true } as HookResult;
   });
 }

package/src/integration.ts

@@ -176,7 +176,6 @@ export function c(size) {
 function debug(namespace) {
   function d(...args) {
     if (typeof localStorage !== "undefined" && localStorage.getItem("DEBUG")) {
-      console.log(namespace, ...args);
     }
   }
   d.enabled = false;
@@ -196,9 +195,26 @@ export default debug;
                 "kyro:config": resolvedConfig,
               },
             },
+            build: {
+              rollupOptions: {
+                output: {
+                  manualChunks(id: string) {
+                    if (id.includes("@tiptap") || id.includes("prosemirror")) {
+                      return "vendor-tiptap";
+                    }
+                  },
+                },
+              },
+            },
             optimizeDeps: {
               include: [
+                '@kyro-cms/admin',
                 'use-sync-external-store',
+                '@tiptap/core', '@tiptap/react', '@tiptap/pm', '@tiptap/starter-kit',
+                '@tiptap/extension-link', '@tiptap/extension-image', '@tiptap/extension-text-align',
+                '@tiptap/extension-underline', '@tiptap/extension-highlight',
+                '@tiptap/extension-task-list', '@tiptap/extension-task-item',
+                '@tiptap/extension-text-style', '@tiptap/extension-color',
               ],
               exclude: ['debug', 'react/compiler-runtime'],
             },
@@ -208,7 +224,17 @@ export default debug;
               __KYRO_ADMIN_CONFIG_FILE__: JSON.stringify(configFile),
             },
             ssr: {
-              noExternal: ['@kyro-cms/admin', '@kyro-cms/core'],
+              noExternal: [
+                '@kyro-cms/admin', '@kyro-cms/core',
+                '@tiptap/core', '@tiptap/react', '@tiptap/pm', '@tiptap/starter-kit',
+                '@tiptap/extension-link', '@tiptap/extension-image', '@tiptap/extension-text-align',
+                '@tiptap/extension-underline', '@tiptap/extension-highlight',
+                '@tiptap/extension-task-list', '@tiptap/extension-task-item',
+                '@tiptap/extension-text-style', '@tiptap/extension-color',
+                'prosemirror-model', 'prosemirror-state', 'prosemirror-view',
+                'prosemirror-schema-list', 'prosemirror-commands', 'prosemirror-keymap',
+                'prosemirror-transform', 'prosemirror-inputrules',
+              ],
             },
           },
         });

package/src/plugins/examples/sample-plugin-2.ts

@@ -10,7 +10,6 @@ const samplePlugin2: KyroPlugin = {
     beforeDeploy: (ctx) => {
       // Lightweight side-effect; in real plugins, you could validate config, migrations, etc.
       void ctx;
-      console.log("[Kyro Admin] sample-plugin-2 beforeDeploy");
       return { success: true };
     },
   },

package/src/plugins/examples/sample-plugin.ts

@@ -9,8 +9,6 @@ const samplePlugin: KyroPlugin = {
   hooks: {
     onAdminReady: () => {
       // Lightweight side-effect; in real plugins this could mount UI or register editors
-      // eslint-disable-next-line no-console
-      console.log("[ Kyro Admin ] sample-plugin: onAdminReady executed");
       return;
     },
   },