editor-ts 0.0.1

package/src/core/ToolbarManager.ts

@@ -0,0 +1,170 @@
+import type { Component, ToolbarConfig, ToolbarRule, ComponentSelector } from '../types';
+import { defaultToolbarConfig } from '../utils/toolbar';
+
+/**
+ * Manager for runtime toolbar configurations
+ * Toolbars are NOT stored in JSON - they are configured at runtime
+ */
+export class ToolbarManager {
+  private rules: ToolbarRule[] = [];
+  private globalDefault: ToolbarConfig = defaultToolbarConfig;
+
+  /**
+   * Set global default toolbar for all components
+   */
+  setGlobalDefault(config: ToolbarConfig): void {
+    this.globalDefault = config;
+  }
+
+  /**
+   * Configure toolbar for components matching a selector
+   */
+  configure(selector: ComponentSelector, config: ToolbarConfig): void {
+    // Remove existing rule for same selector
+    this.rules = this.rules.filter(rule => 
+      JSON.stringify(rule.selector) !== JSON.stringify(selector)
+    );
+    
+    // Add new rule
+    this.rules.push({ selector, config });
+  }
+
+  /**
+   * Configure toolbar by component ID
+   */
+  configureById(id: string, config: ToolbarConfig): void {
+    this.configure({ id }, config);
+  }
+
+  /**
+   * Configure toolbar by component type
+   */
+  configureByType(type: string, config: ToolbarConfig): void {
+    this.configure({ type }, config);
+  }
+
+  /**
+   * Configure toolbar by tag name
+   */
+  configureByTag(tagName: string, config: ToolbarConfig): void {
+    this.configure({ tagName }, config);
+  }
+
+  /**
+   * Configure toolbar with custom matcher function
+   */
+  configureCustom(matcher: (component: Component) => boolean, config: ToolbarConfig): void {
+    this.configure({ custom: matcher }, config);
+  }
+
+  /**
+   * Get toolbar configuration for a specific component
+   */
+  getToolbarForComponent(component: Component): ToolbarConfig {
+    // Check rules in reverse order (last added has priority)
+    for (let i = this.rules.length - 1; i >= 0; i--) {
+      const rule = this.rules[i];
+      if (rule && this.matchesSelector(component, rule.selector)) {
+        return rule.config;
+      }
+    }
+
+    // Return global default
+    return this.globalDefault;
+  }
+
+  /**
+   * Get toolbar by component ID (convenience method)
+   */
+  getToolbarById(components: Component[], id: string): ToolbarConfig | null {
+    const component = this.findComponentById(components, id);
+    if (component) {
+      return this.getToolbarForComponent(component);
+    }
+    return null;
+  }
+
+  /**
+   * Check if component matches selector
+   */
+  private matchesSelector(component: Component, selector: ComponentSelector): boolean {
+    if ('id' in selector) {
+      return component.attributes?.id === selector.id;
+    }
+    if ('type' in selector) {
+      return component.type === selector.type;
+    }
+    if ('tagName' in selector) {
+      return component.tagName === selector.tagName;
+    }
+    if ('attributes' in selector) {
+      return Object.entries(selector.attributes).every(
+        ([key, value]) => component.attributes?.[key] === value
+      );
+    }
+    if ('custom' in selector) {
+      return selector.custom(component);
+    }
+    return false;
+  }
+
+  /**
+   * Find component by ID in tree
+   */
+  private findComponentById(components: Component[], id: string): Component | null {
+    for (const comp of components) {
+      if (comp.attributes?.id === id) {
+        return comp;
+      }
+      if (comp.components && comp.components.length > 0) {
+        const found = this.findComponentById(comp.components, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Remove toolbar configuration for a selector
+   */
+  removeConfiguration(selector: ComponentSelector): boolean {
+    const initialLength = this.rules.length;
+    this.rules = this.rules.filter(rule => 
+      JSON.stringify(rule.selector) !== JSON.stringify(selector)
+    );
+    return this.rules.length < initialLength;
+  }
+
+  /**
+   * Clear all toolbar configurations
+   */
+  clearAll(): void {
+    this.rules = [];
+  }
+
+  /**
+   * Get all toolbar rules
+   */
+  getAllRules(): ToolbarRule[] {
+    return [...this.rules];
+  }
+
+  /**
+   * Export toolbar configuration as JSON (for sharing config, not data)
+   */
+  exportConfig(): string {
+    return JSON.stringify({
+      globalDefault: this.globalDefault,
+      rules: this.rules,
+    }, null, 2);
+  }
+
+  /**
+   * Import toolbar configuration from JSON
+   */
+  importConfig(json: string): void {
+    const config = JSON.parse(json);
+    this.globalDefault = config.globalDefault || defaultToolbarConfig;
+    this.rules = config.rules || [];
+  }
+}

package/src/core/init.ts

@@ -0,0 +1,374 @@
+/**
+ * EditorTs Editor Initialization
+ * Users control the layout - init() just populates their containers
+ */
+
+import { Page } from './Page';
+import type { InitConfig, EditorTsEditor, Component } from '../types';
+
+/**
+ * Initialize EditorTs Editor
+ * User creates the HTML structure, init() populates it
+ */
+export function init(config: InitConfig): EditorTsEditor {
+  // Get the iframe element (required)
+  const iframe = document.getElementById(config.iframeId) as HTMLIFrameElement;
+  if (!iframe || iframe.tagName !== 'IFRAME') {
+    throw new Error(`Iframe element #${config.iframeId} not found or is not an iframe`);
+  }
+
+  // Create Page instance
+  const page = new Page(config.data);
+
+  // Configure toolbars from config
+  if (config.toolbars) {
+    if (config.toolbars.byId) {
+      Object.entries(config.toolbars.byId).forEach(([id, toolbarConfig]) => {
+        page.toolbars.configureById(id, toolbarConfig);
+      });
+    }
+
+    if (config.toolbars.byType) {
+      Object.entries(config.toolbars.byType).forEach(([type, toolbarConfig]) => {
+        page.toolbars.configureByType(type, toolbarConfig);
+      });
+    }
+
+    if (config.toolbars.byTag) {
+      Object.entries(config.toolbars.byTag).forEach(([tag, toolbarConfig]) => {
+        page.toolbars.configureByTag(tag, toolbarConfig);
+      });
+    }
+
+    if (config.toolbars.default) {
+      page.toolbars.setGlobalDefault(config.toolbars.default);
+    }
+  }
+
+  // Event system
+  const eventListeners: Record<string, Function[]> = {};
+
+  const on = (event: string, callback: Function) => {
+    if (!eventListeners[event]) {
+      eventListeners[event] = [];
+    }
+    eventListeners[event]!.push(callback);
+  };
+
+  const off = (event: string, callback: Function) => {
+    if (eventListeners[event]) {
+      eventListeners[event] = eventListeners[event]!.filter(cb => cb !== callback);
+    }
+  };
+
+  const emit = (event: string, ...args: any[]) => {
+    if (eventListeners[event]) {
+      eventListeners[event]!.forEach(callback => callback(...args));
+    }
+  };
+
+  // Get optional UI containers
+  const sidebarContainer = config.ui?.sidebar?.containerId 
+    ? document.getElementById(config.ui.sidebar.containerId) 
+    : null;
+  
+  const statsContainer = config.ui?.stats?.containerId
+    ? document.getElementById(config.ui.stats.containerId)
+    : null;
+  
+  const selectedInfoContainer = config.ui?.selectedInfo?.containerId
+    ? document.getElementById(config.ui.selectedInfo.containerId)
+    : null;
+
+  // Populate stats if container provided
+  if (statsContainer && config.ui?.stats?.enabled !== false) {
+    statsContainer.innerHTML = `
+      <div style="font-size: 0.85rem;">
+        <div>Components: ${page.components.count()}</div>
+        <div>Styles: ${page.styles.count()}</div>
+        <div>Assets: ${page.assets.count()}</div>
+      </div>
+    `;
+  }
+
+  // Build iframe content with WYSIWYG
+  const iframeContent = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${page.getTitle()}</title>
+  <style>${page.getCSS()}</style>
+  <style>
+    /* WYSIWYG editing styles */
+    .editorts-highlight {
+      outline: 2px dashed var(--color-editor-light-text, #212C3E) !important;
+      outline-offset: 2px;
+      cursor: pointer !important;
+      position: relative !important;
+    }
+    .editorts-highlight:hover {
+      outline: 2px solid var(--color-editor-light-text, #212C3E) !important;
+      background-color: rgba(33, 44, 62, 0.05) !important;
+    }
+    .editorts-selected {
+      outline: 3px solid #10b981 !important;
+      background-color: rgba(16, 185, 129, 0.1) !important;
+    }
+    .editorts-context-toolbar {
+      position: absolute;
+      top: -42px;
+      left: 0;
+      background: white;
+      border: 2px solid var(--color-editor-light-text, #212C3E);
+      border-radius: 6px;
+      padding: 0.4rem;
+      display: flex;
+      gap: 0.3rem;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+      z-index: 9999;
+    }
+    .toolbar-action {
+      background: white;
+      border: 1px solid var(--color-primary-border, #e5e7eb);
+      padding: 0.5rem 0.75rem;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.85rem;
+      white-space: nowrap;
+      font-family: var(--font-main);
+      transition: all 0.2s;
+    }
+    .toolbar-action:hover {
+      background: var(--color-editor-light-bg, #EDF0F5);
+      border-color: var(--color-editor-light-text, #212C3E);
+    }
+    .toolbar-action.danger:hover {
+      background: #fee;
+      border-color: #ef4444;
+      color: #ef4444;
+    }
+  </style>
+</head>
+${page.getHTML()}
+<script>
+  let selectedElement = null;
+
+  // Initialize WYSIWYG
+  function initWYSIWYG() {
+    document.querySelectorAll('[id]').forEach(el => {
+      if (!el.id || el.id.startsWith('editorts-')) return;
+
+      el.classList.add('editorts-highlight');
+      
+      el.addEventListener('click', (e) => {
+        e.stopPropagation();
+        selectElement(el);
+      });
+    });
+  }
+
+  function selectElement(el) {
+    // Clear previous selection
+    if (selectedElement) {
+      selectedElement.classList.remove('editorts-selected');
+      const oldToolbar = selectedElement.querySelector('.editorts-context-toolbar');
+      if (oldToolbar) oldToolbar.remove();
+    }
+
+    // Highlight new selection
+    selectedElement = el;
+    el.classList.add('editorts-selected');
+
+    // Notify parent
+    window.parent.postMessage({
+      type: 'editorts:componentSelected',
+      id: el.id,
+      tagName: el.tagName.toLowerCase(),
+      className: el.className
+    }, '*');
+
+    // Request toolbar config
+    window.parent.postMessage({
+      type: 'editorts:getToolbar',
+      id: el.id
+    }, '*');
+  }
+
+  // Listen for toolbar config from parent
+  window.addEventListener('message', (event) => {
+    if (event.data.type === 'editorts:toolbarConfig') {
+      renderToolbar(event.data.config, event.data.elementId);
+    } else if (event.data.type === 'editorts:toolbarAction') {
+      handleToolbarAction(event.data.action, event.data.elementId);
+    }
+  });
+
+  function renderToolbar(toolbarConfig, elementId) {
+    const el = document.getElementById(elementId);
+    if (!el || !toolbarConfig.enabled) return;
+
+    const toolbar = document.createElement('div');
+    toolbar.className = 'editorts-context-toolbar';
+
+    const enabledActions = toolbarConfig.actions.filter(a => a.enabled);
+    enabledActions.forEach(action => {
+      const btn = document.createElement('button');
+      btn.className = 'toolbar-action' + (action.danger ? ' danger' : '');
+      btn.textContent = action.icon + ' ' + action.label;
+      btn.onclick = () => {
+        window.parent.postMessage({
+          type: 'editorts:toolbarAction',
+          action: action.id,
+          elementId: elementId
+        }, '*');
+      };
+      toolbar.appendChild(btn);
+    });
+
+    el.appendChild(toolbar);
+  }
+
+  function handleToolbarAction(action, elementId) {
+    const el = document.getElementById(elementId);
+    if (!el) return;
+
+    if (action === 'delete') {
+      el.remove();
+    }
+  }
+
+  // Initialize
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initWYSIWYG);
+  } else {
+    initWYSIWYG();
+  }
+</script>
+</html>`;
+
+  // Load content into iframe
+  iframe.srcdoc = iframeContent;
+
+  // Handle messages from iframe
+  window.addEventListener('message', (event) => {
+    if (event.data.type === 'editorts:componentSelected') {
+      const component = page.components.findById(event.data.id);
+      if (component) {
+        // Update selected info container if provided
+        if (selectedInfoContainer && config.ui?.selectedInfo?.enabled !== false) {
+          selectedInfoContainer.innerHTML = `
+            <div><strong>ID:</strong> ${event.data.id}</div>
+            <div><strong>Tag:</strong> ${event.data.tagName}</div>
+          `;
+        }
+
+        // Emit event
+        emit('componentSelect', component);
+        if (config.onComponentSelect) {
+          config.onComponentSelect(component);
+        }
+      }
+    } else if (event.data.type === 'editorts:getToolbar') {
+      // Send toolbar config to iframe
+      const component = page.components.findById(event.data.id);
+      if (component) {
+        const toolbarConfig = page.toolbars.getToolbarForComponent(component);
+        iframe.contentWindow?.postMessage({
+          type: 'editorts:toolbarConfig',
+          config: toolbarConfig,
+          elementId: event.data.id
+        }, '*');
+      }
+    } else if (event.data.type === 'editorts:toolbarAction') {
+      handleToolbarAction(event.data.action, event.data.elementId);
+    }
+  });
+
+  // Handle toolbar actions
+  function handleToolbarAction(actionId: string, elementId: string) {
+    const component = page.components.findById(elementId);
+    if (!component) return;
+
+    switch (actionId) {
+      case 'edit':
+        emit('componentEdit', component);
+        if (config.onComponentEdit) {
+          config.onComponentEdit(component);
+        }
+        break;
+
+      case 'editJS':
+        emit('componentEditJS', component);
+        break;
+
+      case 'duplicate':
+        const clone = JSON.parse(JSON.stringify(component));
+        clone.attributes = clone.attributes || {};
+        clone.attributes.id = elementId + '-copy-' + Date.now();
+        page.components.addComponent(clone);
+        
+        emit('componentDuplicate', component, clone);
+        if (config.onComponentDuplicate) {
+          config.onComponentDuplicate(component, clone);
+        }
+        
+        refresh();
+        break;
+
+      case 'delete':
+        page.components.removeComponent(elementId);
+        
+        emit('componentDelete', component);
+        if (config.onComponentDelete) {
+          config.onComponentDelete(component);
+        }
+        
+        // Notify iframe to remove element
+        iframe.contentWindow?.postMessage({
+          type: 'editorts:toolbarAction',
+          action: 'delete',
+          elementId: elementId
+        }, '*');
+        break;
+    }
+  }
+
+  // Refresh iframe
+  function refresh() {
+    iframe.srcdoc = iframeContent;
+  }
+
+  // Save page data
+  function save(): string {
+    return page.toJSON();
+  }
+
+  // Destroy editor
+  function destroy() {
+    iframe.srcdoc = '';
+    if (sidebarContainer) sidebarContainer.innerHTML = '';
+    if (statsContainer) statsContainer.innerHTML = '';
+    if (selectedInfoContainer) selectedInfoContainer.innerHTML = '';
+    
+    Object.keys(eventListeners).forEach(key => {
+      eventListeners[key] = [];
+    });
+  }
+
+  // Return EditorTsEditor instance
+  return {
+    page,
+    on,
+    off,
+    refresh,
+    save,
+    destroy,
+    elements: {
+      iframe,
+      sidebar: sidebarContainer || undefined,
+      stats: statsContainer || undefined,
+      selectedInfo: selectedInfoContainer || undefined,
+    }
+  };
+}

package/src/styles/branding.css

@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Set Noto Sans as the default font family */
+:root {
+	font-family: "Noto Sans", sans-serif;
+}
+
+/* Theme variables */
+:root {
+	/* Font families */
+	--font-main: 'Noto Sans', sans-serif;
+	--font-secondary: 'Poppins', sans-serif;
+
+	/* Dark mode colors */
+	--color-catppuccin-mocha-dark: #1e1e2e;
+	--color-primary-dark-bg: #171717;
+	--color-secondary-dark-bg: #212121;
+	--color-primary-dark-border: #323232;
+	--color-dark-chat-bg: #2c2c2c;
+	--color-primary-dark-text: #FFFFFF;
+	--color-primary-dark-input-bg: #404040;
+	--color-dark-focus-ring: rgba(255, 255, 255, 0.3);
+	--color-dark-button-focus-ring: rgba(255, 255, 255, 0.4);
+
+	/* Light mode colors */
+	--color-editor-light-text: #212C3E;
+	--color-editor-light-bg: #EDF0F5;
+	--color-primary-bg: #F9F9F9;
+	--color-secondary-bg: #FFFFFF;
+	--color-sidemenu-bg: #F0F2F8;
+	--color-primary-border: #e5e7eb;
+	--color-primary-text: #000000;
+	--color-primary-input-bg: #f9f9f9;
+	--color-light-focus-ring: rgba(0, 0, 0, 0.2);
+	--color-light-button-focus-ring: rgba(0, 0, 0, 0.3);
+
+	/* Shadow styles */
+	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Apply font to all elements */
+body {
+	font-family: var(--font-main);
+}
+
+/* Optional: Use Poppins for headings */
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--font-secondary);
+	font-weight: 600;
+}
+
+/* Apply theme colors */
+.bg-primary {
+	background-color: var(--color-primary-bg);
+}
+
+.bg-secondary {
+	background-color: var(--color-secondary-bg);
+}
+
+.bg-sidemenu {
+	background-color: var(--color-sidemenu-bg);
+}
+
+.text-primary {
+	color: var(--color-primary-text);
+}
+
+.border-primary {
+	border-color: var(--color-primary-border);
+}
+
+.input-bg {
+	background-color: var(--color-primary-input-bg);
+}
+
+/* Focus styles */
+input:focus, textarea:focus, select:focus {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--color-light-focus-ring);
+}
+
+button:focus {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--color-light-button-focus-ring);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-primary-bg: var(--color-primary-dark-bg);
+		--color-secondary-bg: var(--color-secondary-dark-bg);
+		--color-primary-text: var(--color-primary-dark-text);
+		--color-primary-input-bg: var(--color-primary-dark-input-bg);
+		--color-primary-border: var(--color-primary-dark-border);
+	}
+	
+	input:focus, textarea:focus, select:focus {
+		box-shadow: 0 0 0 3px var(--color-dark-focus-ring);
+	}
+	
+	button:focus {
+		box-shadow: 0 0 0 3px var(--color-dark-button-focus-ring);
+	}
+}