editor-ts 0.0.1

package/src/types.ts

@@ -0,0 +1,157 @@
+/**
+ * Core type definitions for the HTML content editing library
+ */
+
+export interface PageData {
+  title: string;
+  item_id: number;
+  body: PageBody;
+}
+
+export interface PageBody {
+  html: string;
+  components: string; // JSON string of Component[]
+  assets: Asset[];
+  css: string;
+  styles: Style[];
+}
+
+export interface Component {
+  type: string;
+  attributes?: Record<string, any>;
+  components?: Component[];
+  tagName?: string;
+  void?: boolean;
+  style?: string;
+  script?: string;
+  [key: string]: any;
+}
+
+export interface ToolbarConfig {
+  enabled: boolean;
+  actions: ToolbarAction[];
+}
+
+export interface ToolbarAction {
+  id: string;
+  label: string;
+  icon: string;
+  enabled: boolean;
+  danger?: boolean;
+  description?: string;
+  handler?: string;
+}
+
+export interface Asset {
+  type: 'image' | 'video' | 'audio' | 'document';
+  src: string;
+  unitDim: 'px' | '%' | 'em' | 'rem';
+  height: number;
+  width: number;
+  blinkCDN?: boolean;
+}
+
+export interface Style {
+  selectors: (string | SelectorObject)[];
+  selectorsAdd?: string;
+  style: CSSProperties;
+  mediaText?: string;
+  atRuleType?: 'media' | 'keyframes' | 'supports';
+  state?: 'hover' | 'active' | 'focus' | 'visited';
+}
+
+export interface SelectorObject {
+  name: string;
+  active?: boolean;
+}
+
+export type CSSProperties = Record<string, string>;
+
+export interface ParsedComponents {
+  components: Component[];
+}
+
+export interface ComponentQuery {
+  id?: string;
+  type?: string;
+  attributes?: Record<string, any>;
+  tagName?: string;
+}
+
+export interface StyleQuery {
+  selector?: string;
+  mediaText?: string;
+  state?: string;
+}
+
+export interface UpdateOptions {
+  merge?: boolean;
+  overwrite?: boolean;
+}
+
+export interface ToolbarRule {
+  selector: ComponentSelector;
+  config: ToolbarConfig;
+}
+
+export type ComponentSelector = 
+  | { id: string }
+  | { type: string }
+  | { tagName: string }
+  | { attributes: Record<string, any> }
+  | { custom: (component: Component) => boolean };
+
+export interface InitConfig {
+  // Required: iframe element ID (user creates this in their HTML)
+  iframeId: string;
+  
+  // Required: page data
+  data: PageData | string;
+  
+  // Optional: toolbar configuration (runtime only)
+  toolbars?: ToolbarInitConfig;
+  
+  // Optional: UI container IDs (user controls placement)
+  ui?: {
+    sidebar?: {
+      containerId?: string;  // Where to render sidebar (optional)
+      enabled?: boolean;
+    };
+    stats?: {
+      containerId?: string;  // Where to render stats (optional)
+      enabled?: boolean;
+    };
+    selectedInfo?: {
+      containerId?: string;  // Where to render selected component info (optional)
+      enabled?: boolean;
+    };
+  };
+  
+  // Optional: event callbacks
+  onComponentSelect?: (component: Component) => void;
+  onComponentEdit?: (component: Component) => void;
+  onComponentDelete?: (component: Component) => void;
+  onComponentDuplicate?: (component: Component, duplicate: Component) => void;
+}
+
+export interface ToolbarInitConfig {
+  byId?: Record<string, ToolbarConfig>;
+  byType?: Record<string, ToolbarConfig>;
+  byTag?: Record<string, ToolbarConfig>;
+  default?: ToolbarConfig;
+}
+
+export interface EditorTsEditor {
+  page: any; // Page class (avoid circular dependency)
+  on(event: string, callback: Function): void;
+  off(event: string, callback: Function): void;
+  refresh(): void;
+  save(): string;
+  destroy(): void;
+  elements: {
+    iframe: HTMLIFrameElement;
+    sidebar?: HTMLElement;
+    stats?: HTMLElement;
+    selectedInfo?: HTMLElement;
+  };
+}

