@widgetic/editor 4.0.1 → 4.0.2

package/dist/components/ic/TextAreaInputController.svelte

@@ -69,7 +69,8 @@
     onChange,
     config = {},
     description = undefined,
-    onFocus = () => {}
+    onFocus = () => {},
+    onClose = undefined
   } = $props<{
     class: string;
     label: string;
@@ -78,6 +79,7 @@
     config?: InputControllerConfig;
     description?: string;
     onFocus?: () => void;
+    onClose?: () => void;
   }>();
 
   // Use config values with fallbacks
@@ -320,14 +322,15 @@
 
   function handleEditorUpdate(e: any) {
     if (!editorInstance) return;
-    
-    const newContent = e.detail.html;
-    if (newContent !== value) {
-      content.set(newContent);
-      onChange(newContent);
-      updateActiveFormats();
-      currentTextStyle = getCurrentTextStyle();
-    }
+
+    // bind:content on ShadEditor already assigned `value` before this event,
+    // so comparing to `value` skipped onChange and the compact preview never updated.
+    const newContent = e.detail?.html ?? editorInstance.getHTML?.() ?? '';
+    lastKnownContent = newContent;
+    content.set(newContent);
+    onChange?.(newContent);
+    updateActiveFormats();
+    currentTextStyle = getCurrentTextStyle();
   }
 
   /**
@@ -1079,7 +1082,7 @@
     <!-- Toolbar at the top -->
     <div 
       bind:this={toolbarRef}
-      class="toolbar-container sticky top-0 left-0 right-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-hidden select-none"
+      class="toolbar-container sticky top-0 left-0 right-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
       on:mousedown={handleToolbarInteraction}
       on:click={handleToolbarInteraction}
       on:keydown={handleToolbarKeyDown}
@@ -1087,18 +1090,17 @@
       aria-label="Text formatting toolbar"
       tabindex="-1"
     >
-      <div class="flex items-center flex-1 relative h-8">
-        <!-- Normal toolbar items -->
-        <div class={`toolbar-items-container flex items-center flex-1 absolute inset-0 transition-transform duration-&lsqb;${TRANSITION_DURATION}ms&rsqb; ease-out ${
+      <div class="toolbar-items-row relative flex items-center h-full w-full">
+        <!-- Format cluster centered; close stays on the right -->
+        <div class={`toolbar-items-container absolute inset-y-0 left-0 right-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
           isColorPickerAnimating ? 'translate-y-[-200%]' : 
           showColorPicker ? 'translate-y-[-200%]' : 
           'translate-y-0'
         }`}>
-          <!-- Color Picker Preview Button -->
           <Button 
             variant="outline"
-            size="sm"
-            class="color-picker-preview-button toolbar-button h-9 w-9 p-0 relative overflow-hidden mr-2"
+            size="icon"
+            class="color-picker-preview-button toolbar-button !h-8 !w-8 !min-w-8 !p-0 shrink-0"
             onclick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -1120,7 +1122,7 @@
             type="multiple" 
             size="sm"
             variant="outline"
-            class="text-formatting-toggle-group inline-flex h-8"
+            class="text-formatting-toggle-group inline-flex h-8 gap-2"
             value={toggleValues}
             onValueChange={(value) => {
               if (!editorInstance) return;
@@ -1128,16 +1130,16 @@
               handleToggleChange(value);
             }}
           >
-            {#each Object.entries(formatMapping) as [format, { value, icon: Icon }]}
+            {#each Object.entries(formatMapping) as [format, { value, icon: Icon }] (format)}
               <ToggleGroup.Item 
                 {value}
                 aria-label={`Toggle ${format}`}
                 data-state={activeFormats[format as FormatType] ? 'on' : 'off'}
-                class="toolbar-button {activeFormats[format as FormatType] ? 'bg-muted' : ''} {format !== 'link' ? 'mr-2' : ''}"
+                class="toolbar-button shrink-0 !h-8 !w-8 !min-w-8 !p-0 {activeFormats[format as FormatType] ? 'bg-muted' : ''}"
               >
                 <div class="toolbar-button-content flex h-full w-full items-center justify-center">
                   <Icon 
-                    class="!text-grey5 hover:!text-grey7"
+                    class="text-current"
                     style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
                   />
                 </div>
@@ -1146,7 +1148,7 @@
           </ToggleGroup.Root>
 
           <!-- Text Style Dropdown -->
-          <div class="pl-2">
+          <div class="toolbar-text-style-ct inline-flex items-center shrink-0">
             <Popover.Root
               bind:open={textStyleDropdownOpen}
               onOpenChange={(e: any) => {
@@ -1159,8 +1161,8 @@
                   bind:this={triggerButton}
                   id="text-style-trigger"
                   variant="outline"
-                  size="sm"
-                  class="toolbar-button h-8 w-[54px] justify-between"
+                  size="icon"
+                  class="toolbar-button toolbar-dropdown-trigger !h-8 !w-11 !min-w-11 !max-w-11 !p-0 justify-center"
                   onclick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -1172,13 +1174,13 @@
                     textStyleDropdownOpen = !textStyleDropdownOpen;
                   }}
                 >
-                  <div class="toolbar-button-content flex h-full w-full items-center justify-between px-2">
+                  <div class="toolbar-button-content flex h-full w-full items-center justify-center gap-0.5 px-1">
                     {#if currentTextStyle === 'text'}
-                      <IconPilcrow class="h-4 w-4" />
+                      <IconPilcrow class="h-3.5 w-3.5 shrink-0" />
                     {:else}
-                      <span>{textOptions.find(opt => opt.value === currentTextStyle)?.label || 'Text'}</span>
+                      <span class="text-xs">{textOptions.find(opt => opt.value === currentTextStyle)?.label || 'Text'}</span>
                     {/if}
-                    <ChevronDown class="h-4 w-4" />
+                    <ChevronDown class="h-3 w-3 shrink-0" />
                   </div>
                 </Button>
               </Popover.Trigger>
@@ -1220,7 +1222,7 @@
           </div>
 
           <!-- List Style Dropdown -->
-          <div class="pl-2">
+          <div class="toolbar-list-style-ct inline-flex items-center shrink-0">
             <Popover.Root
               bind:open={listStyleDropdownOpen}
               onOpenChange={(e: any) => {
@@ -1231,8 +1233,9 @@
               <Popover.Trigger>
                 <Button
                   variant="outline"
-                  size="sm"
-                  class="toolbar-button h-8 w-[54px] justify-between"
+                  size="icon"
+                  id="list-style-trigger"
+                  class="toolbar-button toolbar-dropdown-trigger !h-8 !w-11 !min-w-11 !max-w-11 !p-0 justify-center"
                   onclick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -1241,16 +1244,16 @@
                     listStyleDropdownOpen = !listStyleDropdownOpen;
                   }}
                 >
-                  <div class="toolbar-button-content flex h-full w-full items-center justify-between px-2">
+                  <div class="toolbar-button-content flex h-full w-full items-center justify-center gap-0.5 px-1">
                     {#if currentTextStyle && currentTextStyle.includes('List')}
                       {@const activeListOption = listOptions.find(opt => opt.value === currentTextStyle)}
                       {#if activeListOption?.icon}
-                        <activeListOption.icon class="h-4 w-4" />
+                        <activeListOption.icon class="h-3.5 w-3.5 shrink-0" />
                       {/if}
                     {:else}
-                      <IconList class="h-4 w-4" />
+                      <IconList class="h-3.5 w-3.5 shrink-0" />
                     {/if}
-                    <ChevronDown class="h-4 w-4" />
+                    <ChevronDown class="h-3 w-3 shrink-0" />
                   </div>
                 </Button>
               </Popover.Trigger>
@@ -1288,17 +1291,30 @@
           </div>
         </div>
 
-        <!-- Color picker panel -->
-        <div class={`color-picker-parent flex items-center gap-2 absolute inset-0 transition-transform duration-&lsqb;${TRANSITION_DURATION}ms&rsqb; ease-out ${
+        {#if onClose && !showColorPicker && !isColorPickerAnimating}
+          <Button
+            variant="ghost"
+            class="toolbar-close-button ml-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 mr-2 z-10"
+            onclick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClose();
+            }}
+          >
+            <X class="h-6 w-6 text-grey5 hover:text-grey7" />
+          </Button>
+        {/if}
+
+        {#if showColorPicker || isColorPickerAnimating}
+        <div class={`color-picker-parent flex items-center gap-2 absolute inset-0 z-20 bg-grey1 px-3 transition-transform duration-200 ease-out ${
           isColorPickerAnimating ? 'translate-y-0' : 
           showColorPicker ? 'translate-y-0' : 
           'translate-y-[200%]'
         }`}>
-          <!-- Close Button First -->
           <Button 
             variant="outline"
-            size="sm"
-            class="color-picker-close-button toolbar-button h-9 w-9 p-0 ml-4"
+            size="icon"
+            class="color-picker-close-button toolbar-button !h-8 !w-8 !p-0 shrink-0"
             onclick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -1312,8 +1328,7 @@
             </div>
           </Button>
 
-          <!-- Color Picker Container -->
-          <div class="flex-1">
+          <div class="color-picker-toolbar-slot relative w-[185px] shrink-0 overflow-visible">
             <ColorPickerInputController
               bind:value={currentColor}
               onChange={(color) => {
@@ -1346,11 +1361,12 @@
             />
           </div>
         </div>
+        {/if}
       </div>
     </div>
 
     <!-- Scrollable content area -->
-    <div class="editor-content-area h-[calc(100%-56px)] overflow-auto">
+    <div class="editor-content-area min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
       <ShadEditor
         bind:content={value}
         showToolbar={false}
@@ -1369,17 +1385,18 @@
 <style>
 
   /* Update editor styles */
