@widgetic/editor 4.0.1 → 4.0.2

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  // Import Shadcn UI components from Widgetic design-system package
-  import { Button, Portal } from '@widgetic/design-system/components';
-  import { IconArrowsDiagonal, IconArrowsMaximize, IconX, IconBrush, IconBold, IconItalic, IconUnderline, IconLink } from '@widgetic/design-system/icons';
+  import { Portal } from '@widgetic/design-system/components';
+  import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
   import { onMount, onDestroy } from 'svelte';
   
-  // Local components
-  import { InputControllerHeader, TextAreaInputController } from './index';
+  import { TextAreaInputController } from './index';
   import type { InputControllerConfig } from './index';
 
   /**
@@ -50,8 +48,15 @@
   function createPreviewText(text: string) {
     if (!text) return '';
 
+    let html = text;
+    if (!html.includes('<') && html.includes('&lt;')) {
+      const decoded = document.createElement('textarea');
+      decoded.innerHTML = html;
+      html = decoded.value;
+    }
+
     const parser = new DOMParser();
-    const doc = parser.parseFromString(text, 'text/html');
+    const doc = parser.parseFromString(html, 'text/html');
 
     function processNode(node: Node): string {
       if (node.nodeType === Node.TEXT_NODE) {
@@ -60,59 +65,59 @@
 
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node as Element;
-        const tag = element.tagName.toLowerCase();
+        let tag = element.tagName.toLowerCase();
         const attributes: Record<string, string> = {};
+        const children = Array.from(node.childNodes)
+          .map(child => processNode(child))
+          .join('');
+
+        // Flatten block wrappers so marks render inside the compact clamp box
+        if (tag === 'p' || tag === 'div' || tag === 'br') {
+          return tag === 'br' ? ' ' : `${children} `;
+        }
 
-        // Preserve all style attributes
         const style = element.getAttribute('style');
         if (style) {
-          // Extract color value from style
           const colorMatch = style.match(/color:\s*([^;]+)/);
           if (colorMatch) {
-            const color = colorMatch[1];
-            // Set the color as a CSS variable
-            attributes.style = `--color: ${color}; ${style}`;
+            attributes.style = `--color: ${colorMatch[1]}; ${style}`;
           } else {
             attributes.style = style;
           }
         }
 
-        // Preserve data-text-style attribute
         const textStyle = element.getAttribute('data-text-style');
         if (textStyle) {
           attributes['data-text-style'] = textStyle;
-          // Add preserve-color class
           attributes.class = (attributes.class || '') + ' preserve-color';
         }
 
-        // Preserve heading classes
         if (tag.match(/^h[1-4]$/)) {
+          tag = 'span';
           attributes.class = (attributes.class || '') + ' tiptap-heading';
         }
 
-        // Build start tag with attributes
         let startTag = `<${tag}`;
-        for (const [key, value] of Object.entries(attributes)) {
-          startTag += ` ${key}="${value.trim()}"`;
+        for (const [key, attrValue] of Object.entries(attributes)) {
+          startTag += ` ${key}="${attrValue.trim()}"`;
         }
         startTag += '>';
 
-        // Process child nodes
-        const children = Array.from(node.childNodes)
-          .map(child => processNode(child))
-          .join('');
-
         return `${startTag}${children}</${tag}>`;
       }
 
       return '';
     }
 
-    const processedNodes = Array.from(doc.body.childNodes)
+    return Array.from(doc.body.childNodes)
       .map(node => processNode(node))
-      .join('');
+      .join('')
+      .trim();
+  }
 
-    return processedNodes;
+  function handleFullEditorChange(html: string) {
+    value = html;
+    if (typeof onChange === 'function') onChange(html);
   }
 
   function handleClick() {
@@ -139,6 +144,10 @@
     }
   }
 
+  $: if (value) {
+    console.log('[TextAreaPreview] compact preview html', value.slice(0, 180));
+  }
+
   function handlePortalMouseEnter() {
     // console.log('Portal mouse entered');
     isPortalHovered = true;
@@ -211,42 +220,31 @@
   }
 </script>
 
-<div class="text-area-preview-input-controller flex items-center justify-between w-full widgetic-colors">
-  <div class="header-container flex-1 min-w-0">
-    <InputControllerHeader {label} />
-  </div>
-  
+<div class="text-area-preview-input-controller w-full min-w-0 overflow-hidden widgetic-colors">
   <div 
-    class="text-area-preview-main-container w-[185px] flex-shrink-0"
+    class="text-area-preview-main-container w-full min-w-0 overflow-hidden"
   >
     <div 
-      class="h-[92px] w-full border border-grey2 flex items-start bg-grey1 transition-colors duration-200 hover:border-forest-green cursor-pointer group overflow-hidden"
+      class="textarea-ic-preview-box relative h-[92px] w-full min-w-0 border border-grey2 bg-grey1 transition-colors duration-200 hover:border-forest-green cursor-pointer group overflow-hidden"
       style="border-radius: var(--radius-large);"
       on:click={handleClick}
       on:keydown={(e) => e.key === 'Enter' && handleClick()}
       role="button"
       tabindex="0"
     >
-      <div class="relative w-full h-full">
+      <div class="textarea-ic-preview-copy min-w-0 overflow-hidden pr-10 pt-[13px] pb-4 pl-4">
         <div 
-          class="absolute top-0 left-0 w-full h-full flex flex-col" 
+          class="textarea-ic-preview-html break-words text-grey7 text-sm leading-5" 
+          class:text-grey3={isShowingPlaceholder}
         >
-          <div class="flex-1" style="padding: 13px 48px 16px 16px;">
-            <div 
-              class="subtext line-clamp-3 break-words text-ellipsis prose-sm w-[129px] text-grey7" 
-              class:text-grey3={isShowingPlaceholder}
-              style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;"
-            >
-              {@html previewText}
-            </div>
-          </div>
-          <div class="absolute top-[14px] right-[12px]">
-            <IconArrowsDiagonal 
-              class="w-5 h-5 text-grey5 group-hover:text-grey7 transition-colors duration-200" 
-            />
-          </div>
+          {@html previewText}
         </div>
       </div>
+      <div class="textarea-ic-expand-icon absolute top-[14px] right-[12px]">
+        <IconArrowsDiagonal 
+          class="w-5 h-5 text-grey5 group-hover:text-grey7 transition-colors duration-200" 
+        />
+      </div>
     </div>
   </div>
 
@@ -280,24 +278,14 @@
         style="border-radius: var(--radius-large);"
       ></div>
 
-      <Button 
-        variant="ghost"
-        class="absolute z-[999] p-0 hover:bg-transparent h-[32px] w-[32px] top-[10px] right-[10px]"
-        onclick={handleClose}
-      >
-        <IconX 
-          class="w-[24px] h-[24px] text-grey5 hover:text-grey7 transition-colors duration-200" 
-          style="min-width: 24px; min-height: 24px;"
-        />
-      </Button>
-
       <TextAreaInputController
         class="text-area w-full h-full transition-colors duration-200 {isPortalHovered ? 'border-solid !border-forest-green' : ''}"
         label={label}
-        value={value}
-        onChange={onChange}
+        bind:value
+        onChange={handleFullEditorChange}
         config={config}
         description={description}
+        onClose={handleClose}
       />
     </div>
   </Portal>
@@ -318,7 +306,7 @@
 
 
   /* Heading styles matching tiptap editor */
