@widgetic/editor 4.0.8 → 4.0.9

package/dist/components/ic/FontInputController.svelte

@@ -250,9 +250,24 @@
   // Add a variable to store the debounced search function
   let debouncedSearch: (event: Event) => void;
 
+  let fontPickerReadyAt = 0;
+
+  function ensureFontPickerPortal() {
+    if (!browser) return;
+    const portalId = 'widgetic-font-picker-portal';
+    if (document.getElementById(portalId)) return;
+    const host = document.createElement('div');
+    host.id = portalId;
+    host.style.position = 'relative';
+    host.style.zIndex = '100000000';
+    document.body.appendChild(host);
+  }
+
   onMount(async () => {
     try {
       if (browser) {
+        fontPickerReadyAt = Date.now() + 400;
+        ensureFontPickerPortal();
         const coerced = coerceFontValue(value);
         if (coerced?.weight) {
           selectedWeight = `${controllerId}-${coerced.weight}`;
@@ -1721,37 +1736,31 @@
           <Popover.Root 
             open={$openDropdowns?.has(controllerId)}
             onOpenChange={(isOpen) => {
-              if (isOpen !== $openDropdowns?.has(controllerId)) {
-                if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
-                  fontUtils.addRecentFont({
-                    family: resolvedFont.family,
-                    category: normalizeCategory(resolvedFont.category) as FontItem['category'],
-                    isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
-                  });
-                } else if (isOpen) {
-                  activeSearchIndex = -1;
-                  void tick().then(() => {
-                    updateFamilyPopoverBox();
-                    requestAnimationFrame(updateFamilyPopoverBox);
-                  });
-                  
-                  // When opening, ensure we have fonts ready
-                  if (filteredFonts.length === 0 && allFonts.length > 0) {
-                    // If we have allFonts but no filtered fonts, update them
-                    updateFilteredFonts();
-                  }
-                  
-                  // Use a small timeout to ensure the DOM has updated before setting up the observer
-                  // This prevents the initial delay when opening the popover
-                  setTimeout(() => {
-                    if (fontListContainer) {
-                      setupFontObserver();
-                    }
-                  }, 50);
-                  
-                  toggleDropdown(controllerId);
+              if (isOpen && Date.now() < fontPickerReadyAt) return;
+              const wasOpen = !!$openDropdowns?.has(controllerId);
+              if (isOpen === wasOpen) return;
+              if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
+                fontUtils.addRecentFont({
+                  family: resolvedFont.family,
+                  category: normalizeCategory(resolvedFont.category) as FontItem['category'],
+                  isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
+                });
+              } else if (isOpen) {
+                activeSearchIndex = -1;
+                void tick().then(() => {
+                  updateFamilyPopoverBox();
+                  requestAnimationFrame(updateFamilyPopoverBox);
+                });
+                if (filteredFonts.length === 0 && allFonts.length > 0) {
+                  updateFilteredFonts();
                 }
+                setTimeout(() => {
+                  if (fontListContainer) {
+                    setupFontObserver();
+                  }
+                }, 50);
               }
+              toggleDropdown(controllerId);
             }}
           >
             <Popover.Trigger tabindex={-1} class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
@@ -1776,6 +1785,7 @@
               collisionPadding={12}
               side={familyPopoverSide}
               sideOffset={4}
+              portalProps={{ to: '#widgetic-font-picker-portal' }}
               class="font-input-popover !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2"
               style={familyPopoverStyle}
             >
@@ -1969,6 +1979,7 @@
           <Popover.Root 
             open={$openDropdowns?.has('weight-' + controllerId)}
             onOpenChange={(isOpen) => {
+              if (isOpen && Date.now() < fontPickerReadyAt) return;
               if (isOpen !== $openDropdowns?.has('weight-' + controllerId)) {
                 toggleDropdown('weight-' + controllerId);
               }
@@ -1980,7 +1991,7 @@
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
-            <Popover.Content class="p-0 w-[150px]">
+            <Popover.Content class="font-input-popover p-0 w-[150px]" portalProps={{ to: '#widgetic-font-picker-portal' }}>
               <Command.Root>
                 <Command.List>
                   <Command.Group>
@@ -2091,7 +2102,7 @@
 
   /* Clamp to the viewport so the Fonts header and list stay on screen */
   :global(.font-input-popover) {
-    z-index: 50;
+    z-index: 100000000 !important;
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export type { ContentSchemaItemView, ContentSchemaPropertyView, ContentSchemaView, DesignSchemaComponentView, DesignSchemaGroupView, DesignSchemaPropertyView, DesignSchemaView, } from './schemaViews.js';
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
+export { default as FontInputController } from './components/ic/FontInputController.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';

package/dist/index.js

@@ -2,6 +2,7 @@
 // EDITORS
 // Props Editor
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
+export { default as FontInputController } from './components/ic/FontInputController.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.8",
+	"version": "4.0.9",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",