@ashraf_mizo/htmlcanvas 1.0.0

package/editor/textEdit.js

@@ -0,0 +1,538 @@
+// editor/textEdit.js — Inline text editing via contenteditable
+//
+// Exports:
+//   initTextEdit(iframe, iframeDoc, canvasArea)  — attach click listener on selection overlay
+//   isTextEditActive()                           — returns true while a text edit session is open
+//
+// Lifecycle:
+//   1. User clicks the selected text element (via drag surface click with no drag)
+//   2. enterTextMode() suspends shortcuts, makes element contenteditable, focuses it
+//   3. Cursor is positioned at the click location (not select-all)
+//   4. User types; existing shortcuts (Delete, Ctrl+Z) operate on text content
+//   5. blur or Escape calls exitTextMode()
+//   6. If text changed, a Command is pushed to history (with recordChange for serializer)
+//   7. If text unchanged, no Command is created (no pollution)
+
+import { suspendShortcuts, resumeShortcuts } from './shortcuts.js';
+import { push } from './history.js';
+import { recordChange } from './serializer.js';
+import { getSelectedElement, getSelectedHcId } from './selection.js';
+
+// ── Module state ──────────────────────────────────────────────────────────────
+
+let _textEditActive = false;
+let _currentElement = null;
+let _currentHcId    = null;
+let _beforeHTML     = null;
+
+// Stored listener references for clean removal
+let _blurHandler    = null;
+let _keydownHandler = null;
+let _mouseupHandler = null;
+
+// Blur suppression: when user clicks on the properties panel, we suppress
+// the blur event so contenteditable stays active, then re-focus the element.
+let _suppressBlur = false;
+
+
+// Saved selection range: preserved when element loses focus so properties
+// panel controls (color picker, font picker) can still apply inline styles.
+let _savedRange = null;
+
+// ── Exported state query ──────────────────────────────────────────────────────
+
+/**
+ * Returns true while an inline text edit session is active.
+ * Used by editor.js to guard selection clicks during text editing.
+ *
+ * @returns {boolean}
+ */
+export function isTextEditActive() {
+  return _textEditActive;
+}
+
+// ── Core lifecycle ────────────────────────────────────────────────────────────
+
+/**
+ * Enters text editing mode for the given element.
+ * - Suspends all keyboard shortcuts so Delete/Ctrl+Z operate on text
+ * - Makes the element contenteditable and focuses it
+ * - Positions cursor at click location (or selects all if no coords given)
+ * - Hides the selection overlay (avoids pointer-events interference)
+ *
+ * @param {Element} element   - The DOM element inside the iframe to edit
+ * @param {string}  hcId      - Its data-hc-id (for Command / serializer)
+ * @param {{ clientX: number, clientY: number }|null} [clickCoords] - Click position for cursor placement
+ */
+function enterTextMode(element, hcId, clickCoords) {
+  if (_textEditActive) return; // already in a session
+
+  _textEditActive  = true;
+  _currentElement  = element;
+  _currentHcId     = hcId;
+  _beforeHTML      = element.innerHTML;
+
+  // Suspend editor shortcuts so keys operate on text content
+  suspendShortcuts();
+
+  // Hide the selection overlay to remove its pointer-events layer
+  const overlay = document.getElementById('selection-overlay');
+  if (overlay) overlay.style.display = 'none';
+
+  // Make the element editable and focus it
+  element.contentEditable = 'true';
+  element.focus();
+
+  // Position cursor at click location, or select all if no coords given
+  try {
+    const doc = element.ownerDocument;
+    const sel = doc.getSelection();
+
+    if (clickCoords && sel) {
+      // Convert canvas-area coords to iframe-document coords
+      const iframe = document.getElementById('render-iframe');
+      const iframeRect = iframe.getBoundingClientRect();
+      const iframeX = clickCoords.clientX - iframeRect.left;
+      const iframeY = clickCoords.clientY - iframeRect.top;
+
+      // Use caretRangeFromPoint to find the exact text position
+      let range = null;
+      if (doc.caretRangeFromPoint) {
+        range = doc.caretRangeFromPoint(iframeX, iframeY);
+      } else if (doc.caretPositionFromPoint) {
+        const pos = doc.caretPositionFromPoint(iframeX, iframeY);
+        if (pos) {
+          range = doc.createRange();
+          range.setStart(pos.offsetNode, pos.offset);
+          range.collapse(true);
+        }
+      }
+
+      if (range) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+      } else {
+        // Fallback: place cursor at end
+        const fallbackRange = doc.createRange();
+        fallbackRange.selectNodeContents(element);
+        fallbackRange.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(fallbackRange);
+      }
+    } else if (sel) {
+      // No click coords — select all (e.g. triggered from properties panel button)
+      const range = doc.createRange();
+      range.selectNodeContents(element);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  } catch (_) {
+    // Non-critical — editing still works if selection fails
+  }
+
+  // Exit on blur (click away) — unless the user clicked the properties panel
+  _blurHandler = () => {
+    if (_suppressBlur) {
+      _suppressBlur = false;
+      // Save the current text selection before it gets cleared by blur
+      try {
+        const doc = _currentElement.ownerDocument;
+        const sel = doc.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          _savedRange = sel.getRangeAt(0).cloneRange();
+        }
+      } catch (_) {}
+      // Check if focus moved to a control inside the properties panel.
+      // If so, don't steal focus back — let the user interact with the control.
+      setTimeout(() => {
+        if (!_textEditActive || !_currentElement) return;
+        const active = document.activeElement;
+        const propsPanel = document.querySelector('.panel-properties');
+        if (propsPanel && propsPanel.contains(active)) return; // dropdown/input has focus
+        _currentElement.focus();
+        _restoreSavedRange();
+      }, 0);
+      return;
+    }
+    exitTextMode();
+  };
+  element.addEventListener('blur', _blurHandler);
+
+  // Handle special keys during text editing
+  _keydownHandler = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      exitTextMode();
+      return;
+    }
+    // Insert <br> on Enter instead of letting the browser create new <div> elements
+    // (new divs would become separately selectable items in the editor)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const doc = element.ownerDocument;
+      const sel = doc.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        const br = doc.createElement('br');
+        range.insertNode(br);
+        // Move cursor after the <br>
+        range.setStartAfter(br);
+        range.setEndAfter(br);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      return;
+    }
+    // After any key that changes the selection (Ctrl+A, Shift+arrows, etc.),
+    // update _savedRange so panel operations have the latest selection.
+    // Use a microtask so the browser processes the key first.
+    if ((e.ctrlKey || e.metaKey || e.shiftKey) && !e.altKey) {
+      setTimeout(() => {
+        if (!_textEditActive || !_currentElement) return;
+        try {
+          const doc = _currentElement.ownerDocument;
+          const sel = doc.getSelection();
+          if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+            _savedRange = sel.getRangeAt(0).cloneRange();
+          }
+        } catch (_) {}
+      }, 0);
+    }
+  };
+  element.addEventListener('keydown', _keydownHandler);
+
+  // Save selection on mouseup (captures click-drag text selections)
+  _mouseupHandler = () => {
+    try {
+      const doc = element.ownerDocument;
+      const sel = doc.getSelection();
+      if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+        _savedRange = sel.getRangeAt(0).cloneRange();
+      }
+    } catch (_) {}
+  };
+  element.addEventListener('mouseup', _mouseupHandler);
+}
+
+/**
+ * Exits text editing mode and commits any changes as a single undoable Command.
+ * - Re-enables keyboard shortcuts
+ * - Creates a Command only if text content changed
+ * - Calls recordChange so the serializer can patch the source file
+ * - Restores the selection overlay
+ */
+function exitTextMode() {
+  if (!_textEditActive) return; // prevent double-commit
+
+  _textEditActive = false;
+
+  // Remove event listeners before we lose the references
+  if (_currentElement) {
+    if (_blurHandler)    _currentElement.removeEventListener('blur',    _blurHandler);
+    if (_keydownHandler) _currentElement.removeEventListener('keydown', _keydownHandler);
+    if (_mouseupHandler) _currentElement.removeEventListener('mouseup', _mouseupHandler);
+  }
+  _blurHandler    = null;
+  _keydownHandler = null;
+  _mouseupHandler = null;
+
+  // Remove contenteditable
+  if (_currentElement) {
+    _currentElement.contentEditable = 'false';
+  }
+
+  // Re-enable shortcuts
+  resumeShortcuts();
+
+  // Capture current text and compare
+  const afterHTML = _currentElement ? _currentElement.innerHTML : null;
+
+  if (afterHTML !== null && afterHTML !== _beforeHTML) {
+    // Capture into locals so Command closures don't reference module state
+    const el        = _currentElement;
+    const hcId      = _currentHcId;
+    const before    = _beforeHTML;
+    const after     = afterHTML;
+
+    // Push to history BEFORE recording change — push() calls execute() which
+    // would double-apply the change. Since the text is already applied, we push
+    // a command whose execute() re-applies it (for redo) and undo() restores it.
+    //
+    // We do NOT call push(cmd) here (that would call execute() again).
+    // Instead we directly add to the undo stack via a manual approach.
+    // However, history.js's push() always calls execute(). We must work around
+    // this: the Command's execute() should be idempotent when text is already applied.
+    //
+    // Solution: execute() sets innerHTML = after (already the case, harmless no-op on
+    // first call); undo() sets innerHTML = before. This is safe.
+
+    const cmd = {
+      description: 'Edit text',
+      execute() {
+        el.innerHTML = after;
+        recordChange(hcId, el.outerHTML);
+      },
+      undo() {
+        el.innerHTML = before;
+        recordChange(hcId, el.outerHTML);
+      }
+    };
+
+    // push() calls cmd.execute() which re-applies innerHTML = after (harmless no-op
+    // since the element already has `after` as its innerHTML from user typing).
+    push(cmd);
+
+  }
+  // No else needed — if text unchanged, we intentionally create no Command
+
+  // Capture element/hcId before clearing (needed for events below)
+  const exitElement = _currentElement;
+  const exitHcId    = _currentHcId;
+
+  // Clear references
+  _currentElement = null;
+  _currentHcId    = null;
+  _beforeHTML     = null;
+  _savedRange     = null;
+
+  // Restore the selection overlay and re-populate properties panel
+  window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  if (exitElement && exitHcId) {
+    window.dispatchEvent(new CustomEvent('hc:selection-changed', {
+      detail: { hcId: exitHcId, element: exitElement }
+    }));
+  }
+}
+
+// ── Selection range helpers ───────────────────────────────────────────────
+
+/**
+ * Restores a previously saved text selection range inside the current element.
+ */
+function _restoreSavedRange() {
+  if (!_savedRange || !_currentElement) return;
+  try {
+    const doc = _currentElement.ownerDocument;
+    const sel = doc.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(_savedRange);
+    }
+  } catch (_) {}
+}
+
+// ── Inline style application ─────────────────────────────────────────────────
+
+/**
+ * Applies a CSS style to the currently selected text within the contenteditable
+ * element. Wraps the selection in a <span> with the given inline style.
+ *
+ * If the selection is collapsed (no text highlighted), does nothing.
+ * If the selection covers the entire element, applies to the element directly
+ * (or to a single wrapper span if one exists) to avoid unnecessary nesting.
+ * If the selection is within an existing <span>, modifies that span's style.
+ *
+ * @param {string} cssProp  - CSS property name (e.g. 'color', 'font-size')
+ * @param {string} value    - CSS value to apply (e.g. '#ff0000', '24px')
+ * @returns {boolean} true if style was applied
+ */
+export function applyStyleToSelection(cssProp, value) {
+  if (!_textEditActive || !_currentElement) return false;
+
+  const doc = _currentElement.ownerDocument;
+  const sel = doc.getSelection();
+
+  // If the live selection is collapsed (lost focus to color picker etc.),
+  // refocus the element first so the iframe's selection API works, then
+  // restore from the saved range.
+  if (sel && (sel.rangeCount === 0 || sel.isCollapsed) && _savedRange) {
+    _currentElement.focus();
+    try {
+      sel.removeAllRanges();
+      sel.addRange(_savedRange);
+    } catch (_) {}
+  }
+
+  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return false;
+
+  const range = sel.getRangeAt(0);
+
+  // ── Check if selection covers the entire element content ──
+  // If so, apply style directly to the element (or its single wrapper span)
+  // to avoid creating unnecessary nested spans on every "select all" + style change.
+  const coversAll = _selectionCoversAll(range, _currentElement);
+  if (coversAll) {
+    // If the element has exactly one child and it's a <span>, modify that span
+    const kids = _currentElement.childNodes;
+    if (kids.length === 1 && kids[0].nodeType === 1 && kids[0].tagName === 'SPAN') {
+      kids[0].style.setProperty(cssProp, value);
+    } else {
+      // Apply directly to the element itself
+      _currentElement.style.setProperty(cssProp, value);
+    }
+    // Keep the full selection active
+    _savedRange = range.cloneRange();
+    return true;
+  }
+
+  // ── Check if selection is within a single existing <span> ──
+  const container = range.commonAncestorContainer;
+  const parentSpan = container.nodeType === 3
+    ? container.parentElement
+    : container;
+
+  if (parentSpan && parentSpan.tagName === 'SPAN' && parentSpan !== _currentElement) {
+    // Modify existing span's style instead of double-wrapping
+    parentSpan.style.setProperty(cssProp, value);
+  } else {
+    // Wrap selection in a new <span>
+    const span = doc.createElement('span');
+    span.style.setProperty(cssProp, value);
+
+    try {
+      const fragment = range.extractContents();
+      span.appendChild(fragment);
+      range.insertNode(span);
+
+      // Re-select the span contents so the user sees the selection preserved
+      sel.removeAllRanges();
+      const newRange = doc.createRange();
+      newRange.selectNodeContents(span);
+      sel.addRange(newRange);
+    } catch (_) {
+      return false;
+    }
+  }
+
+  // Update saved range so subsequent panel operations still have a valid range
+  try { _savedRange = sel.getRangeAt(0).cloneRange(); } catch (_) {}
+
+  return true;
+}
+
+/**
+ * Returns true if the given Range covers the entire content of the element.
+ * Handles both text-only and mixed content (spans, br, etc.).
+ */
+function _selectionCoversAll(range, element) {
+  try {
+    // Quick check: does the range start at the beginning and end at the end?
+    const testRange = element.ownerDocument.createRange();
+    testRange.selectNodeContents(element);
+
+    // compareBoundaryPoints: 0 = START_TO_START, 2 = END_TO_END
+    const startsAtBeginning = range.compareBoundaryPoints(Range.START_TO_START, testRange) <= 0;
+    const endsAtEnd         = range.compareBoundaryPoints(Range.END_TO_END, testRange) >= 0;
+    return startsAtBeginning && endsAtEnd;
+  } catch (_) {
+    return false;
+  }
+}
+
+// ── Initialisation ────────────────────────────────────────────────────────────
+
+// Non-text tags that should NOT enter text editing mode on click
+const NON_TEXT_TAGS = new Set(['img', 'svg', 'video', 'canvas', 'iframe', 'hr']);
+
+/**
+ * Returns true if the element is text-editable (not an image, SVG, video, etc.)
+ */
+function isTextElement(el) {
+  return !NON_TEXT_TAGS.has(el.tagName.toLowerCase());
+}
+
+/**
+ * Initialises the text editing module.
+ * Listens for single-click on the drag surface (via hc:drag-surface-click from
+ * manipulation.js) to enter text edit mode for text elements. Also supports
+ * double-click as fallback and the properties panel "Edit Text" button.
+ *
+ * @param {HTMLIFrameElement} _iframe      - The render iframe (unused, reserved for future use)
+ * @param {Document}          _iframeDoc   - The iframe's contentDocument (unused, reserved)
+ * @param {HTMLElement}       _canvasArea  - The canvas wrapper element (unused, reserved)
+ */
+export function initTextEdit(_iframe, _iframeDoc, _canvasArea) {
+  const dragSurface = document.querySelector('.sel-drag-surface');
+  if (!dragSurface) {
+    console.warn('textEdit: .sel-drag-surface not found — text editing unavailable');
+    return;
+  }
+
+  // Suppress blur when clicking on the properties panel (so text edit stays active)
+  const propsPanel = document.querySelector('.panel-properties');
+  if (propsPanel) {
+    propsPanel.addEventListener('mousedown', () => {
+      if (!_textEditActive || !_currentElement) return;
+      _suppressBlur = true;
+      // Save the selection NOW (while the element still has focus) as a backup.
+      // The blur handler also saves, but by blur-time the iframe's selection
+      // may already be cleared in some browsers.
+      try {
+        const doc = _currentElement.ownerDocument;
+        const sel = doc.getSelection();
+        if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+          _savedRange = sel.getRangeAt(0).cloneRange();
+        }
+      } catch (_) {}
+    });
+
+    // When focus leaves the properties panel entirely (e.g. after closing the OS
+    // color picker), exit text mode if focus didn't return to the text element.
+    // Without this, shortcuts (Ctrl+Z) stay suspended indefinitely.
+    propsPanel.addEventListener('focusout', (e) => {
+      if (!_textEditActive || !_currentElement) return;
+      // relatedTarget is where focus is going. If it's still inside the panel, stay active.
+      if (e.relatedTarget && propsPanel.contains(e.relatedTarget)) return;
+      // Give focus a tick to potentially land back on the text element
+      setTimeout(() => {
+        if (!_textEditActive || !_currentElement) return;
+        const active = document.activeElement;
+        // If active element is not the text element and not in the panel, exit
+        if (active !== _currentElement && !(propsPanel.contains(active))) {
+          exitTextMode();
+        }
+      }, 100);
+    });
+  }
+
+  // Exit text mode when selection is cleared (canvas background click).
+  // Prevents shortcuts from staying suspended after the user clicks away.
+  window.addEventListener('hc:selection-cleared', () => {
+    if (_textEditActive) exitTextMode();
+  });
+
+  // Single click on drag surface (no drag movement) — enter text edit for text elements
+  window.addEventListener('hc:drag-surface-click', (e) => {
+    const el   = getSelectedElement();
+    const hcId = getSelectedHcId();
+    if (!el || !hcId) return;
+
+    if (isTextElement(el)) {
+      enterTextMode(el, hcId, e.detail);
+    }
+  });
+
+  // Double-click on drag surface — enter text edit for text elements,
+  // or escalate to parent for non-text elements (handled by selection.js)
+  dragSurface.addEventListener('dblclick', (e) => {
+    const el   = getSelectedElement();
+    const hcId = getSelectedHcId();
+    if (!el || !hcId) return;
+
+    if (isTextElement(el)) {
+      e.stopImmediatePropagation();
+      enterTextMode(el, hcId);
+    }
+    // For non-text elements, let the event propagate to selection.js parent escalation
+  });
+
+  // Listen for "Edit Text" button click from properties panel
+  window.addEventListener('hc:request-text-edit', () => {
+    const el   = getSelectedElement();
+    const hcId = getSelectedHcId();
+    if (!el || !hcId) return;
+    enterTextMode(el, hcId);
+  });
+}