-  :global(.ProseMirror) {
+  :global(.text-area-input-controller .ProseMirror) {
     outline: none !important;
     width: 100%;
-    height: calc(100% - 56px);
+    min-height: 100%;
+    height: auto;
     padding: var(--editor-padding-top, 0.35rem) var(--editor-padding-right, 0.35rem) 
              var(--editor-padding-bottom, 0.35rem) var(--editor-padding-left, 0.35rem);
     background: transparent !important;
     border: none !important;
     border-radius: inherit;
-    overflow-y: auto;
-    margin-top: 56px;
+    overflow: visible;
+    margin-top: 0;
     scrollbar-width: thin;
     scrollbar-color: transparent transparent;
   }
@@ -1493,6 +1510,14 @@
   }
 
   /* Toolbar styles - Consolidated */
+  :global(.toolbar-container button:focus),
+  :global(.toolbar-container button:focus-visible),
+  :global(.toolbar-container a:focus),
+  :global(.toolbar-container a:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
   :global(.toolbar-button) {
     position: relative !important;
     border: 1px solid hsl(var(--border)) !important;
@@ -1517,6 +1542,47 @@
     z-index: 2 !important;
   }
 
+  :global(.toolbar-text-style-ct),
+  :global(.toolbar-list-style-ct) {
+    width: 44px;
+    min-width: 44px;
+    max-width: 44px;
+    flex-shrink: 0;
+  }
+
+  :global(.text-formatting-toggle-group button),
+  :global(.color-picker-preview-button) {
+    width: 2rem !important;
+    min-width: 2rem !important;
+    max-width: 2rem !important;
+    height: 2rem !important;
+    padding: 0 !important;
+  }
+
+  :global(.toolbar-text-style-ct button),
+  :global(.toolbar-list-style-ct button),
+  :global(.toolbar-dropdown-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    height: 2rem !important;
+    padding: 0 !important;
+  }
+
+  :global(.text-area-input-controller .editor-content-area) {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3) / 0.5) transparent;
+  }
+
+  :global(.text-area-input-controller .editor-content-area::-webkit-scrollbar) {
+    width: 6px;
+  }
+
+  :global(.text-area-input-controller .editor-content-area::-webkit-scrollbar-thumb) {
+    background: hsl(var(--grey3) / 0.45);
+    border-radius: 999px;
+  }
+
   /* Input styles */
   :global(input.h-8),
   :global(.input-container) {
@@ -1671,8 +1737,11 @@
   }
 
   :global(.text-area .toolbar-container button) {
-    width: 36px !important;
-    height: 36px !important;
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    max-width: 32px !important;
+    padding: 0 !important;
     background-color: white !important;
     border: 1px solid hsl(var(--grey2)) !important;
     border-radius: var(--radius) !important;
@@ -1682,6 +1751,29 @@
     transition: all 0.2s !important;
   }
 
