@widgetic/editor 4.0.9 → 4.0.11

package/dist/components/ic/PositionInputController.svelte

@@ -35,6 +35,9 @@
 
   // Component config
   import type { InputControllerConfig } from './index';
+
+  // The cursor of a drag is shown on the module's element, not on the body of the customer's page
+  import { lockPointerStyle } from '../../utils/shadowDom';
   
   /**
    * Core state and configuration props
@@ -58,6 +61,8 @@
   let joystickHandle: HTMLDivElement;
   let isDragging = false;
   let isHovering = false;
+  // Puts back the cursor the page had before the drag (does nothing when no drag is going on)
+  let releasePointerStyle: () => void = () => {};
 
   /**
    * Reactive position state
@@ -125,8 +130,9 @@
     updatePosition(event.clientX, event.clientY);
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = 'grabbing';
-    document.body.classList.add('position-dragging');
+    // A second press before the first one was let go must not leave the first lock behind
+    releasePointerStyle();
+    releasePointerStyle = lockPointerStyle(joystickContainer, 'grabbing');
   }
 
   function handleMouseMove(event: MouseEvent) {
@@ -139,9 +145,7 @@
     onDragStateChange(false);
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = '';
-    document.body.classList.remove('position-dragging');
-    document.body.style.userSelect = '';
+    releasePointerStyle();
   }
 
   /**
@@ -177,13 +181,12 @@
   });
 
   onDestroy(() => {
-    document.body.classList.remove('position-dragging');
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
+    // Only undoes what this drag did (it used to clear the cursor and the text selection of the whole page)
+    releasePointerStyle();
   });
 </script>
 
-<div class="position-input-controller widgetic-colors">
+<div class="position-input-controller widgetic-colors" class:position-input-controller-dragging={isDragging}>
   <!-- Joystick UI -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div 
@@ -228,8 +231,8 @@
 </div>
 
 <style>
-  /* Make the selector more specific by targeting only elements within position-input-controller */
-  :global(body.position-dragging .position-input-controller *) {
+  /* While dragging, everything inside the controller shows the grabbing cursor (this used to be a class on the page's body) */
+  .position-input-controller-dragging :global(*) {
     cursor: grabbing !important;
     user-select: none !important;
     -webkit-user-select: none !important;

package/dist/components/ic/RangeCalendarInputController.svelte

@@ -46,6 +46,7 @@
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
+  import { listenForScroll } from '../../utils/shadowDom';
 
   // Shadcn UI Components
   import { Button, RangeCalendar } from '@widgetic/design-system/components';
@@ -177,19 +178,24 @@
     closeDropdown();
   }
 
-  // Setup scroll event listener on mount
+  // The control's own element, which says which tree (the page or a module's shadow root) to listen for scrolling in
+  let controllerElement: HTMLDivElement | undefined;
+  let stopListeningForScroll: () => void = () => {};
+
+  // Setup scroll event listener on mount (the page and, inside a module, the module's own panels: a scroll never
+  // leaves a shadow root, so a listener on the window alone does not hear about those)
   onMount(() => {
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   // Cleanup scroll event listener on destroy
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 </script>
 
 <!-- Range Calendar Container -->
-<div class="flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <InputControllerHeader {label} helpText={helpText} />

package/dist/components/ic/RoundedCornersInputController.svelte

@@ -28,6 +28,7 @@
   import Lock from '../icons/locked.svelte';
   import Unlock from '../icons/unlocked.svelte';
   import type { InputControllerConfig } from './index';
+  import { activeElementIn } from '../../utils/shadowDom';
 
   // Constants
   const MIN_RADIUS = 0;
@@ -63,19 +64,22 @@
     
     if (isLocked) {
       // When locked, update all corners to the same value
-      onChange({
+      value = {
         topLeft: newValue,
         topRight: newValue,
         bottomRight: newValue,
         bottomLeft: newValue
-      });
+      };
     } else {
       // When unlocked, update only the specified corner
-      onChange({
+      value = {
         ...value,
         [corner]: newValue
-      });
+      };
     }
+    // The fields show the change at once, in every corner it reached: the parent hands the value back only when it
+    // builds this control again, and until then the corners that were changed together kept showing the old number
+    onChange(value);
   }
 
   // Handler for input changes
@@ -167,9 +171,12 @@
     
     // Reset focused corner if we're not focusing another input immediately
     setTimeout(() => {
-      if (!document.activeElement || 
-          !(document.activeElement instanceof HTMLInputElement) || 
-          !Object.values(inputRefs).includes(document.activeElement)) {
+      // The focused element of the tree this control is in: inside a module `document.activeElement` is the module's
+      // host element, which is never one of the corners
+      const focusedElement = activeElementIn(input);
+      if (!focusedElement || 
+          !(focusedElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(focusedElement)) {
         focusedCorner = null;
       }
     }, 0);
@@ -182,12 +189,13 @@
     // If locking, normalize all values to the first focused corner or top-left
     if (isLocked && focusedCorner) {
       const referenceValue = value[focusedCorner];
-      onChange({
+      value = {
         topLeft: referenceValue,
         topRight: referenceValue,
         bottomRight: referenceValue,
         bottomLeft: referenceValue
-      });
+      };
+      onChange(value);
     }
   }
 

package/dist/components/ic/TextAreaInputController.svelte

@@ -71,6 +71,9 @@
   // Add local ColorPickerInputController import
   import ColorPickerInputController from './ColorPickerInputController.svelte';
 
+  // Looking things up and listening for scrolling in the tree the editor is in (a module has a shadow root)
+  import { isEventInside, listenForScroll, queryAllInTreeOf, queryInTreeOf } from '../../utils/shadowDom';
+
   // Add this constant for the decoration type
   const TRANSITION_DURATION = 250;
 
@@ -533,7 +536,9 @@
       });
       
       updateActiveFormats();
+      // Choosing from either menu (text style or list style) closes it: the list style menu used to stay open.
       textStyleDropdownOpen = false;
+      listStyleDropdownOpen = false;
     } catch (error) {
       console.error('Error changing text style:', error);
     }