package/editor/zoom.js

@@ -0,0 +1,96 @@
+// editor/zoom.js — Zoom controls for the canvas
+
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 10.0;
+const ZOOM_STEP = 0.1;
+const ZOOM_DEFAULT = 1.0;
+
+let _zoom = ZOOM_DEFAULT;
+let _iframeContainer = null;
+let _onZoomChange = null;
+
+/**
+ * Initializes the zoom module.
+ *
+ * @param {HTMLElement} iframeContainer - The #iframe-container element
+ * @param {function} onZoomChange - Callback called with the new zoom level
+ */
+export function initZoom(iframeContainer, onZoomChange) {
+  _iframeContainer = iframeContainer;
+  _onZoomChange = onZoomChange;
+  applyZoom();
+}
+
+/**
+ * Returns the current zoom level (1.0 = 100%).
+ */
+export function getZoom() {
+  return _zoom;
+}
+
+/**
+ * Sets the zoom level to an exact value.
+ * Clamps to [ZOOM_MIN, ZOOM_MAX].
+ *
+ * @param {number} level - The desired zoom level (e.g., 1.5 for 150%)
+ */
+export function setZoom(level) {
+  _zoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, level));
+  applyZoom();
+}
+
+/**
+ * Zooms in by one step (ZOOM_STEP).
+ */
+export function zoomIn() {
+  setZoom(_zoom + ZOOM_STEP);
+}
+
+/**
+ * Zooms out by one step (ZOOM_STEP).
+ */
+export function zoomOut() {
+  setZoom(_zoom - ZOOM_STEP);
+}
+
+/**
+ * Resets zoom to 100%.
+ */
+export function zoomReset() {
+  setZoom(ZOOM_DEFAULT);
+}
+
+/**
+ * Zooms to fit the content width in the canvas area.
+ *
+ * @param {number} contentWidth - The natural width of the iframe content (e.g., 794 for A4)
+ * @param {number} canvasWidth - The visible width of the canvas area
+ */
+export function zoomToFit(contentWidth, canvasWidth) {
+  const padding = 80; // 40px padding each side
+  const fitZoom = (canvasWidth - padding) / contentWidth;
+  setZoom(fitZoom);
+}
+
+/**
+ * Applies the current zoom level to the iframe container via CSS transform.
+ *
+ * Uses `scale()` with `transform-origin: top center` (set in CSS).
+ * Container is centered via `margin: auto`.
+ */
+function applyZoom() {
+  if (!_iframeContainer) return;
+  _iframeContainer.style.transform = `scale(${_zoom})`;
+
+  // CSS scale doesn't change layout box size — adjust margins so
+  // the canvas area scrolls to reveal the full scaled content
+  const naturalW = _iframeContainer.offsetWidth;
+  const naturalH = _iframeContainer.offsetHeight;
+  const extraW = naturalW * _zoom - naturalW;
+  const extraH = naturalH * _zoom - naturalH;
+  _iframeContainer.style.marginRight  = extraW + 'px';
+  _iframeContainer.style.marginBottom = (24 + extraH) + 'px';
+
+  if (_onZoomChange) _onZoomChange(_zoom);
+  window.dispatchEvent(new CustomEvent('hc:zoom-changed', { detail: { zoom: _zoom } }));
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ashraf_mizo/htmlcanvas",
+  "version": "1.0.0",
+  "description": "Browser-based HTML canvas editor for designing slide decks and pages",
+  "type": "module",
+  "bin": {
+    "htmlcanvas": "./bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "editor/*.js",
+    "editor/*.css",
+    "editor/*.html",
+    "editor/*.svg",
+    "server.js"
+  ],
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "chokidar": "^5.0.0",
+    "express": "^5.2.1",
+    "multer": "^2.1.1",
+    "open": "^11.0.0",
+    "playwright": "^1.58.2",
+    "ws": "^8.19.0"
+  }
+}