editor-ts 0.0.1

package/src/core/ComponentManager.ts

@@ -0,0 +1,206 @@
+import type { PageBody, Component, ComponentQuery } from '../types';
+
+/**
+ * Manager for handling component operations
+ */
+export class ComponentManager {
+  private body: PageBody;
+  private parsedComponents: Component[];
+
+  constructor(body: PageBody) {
+    this.body = body;
+    this.parsedComponents = this.parse();
+  }
+
+  /**
+   * Parse components from JSON string
+   */
+  private parse(): Component[] {
+    try {
+      return JSON.parse(this.body.components) as Component[];
+    } catch (error) {
+      console.error('Failed to parse components:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Find components by query
+   */
+  find(query: ComponentQuery): Component[] {
+    return this.findInTree(this.parsedComponents, query);
+  }
+
+  /**
+   * Recursively search component tree
+   */
+  private findInTree(components: Component[], query: ComponentQuery): Component[] {
+    const results: Component[] = [];
+
+    for (const component of components) {
+      let matches = true;
+
+      // Check ID
+      if (query.id && component.attributes?.id !== query.id) {
+        matches = false;
+      }
+
+      // Check type
+      if (query.type && component.type !== query.type) {
+        matches = false;
+      }
+
+      // Check tagName
+      if (query.tagName && component.tagName !== query.tagName) {
+        matches = false;
+      }
+
+      // Check attributes
+      if (query.attributes && matches) {
+        for (const [key, value] of Object.entries(query.attributes)) {
+          if (component.attributes?.[key] !== value) {
+            matches = false;
+            break;
+          }
+        }
+      }
+
+      if (matches) {
+        results.push(component);
+      }
+
+      // Search in nested components
+      if (component.components && component.components.length > 0) {
+        results.push(...this.findInTree(component.components, query));
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * Find a single component by ID
+   */
+  findById(id: string): Component | null {
+    const results = this.find({ id });
+    return results.length > 0 ? results[0]! : null;
+  }
+
+  /**
+   * Find components by type
+   */
+  findByType(type: string): Component[] {
+    return this.find({ type });
+  }
+
+  /**
+   * Find components by tag name
+   */
+  findByTagName(tagName: string): Component[] {
+    return this.find({ tagName });
+  }
+
+  /**
+   * Add a component to the root level
+   */
+  addComponent(component: Component): void {
+    this.parsedComponents.push(component);
+  }
+
+  /**
+   * Add a component as a child of another component
+   */
+  addChildComponent(parentId: string, component: Component): boolean {
+    const parent = this.findById(parentId);
+    if (parent) {
+      if (!parent.components) {
+        parent.components = [];
+      }
+      parent.components.push(component);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Remove a component by ID
+   */
+  removeComponent(id: string): boolean {
+    return this.removeFromTree(this.parsedComponents, id);
+  }
+
+  /**
+   * Recursively remove component from tree
+   */
+  private removeFromTree(components: Component[], id: string): boolean {
+    for (let i = 0; i < components.length; i++) {
+      const component = components[i];
+      
+      if (component?.attributes?.id === id) {
+        components.splice(i, 1);
+        return true;
+      }
+
+      if (component?.components && component.components.length > 0) {
+        if (this.removeFromTree(component.components, id)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Update a component's attributes
+   */
+  updateComponent(id: string, updates: Partial<Component>): boolean {
+    const component = this.findById(id);
+    if (component) {
+      Object.assign(component, updates);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Get all components
+   */
+  getAll(): Component[] {
+    return this.parsedComponents;
+  }
+
+  /**
+   * Get component count
+   */
+  count(): number {
+    return this.countInTree(this.parsedComponents);
+  }
+
+  /**
+   * Recursively count components
+   */
+  private countInTree(components: Component[]): number {
+    let count = components.length;
+    for (const component of components) {
+      if (component.components && component.components.length > 0) {
+        count += this.countInTree(component.components);
+      }
+    }
+    return count;
+  }
+
+  /**
+   * Sync changes back to page body
+   */
+  sync(): void {
+    this.body.components = JSON.stringify(this.parsedComponents);
+  }
+
+  /**
+   * Replace all components
+   */
+  replaceAll(components: Component[]): void {
+    this.parsedComponents = components;
+  }
+}

package/src/core/Page.ts

@@ -0,0 +1,138 @@
+import type { PageData, PageBody } from '../types';
+import { ComponentManager } from './ComponentManager';
+import { StyleManager } from './StyleManager';
+import { AssetManager } from './AssetManager';
+import { ToolbarManager } from './ToolbarManager';
+
+/**
+ * Main class for managing page content
+ */
+export class Page {
+  private data: PageData;
+  public components: ComponentManager;
+  public styles: StyleManager;
+  public assets: AssetManager;
+  public toolbars: ToolbarManager;
+
+  constructor(pageData: PageData | string) {
+    if (typeof pageData === 'string') {
+      this.data = JSON.parse(pageData) as PageData;
+    } else {
+      this.data = pageData;
+    }
+
+    // Initialize managers
+    this.components = new ComponentManager(this.data.body);
+    this.styles = new StyleManager(this.data.body);
+    this.assets = new AssetManager(this.data.body);
+    this.toolbars = new ToolbarManager();
+  }
+
+  /**
+   * Get the page title
+   */
+  getTitle(): string {
+    return this.data.title;
+  }
+
+  /**
+   * Set the page title
+   */
+  setTitle(title: string): void {
+    this.data.title = title;
+  }
+
+  /**
+   * Get the page item ID
+   */
+  getItemId(): number {
+    return this.data.item_id;
+  }
+
+  /**
+   * Set the page item ID
+   */
+  setItemId(itemId: number): void {
+    this.data.item_id = itemId;
+  }
+
+  /**
+   * Get the raw HTML
+   */
+  getHTML(): string {
+    return this.data.body.html;
+  }
+
+  /**
+   * Set the raw HTML
+   */
+  setHTML(html: string): void {
+    this.data.body.html = html;
+  }
+
+  /**
+   * Get the compiled CSS
+   */
+  getCSS(): string {
+    return this.data.body.css;
+  }
+
+  /**
+   * Set the compiled CSS
+   */
+  setCSS(css: string): void {
+    this.data.body.css = css;
+  }
+
+  /**
+   * Get the page body
+   */
+  getBody(): PageBody {
+    return this.data.body;
+  }
+
+  /**
+   * Export the page as JSON string
+   */
+  toJSON(): string {
+    // Sync all managers back to data
+    this.components.sync();
+    this.styles.sync();
+    this.assets.sync();
+    
+    return JSON.stringify(this.data, null, 2);
+  }
+
+  /**
+   * Export the page as object
+   */
+  toObject(): PageData {
+    // Sync all managers back to data
+    this.components.sync();
+    this.styles.sync();
+    this.assets.sync();
+    
+    return this.data;
+  }
+
+  /**
+   * Load page from JSON file
+   */
+  static fromJSON(json: string): Page {
+    return new Page(json);
+  }
+
+  /**
+   * Clone the page
+   */
+  clone(): Page {
+    return new Page(JSON.parse(JSON.stringify(this.data)));
+  }
+
+  /**
+   * Get raw page data
+   */
+  getRawData(): PageData {
+    return this.data;
+  }
+}

package/src/core/StyleManager.ts

@@ -0,0 +1,221 @@
+import type { PageBody, Style, StyleQuery, CSSProperties } from '../types';
+
+/**
+ * Manager for handling CSS styles
+ */
+export class StyleManager {
+  private body: PageBody;
+  private styles: Style[];
+
+  constructor(body: PageBody) {
+    this.body = body;
+    this.styles = body.styles || [];
+  }
+
+  /**
+   * Find styles by query
+   */
+  find(query: StyleQuery): Style[] {
+    return this.styles.filter((style) => {
+      let matches = true;
+
+      // Check selector
+      if (query.selector) {
+        const hasSelector = style.selectors.some((sel) => {
+          if (typeof sel === 'string') {
+            return sel === query.selector || sel.includes(query.selector!);
+          }
+          return sel.name === query.selector;
+        });
+        
+        if (!hasSelector && style.selectorsAdd !== query.selector) {
+          matches = false;
+        }
+      }
+
+      // Check media query
+      if (query.mediaText && style.mediaText !== query.mediaText) {
+        matches = false;
+      }
+
+      // Check state
+      if (query.state && style.state !== query.state) {
+        matches = false;
+      }
+
+      return matches;
+    });
+  }
+
+  /**
+   * Find styles for a specific selector
+   */
+  findBySelector(selector: string): Style[] {
+    return this.find({ selector });
+  }
+
+  /**
+   * Find styles for a media query
+   */
+  findByMedia(mediaText: string): Style[] {
+    return this.find({ mediaText });
+  }
+
+  /**
+   * Add a new style rule
+   */
+  addStyle(style: Style): void {
+    this.styles.push(style);
+  }
+
+  /**
+   * Remove styles by selector
+   */
+  removeBySelector(selector: string): number {
+    const initialLength = this.styles.length;
+    this.styles = this.styles.filter((style) => {
+      const hasSelector = style.selectors.some((sel) => {
+        if (typeof sel === 'string') {
+          return sel === selector;
+        }
+        return sel.name === selector;
+      });
+      return !hasSelector && style.selectorsAdd !== selector;
+    });
+    return initialLength - this.styles.length;
+  }
+
+  /**
+   * Update styles for a selector
+   */
+  updateStyle(selector: string, properties: CSSProperties, options?: { mediaText?: string; state?: string }): boolean {
+    const matchingStyles = this.styles.filter((style) => {
+      const hasSelector = style.selectors.some((sel) => {
+        if (typeof sel === 'string') {
+          return sel === selector;
+        }
+        return sel.name === selector;
+      }) || style.selectorsAdd === selector;
+
+      if (!hasSelector) return false;
+
+      // Check media query if specified
+      if (options?.mediaText && style.mediaText !== options.mediaText) {
+        return false;
+      }
+
+      // Check state if specified
+      if (options?.state && style.state !== options.state) {
+        return false;
+      }
+
+      return true;
+    });
+
+    if (matchingStyles.length > 0) {
+      matchingStyles.forEach((style) => {
+        Object.assign(style.style, properties);
+      });
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Get style properties for a selector
+   */
+  getStyleProperties(selector: string, options?: { mediaText?: string; state?: string }): CSSProperties | null {
+    const styles = this.find({ selector, ...options });
+    if (styles.length > 0) {
+      return styles[0]!.style;
+    }
+    return null;
+  }
+
+  /**
+   * Get all styles
+   */
+  getAll(): Style[] {
+    return this.styles;
+  }
+
+  /**
+   * Get style count
+   */
+  count(): number {
+    return this.styles.length;
+  }
+
+  /**
+   * Compile styles to CSS string
+   */
+  compileToCSS(): string {
+    const cssRules: string[] = [];
+
+    for (const style of this.styles) {
+      const selector = this.buildSelector(style);
+      const properties = this.buildProperties(style.style);
+      const rule = `${selector}{${properties}}`;
+
+      if (style.atRuleType === 'media' && style.mediaText) {
+        cssRules.push(`@media ${style.mediaText}{${rule}}`);
+      } else {
+        cssRules.push(rule);
+      }
+    }
+
+    return cssRules.join('');
+  }
+
+  /**
+   * Build selector string from style
+   */
+  private buildSelector(style: Style): string {
+    if (style.selectorsAdd) {
+      let selector = style.selectorsAdd;
+      if (style.state) {
+        selector += `:${style.state}`;
+      }
+      return selector;
+    }
+
+    const selectors = style.selectors.map((sel) => {
+      if (typeof sel === 'string') {
+        return sel;
+      }
+      return sel.name;
+    });
+
+    let selector = selectors.join(', ');
+    if (style.state) {
+      selector = selectors.map((s) => `${s}:${style.state}`).join(', ');
+    }
+
+    return selector;
+  }
+
+  /**
+   * Build CSS properties string
+   */
+  private buildProperties(properties: CSSProperties): string {
+    return Object.entries(properties)
+      .map(([key, value]) => `${key}:${value};`)
+      .join('');
+  }
+
+  /**
+   * Sync changes back to page body
+   */
+  sync(): void {
+    this.body.styles = this.styles;
+    this.body.css = this.compileToCSS();
+  }
+
+  /**
+   * Replace all styles
+   */
+  replaceAll(styles: Style[]): void {
+    this.styles = styles;
+  }
+}