@@ -843,8 +848,11 @@
     if (isDestroyed) return;
     const handleClickOutside = (event: MouseEvent) => {
       if (isDestroyed) return;
-      const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
-      const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
+      // Looked for in the tree this editor is in (inside a module, `document` has none of the editor's elements and may
+      // have a popover of the customer's page), and checked with the event's path (the target the document sees is the
+      // module's host)
+      const colorSelectModals = queryAllInTreeOf(toolbarRef, '[data-radix-popper-content-wrapper]');
+      const isClickingColorSelect = colorSelectModals.some((colorSelectModal) => isEventInside(event, colorSelectModal));
       
       // Don't do anything if clicking within the color select modal
       if (isClickingColorSelect) {
@@ -941,9 +949,11 @@
   function handleEditorBlur(relatedTarget: Node | null) {
     if (!editorInstance) return;
     
-    const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
-    const popoverContent = document.querySelector('[role="dialog"]');
-    const commandMenu = document.querySelector('[cmdk-root]');
+    // Looked for in the tree the editor is in: `document` does not see inside a module's shadow root, and may have a
+    // dialog of the customer's page
+    const colorSelectModal = queryInTreeOf(toolbarRef, '[data-radix-popper-content-wrapper]');
+    const popoverContent = queryInTreeOf(toolbarRef, '[role="dialog"]');
+    const commandMenu = queryInTreeOf(toolbarRef, '[cmdk-root]');
     
     const isClickingInside = toolbarRef?.contains(relatedTarget) || 
                             editorInstance.view.dom.contains(relatedTarget as Node) ||
@@ -1030,12 +1040,15 @@
   }
 
   // Add to lifecycle management
+  // (listens to the page and, inside a module, to the module's own panels too: a scroll never leaves a shadow root)
+  let stopListeningForScroll: () => void = () => {};
+
   onMount(() => {
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(toolbarRef, handleScroll);
   });
 
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   // Add cleanup function

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -19,6 +19,8 @@
   import { onMount, onDestroy } from 'svelte';
   
   import { TextAreaInputController } from './index';
+  import { createPreviewHtml } from '../../utils/richTextPreview';
+  import { escapeHtml } from '../../utils/htmlSafety';
 
   /**
    * Component props
@@ -42,7 +44,7 @@
   $: isShowingPlaceholder = !value && placeholder;
 
   // Create a preview version of the text that preserves formatting
-  $: previewText = value ? createPreviewText(value) : placeholder;
+  $: previewText = value ? createPreviewText(value) : escapeHtml(placeholder);
 
   // Add this to track the current color
   let currentColor = '#1a1a1a'; // Default color
@@ -53,6 +55,10 @@
   // Add this to store the background rect ref
   let backgroundRectRef: HTMLDivElement;
 
+  // The box the text editor is shown in. The editor is found through it: a search of the whole `document` finds nothing
+  // inside a module's shadow root, and finds the customer's own text editor (and focuses it) when the page has one.
+  let portalContentRef: HTMLDivElement | undefined;
+
   // Add these near the top with other state declarations
   let isClosing = false;
 
@@ -60,73 +66,16 @@
    * Methods
    */
   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(html, 'text/html');
-
-    function processNode(node: Node): string {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent || '';
-      }
-
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const element = node as Element;
-        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} `;
-        }
-
-        const style = element.getAttribute('style');
-        if (style) {
-          const colorMatch = style.match(/color:\s*([^;]+)/);
-          if (colorMatch) {
-            attributes.style = `--color: ${colorMatch[1]}; ${style}`;
-          } else {
-            attributes.style = style;
-          }
-        }
-
-        const textStyle = element.getAttribute('data-text-style');
-        if (textStyle) {
-          attributes['data-text-style'] = textStyle;
-          attributes.class = (attributes.class || '') + ' preserve-color';
-        }
-
-        if (tag.match(/^h[1-4]$/)) {
-          tag = 'span';
-          attributes.class = (attributes.class || '') + ' tiptap-heading';
-        }
-
-        let startTag = `<${tag}`;
-        for (const [key, attrValue] of Object.entries(attributes)) {
-          startTag += ` ${key}="${attrValue.trim()}"`;
-        }
-        startTag += '>';
-
-        return `${startTag}${children}</${tag}>`;
-      }
-
-      return '';
+    // The text is rich text somebody typed or pasted, and this editor can run inside a customer's page: the preview is
+    // not a copy of that HTML. It is built by a renderer that escapes every text and keeps only the tags and styles on
+    // its lists (see richTextPreview.ts). Block wrappers (p, div, br) are flattened there, so marks render inside the
+    // compact clamp box.
+    try {
+      return createPreviewHtml(text);
+    } catch (error) {
+      console.error('[TextAreaPreview] Could not build the preview of the text:', error);
+      return escapeHtml(text);
     }
-
-    return Array.from(doc.body.childNodes)
-      .map(node => processNode(node))
-      .join('')
-      .trim();
   }
 
   function handleFullEditorChange(html: string) {
@@ -141,7 +90,7 @@
 
   $: if (isShowingTextArea) {
     setTimeout(() => {
-      const editor = document.querySelector('.ProseMirror');
+      const editor = portalContentRef?.querySelector('.ProseMirror');
       if (editor instanceof HTMLElement) {
         editor.focus();
       }
@@ -213,7 +162,7 @@
     isClosing = true;
 
     // Add animation end handler
-    const content = document.querySelector('.text-area-portal-content') as HTMLDivElement;
+    const content = portalContentRef;
     const overlay = content?.previousElementSibling as HTMLDivElement;
 
     const handleAnimationEnd = () => {
@@ -280,6 +229,7 @@
     ></div>
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div 
+      bind:this={portalContentRef}
       class="text-area-portal-content absolute mt-4 mx-6 mb-6 inset-0 {isClosing ? 'scale-out-animation' : 'scale-in-animation'}"
       style="z-index: 51; transform: translateZ(0); backface-visibility: hidden;"
       on:mouseenter={handlePortalMouseEnter}

package/dist/components/ic/TimeInputController.svelte

@@ -29,6 +29,7 @@
   import { Portal } from '@widgetic/design-system/components';
   import InputControllerHeader from './InputControllerHeader.svelte';
   import type { InputControllerConfig } from './index';
+  import { isEventInside, listenForScroll } from '../../utils/shadowDom';
 
   export let label: TimeInputControllerProps['label'];
   export let value: TimeInputControllerProps['value'] = "00:00";
@@ -256,7 +257,9 @@
   }
   
   function handleClickOutside(event: MouseEvent) {
-    if (dropdownContainer && !dropdownContainer.contains(event.target as Node)) {
+    // Seen from the document, a click inside a shadow root has the module's host as its target, so the click's path
+    // is what says whether it was inside the dropdown
+    if (dropdownContainer && !isEventInside(event, dropdownContainer)) {
       closeDropdown();
     }
   }
@@ -290,11 +293,14 @@
     }
   }
 
+  // Stops the scroll listener (it listens to the page and, in a module, to the module's own panels)
+  let stopListeningForScroll: () => void = () => {};
+
   // Update onMount to add scroll listener with capture phase
   onMount(() => {
     parseTimeFromValue(value);
     updateValue();
-    window.addEventListener('scroll', handleScroll, { capture: true });
+    stopListeningForScroll = listenForScroll(clockContainer, handleScroll);
   });
   
   // Update onDestroy to remove scroll listener
@@ -302,7 +308,7 @@
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
     document.removeEventListener('click', handleClickOutside);
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   // Watch for external value changes