editor-ts 0.0.1 → 0.0.12

package/src/core/ComponentPalette.ts

@@ -0,0 +1,109 @@
+import type { Component, CustomComponentRegistry } from '../types';
+
+export type ComponentPaletteConfig = {
+  container: HTMLElement;
+  registry: CustomComponentRegistry;
+  onPick: (type: string) => void;
+};
+
+export class ComponentPalette {
+  private container: HTMLElement;
+  private registry: CustomComponentRegistry;
+  private onPick: (type: string) => void;
+  private selectedType: string | null = null;
+
+  constructor(config: ComponentPaletteConfig) {
+    this.container = config.container;
+    this.registry = config.registry;
+    this.onPick = config.onPick;
+
+    this.render();
+  }
+
+  updateRegistry(registry: CustomComponentRegistry): void {
+    this.registry = registry;
+    this.render();
+  }
+
+  setSelected(type: string | null): void {
+    this.selectedType = type;
+    this.render();
+  }
+
+  destroy(): void {
+    this.container.innerHTML = '';
+  }
+
+  private render(): void {
+    this.container.innerHTML = '';
+
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.flexWrap = 'wrap';
+    wrapper.style.gap = '0.5rem';
+    wrapper.style.alignItems = 'flex-start';
+
+    const types = Object.keys(this.registry).sort();
+
+    if (types.length === 0) {
+      this.container.textContent = 'No components available';
+      return;
+    }
+
+    types.forEach((type) => {
+      const def = this.registry[type];
+      if (!def) return;
+
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.style.border = '1px solid rgba(0,0,0,0.12)';
+      btn.style.borderRadius = '6px';
+      btn.style.padding = '0.5rem';
+      btn.style.background = 'white';
+      btn.style.cursor = 'pointer';
+      btn.style.fontSize = '0.75rem';
+      btn.style.width = '5.75rem';
+      btn.style.display = 'flex';
+      btn.style.flexDirection = 'column';
+      btn.style.alignItems = 'center';
+      btn.style.gap = '0.35rem';
+
+      const icon = document.createElement('div');
+      icon.style.width = '24px';
+      icon.style.height = '24px';
+      icon.style.display = 'flex';
+      icon.style.alignItems = 'center';
+      icon.style.justifyContent = 'center';
+      icon.style.color = '#111827';
+
+      if (typeof def.iconSvg === 'string' && def.iconSvg.trim() !== '') {
+        icon.innerHTML = def.iconSvg;
+      } else {
+        icon.textContent = '⬚';
+      }
+
+      const label = document.createElement('div');
+      label.textContent = def.label ?? type;
+      label.style.textAlign = 'center';
+      label.style.width = '100%';
+      label.style.overflow = 'hidden';
+      label.style.textOverflow = 'ellipsis';
+      label.style.whiteSpace = 'nowrap';
+
+      btn.appendChild(icon);
+      btn.appendChild(label);
+
+      btn.style.outline = this.selectedType === type ? '2px solid #3b82f6' : 'none';
+
+      btn.addEventListener('click', () => {
+        this.selectedType = type;
+        this.onPick(type);
+        this.render();
+      });
+
+      wrapper.appendChild(btn);
+    });
+
+    this.container.appendChild(wrapper);
+  }
+}

package/src/core/CustomComponentRegistry.ts