+  :global(.text-area .toolbar-container button.toolbar-dropdown-trigger),
+  :global(.text-area .toolbar-container #text-style-trigger),
+  :global(.text-area .toolbar-container #list-style-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    padding: 0 !important;
+  }
+
+  :global(.text-area .toolbar-container .toolbar-items-container) {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: 100% !important;
+    position: absolute !important;
+    inset: 0 2.5rem 0 0 !important;
+  }
+
+  :global(.text-area #text-style-trigger) {
+    margin-right: 0 !important;
+  }
+
   /* Color the brush icon based on selected color */
   :global(.text-area .color-picker-preview-button svg) {
     color: var(--selected-color, currentColor) !important;
@@ -1692,14 +1784,14 @@
   }
   /* Button spacing */
   :global(.text-area .color-picker-preview-button) {
-    margin-left: 16px !important;
-    margin-right: 8px !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 
   :global(.text-area .text-formatting-toggle-group) {
-    margin-right: 8px !important;
+    margin-right: 0 !important;
     display: flex !important;
-    gap: 0 !important;
+    gap: 8px !important;
   }
 
   :global(.text-area .text-formatting-toggle-group button) {
@@ -1707,11 +1799,14 @@
   }
 
   :global(.text-area .text-formatting-toggle-group button:not(:last-child)) {
-    margin-right: 8px !important;
+    margin-right: 0 !important;
   }
 
-  :global(.text-area #text-style-trigger) {
-    width: 54px !important;
+  :global(.text-area #text-style-trigger),
+  :global(.text-area #list-style-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
   }
 
   :global(.text-area .toolbar-container button:hover) {
@@ -1733,14 +1828,21 @@
     color: hsl(var(--grey7)) !important;
   }
 
-  /* Style for active state */
   :global(.text-area .toolbar-container button[data-state="on"]) {
     background-color: hsl(var(--sage-green)) !important;
-    border-color: hsl(var(--grey1)) !important;
+    border-color: hsl(var(--sage-green)) !important;
+    color: white !important;
   }
 
-  :global(.text-area .toolbar-container button[data-state="on"] svg) {
+  :global(.text-area .toolbar-container button[data-state="on"] svg),
+  :global(.text-area .toolbar-container button[data-state="on"] svg *) {
     color: white !important;
+    stroke: white !important;
+  }
+
+  :global(.text-area .toolbar-text-style-ct),
+  :global(.text-area .toolbar-list-style-ct) {
+    margin-left: 0 !important;
   }
 
   /* Update the color picker button to show selected color */
@@ -1771,21 +1873,47 @@
     cursor: text;
   }
 
-  /* Add width for list style dropdown button */
-  :global(.text-area .toolbar-button.h-8) {
-    width: 54px !important;
+  :global(.text-area .toolbar-button.h-8:not(.toolbar-dropdown-trigger):not(#text-style-trigger):not(#list-style-trigger)) {
+    width: 32px !important;
+  }
+
+  :global(.text-area .toolbar-text-style-ct),
+  :global(.text-area .toolbar-list-style-ct) {
+    display: inline-flex !important;
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
   }
 
   /* Update color picker container styles */
   :global(.color-picker-parent) {
     position: absolute;
     inset: 0;
-    padding: 0;
+    padding: 0 12px;
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     gap: 8px;
   }
 
+  /* ColorPicker uses absolute right-0 for the Design column; in the toolbar that
+     pins the 185px input to the far right and the popover flush to the edge. */
+  :global(.color-picker-toolbar-slot .input-controller-ct) {
+    position: relative !important;
+    right: auto !important;
+    left: auto !important;
+  }
+
+  :global(.color-picker-toolbar-slot .input-controller-header-ct) {
+    display: none !important;
+  }
+
+  :global(.color-picker-toolbar-slot .color-picker-input-controller-ct > .flex) {
+    display: block !important;
+  }
+
   :global(.color-picker-parent input[type="text"]) {
     width: 162px !important;
     min-width: 162px !important;

package/dist/components/ic/TextAreaInputController.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     config?: InputControllerConfig;
     description?: string;
     onFocus?: () => void;
+    onClose?: () => void;
 };
 declare const TextAreaInputController: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextAreaInputController = ReturnType<typeof TextAreaInputController>;