@svadmin/ui 0.21.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "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/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { getContext } from "svelte";
 
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		align?: "start" | "center" | "end";
@@ -13,8 +14,11 @@
 		children,
 		...restProps
 	}: Props = $props();
+
+	let isOpen = $derived(getContext<() => boolean>("svadmin-dropdown-open")?.() ?? true);
 </script>
 
+{#if isOpen}
 <div
 	bind:this={ref}
 	data-slot="dropdown-menu-content"
@@ -28,3 +32,4 @@
 >
 	{@render children?.()}
 </div>
+{/if}

package/src/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -16,6 +16,8 @@
 		...restProps
 	}: Props = $props();
 
+	import { setContext } from "svelte";
+
 	function handleClickOutside(e: MouseEvent) {
 		if (ref && !ref.contains(e.target as Node)) {
 			open = false;
@@ -23,6 +25,8 @@
 		}
 	}
 
+	setContext("svadmin-dropdown-open", () => open);
+
 	$effect(() => {
 		if (open) {
 			document.addEventListener('click', handleClickOutside, true);

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";