collabmd 0.1.18

package/src/client/presentation/layout-controller.js

@@ -0,0 +1,222 @@
+export class LayoutController {
+  constructor({ mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'), onMeasureEditor }) {
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
+    this.onMeasureEditor = onMeasureEditor;
+    this.preferredView = 'split';
+    this.mobileShowsEditor = !this.isMobileViewport();
+    this.currentView = this.mobileShowsEditor ? this.preferredView : 'preview';
+    this.editorLayout = document.getElementById('editorLayout');
+    this.editorPane = document.getElementById('editorPane');
+    this.previewPane = document.getElementById('previewPane');
+    this.mobileToggleButton = document.getElementById('mobileViewToggle');
+    this.resizer = document.getElementById('resizer');
+    this.viewButtons = Array.from(document.querySelectorAll('.view-btn'));
+  }
+
+  isMobileViewport() {
+    return this.mobileBreakpointQuery.matches;
+  }
+
+  initialize() {
+    this.viewButtons.forEach((button) => {
+      button.addEventListener('click', () => this.setView(button.dataset.view));
+    });
+
+    this.mobileToggleButton?.addEventListener('click', () => this.toggleMobileView());
+    this.initializeResizer();
+    this.restorePreferredView();
+  }
+
+  reset() {
+    this.restorePreferredView();
+
+    if (this.editorPane) {
+      this.editorPane.style.flex = '';
+    }
+
+    if (this.previewPane) {
+      this.previewPane.style.flex = '';
+    }
+
+    this.updateResizerValue();
+  }
+
+  restorePreferredView() {
+    const nextView = this.isMobileViewport()
+      ? (this.mobileShowsEditor ? 'split' : 'preview')
+      : this.preferredView;
+
+    this.applyView(nextView);
+    this.updateMobileToggleButton(this.mobileShowsEditor ? 'Preview' : 'Editor');
+  }
+
+  applyView(view) {
+    this.currentView = view;
+    this.editorLayout?.setAttribute('data-view', view);
+    this.syncViewButtons();
+  }
+
+  setView(view, { persist = true } = {}) {
+    if (!view) {
+      return;
+    }
+
+    if (persist) {
+      this.preferredView = view;
+    }
+
+    this.applyView(view);
+
+    if (view === 'split' || view === 'editor') {
+      this.scheduleEditorMeasure();
+    }
+  }
+
+  toggleMobileView() {
+    this.mobileShowsEditor = !this.mobileShowsEditor;
+    this.applyView(this.mobileShowsEditor ? 'split' : 'preview');
+    this.updateMobileToggleButton(this.mobileShowsEditor ? 'Preview' : 'Editor');
+
+    if (this.mobileShowsEditor) {
+      this.scheduleEditorMeasure();
+    }
+  }
+
+  scheduleEditorMeasure() {
+    if (!this.onMeasureEditor) {
+      return;
+    }
+
+    setTimeout(() => this.onMeasureEditor(), 50);
+  }
+
+  updateMobileToggleButton(label) {
+    if (!this.mobileToggleButton) {
+      return;
+    }
+
+    const previewIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+    const editorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>';
+
+    this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="toolbar-btn-label">${label}</span>`;
+  }
+
+  syncViewButtons() {
+    this.viewButtons.forEach((button) => {
+      const isActive = button.dataset.view === this.currentView;
+      button.classList.toggle('active', isActive);
+      button.setAttribute('aria-pressed', String(isActive));
+    });
+  }
+
+  updateResizerValue() {
+    if (!this.resizer || !this.editorLayout || !this.editorPane) {
+      return;
+    }
+
+    const totalWidth = this.editorLayout.offsetWidth;
+    if (!Number.isFinite(totalWidth) || totalWidth <= 0) {
+      return;
+    }
+
+    const percentage = Math.round((this.editorPane.offsetWidth / totalWidth) * 100);
+    this.resizer.setAttribute('aria-valuenow', String(Math.max(20, Math.min(80, percentage))));
+  }
+
+  applyEditorPaneWidth(width) {
+    if (!this.editorLayout || !this.editorPane || !this.previewPane) {
+      return;
+    }
+
+    const totalWidth = this.editorLayout.offsetWidth;
+    if (!Number.isFinite(totalWidth) || totalWidth <= 0) {
+      return;
+    }
+
+    const minPaneWidth = 200;
+    const nextWidth = Math.max(minPaneWidth, Math.min(totalWidth - minPaneWidth, width));
+    const percentage = (nextWidth / totalWidth) * 100;
+
+    this.editorPane.style.flex = `0 0 ${percentage}%`;
+    this.previewPane.style.flex = '1';
+    this.updateResizerValue();
+  }
+
+  initializeResizer() {
+    if (!this.resizer || !this.editorLayout || !this.editorPane || !this.previewPane) {
+      return;
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    this.resizer.addEventListener('mousedown', (event) => {
+      isResizing = true;
+      startX = event.clientX;
+      startWidth = this.editorPane.offsetWidth;
+      this.resizer.classList.add('dragging');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      event.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (event) => {
+      if (!isResizing) {
+        return;
+      }
+
+      const delta = event.clientX - startX;
+      this.applyEditorPaneWidth(startWidth + delta);
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (!isResizing) {
+        return;
+      }
+
+      isResizing = false;
+      this.resizer.classList.remove('dragging');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      this.scheduleEditorMeasure();
+    });
+
+    this.resizer.addEventListener('keydown', (event) => {
+      const totalWidth = this.editorLayout.offsetWidth;
+      if (!Number.isFinite(totalWidth) || totalWidth <= 0) {
+        return;
+      }
+
+      const step = Math.max(24, Math.round(totalWidth * 0.05));
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        this.applyEditorPaneWidth(this.editorPane.offsetWidth - step);
+        this.scheduleEditorMeasure();
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        this.applyEditorPaneWidth(this.editorPane.offsetWidth + step);
+        this.scheduleEditorMeasure();
+        return;
+      }
+
+      if (event.key === 'Home') {
+        event.preventDefault();
+        this.applyEditorPaneWidth(totalWidth * 0.2);
+        this.scheduleEditorMeasure();
+        return;
+      }
+
+      if (event.key === 'End') {
+        event.preventDefault();
+        this.applyEditorPaneWidth(totalWidth * 0.8);
+        this.scheduleEditorMeasure();
+      }
+    });
+
+    this.updateResizerValue();
+  }
+}

package/src/client/presentation/outline-controller.js

@@ -0,0 +1,239 @@
+export class OutlineController {
+  constructor({
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
+    onNavigateToHeading,
+  } = {}) {
+    this.outlineOpen = false;
+    this.activeHeadingFrame = null;
+    this.activeHeadingId = null;
+    this.headings = [];
+    this.pinnedHeadingId = null;
+    this.onNavigateToHeading = onNavigateToHeading;
+    this.panel = document.getElementById('outlinePanel');
+    this.navigation = document.getElementById('outlineNav');
+    this.previewContainer = document.getElementById('previewContainer');
+    this.toggleButton = document.getElementById('outlineToggle');
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
+    this.handlePreviewScroll = () => this.scheduleActiveHeadingUpdate();
+  }
+
+  initialize() {
+    this.toggleButton?.addEventListener('click', () => this.toggle());
+  }
+
+  toggle() {
+    this.setOpenState(!this.outlineOpen);
+  }
+
+  close() {
+    this.setOpenState(false);
+  }
+
+  setOpenState(nextState) {
+    this.outlineOpen = nextState;
+    this.panel?.classList.toggle('hidden', !this.outlineOpen);
+    this.toggleButton?.classList.toggle('active', this.outlineOpen);
+
+    if (this.outlineOpen) {
+      this.refresh();
+      return;
+    }
+
+    this.cleanup();
+  }
+
+  refresh() {
+    if (!this.navigation) {
+      return;
+    }
+
+    if (!this.outlineOpen) {
+      this.cleanup();
+      return;
+    }
+
+    const previewContent = document.getElementById('previewContent');
+    const headings = previewContent?.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [];
+
+    if (headings.length === 0) {
+      this.navigation.innerHTML = '<div class="outline-empty">No headings found</div>';
+      this.cleanup();
+      return;
+    }
+
+    const items = Array.from(headings).map((heading, index) => {
+      if (!heading.id) {
+        heading.id = `heading-${index}-${heading.textContent.trim().toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-|-$/g, '')
+          .slice(0, 40)}`;
+      }
+
+      return {
+        id: heading.id,
+        level: Number.parseInt(heading.tagName[1], 10),
+        sourceLine: Number.parseInt(heading.getAttribute('data-source-line') || '', 10),
+        text: heading.textContent.trim(),
+      };
+    });
+
+    this.navigation.innerHTML = items.map((item) => (
+      `<button class="outline-item" data-level="${item.level}" data-target="${item.id}"${Number.isFinite(item.sourceLine) ? ` data-source-line="${item.sourceLine}"` : ''} title="${item.text.replace(/"/g, '&quot;')}">${item.text}</button>`
+    )).join('');
+
+    this.navigation.querySelectorAll('.outline-item').forEach((button) => {
+      button.addEventListener('click', () => {
+        const target = document.getElementById(button.dataset.target);
+        this.pinnedHeadingId = button.dataset.target;
+        this.notifyHeadingNavigation(target, button.dataset.target);
+        this.scrollHeadingIntoView(target, { behavior: 'auto' });
+        this.setActiveItem(button.dataset.target, { behavior: 'auto' });
+
+        if (this.mobileBreakpointQuery.matches) {
+          this.close();
+        }
+      });
+    });
+
+    this.observeHeadings(Array.from(headings));
+  }
+
+  cleanup() {
+    if (this.activeHeadingFrame) {
+      cancelAnimationFrame(this.activeHeadingFrame);
+      this.activeHeadingFrame = null;
+    }
+
+    this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
+    this.headings = [];
+    this.pinnedHeadingId = null;
+  }
+
+  setActiveItem(id, { scrollIntoView = true, behavior = 'smooth' } = {}) {
+    this.activeHeadingId = id;
+
+    this.navigation?.querySelectorAll('.outline-item').forEach((item) => {
+      item.classList.toggle('active', item.dataset.target === id);
+    });
+
+    if (scrollIntoView) {
+      this.navigation?.querySelector('.outline-item.active')?.scrollIntoView({
+        behavior,
+        block: 'nearest',
+      });
+    }
+  }
+
+  observeHeadings(headings) {
+    this.cleanup();
+
+    if (!this.previewContainer || headings.length === 0) {
+      return;
+    }
+
+    this.headings = headings;
+    this.previewContainer.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+    this.updateActiveHeading();
+  }
+
+  scheduleActiveHeadingUpdate() {
+    if (this.activeHeadingFrame) {
+      return;
+    }
+
+    this.activeHeadingFrame = requestAnimationFrame(() => {
+      this.activeHeadingFrame = null;
+      this.updateActiveHeading();
+    });
+  }
+
+  updateActiveHeading() {
+    if (!this.previewContainer || this.headings.length === 0) {
+      return;
+    }
+
+    const pinnedHeading = this.getPinnedHeading();
+    if (pinnedHeading && this.shouldKeepPinnedHeadingActive(pinnedHeading)) {
+      this.setActiveItem(pinnedHeading.id, {
+        behavior: 'auto',
+        scrollIntoView: true,
+      });
+      return;
+    }
+
+    this.pinnedHeadingId = null;
+    const focusLine = this.previewContainer.scrollTop;
+    let activeHeading = this.headings[0];
+
+    for (const heading of this.headings) {
+      const headingOffset = this.getHeadingScrollTop(heading);
+      if (headingOffset > focusLine) {
+        break;
+      }
+
+      activeHeading = heading;
+    }
+
+    this.setActiveItem(activeHeading.id, {
+      behavior: 'auto',
+      scrollIntoView: true,
+    });
+  }
+
+  getHeadingScrollTop(heading) {
+    if (!this.previewContainer) {
+      return 0;
+    }
+
+    const previewRect = this.previewContainer.getBoundingClientRect();
+    const headingRect = heading.getBoundingClientRect();
+    return this.previewContainer.scrollTop + (headingRect.top - previewRect.top);
+  }
+
+  getPinnedHeading() {
+    if (!this.pinnedHeadingId) {
+      return null;
+    }
+
+    return this.headings.find((heading) => heading.id === this.pinnedHeadingId) ?? null;
+  }
+
+  shouldKeepPinnedHeadingActive(heading) {
+    if (!this.previewContainer || !heading?.isConnected) {
+      return false;
+    }
+
+    const headingTop = this.getHeadingScrollTop(heading) - this.previewContainer.scrollTop;
+    const headingBottom = headingTop + heading.getBoundingClientRect().height;
+    const activationWindow = this.previewContainer.clientHeight * 0.45;
+
+    return headingBottom > -48 && headingTop < activationWindow;
+  }
+
+  notifyHeadingNavigation(target, headingId) {
+    if (!target) {
+      return;
+    }
+
+    const sourceLine = Number.parseInt(target.getAttribute('data-source-line') || '', 10);
+    this.onNavigateToHeading?.({
+      headingId,
+      sourceLine: Number.isFinite(sourceLine) ? sourceLine : null,
+    });
+  }
+
+  scrollHeadingIntoView(target, { behavior = 'smooth' } = {}) {
+    if (!target || !this.previewContainer) {
+      return;
+    }
+
+    const previewRect = this.previewContainer.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const nextScrollTop = this.previewContainer.scrollTop + (targetRect.top - previewRect.top);
+
+    this.previewContainer.scrollTo({
+      behavior,
+      top: Math.max(nextScrollTop, 0),
+    });
+  }
+}