@@ -0,0 +1,74 @@
+import type { Component, CustomComponentRegistry, CustomComponentDefinition } from '../types';
+import { generateId } from '../utils/helpers';
+
+const placeholderImageSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">'
+  + '<rect width="640" height="360" rx="12" fill="#f3f4f6"/>'
+  + '<rect x="64" y="64" width="512" height="232" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="3"/>'
+  + '<clipPath id="imgClip"><rect x="64" y="64" width="512" height="232" rx="10" /></clipPath>'
+  + '<g clip-path="url(#imgClip)">'
+  + '<path d="M120 244l72-72 68 68 48-48 112 88" fill="none" stroke="#9ca3af" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>'
+  + '<circle cx="188" cy="140" r="18" fill="#9ca3af"/>'
+  + '</g>'
+  + '<text x="320" y="322" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="22" fill="#6b7280">Click to upload</text>'
+  + '</svg>';
+
+const placeholderImageDataUrl = `data:image/svg+xml,${encodeURIComponent(placeholderImageSvg)}`;
+
+export const defaultComponentFactories = {
+  box: () => ({
+    type: 'box',
+    tagName: 'div',
+    attributes: { id: generateId('box') },
+    style: 'min-height: 200px;',
+    components: [],
+  }),
+  text: () => ({
+    type: 'text',
+    tagName: 'div',
+    attributes: { id: generateId('text') },
+    content: 'Type something here…',
+  }),
+  image: () => ({
+    type: 'image',
+    tagName: 'img',
+    void: true,
+    attributes: { id: generateId('image'), src: placeholderImageDataUrl },
+  }),
+};
+
+export const defaultComponentRegistry: CustomComponentRegistry = {
+  box: {
+    type: 'box',
+    label: 'Box',
+    iconSvg:
+      '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>',
+    factory: defaultComponentFactories.box,
+  },
+  text: {
+    type: 'text',
+    label: 'Text',
+    iconSvg:
+      '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"/><path d="M10 6v12"/><path d="M14 6v12"/><path d="M4 18h16"/></svg>',
+    factory: defaultComponentFactories.text,
+  },
+  image: {
+    type: 'image',
+    label: 'Image',
+    iconSvg:
+      '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 14l2-2 3 3 2-2 3 3"/><circle cx="9" cy="9" r="1"/></svg>',
+    factory: defaultComponentFactories.image,
+  },
+};
+
+export function mergeCustomComponentRegistry(
+  baseRegistry: CustomComponentRegistry,
+  overrides?: CustomComponentRegistry
+): CustomComponentRegistry {
+  if (!overrides) return baseRegistry;
+  return { ...baseRegistry, ...overrides };
+}
+
+export function createCustomComponentDefinition(def: CustomComponentDefinition): CustomComponentDefinition {
+  return def;
+}

package/src/core/KeyboardShortcuts.ts