-  :global(.subtext h1.tiptap-heading) {
+  :global(.textarea-ic-preview-html h1.tiptap-heading) {
     font-size: 2em !important;
     font-weight: 600 !important;
     line-height: 1.2 !important;
@@ -327,7 +315,7 @@
     color: inherit !important;
   }
 
-  :global(.subtext h2.tiptap-heading) {
+  :global(.textarea-ic-preview-html  h2.tiptap-heading) {
     font-size: 1.5em !important;
     font-weight: 600 !important;
     line-height: 1.3 !important;
@@ -336,7 +324,7 @@
     color: inherit !important;
   }
 
-  :global(.subtext h3.tiptap-heading) {
+  :global(.textarea-ic-preview-html  h3.tiptap-heading) {
     font-size: 1.17em !important;
     font-weight: 600 !important;
     line-height: 1.3 !important;
@@ -345,7 +333,7 @@
     color: inherit !important;
   }
 
-  :global(.subtext h4.tiptap-heading) {
+  :global(.textarea-ic-preview-html  h4.tiptap-heading) {
     font-size: 1em !important;
     font-weight: 600 !important;
     line-height: 1.4 !important;
@@ -354,36 +342,50 @@
     color: inherit !important;
   }
 
+  :global(.textarea-ic-preview-html) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+  }
+
   /* Color preservation */
-  :global(.subtext [style*="color"]) {
+  :global(.textarea-ic-preview-html  [style*="color"]) {
     color: var(--color) !important;
   }
 
-  /* Text formatting */
-  :global(.subtext strong),
-  :global(.subtext em),
-  :global(.subtext u) {
-    color: inherit !important;
+  /* Text formatting — {@html} children need :global; include b/i as well as strong/em/u */
+  :global(.textarea-ic-preview-html :is(strong, b, [style*="font-weight"])) {
+    font-weight: 700 !important;
+  }
+
+  :global(.textarea-ic-preview-html :is(em, i)) {
+    font-style: italic !important;
+  }
+
+  :global(.textarea-ic-preview-html :is(u, [style*="text-decoration: underline"])) {
+    text-decoration: underline !important;
   }
 
-  :global(.subtext strong[style*="color"]),
-  :global(.subtext em[style*="color"]),
-  :global(.subtext u[style*="color"]) {
+  :global(.textarea-ic-preview-html  strong[style*="color"]),
+  :global(.textarea-ic-preview-html  em[style*="color"]),
+  :global(.textarea-ic-preview-html  u[style*="color"]) {
     color: var(--color) !important;
   }
 
   /* Add specific color inheritance for data-text-style */
-  :global(.subtext [data-text-style*="color"]) {
+  :global(.textarea-ic-preview-html  [data-text-style*="color"]) {
     color: var(--color) !important;
   }
 
   /* Ensure all text elements can inherit colors */
-  :global(.subtext *) {
+  :global(.textarea-ic-preview-html  *) {
     color: inherit;
   }
 
   /* Ensure paragraphs have no margins */
-  :global(.subtext p) {
+  :global(.textarea-ic-preview-html  p) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }

package/dist/config.d.ts

@@ -1,5 +1,11 @@
 interface Config {
     GOOGLE_FONTS_API_KEY: string;
 }
+export declare function setGoogleFontsApiKey(key: string): void;
+/**
+ * Google Fonts Web Fonts API key.
+ * Order: runtime setter → PUBLIC_GOOGLE_FONTS_API_KEY → VITE_GOOGLE_FONTS_API_KEY.
+ */
+export declare function getGoogleFontsKey(): string;
 export declare const config: Config;
 export {};

package/dist/config.js

@@ -1,19 +1,31 @@
+/**
+ * Set by the consuming app (widget-creator / site) so the published
+ * `@widgetic/editor` package never bakes a key into dist at pack time.
+ * Vite still inlines PUBLIC_/VITE_ keys when the consumer bundles this source.
+ */
+let runtimeGoogleFontsApiKey = '';
+export function setGoogleFontsApiKey(key) {
+    runtimeGoogleFontsApiKey = String(key || '').trim();
+}
 /**
  * Google Fonts Web Fonts API key.
- * Set in consuming app .env as PUBLIC_GOOGLE_FONTS_API_KEY or VITE_GOOGLE_FONTS_API_KEY.
- * Avoids $env/static/public import so the library works when embedded in site/creator.
+ * Order: runtime setter → PUBLIC_GOOGLE_FONTS_API_KEY → VITE_GOOGLE_FONTS_API_KEY.
  */
-function getGoogleFontsKey() {
+export function getGoogleFontsKey() {
+    if (runtimeGoogleFontsApiKey)
+        return runtimeGoogleFontsApiKey;
     if (typeof import.meta !== 'undefined' && import.meta.env) {
-        const fromVite = import.meta.env.VITE_GOOGLE_FONTS_API_KEY;
-        if (fromVite && String(fromVite).trim())
-            return String(fromVite).trim();
         const fromPublicMeta = import.meta.env.PUBLIC_GOOGLE_FONTS_API_KEY;
         if (fromPublicMeta && String(fromPublicMeta).trim())
             return String(fromPublicMeta).trim();
+        const fromVite = import.meta.env.VITE_GOOGLE_FONTS_API_KEY;
+        if (fromVite && String(fromVite).trim())
+            return String(fromVite).trim();
     }
     return '';
 }
 export const config = {
-    GOOGLE_FONTS_API_KEY: getGoogleFontsKey(),
+    get GOOGLE_FONTS_API_KEY() {
+        return getGoogleFontsKey();
+    },
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
+export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';

package/dist/index.js

@@ -4,5 +4,6 @@
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
+export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 // Embed Editor
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';

package/dist/utils/FontManager.d.ts

@@ -70,6 +70,8 @@ declare class FontManager {
     private static forbiddenApiKeyWarned;
     private static badRequestApiKeyWarned;
     private catalogFetchPromise;
+    /** Popular Google families shown when the Web Fonts API key is missing or blocked. */
+    private static getFallbackCatalog;
     private hasGoogleFontsApiKey;
     private warnMissingApiKey;
     private warnForbiddenApiKey;

package/dist/utils/FontManager.js

@@ -112,6 +112,25 @@ class FontManager {
     static forbiddenApiKeyWarned = false;
     static badRequestApiKeyWarned = false;
     catalogFetchPromise = null;
+    /** Popular Google families shown when the Web Fonts API key is missing or blocked. */
+    static getFallbackCatalog() {
+        const sans = ['Inter', 'Roboto', 'Open Sans', 'Poppins', 'Lato', 'Montserrat', 'Nunito', 'Source Sans 3', 'Work Sans', 'DM Sans'];
+        const serif = ['Playfair Display', 'Merriweather', 'Libre Baskerville', 'Lora', 'Cormorant Garamond'];
+        const script = ['Dancing Script', 'Pacifico', 'Great Vibes'];
+        const other = ['Oswald', 'Raleway', 'Space Grotesk'];
+        const pack = (families, category) => families.map((family) => ({
+            family,
+            category,
+            isCustom: false,
+            variants: ['regular', '500', '600', '700'],
+        }));
+        return [
+            ...pack(sans, 'Sans Serif'),
+            ...pack(serif, 'Serif'),
+            ...pack(script, 'Script'),
+            ...pack(other, 'Other'),
+        ];
+    }
     hasGoogleFontsApiKey() {
         return Boolean(this.apiKey?.trim());
     }
@@ -621,7 +640,7 @@ class FontManager {
             // Add custom fonts from fonts.json
             const customFonts = await this.loadCustomFonts();
             const catalog = await this.fetchGoogleFontsCatalog();
-            const googleFonts = catalog || [];
+            const googleFonts = (catalog && catalog.length > 0) ? catalog : FontManager.getFallbackCatalog();
             // Combine all fonts. A full Google catalog means the list is already
             // complete; otherwise keep the 'initial' stage so a later fetch can
             // still upgrade it.
@@ -638,7 +657,7 @@ class FontManager {
         }
         catch (error) {
             console.error('Error getting initial fonts:', error);
-            return [];
+            return FontManager.getFallbackCatalog();
         }
     }
     /**

package/package.json

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