package/src/utils/helpers.ts

@@ -0,0 +1,199 @@
+import type { Component, CSSProperties } from '../types';
+
+/**
+ * Utility functions for working with page data
+ */
+
+/**
+ * Deep clone an object
+ */
+export function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Generate a unique ID
+ */
+export function generateId(prefix = 'id'): string {
+  const random = Math.random().toString(36).substring(2, 9);
+  const timestamp = Date.now().toString(36);
+  return `${prefix}-${timestamp}-${random}`;
+}
+
+/**
+ * Convert CSS object to CSS string
+ */
+export function cssObjectToString(css: CSSProperties): string {
+  return Object.entries(css)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(' ');
+}
+
+/**
+ * Convert CSS string to CSS object
+ */
+export function cssStringToObject(cssString: string): CSSProperties {
+  const css: CSSProperties = {};
+  const declarations = cssString.split(';').filter((d) => d.trim());
+
+  for (const declaration of declarations) {
+    const [key, ...valueParts] = declaration.split(':');
+    if (key && valueParts.length > 0) {
+      css[key.trim()] = valueParts.join(':').trim();
+    }
+  }
+
+  return css;
+}
+
+/**
+ * Flatten component tree to array
+ */
+export function flattenComponents(components: Component[]): Component[] {
+  const result: Component[] = [];
+
+  function traverse(comps: Component[]) {
+    for (const comp of comps) {
+      result.push(comp);
+      if (comp.components && comp.components.length > 0) {
+        traverse(comp.components);
+      }
+    }
+  }
+
+  traverse(components);
+  return result;
+}
+
+/**
+ * Find component by path (e.g., "0.1.2" for first component, second child, third grandchild)
+ */
+export function getComponentByPath(components: Component[], path: string): Component | null {
+  const indices = path.split('.').map(Number);
+  let current: Component[] = components;
+
+  for (let i = 0; i < indices.length; i++) {
+    const index = indices[i];
+    if (index === undefined || !current[index]) {
+      return null;
+    }
+
+    if (i === indices.length - 1) {
+      return current[index]!;
+    }
+
+    current = current[index]!.components || [];
+  }
+
+  return null;
+}
+
+/**
+ * Sanitize HTML string
+ */
+export function sanitizeHTML(html: string): string {
+  return html
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Extract all IDs from component tree
+ */
+export function extractComponentIds(components: Component[]): string[] {
+  const ids: string[] = [];
+
+  function traverse(comps: Component[]) {
+    for (const comp of comps) {
+      if (comp.attributes?.id) {
+        ids.push(comp.attributes.id as string);
+      }
+      if (comp.components && comp.components.length > 0) {
+        traverse(comp.components);
+      }
+    }
+  }
+
+  traverse(components);
+  return ids;
+}
+
+/**
+ * Merge CSS properties (later properties override earlier ones)
+ */
+export function mergeCSSProperties(...properties: CSSProperties[]): CSSProperties {
+  return Object.assign({}, ...properties);
+}
+
+/**
+ * Check if a selector is an ID selector
+ */
+export function isIdSelector(selector: string): boolean {
+  return selector.startsWith('#');
+}
+
+/**
+ * Check if a selector is a class selector
+ */
+export function isClassSelector(selector: string): boolean {
+  return selector.startsWith('.');
+}
+
+/**
+ * Parse selector to extract name
+ */
+export function parseSelector(selector: string): { type: 'id' | 'class' | 'tag' | 'complex'; name: string } {
+  if (isIdSelector(selector)) {
+    return { type: 'id', name: selector.substring(1) };
+  }
+  if (isClassSelector(selector)) {
+    return { type: 'class', name: selector.substring(1) };
+  }
+  if (selector.includes(' ') || selector.includes('>') || selector.includes('+')) {
+    return { type: 'complex', name: selector };
+  }
+  return { type: 'tag', name: selector };
+}
+
+/**
+ * Format file size in bytes to human-readable format
+ */
+export function formatFileSize(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(2)} ${units[unitIndex]}`;
+}
+
+/**
+ * Validate URL
+ */
+export function isValidURL(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Extract domain from URL
+ */
+export function extractDomain(url: string): string | null {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname;
+  } catch {
+    return null;
+  }
+}

package/src/utils/toolbar.ts

@@ -0,0 +1,140 @@
+import type { ToolbarConfig, ToolbarAction } from '../types';
+
+/**
+ * Default toolbar configurations
+ */
+
+/**
+ * Default toolbar actions available for all components
+ */
+export const defaultToolbarActions: ToolbarAction[] = [
+  {
+    id: 'edit',
+    label: 'Edit',
+    icon: '✏️',
+    enabled: true,
+    description: 'Edit component properties in sidebar',
+  },
+  {
+    id: 'editJS',
+    label: 'Edit JS',
+    icon: '📜',
+    enabled: true,
+    description: 'Edit component JavaScript with Monaco editor',
+  },
+  {
+    id: 'duplicate',
+    label: 'Duplicate',
+    icon: '📋',
+    enabled: true,
+    description: 'Create a copy of this component',
+  },
+  {
+    id: 'delete',
+    label: 'Delete',
+    icon: '🗑️',
+    enabled: true,
+    danger: true,
+    description: 'Remove this component from the page',
+  },
+];
+
+/**
+ * Default toolbar configuration
+ */
+export const defaultToolbarConfig: ToolbarConfig = {
+  enabled: true,
+  actions: defaultToolbarActions,
+};
+
+/**
+ * Create a custom toolbar config
+ */
+export function createToolbarConfig(
+  actions: ToolbarAction[],
+  enabled = true
+): ToolbarConfig {
+  return {
+    enabled,
+    actions,
+  };
+}
+
+/**
+ * Merge toolbar configs (later config overrides earlier)
+ */
+export function mergeToolbarConfigs(
+  base: ToolbarConfig,
+  override: Partial<ToolbarConfig>
+): ToolbarConfig {
+  return {
+    enabled: override.enabled ?? base.enabled,
+    actions: override.actions ?? base.actions,
+  };
+}
+
+/**
+ * Get enabled actions from a toolbar config
+ */
+export function getEnabledActions(config: ToolbarConfig): ToolbarAction[] {
+  return config.actions.filter((action) => action.enabled);
+}
+
+/**
+ * Find a specific action in toolbar config
+ */
+export function findToolbarAction(
+  config: ToolbarConfig,
+  actionId: string
+): ToolbarAction | null {
+  const action = config.actions.find((a) => a.id === actionId);
+  return action || null;
+}
+
+/**
+ * Preset toolbar configs for common scenarios
+ */
+export const toolbarPresets = {
+  /**
+   * Full toolbar with all actions
+   */
+  full: defaultToolbarConfig,
+
+  /**
+   * Read-only toolbar (only view actions)
+   */
+  readOnly: createToolbarConfig([
+    {
+      id: 'view',
+      label: 'View',
+      icon: '👁️',
+      enabled: true,
+      description: 'View component details',
+    },
+  ]),
+
+  /**
+   * Edit-only toolbar (no delete)
+   */
+  editOnly: createToolbarConfig([
+    { ...defaultToolbarActions[0]! }, // edit
+    { ...defaultToolbarActions[1]! }, // editJS
+    { ...defaultToolbarActions[2]! }, // duplicate
+  ]),
+
+  /**
+   * Minimal toolbar (edit and delete only)
+   */
+  minimal: createToolbarConfig([
+    { ...defaultToolbarActions[0]! }, // edit
+    { ...defaultToolbarActions[3]! }, // delete
+  ]),
+
+  /**
+   * Disabled toolbar
+   */
+  disabled: {
+    enabled: false,
+    actions: [],
+  },
+};