@@ -0,0 +1,220 @@
+import type { ShortcutDefinition } from '../types';
+
+export type ShortcutAction = () => void | Promise<void>;
+
+export type ShortcutContext = {
+  openCommandPalette: () => void;
+  undo: () => void | Promise<void>;
+  redo: () => void | Promise<void>;
+  deleteSelected: () => void | Promise<void>;
+};
+
+type ParsedShortcut = {
+  key: string;
+  ctrl: boolean;
+  meta: boolean;
+  alt: boolean;
+  shift: boolean;
+  mod: boolean;
+  action: () => void | Promise<void>;
+};
+
+type ModKey = 'ctrl' | 'meta' | 'alt';
+
+const normalizeKey = (value: string): string => {
+  const lowered = value.toLowerCase();
+  if (lowered === ' ') return 'space';
+  if (lowered === 'esc') return 'escape';
+  return lowered;
+};
+
+const parseShortcut = (shortcut: ShortcutDefinition): ParsedShortcut | null => {
+  const tokens = shortcut.key
+    .split(/[+-]/)
+    .map((token: string) => token.trim().toLowerCase())
+    .filter(Boolean);
+  if (tokens.length === 0) return null;
+
+  let key: string | null = null;
+  let ctrl = false;
+  let meta = false;
+  let alt = false;
+  let shift = false;
+  let mod = false;
+
+  tokens.forEach((token: string) => {
+    switch (token) {
+      case 'ctrl':
+      case 'control':
+        ctrl = true;
+        return;
+      case 'cmd':
+      case 'command':
+      case 'meta':
+        meta = true;
+        return;
+      case 'alt':
+      case 'option':
+        alt = true;
+        return;
+      case 'shift':
+        shift = true;
+        return;
+      case 'mod':
+        mod = true;
+        return;
+      default:
+        key = normalizeKey(token);
+        return;
+    }
+  });
+
+  if (!key) return null;
+
+  return {
+    key,
+    ctrl,
+    meta,
+    alt,
+    shift,
+    mod,
+    action: shortcut.action,
+  };
+};
+
+const isEditableTarget = (target: EventTarget | null): boolean => {
+  if (!target || !(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+
+  const tag = target.tagName.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select';
+};
+
+export const createDefaultShortcuts = (handlers: Partial<ShortcutContext>): ShortcutDefinition[] => {
+  const shortcuts: ShortcutDefinition[] = [];
+
+  if (handlers.openCommandPalette) {
+    shortcuts.push({ key: 'mod+p', action: handlers.openCommandPalette });
+  }
+
+  if (handlers.undo) {
+    shortcuts.push({ key: 'mod+z', action: handlers.undo });
+  }
+
+  if (handlers.redo) {
+    shortcuts.push({ key: 'mod+shift+z', action: handlers.redo });
+  }
+
+  if (handlers.deleteSelected) {
+    shortcuts.push({ key: 'delete', action: handlers.deleteSelected });
+    shortcuts.push({ key: 'backspace', action: handlers.deleteSelected });
+  }
+
+  return shortcuts;
+};
+
+export const createCommandPaletteShortcuts = (handlers: Pick<ShortcutContext, 'openCommandPalette'>): ShortcutDefinition[] => {
+  return [{ key: 'mod+p', action: handlers.openCommandPalette }];
+};
+
+export const createEditorShortcuts = (handlers: Omit<ShortcutContext, 'openCommandPalette'>): ShortcutDefinition[] => {
+  const shortcuts: ShortcutDefinition[] = [];
+
+  if (handlers.undo) {
+    shortcuts.push({ key: 'mod+z', action: handlers.undo });
+  }
+
+  if (handlers.redo) {
+    shortcuts.push({ key: 'mod+shift+z', action: handlers.redo });
+  }
+
+  if (handlers.deleteSelected) {
+    shortcuts.push({ key: 'delete', action: handlers.deleteSelected });
+    shortcuts.push({ key: 'backspace', action: handlers.deleteSelected });
+  }
+
+  return shortcuts;
+};
+
+export class KeyboardShortcuts {
+  private shortcuts: ParsedShortcut[] = [];
+  private shouldIgnore?: (event: KeyboardEvent) => boolean;
+  private boundHandler?: (event: KeyboardEvent) => void;
+  private targets = new Set<Document>();
+  private modKey: ModKey;
+
+  constructor(options: {
+    shortcuts: ShortcutDefinition[];
+    shouldIgnore?: (event: KeyboardEvent) => boolean;
+    modKey?: ModKey;
+  }) {
+    this.shortcuts = options.shortcuts
+      .map(parseShortcut)
+      .filter((shortcut): shortcut is ParsedShortcut => !!shortcut);
+    this.shouldIgnore = options.shouldIgnore;
+    this.modKey = options.modKey ?? 'ctrl';
+  }
+
+
+  bind(target: Document = document): void {
+    if (this.targets.has(target)) return;
+
+    if (!this.boundHandler) {
+      this.boundHandler = (event: KeyboardEvent) => {
+        if (this.shouldIgnore?.(event)) return;
+
+        if (isEditableTarget(event.target) && !event.metaKey && !event.ctrlKey) {
+          return;
+        }
+
+        const normalizedKey = normalizeKey(event.key);
+
+        for (const shortcut of this.shortcuts) {
+          if (shortcut.key !== normalizedKey) continue;
+
+          const modPressed = this.modKey === 'meta'
+            ? event.metaKey
+            : this.modKey === 'alt'
+              ? event.altKey
+              : event.ctrlKey;
+          if (shortcut.mod && !modPressed) continue;
+          if (shortcut.ctrl && !event.ctrlKey) continue;
+          if (shortcut.meta && !event.metaKey) continue;
+          if (shortcut.alt && !event.altKey) continue;
+          if (shortcut.shift && !event.shiftKey) continue;
+
+          event.preventDefault();
+          const result = shortcut.action();
+          if (result && typeof (result as Promise<void>).then === 'function') {
+            void (result as Promise<void>);
+          }
+          return;
+        }
+      };
+    }
+
+    this.targets.add(target);
+    (target as Document & { __editortsShortcutsBound?: boolean }).__editortsShortcutsBound = true;
+    target.addEventListener('keydown', this.boundHandler);
+  }
+
+  unbind(target?: Document): void {
+    if (!this.boundHandler) return;
+
+    if (target) {
+      if (this.targets.has(target)) {
+        target.removeEventListener('keydown', this.boundHandler);
+        this.targets.delete(target);
+      }
+    } else {
+      this.targets.forEach((doc) => {
+        doc.removeEventListener('keydown', this.boundHandler!);
+      });
+      this.targets.clear();
+    }
+
+    if (this.targets.size === 0) {
+      this.boundHandler = undefined;
+    }
+  }
+}