@svadmin/ui 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/FieldRenderer.svelte

@@ -18,6 +18,7 @@
   import ArrayField from './fields/ArrayField.svelte';
   import { Plus, X } from 'lucide-svelte';
   import type { Snippet } from 'svelte';
+  import { getRichTextEditor } from '../editor-config.svelte.js';
 
   let { field, value, onchange, children } = $props<{
     field: FieldDefinition;
@@ -164,25 +165,16 @@
     />
 
   {:else if field.type === 'richtext'}
-    {#await import('@svadmin/editor')}
-      <Textarea
-        id={field.key}
-        value={strVal}
-        oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
-        required={field.required}
-        rows={10}
-        placeholder={t('field.enterValue', { label: field.label })}
-        class="resize-y"
-      />
-    {:then editorMod}
-      <editorMod.Editor
+    {@const EditorComp = getRichTextEditor()}
+    {#if EditorComp}
+      <EditorComp
         id={field.key}
         value={strVal}
         placeholder={t('field.enterValue', { label: field.label })}
         preset="full"
         onchange={(html: string) => onchange(html)}
       />
-    {:catch}
+    {:else}
       <Textarea
         id={field.key}
         value={strVal}
@@ -192,7 +184,7 @@
         placeholder={t('field.enterValue', { label: field.label })}
         class="resize-y"
       />
-    {/await}
+    {/if}
 
   {:else if field.type === 'textarea'}
     <Textarea

package/src/editor-config.svelte.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+
+let registeredEditor: Component<any> | undefined = $state(undefined);
+
+/**
+ * Register a global Rich Text Editor component.
+ * This decouples @svadmin/ui from @svadmin/editor, making the editor completely optional.
+ * 
+ * Usage:
+ * ```ts
+ * import { Editor } from '@svadmin/editor';
+ * import { setRichTextEditor } from '@svadmin/ui';
+ * 
+ * setRichTextEditor(Editor);
+ * ```
+ */
+export function setRichTextEditor(editorComponent: Component<any>): void {
+  registeredEditor = editorComponent;
+}
+
+export function getRichTextEditor(): Component<any> | undefined {
+  return registeredEditor;
+}

package/src/index.ts

@@ -61,6 +61,11 @@ export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
+
+// Editor Registry
+export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js";
+
+// Settings & Preferences
 export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
 export { default as AboutSettings } from "./components/AboutSettings.svelte";
 export { default as PermissionMatrix } from "./components/PermissionMatrix.svelte";