@widgetic/editor 3.11.4 → 4.0.2

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

@@ -0,0 +1,14 @@
+import type { InputControllerConfig } from './index';
+type $$ComponentProps = {
+    class: string;
+    label: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    description?: string;
+    onFocus?: () => void;
+    onClose?: () => void;
+};
+declare const TextAreaInputController: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextAreaInputController = ReturnType<typeof TextAreaInputController>;
+export default TextAreaInputController;

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -0,0 +1,478 @@
+<script lang="ts">
+  import { Portal } from '@widgetic/design-system/components';
+  import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
+  import { onMount, onDestroy } from 'svelte';
+  
+  import { TextAreaInputController } from './index';
+  import type { InputControllerConfig } from './index';
+
+  /**
+   * Component props
+   */
+  export let label: string = '';
+  export let value: string = '';
+  export let onChange: any;
+  export let config: InputControllerConfig = {};
+  export let description: string | undefined = undefined;
+  export let portalTarget: string = '';
+  /**
+   * Local Variables
+   */
+  
+  // Use config values with fallbacks
+  const placeholder: string = config.placeholder || '';
+
+  let isShowingTextArea = false;
+
+  // Add a computed property to determine if we're showing placeholder
+  $: isShowingPlaceholder = !value && placeholder;
+
+  // Create a preview version of the text that preserves formatting
+  $: previewText = value ? createPreviewText(value) : placeholder;
+
+  // Add this to track the current color
+  let currentColor = '#1a1a1a'; // Default color
+
+  // Add this near the top with other state declarations
+  let isPortalHovered = false;
+
+  // Add this to store the background rect ref
+  let backgroundRectRef: HTMLDivElement;
+
+  // Add these near the top with other state declarations
+  let isClosing = false;
+
+  /**
+   * 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 '';
+    }
+
+    return Array.from(doc.body.childNodes)
+      .map(node => processNode(node))
+      .join('')
+      .trim();
+  }
+
+  function handleFullEditorChange(html: string) {
+    value = html;
+    if (typeof onChange === 'function') onChange(html);
+  }
+
+  function handleClick() {
+    console.log('Opening text area in portal');
+    isShowingTextArea = !isShowingTextArea;
+  }
+
+  $: if (isShowingTextArea) {
+    setTimeout(() => {
+      const editor = document.querySelector('.ProseMirror');
+      if (editor instanceof HTMLElement) {
+        editor.focus();
+      }
+    }, 100); // Give a bit more time for the portal to mount
+  }
+
+  // Update value reactively to track color changes
+  $: {
+    if (value) {
+      const colorMatch = value.match(/color:\s*(#[0-9A-Fa-f]{6}|rgb\([^)]+\))/);
+      if (colorMatch) {
+        currentColor = colorMatch[1];
+      }
+    }
+  }
+
+  $: if (value) {
+    console.log('[TextAreaPreview] compact preview html', value.slice(0, 180));
+  }
+
+  function handlePortalMouseEnter() {
+    // console.log('Portal mouse entered');
+    isPortalHovered = true;
+  }
+
+  function handlePortalMouseLeave(event: MouseEvent) {
+    // if (!backgroundRectRef) return;
+    // console.log('Portal mouse leave: ', event, backgroundRectRef.getBoundingClientRect());
+
+    // Get mouse position relative to the portal content
+    const { offsetX, offsetY } = event;
+    const offsetWidth = backgroundRectRef.getBoundingClientRect().width;
+    const offsetHeight = backgroundRectRef.getBoundingClientRect().height;
+    // console.log('Portal mouse leave mousePosition: ', offsetX, offsetY, offsetWidth, offsetHeight);
+    
+    // Check if cursor is within the background rect boundaries
+    if (
+      0 < offsetX && offsetX < offsetWidth &&
+      0 < offsetY && offsetY < offsetHeight
+    ) {
+      // console.log('Portal mouse leave mousePosition: ', offsetX, offsetY, offsetWidth, offsetHeight);
+      return;
+    }
+
+    // console.log('Portal mouse leave mousePosition: ', offsetX, offsetY, offsetWidth, offsetHeight);
+    isPortalHovered = false;
+  }
+
+  // Add keyboard event handler for Escape key
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && isShowingTextArea) {
+      handleClose();
+    }
+  }
+
+  onMount(() => {
+    // Add keyboard event listener when component mounts
+    window.addEventListener('keydown', handleKeydown);
+  });
+
+  onDestroy(() => {
+    // Remove keyboard event listener when component is destroyed
+    window.removeEventListener('keydown', handleKeydown);
+  });
+
+  // Update the close handler
+  function handleClose() {
+    if (isClosing) return; // Prevent multiple closes
+    isClosing = true;
+
+    // Add animation end handler
+    const content = document.querySelector('.text-area-portal-content') as HTMLDivElement;
+    const overlay = content?.previousElementSibling as HTMLDivElement;
+
+    const handleAnimationEnd = () => {
+      if (content) content.dataset.state = 'complete';
+      if (overlay) overlay.dataset.state = 'complete';
+      
+      // Remove the elements after a short delay
+      setTimeout(() => {
+        isShowingTextArea = false;
+        isClosing = false;
+        if (content) content.dataset.state = '';
+        if (overlay) overlay.dataset.state = '';
+      }, 50);
+    };
+
+    // Listen for the end of the scale animation
+    content?.addEventListener('animationend', handleAnimationEnd, { once: true });
+  }
+</script>
+
+<div class="text-area-preview-input-controller w-full min-w-0 overflow-hidden widgetic-colors">
+  <div 
+    class="text-area-preview-main-container w-full min-w-0 overflow-hidden"
+  >
+    <div 
+      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="textarea-ic-preview-copy min-w-0 overflow-hidden pr-10 pt-[13px] pb-4 pl-4">
+        <div 
+          class="textarea-ic-preview-html break-words text-grey7 text-sm leading-5" 
+          class:text-grey3={isShowingPlaceholder}
+        >
+          {@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>
+
+  <!-- Description -->
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+
+  <!-- Text Area Input Controller in Portal -->
+  {#if isShowingTextArea}
+  <Portal 
+    target={portalTarget}
+    class="text-area-portal absolute top-0 left-0 w-full h-full"
+  >
+    <!-- Blocking overlay -->
+    <div 
+      class="absolute inset-0 bg-white {isClosing ? 'fade-out-animation' : 'fade-in-animation'}" 
+      style="z-index: 50; transform: translateZ(0); backface-visibility: hidden;"
+    ></div>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div 
+      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}
+      on:mouseleave={handlePortalMouseLeave}
+    >
+      <!-- Background rect that defines our hover boundaries -->
+      <div 
+        bind:this={backgroundRectRef}
+        class="portal-background-rect absolute inset-0 bg-transparent pointer-events-none"
+        style="border-radius: var(--radius-large);"
+      ></div>
+
+      <TextAreaInputController
+        class="text-area w-full h-full transition-colors duration-200 {isPortalHovered ? 'border-solid !border-forest-green' : ''}"
+        label={label}
+        bind:value
+        onChange={handleFullEditorChange}
+        config={config}
+        description={description}
+        onClose={handleClose}
+      />
+    </div>
+  </Portal>
+  {/if}
+
+</div>
+
+<style>
+  /* Keep only preview-specific styles */
+  :global(.text-area-preview-main-container .group) {
+    position: relative;
+    isolation: isolate;
+  }
+
+  :global(.text-area-preview-main-container .group:hover) {
+    border-color: hsl(var(--forest-green)) !important;
+  }
+
+
+  /* Heading styles matching tiptap editor */
+  :global(.textarea-ic-preview-html h1.tiptap-heading) {
+    font-size: 2em !important;
+    font-weight: 600 !important;
+    line-height: 1.2 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    color: inherit !important;
+  }
+
+  :global(.textarea-ic-preview-html  h2.tiptap-heading) {
+    font-size: 1.5em !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    margin-top: 0.4em !important;
+    margin-bottom: 0.2em !important;
+    color: inherit !important;
+  }
+
+  :global(.textarea-ic-preview-html  h3.tiptap-heading) {
+    font-size: 1.17em !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    margin-top: 0.3em !important;
+    margin-bottom: 0.2em !important;
+    color: inherit !important;
+  }
+
+  :global(.textarea-ic-preview-html  h4.tiptap-heading) {
+    font-size: 1em !important;
+    font-weight: 600 !important;
+    line-height: 1.4 !important;
+    margin-top: 0.2em !important;
+    margin-bottom: 0.1em !important;
+    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(.textarea-ic-preview-html  [style*="color"]) {
+    color: var(--color) !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(.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(.textarea-ic-preview-html  [data-text-style*="color"]) {
+    color: var(--color) !important;
+  }
+
+  /* Ensure all text elements can inherit colors */
+  :global(.textarea-ic-preview-html  *) {
+    color: inherit;
+  }
+
+  /* Ensure paragraphs have no margins */
+  :global(.textarea-ic-preview-html  p) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  /* Ensure line-clamp ellipsis inherits color */
+  :global(.line-clamp-3) {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    display: -webkit-box;
+    overflow: hidden;
+    color: inherit;
+  }
+
+  /* Add scale animation */
+  @keyframes scaleIn {
+    from {
+      transform: scale(0.95) translateZ(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) translateZ(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :global(.scale-in-animation) {
+    animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    transform-origin: center center;
+    will-change: transform, opacity;
+    backface-visibility: hidden;
+  }
+
+  :global(.fade-in-animation) {
+    animation: fadeIn 0.15s ease-out;
+    will-change: opacity;
+    backface-visibility: hidden;
+  }
+
+  /* Add scale out animation */
+  @keyframes scaleOut {
+    0% {
+      transform: scale(1) translateZ(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.95) translateZ(0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  :global(.scale-out-animation) {
+    animation: scaleOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    transform-origin: center center;
+    will-change: transform, opacity;
+    backface-visibility: hidden;
+    pointer-events: none;
+  }
+
+  :global(.fade-out-animation) {
+    animation: fadeOut 0.15s ease-out forwards;
+    will-change: opacity;
+    backface-visibility: hidden;
+    pointer-events: none;
+  }
+
+  /* Add a class to handle visibility at animation end */
+  :global(.scale-out-animation[data-state="complete"]),
+  :global(.fade-out-animation[data-state="complete"]) {
+    visibility: hidden;
+  }
+</style> 

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

@@ -0,0 +1,28 @@
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextAreaPreviewInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component props
+       */ label?: string;
+    value?: string;
+    onChange: any;
+    config?: InputControllerConfig;
+    description?: string | undefined;
+    portalTarget?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextAreaPreviewInputController = InstanceType<typeof TextAreaPreviewInputController>;
+export default TextAreaPreviewInputController;

package/dist/components/ic/TextInputController.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  // Import Shadcn UI components from Widgetic design-system package
+  import { Input } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+
+  // Component props
+  import type { InputControllerConfig } from './index';
+
+  /**
+   * Component props
+   */
+  export let label: string;
+  export let value: string;
+  export let onChange: (newValue: string) => void;
+  export let config: InputControllerConfig = {};
+  
+  // Use config values with fallbacks
+  export let type: 'text' | 'email' | 'url' = 'text';
+  export let placeholder: string = config.placeholder || '';
+  export let description: string | undefined = undefined;
+  export let onFocus: () => void = () => {};
+
+  /**
+   * Methods
+   */
+  function validate(value: string): boolean {
+    switch (type) {
+      case 'email':
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+      case 'url':
+        return /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/.test(value);
+      default:
+        return true;
+    }
+  }
+</script>
+
+<div 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} />
+    </div>
+    
+    <div class="absolute right-0">
+      <div 
+        class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
+        on:focusin={onFocus}
+      >
+        <Input
+          id="text-input"
+          {type}
+          {value}
+          {placeholder}
+          onfocus={onFocus}
+          oninput={(e) => {
+            const newValue = e.currentTarget.value;
+            if (validate(newValue)) {
+              onChange(newValue);
+            }
+          }}
+          class="h-full w-full border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 subtext text-grey7 placeholder:text-grey3 placeholder:subtext px-4"
+        />
+      </div>
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,30 @@
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component props
+       */ label: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    type?: "text" | "email" | "url";
+    placeholder?: string;
+    description?: string | undefined;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextInputController = InstanceType<typeof TextInputController>;
+export default TextInputController;