@widgetic/editor 3.11.4 → 4.0.1

package/dist/components/editors/EmbedEditor.svelte

@@ -0,0 +1,700 @@
+<!-- 
+/**
+ * EmbedEditor Component
+ * 
+ * A specialized editor for embedding and customizing widget code with:
+ * - One-click copy functionality for embed codes
+ * - Visual code highlighting for better readability
+ * - Integrated property customization via PropsEditor
+ * - Responsive design with configurable dimensions
+ * 
+ * Note: Requires a valid embedSchema for property customization
+ */
+ -->
+<script lang="ts">
+
+/**
+ * SVELTE IMPORTS
+ */
+import { onMount, createEventDispatcher, onDestroy } from 'svelte';
+
+const dispatch = createEventDispatcher();
+
+// Add Sonner import
+import {toast, CopyableHeader} from '@widgetic/design-system/components';
+
+// Add OK icon import
+import OK from '../icons/ok.svelte';
+
+/**
+ * LOCAL SVELTE COMPONENTS IMPORTS
+ */
+import PropsEditor from './PropsEditor.svelte';
+
+/**
+ * SHADCN COMPONENTS
+ */
+import { Button, ScrollArea } from '@widgetic/design-system/components';
+
+// Add DragHandle import
+import DragHandle from '../icons/drag.svelte';
+
+/**
+ * Component Configuration Props
+ * width/height: Control overall component dimensions
+ * headerHeight: Space allocated for embed code display section
+ * embedSchema: Defines customizable properties for the embedded widget
+ * 
+ * Note: headerHeight affects the vertical space distribution between
+ * the embed code display and property editor sections
+ */
+let className = '';
+export { className as class };
+export let style = '';
+// header embed props
+export let embedHeaderText = 'Embed code';
+export let embedCode = '';
+// editor props
+export let height = 720;
+// export let headerHeight = 215;
+//
+export let embedSchema: any;
+// Initial values for embed options (overrides schema defaultValue)
+export let initialValues: Record<string, any> = {};
+// When false, skip the outer full-page dark wrapper (for embedding inside another layout)
+export let standalone = true;
+
+
+/**
+ * LOCAL VARIABLES
+ */
+// Loading state variable
+let loading: boolean = true;
+// Add drag handle visibility state
+let isDragHandleVisible = false;
+
+// Add drag state variables and functions
+let isDragging = false;
+let initialMousePos = { x: 0, y: 0 };
+let initialEditorPos = { left: 0, top: 0 };
+let embedEditorElement: HTMLElement | null = null;
+
+/**
+ * ON MOUNT
+ */
+onMount(() => {
+  console.log('EMBED EDITOR Mounted!');
+
+  // show loader while fetching schemas
+  // loading = true;
+
+  // hide loader
+  loading = false;
+  
+  // Setup draggable functionality for EmbedEditor after loading
+  setTimeout(setupDraggable, 300);
+});
+
+// Add cleanup for event listeners
+onDestroy(() => {
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+});
+
+// Add the draggable setup function
+function setupDraggable() {
+  // Find the EmbedEditor element
+  embedEditorElement = document.querySelector('.embed-editor-container');
+  
+  if (!embedEditorElement) return;
+  
+  // Find the existing drag handle container
+  const dragHandleContainer = embedEditorElement.querySelector('.drag-handle-container') as HTMLElement;
+  
+  if (dragHandleContainer) {
+    // Only add the mousedown event to the drag handle container
+    dragHandleContainer.addEventListener('mousedown', handleMouseDown as EventListener);
+    
+    // Make the drag handle container always visible
+    dragHandleContainer.style.opacity = '0';
+    
+    // Increase opacity on hover
+    dragHandleContainer.addEventListener('mouseenter', () => {
+      dragHandleContainer.style.opacity = '1';
+    });
+    
+    dragHandleContainer.addEventListener('mouseleave', () => {
+      dragHandleContainer.style.opacity = '0';
+    });
+  }
+  
+  // Remove the need for mouse enter/leave to show drag handle
+  embedEditorElement.removeEventListener('mouseenter', handleHeaderMouseEnter);
+  embedEditorElement.removeEventListener('mouseleave', handleHeaderMouseLeave);
+}
+
+// Mouse event handlers for dragging
+function handleMouseDown(e: MouseEvent) {
+  e.preventDefault();
+  
+  if (!embedEditorElement) return;
+  
+  isDragging = true;
+  
+  // Get initial mouse position
+  initialMousePos = { x: e.clientX, y: e.clientY };
+  
+  // Get the current position of the editor
+  const rect = embedEditorElement.getBoundingClientRect();
+  
+  // Get the computed style
+  const computedStyle = window.getComputedStyle(embedEditorElement);
+  
+  // Check the current position type
+  const currentPosition = computedStyle.position;
+  
+  // Set the editor position to absolute and calculate initial position
+  embedEditorElement.style.position = 'absolute';
+  
+  // If it's the first time we're dragging, set up initial position
+  if (currentPosition !== 'absolute') {
+    // Convert to absolute positioning without changing the visual position
+    embedEditorElement.style.margin = '0';
+    embedEditorElement.style.width = `${rect.width}px`;
+    embedEditorElement.style.height = `${rect.height}px`;
+    
+    // Get the parent element's computed style
+    const parentElement = embedEditorElement.parentElement;
+    const parentRect = parentElement ? parentElement.getBoundingClientRect() : { left: 0, top: 0 };
+    
+    // Calculate initial absolute position with parent offset
+    const initialLeft = rect.left - parentRect.left;
+    const initialTop = rect.top - parentRect.top;
+    
+    // Set the initial position
+    embedEditorElement.style.left = `${initialLeft}px`;
+    embedEditorElement.style.top = `${initialTop}px`;
+    
+    // Store initial values for drag calculation
+    initialEditorPos = {
+      left: initialLeft,
+      top: initialTop
+    };
+  } else {
+    // If already absolute, use current left/top values
+    initialEditorPos = {
+      left: parseInt(computedStyle.left) || 0,
+      top: parseInt(computedStyle.top) || 0
+    };
+  }
+  
+  // Add the document event listeners
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+  
+  // Change cursor during dragging
+  document.body.style.cursor = 'move';
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!isDragging || !embedEditorElement) return;
+  
+  // Calculate the movement delta
+  const dx = e.clientX - initialMousePos.x;
+  const dy = e.clientY - initialMousePos.y;
+  
+  // Update position based on original position plus delta
+  embedEditorElement.style.left = `${initialEditorPos.left + dx}px`;
+  embedEditorElement.style.top = `${initialEditorPos.top + dy}px`;
+}
+
+function handleMouseUp() {
+  if (!isDragging) return;
+  
+  isDragging = false;
+  
+  // Remove the document event listeners
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+  
+  // Reset cursor
+  document.body.style.cursor = '';
+}
+
+/**
+ * Clipboard Interaction Handlers
+ * Provides copy functionality via the copy button
+ * with visual feedback via toast notifications
+ */
+// Add this helper function at the top of your script
+let isToastVisible = false;
+
+function showToast(type: 'success' | 'error', message: string, options = {}) {
+  if (isToastVisible) return;
+  
+  isToastVisible = true;
+  toast[type](message, {
+    ...options,
+    duration: 5000,
+    unstyled: true,
+    position: 'bottom-right',
+    classes: {
+      toast: 'embed-editor-toast flex items-center gap-3 fixed bottom-5 right-5',
+      title: 'embed-editor-toast-title',
+      description: 'embed-editor-toast-description',
+      closeButton: 'embed-editor-toast-close-button'
+    },
+    onAutoClose: () => {
+      isToastVisible = false;
+    },
+    onDismiss: () => {
+      isToastVisible = false;
+    }
+  });
+}
+
+/**
+ * Component State Management
+ * loading: Prevents premature rendering while initializing
+ * embedCodeHeaderRef: References header for DOM measurements
+ * 
+ * Note: Currently loading is simplified as there's no actual data fetching,
+ * but the structure supports future async operations
+ */
+
+/**
+ * Layout Structure
+ * The component is organized in layers:
+ * 1. Border overlay (z-index: -102)
+ * 2. Embed code header (z-index: 100)
+ * 3. Props editor (z-index: 10)
+ * 
+ * This layering ensures proper visual hierarchy and interaction handling
+ */
+
+// These functions are no longer needed since we're making the drag handle always visible
+// But we'll keep them for compatibility with any code that might call them
+function handleHeaderMouseEnter() {
+  isDragHandleVisible = true;
+}
+
+function handleHeaderMouseLeave() {
+  isDragHandleVisible = false;
+}
+
+/** Root wrapper element ref for programmatic positioning */
+let wrapperElement: HTMLElement | null = null;
+let internalPropsEditorRef: any = null;
+
+/** Public: update a design value in the internal PropsEditor (for external dimension sync) */
+export function updateValue(propertyId: string, value: any) {
+  internalPropsEditorRef?.updateDesignValue?.(propertyId, value);
+}
+
+/** Public: set absolute position programmatically (used by parent for layout) */
+export function setPosition(left: number, top: number) {
+  if (!wrapperElement) return;
+  wrapperElement.style.left = `${left}px`;
+  wrapperElement.style.top = `${top}px`;
+}
+
+/** Public: get current position */
+export function getPosition() {
+  if (!wrapperElement) return { left: 0, top: 0 };
+  return {
+    left: parseFloat(wrapperElement.style.left) || 0,
+    top: parseFloat(wrapperElement.style.top) || 0
+  };
+}
+
+</script>
+
+
+<!-- HTML -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div 
+  bind:this={wrapperElement}
+  class="{standalone ? 'min-h-screen w-full flex items-center justify-center widgetic-colors widgetic-radius bg-dark p-4' : 'embed-editor-inline-wrapper absolute'}"
+>
+  <div 
+    class="{className ? className + ' ' : ''}embed-editor-container
+          flex flex-col justify-center relative bg-white widgetic-colors widgetic-radius overflow-hidden" 
+    style="
+      width: 450px; 
+      height: {!embedCode && !embedSchema ? height + 'px' : !embedSchema ? 'auto' : height + 'px'};
+      border: 2px solid hsl(var(--grey2));
+      border-radius: var(--radius-large);
+      z-index: 0;
+      position: relative;
+      {style ? ' ' + style : ''}
+    "
+  >
+    {#if loading}
+      <div class="loading-text subtext text-grey5 flex items-center justify-center h-full">Loading...</div>
+    {:else if !embedCode}
+      <div class="flex flex-col items-center justify-center h-full">
+        <div class="text-error text-lg font-medium">No embed code available</div>
+        <div class="text-grey5 subtext mt-1">Error code: EMBED_CODE_NOT_FOUND</div>
+      </div>
+    {:else}
+      <!-- Embed Code Header and Text Area Container -->
+      <section 
+        class="header-hover-area bg-grey2" 
+        class:rounded-b-[var(--radius-large)]={!embedSchema}
+        aria-label="Embed code header area"
+      >
+        <!-- Drag Handle -->
+        <div class="absolute top-0 left-0 w-full flex justify-center z-[103]">
+          <div class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors drag-handle-container">
+            <DragHandle class="w-[66px] h-[24px] text-forest-green hover:text-grey3 transition-colors drag-handle" />
+          </div>
+        </div>
+
+        <!-- Use the CopyableHeader component -->
+        <CopyableHeader
+          headerText={embedHeaderText}
+          content={embedCode}
+          helpText="Read more about embedding"
+          helpUrl="/embed"
+          showStandaloneCopyButton={true}
+          standaloneCopyButtonText="Copy to clipboard"
+          showButtonText={false}
+          buttonClass="bg-grey2 text-grey7 hover:bg-white rounded-small"
+          style="border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large);"
+          on:copy={() => {
+            showToast('success', 'Copied to clipboard', {
+              description: 'Paste it anywhere on your site.',
+              icon: OK,
+            });
+          }}
+        />
+      </section>
+
+      <!-- Props Editor - Only show if embedSchema exists -->
+      {#if embedSchema}
+        <div class="w-full flex-1 z-10 bg-white overflow-hidden widgetic-colors">
+          <ScrollArea
+            class="h-full"
+            type="hover"
+            scrollHideDelay={0}
+            scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white pt-4 pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2 [&>div]:opacity-100"
+          >
+            <div class="scroll-viewport h-full" data-radix-scroll-area-viewport>
+              <div class="min-h-full scroll-content p-0">
+                <PropsEditor
+                  bind:this={internalPropsEditorRef}
+                  class="z-10"
+                  width="450px"
+                  height="100%"
+                  designSchema={embedSchema}
+                  contentSchema={null}
+                  initialDesignValues={initialValues}
+                  defaultOpen={true}
+                  showDragHandle={false}
+                  on:propertyChange={(event: any) => {
+                    dispatch('propertyChange', event.detail);
+                  }}
+                />
+              </div>
+            </div>
+          </ScrollArea>
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Drag Handle Visibility */
+  .header-hover-area {
+    position: relative;
+  }
+
+  .drag-handle-container {
+    transition: opacity 0.3s ease;
+    /* Ensure the drag handle is always visible on top */
+    z-index: 103;
+  }
+
+  /* Only apply move cursor to the drag handle */
+  .drag-handle-container {
+    cursor: move;
+  }
+
+  /* Drag Handle Icon */
+  :global(.drag-handle svg) {
+    color: hsl(var(--forest-green)) !important;
+    transition: color 0.2s ease !important;
+  }
+
+  /* Remove white background on hover for drag handle */
+  :global(.drag-handle:hover) {
+    background-color: transparent !important;
+  }
+
+  :global(.drag-handle:hover svg) {
+    color: hsl(var(--grey3)) !important;
+  }
+
+  /* Remove box shadow */
+  .embed-editor-container {
+    box-shadow: none;
+    transform: translateZ(0); /* Force GPU acceleration */
+  }
+
+  /* Prevent shadow inheritance for PropsEditor */
+  :global(.props-editor-container) {
+    box-shadow: none !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+
+  /* Add this to ensure proper border radius inheritance */
+  :global(.embed-editor-container .props-editor-container) {
+    border-bottom-left-radius: var(--radius-large);
+    border-bottom-right-radius: var(--radius-large);
+    overflow: visible !important;
+    width: 100% !important;
+  }
+
+  :global(.embed-editor-container .props-editor-container > div) {
+    padding: 0 !important;
+    height: 100% !important;
+  }
+
+  /* Style accordion items to match Design system */
+  :global(.embed-editor-container .accordion-item) {
+    border: 2px solid hsl(var(--grey2)) !important;
+    background: white !important;
+    overflow: hidden !important;
+    margin-bottom: -2px !important;
+    position: relative !important;
+  }
+
+  /* Style based on item name */
+  :global(.embed-editor-container .accordion-item[data-accordion-id="Basic Options"]) {
+    border-top-left-radius: var(--radius-medium) !important;
+    border-top-right-radius: var(--radius-medium) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  :global(.embed-editor-container .accordion-item[data-accordion-id="Advanced Settings"]) {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: var(--radius-medium) !important;
+    border-bottom-right-radius: var(--radius-medium) !important;
+    margin-bottom: 0 !important;
+  }
+
+  :global(.embed-editor-container .accordion-trigger) {
+    padding: 16px !important;
+    width: 100% !important;
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    background: white !important;
+    border: none !important;
+  }
+
+  :global(.embed-editor-container .accordion-trigger:hover .body-medium) {
+    text-decoration: underline !important;
+  }
+
+  :global(.embed-editor-container .accordion-content) {
+    padding: 16px !important;
+    border-top: 2px solid hsl(var(--grey2)) !important;
+  }
+
+  :global(.embed-editor-container .accordion-content > div) {
+    padding: 0 !important;
+    background: white !important;
+  }
+
+  /* Style the chevron icon */
+  :global(.embed-editor-container .accordion-trigger .chevron) {
+    transition: transform 200ms ease-out !important;
+  }
+
+  :global(.embed-editor-container .accordion-trigger[data-state="open"] .chevron) {
+    transform: rotate(180deg) !important;
+  }
+
+  /* Style for the embed code text area */
+  .embed-code-textarea {
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+    user-select: text !important;
+    font-family: monospace !important;
+    overflow-y: auto !important;
+  }
+
+  .embed-code-textarea::selection {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: inherit !important;
+  }
+
+  .embed-code-textarea::-moz-selection {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: inherit !important;
+  }
+
+  .text-wrapper {
+    font-family: monospace !important;
+    line-height: 1;
+  }
+
+  /* Ensure inputs maintain their container width */
+  :global(.embed-editor-container input),
+  :global(.embed-editor-container select),
+  :global(.embed-editor-container textarea),
+  :global(.embed-editor-container .input-wrapper),
+  :global(.embed-editor-container .input-container),
+  :global(.embed-editor-container .color-picker-popover) {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  /* Force width constraints on content */
+  :global(.embed-editor-container .props-editor-container) {
+    width: 100%;
+    min-width: 0;
+    overflow: visible;
+  }
+
+  /* Ensure popover content stays within bounds */
+  :global(.embed-editor-container .popover-content) {
+    max-width: calc(100% - 2rem);
+    min-width: 0;
+  }
+
+  /* Add scroll visibility styles */
+  :global(.embed-editor-container [data-radix-scroll-area-viewport]) {
+    width: 100% !important;
+  }
+
+  :global(.embed-editor-container .scroll-area) {
+    width: 100% !important;
+    overflow: visible !important;
+  }
+
+  /* Button Press Effect */
+  :global(.embed-code-header button) {
+    transition: background-color 0.1s ease;
+  }
+
+  /** TOASTER STYLES **/
+  /* Toaster Positioning */
+  :global(.embed-editor-toast) {
+    position: fixed !important;
+    bottom: 20px !important;
+    right: 20px !important;
+    top: auto !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+    padding: 16px 24px !important;
+    background: white !important;
+    border-radius: var(--radius-small) !important;
+    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /* Icon container */
+  :global(.embed-editor-toast [data-icon]) {
+    order: -1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+  }
+
+  /* Text container */
+  :global(.embed-editor-toast [data-content]) {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 4px !important;
+    margin: 0 !important;
+  }
+
+  /* Toaster title */
+  .embed-editor-title {
+    font-size: var(--h6) !important;
+    color: hsl(var(--forest)) !important;
+    font-weight: 600 !important;
+  }
+
+  /* Toaster description */
+  .embed-editor-toast-description {
+    font-size: var(--caption) !important;
+    color: hsl(var(--grey3)) !important;
+  }
+
+  /* Toaster icon */
+  .embed-editor-toast-icon {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  /* Toaster close button */
+  :global(.embed-editor-toast-close-button) {
+    background: hsl(var(--grey7)) !important;
+    border: 1px solid hsl(var(--grey5)) !important;
+  }
+
+  :global(.embed-editor-toast-close-button:hover) {
+    background: hsl(var(--dark)) !important;
+    border: 1px solid hsl(var(--grey5)) !important;
+  }
+
+  :global(.embed-editor-toast-close-button svg) {
+    color: white !important;
+  }
+
+  /* Accordion Item: Update CSS to handle single items */
+  :global(.embed-editor-container .accordion-item[data-position="only"]) {
+    border-radius: var(--radius-medium) !important;
+  }
+
+  :global(.embed-editor-container .accordion-item[data-position="first"]) {
+    border-top-left-radius: var(--radius-medium) !important;
+    border-top-right-radius: var(--radius-medium) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  :global(.embed-editor-container .accordion-item[data-position="last"]) {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: var(--radius-medium) !important;
+    border-bottom-right-radius: var(--radius-medium) !important;
+  }
+
+  /* Lucide Copy Icon: Set both default and hover colors */
+  :global(.lucide-copy) {
+    stroke: hsl(var(--error)) !important;
+  }
+  
+  :global(button:hover .lucide-copy) {
+    stroke: hsl(var(--grey7)) !important;
+  }
+
+  /* Add styles for dots pattern */
+  .dots-pattern {
+    cursor: move;
+    user-select: none;
+  }
+
+  .dots-pattern:active {
+    cursor: grabbing;
+  }
+
+  /* Add styles for error message */
+  :global(.subtext) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+  }
+</style>
+