@cellgit/markdown-render 0.1.0 → 1.0.1

package/dist/scripts/copy.js

@@ -0,0 +1,155 @@
+(function (global) {
+  'use strict';
+
+  const DEFAULT_STRINGS = {
+    copy: 'Copy',
+    copied: 'Copied',
+    copyFailed: 'Copy failed'
+  };
+
+  function resolveStrings(overrides) {
+    return Object.assign({}, DEFAULT_STRINGS, overrides || {});
+  }
+
+  /**
+   * Copy text using the modern Clipboard API when available; fall back to
+   * a transient textarea + execCommand for older WebKit / WKWebView combos.
+   * Both paths run inside the click handler so we keep the user-gesture
+   * context required by Safari.
+   */
+  function copyTextToClipboard(text) {
+    if (!text) return Promise.reject(new Error('Nothing to copy'));
+
+    const nav = global.navigator;
+    if (nav && nav.clipboard && typeof nav.clipboard.writeText === 'function') {
+      return nav.clipboard.writeText(text).catch(() => fallbackCopy(text));
+    }
+    return fallbackCopy(text);
+  }
+
+  function fallbackCopy(text) {
+    return new Promise((resolve, reject) => {
+      try {
+        const textarea = global.document.createElement('textarea');
+        textarea.value = text;
+        textarea.setAttribute('readonly', '');
+        textarea.style.position = 'fixed';
+        textarea.style.top = '-9999px';
+        textarea.style.opacity = '0';
+        global.document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        const succeeded = global.document.execCommand('copy');
+        global.document.body.removeChild(textarea);
+        if (succeeded) resolve();
+        else reject(new Error('execCommand copy failed'));
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  function findActionable(event) {
+    let node = event.target;
+    while (node) {
+      if (node.dataset && node.dataset.action === 'copy') return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  function findWrapper(node) {
+    while (node) {
+      if (node.classList && node.classList.contains('code-block-wrapper')) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  function attachCopyHandler(options) {
+    const opts = options || {};
+    if (!global.document) return () => {};
+
+    const bridge = opts.bridge || global.MarkdownBridge;
+    const strings = resolveStrings(opts.strings);
+
+    function resetButton(button, textNode, originalText) {
+      if (textNode) textNode.textContent = originalText;
+      if (button) button.classList.remove('copied');
+    }
+
+    function handleCopy(event) {
+      const actionable = findActionable(event);
+      if (!actionable) return;
+
+      const wrapper = findWrapper(actionable);
+      if (!wrapper) return;
+
+      const codeNode = wrapper.querySelector('pre code');
+      if (!codeNode) return;
+
+      const codeText = codeNode.textContent || '';
+      if (!codeText) return;
+
+      // Prevent the click from bubbling into other UI listeners.
+      event.preventDefault();
+
+      const button = wrapper.querySelector('.code-copy-button');
+      const copyTextSpan = button ? button.querySelector('.copy-text') : null;
+      const originalText = copyTextSpan ? copyTextSpan.textContent || strings.copy : strings.copy;
+      const languageLabel = wrapper.querySelector('.code-language');
+      const language = languageLabel ? languageLabel.textContent || '' : '';
+      const message = wrapper.closest ? wrapper.closest('[data-message-id]') : null;
+
+      const payload = {
+        text: codeText,
+        language,
+        source: 'code-block',
+        timestamp: Date.now()
+      };
+      if (message) {
+        payload.messageId = message.getAttribute('data-message-id') || '';
+      }
+
+      copyTextToClipboard(codeText)
+        .then(() => {
+          if (copyTextSpan) copyTextSpan.textContent = strings.copied;
+          if (button) button.classList.add('copied');
+          setTimeout(() => resetButton(button, copyTextSpan, originalText), 2000);
+          if (bridge && typeof bridge.notifyCopyResult === 'function') {
+            bridge.notifyCopyResult({ success: true, dict: payload });
+          }
+        })
+        .catch((error) => {
+          console.warn('Failed to copy code:', error);
+          // Say it failed before going back to the resting label. Snapping
+          // straight back reads as "nothing happened", which is the one thing
+          // that did not happen.
+          if (copyTextSpan) copyTextSpan.textContent = strings.copyFailed;
+          setTimeout(() => resetButton(button, copyTextSpan, originalText), 2000);
+          if (bridge && typeof bridge.notifyCopyResult === 'function') {
+            bridge.notifyCopyResult({
+              success: false,
+              error: error && error.message ? error.message : String(error),
+              dict: payload
+            });
+          }
+        });
+    }
+
+    // No keydown handler: the only thing carrying data-action="copy" is a real
+    // <button>, and the platform already turns Enter and Space on one into a
+    // click. Handling keydown as well would fire the copy twice unless the
+    // default were suppressed exactly right.
+    global.document.addEventListener('click', handleCopy);
+
+    return () => {
+      global.document.removeEventListener('click', handleCopy);
+    };
+  }
+
+  global.MarkdownCopy = {
+    attachCopyHandler,
+    resolveStrings
+  };
+})(window);

package/dist/scripts/height-sync.js

@@ -0,0 +1,205 @@
+(function (global) {
+  const HEIGHT_EPS = 0.5;
+
+  function now() {
+    return typeof performance !== 'undefined' && performance.now
+      ? performance.now()
+      : Date.now();
+  }
+
+  function raf(callback) {
+    if (typeof global.requestAnimationFrame === 'function') {
+      return global.requestAnimationFrame(callback);
+    }
+    return setTimeout(callback, 16);
+  }
+
+  function caf(id) {
+    if (!id) return;
+    if (typeof global.cancelAnimationFrame === 'function') {
+      global.cancelAnimationFrame(id);
+    } else {
+      clearTimeout(id);
+    }
+  }
+
+  function measureHeight(container) {
+    const bodyHeight = global.document && global.document.body
+      ? global.document.body.scrollHeight
+      : 0;
+    const containerHeight = container ? container.scrollHeight : 0;
+    return Math.max(bodyHeight, containerHeight);
+  }
+
+  function createHeightSync(options = {}) {
+    const documentRef = global.document;
+    const container = options.container || (documentRef ? documentRef.getElementById('markdown-content') : null);
+    const bridge = options.bridge || global.MarkdownBridge;
+    const threshold = typeof options.threshold === 'number' ? options.threshold : HEIGHT_EPS;
+    const cleanups = [];
+    let lastKnownHeight = -1;
+    let rafId = null;
+    let hasPostedInitial = false;
+
+    function dispatch(reason, dispatchOptions = {}) {
+      const height = measureHeight(container);
+      if (!dispatchOptions.force && Math.abs(height - lastKnownHeight) < threshold) {
+        return height;
+      }
+
+      lastKnownHeight = height;
+
+      if (dispatchOptions.initial) {
+        hasPostedInitial = true;
+        if (bridge && typeof bridge.notifyRenderComplete === 'function') {
+          bridge.notifyRenderComplete({
+            success: true,
+            height,
+            reason: reason || 'render'
+          });
+        }
+        if (typeof options.onInitialRender === 'function') {
+          options.onInitialRender(height);
+        }
+      } else if (bridge && typeof bridge.notifyContentHeight === 'function') {
+        const handled = bridge.notifyContentHeight(
+          height,
+          reason || 'content-change'
+        );
+        if (!handled && typeof bridge.notifyRenderComplete === 'function') {
+          bridge.notifyRenderComplete({
+            success: true,
+            height,
+            reason: reason || 'content-change'
+          });
+        }
+      }
+
+      return height;
+    }
+
+    function schedule(reason, dispatchOptions = {}) {
+      if (rafId) {
+        caf(rafId);
+      }
+
+      rafId = raf(() => {
+        rafId = null;
+        dispatch(reason, dispatchOptions);
+      });
+    }
+
+    function beginRenderCycle() {
+      hasPostedInitial = false;
+      lastKnownHeight = -1;
+    }
+
+    function setupResizeObserver() {
+      if (!container || typeof global.ResizeObserver !== 'function') {
+        return;
+      }
+
+      const resizeObserver = new ResizeObserver(() => {
+        schedule('resize-observer');
+      });
+      resizeObserver.observe(container);
+
+      cleanups.push(() => resizeObserver.disconnect());
+    }
+
+    function setupMutationObserver() {
+      if (!container || typeof global.MutationObserver !== 'function') {
+        return;
+      }
+
+      const mutationObserver = new MutationObserver(() => {
+        schedule('mutation');
+      });
+
+      // characterData is intentionally NOT observed. Text-only mutations
+      // (e.g. KaTeX inner spans being rewritten) do not change container
+      // height, and observing them firehoses the bridge during streaming.
+      mutationObserver.observe(container, {
+        childList: true,
+        subtree: true
+      });
+
+      cleanups.push(() => mutationObserver.disconnect());
+    }
+
+    function setupViewportListeners() {
+      if (typeof global.addEventListener !== 'function') {
+        return;
+      }
+
+      const onResize = () => schedule('viewport-resize', { force: true });
+      const onOrientation = () => schedule('orientationchange', { force: true });
+      const onResourceLoad = () => schedule('resource-load');
+
+      global.addEventListener('resize', onResize);
+      global.addEventListener('orientationchange', onOrientation);
+      if (documentRef) {
+        documentRef.addEventListener('load', onResourceLoad, true);
+      }
+
+      cleanups.push(() => {
+        global.removeEventListener('resize', onResize);
+        global.removeEventListener('orientationchange', onOrientation);
+        if (documentRef) {
+          documentRef.removeEventListener('load', onResourceLoad, true);
+        }
+      });
+    }
+
+    function setupLifecycleCleanup() {
+      if (typeof global.addEventListener !== 'function') {
+        return;
+      }
+
+      const cleanup = () => {
+        disconnect();
+      };
+
+      global.addEventListener('pagehide', cleanup, { once: true });
+      global.addEventListener('beforeunload', cleanup, { once: true });
+    }
+
+    function disconnect() {
+      cleanups.splice(0).forEach((fn) => {
+        try {
+          fn();
+        } catch (err) {
+          console.warn('Failed to cleanup height sync listener', err);
+        }
+      });
+      if (rafId) {
+        caf(rafId);
+        rafId = null;
+      }
+    }
+
+    setupResizeObserver();
+    setupMutationObserver();
+    setupViewportListeners();
+    setupLifecycleCleanup();
+
+    return {
+      measure: () => measureHeight(container),
+      scheduleInitial: (reason) => schedule(reason, { initial: true, force: true }),
+      scheduleHeight: (reason, opts) => schedule(reason, opts || {}),
+      dispatch,
+      beginRenderCycle,
+      hasPostedInitial: () => hasPostedInitial,
+      disconnect,
+      debugState: () => ({
+        lastKnownHeight,
+        hasPostedInitial,
+        timestamp: now()
+      })
+    };
+  }
+
+  global.MarkdownHeightSync = {
+    createHeightSync
+  };
+})(window);