@cellgit/markdown-render 0.1.0 → 1.0.0

package/dist/scripts/renderer.js

@@ -0,0 +1,398 @@
+(function (global) {
+  'use strict';
+
+  const bridge = global.MarkdownBridge;
+  const documentRef = global.document;
+  const container = documentRef ? documentRef.getElementById('markdown-content') : null;
+
+  if (!container) {
+    if (bridge && typeof bridge.notifyError === 'function') {
+      bridge.notifyError(new Error('Markdown container not found'));
+    }
+    return;
+  }
+  if (!global.MarkdownRender) {
+    console.error('MarkdownRender library is missing. Make sure markdown-render.js is loaded before renderer.js');
+    if (bridge && typeof bridge.notifyError === 'function') {
+      bridge.notifyError(new Error('MarkdownRender library missing'));
+    }
+    return;
+  }
+  if (!global.MarkdownHeightSync || typeof global.MarkdownHeightSync.createHeightSync !== 'function') {
+    console.error('Height sync module is missing. Ensure height-sync.js is loaded.');
+    if (bridge && typeof bridge.notifyError === 'function') {
+      bridge.notifyError(new Error('Height sync module missing'));
+    }
+    return;
+  }
+
+  const renderLib = global.MarkdownRender;
+  const renderCompleteCallbacks = [];
+
+  const defaultConfig = {
+    theme: { mode: 'auto' },
+    layout: {},
+    i18n: {},
+    markdown: {},
+    streaming: { incremental: true }
+  };
+  const runtimeConfig = Object.assign({}, defaultConfig, global.MarkdownWebViewConfig || {});
+
+  // ---------------------------------------------------------------------
+  // Theme + layout setup
+  // ---------------------------------------------------------------------
+
+  function applyTheme(theme) {
+    const config = theme || {};
+
+    // Preferred path: the render core exposes the token-based theme engine,
+    // which honors `mode`, a named `preset`, and per-token `tokens` overrides.
+    if (typeof renderLib.applyTheme === 'function') {
+      try {
+        renderLib.applyTheme({
+          mode: config.mode,
+          preset: config.preset,
+          tokens: config.tokens
+        });
+        return;
+      } catch (err) {
+        console.warn('Failed to apply theme config:', err);
+      }
+    }
+
+    // Fallback for an older core without the theme engine: honor mode only.
+    const root = documentRef ? documentRef.documentElement : null;
+    if (!root) return;
+    if (config.mode === 'light' || config.mode === 'dark') {
+      root.setAttribute('data-theme', config.mode);
+    } else {
+      root.removeAttribute('data-theme');
+    }
+  }
+
+  function applyLayout(layout) {
+    if (!layout) return;
+    try {
+      if (layout.padding !== undefined && renderLib.setPadding) renderLib.setPadding(layout.padding);
+      if (layout.bottomGap !== undefined && renderLib.setBottomGap) renderLib.setBottomGap(layout.bottomGap);
+      if (layout.background && renderLib.setBackground) renderLib.setBackground(layout.background);
+      if (layout.fontSize !== undefined && renderLib.setFontSize) renderLib.setFontSize(layout.fontSize);
+    } catch (err) {
+      console.warn('Failed to apply layout config:', err);
+    }
+  }
+
+  function applyExtensionStyles(extensions) {
+    if (!Array.isArray(extensions) || extensions.length === 0) return;
+    if (typeof renderLib.buildExtensionCSS !== 'function' || !documentRef) return;
+    try {
+      const css = renderLib.buildExtensionCSS(extensions);
+      if (!css) return;
+      let style = documentRef.getElementById('md-ext-vars');
+      if (!style) {
+        style = documentRef.createElement('style');
+        style.id = 'md-ext-vars';
+        (documentRef.head || documentRef.documentElement).appendChild(style);
+      }
+      style.textContent = css;
+    } catch (err) {
+      console.warn('Failed to apply extension styles:', err);
+    }
+  }
+
+  applyTheme(runtimeConfig.theme);
+  applyLayout(runtimeConfig.layout);
+  applyExtensionStyles(runtimeConfig.extensions);
+
+  // ---------------------------------------------------------------------
+  // Streaming state. The scanner walks each new tail at most once across the
+  // entire stream, so total scanning cost is O(buffer length).
+  // ---------------------------------------------------------------------
+
+  const scanState = newScanState();
+  let stableText = '';
+  let stableHtml = '';
+  let streamingBuffer = '';
+  let pendingFrame = null;
+  let pendingReason = 'render';
+  let renderingInProgress = false;
+  let finalFlush = false;
+
+  function newScanState() {
+    return {
+      cursor: 0,
+      lineStart: 0,
+      inFence: false,
+      fenceMark: '',
+      inMath: false,
+      lastSafe: 0,
+      prevNonBlankLine: null
+    };
+  }
+
+  // Lines starting with these markers are list / quote / table rows. We refuse
+  // to advance the stable cutoff when the previous non-blank line matches —
+  // re-rendering a partial list/table in isolation would shatter the layout.
+  const LIST_LIKE = /^(?:[-*+]\s|\d+\.\s|>|\|)/;
+
+  function advanceScan(text) {
+    let i = scanState.cursor;
+    const len = text.length;
+    while (i < len) {
+      const ch = text.charCodeAt(i);
+      if (ch === 0x0a /* \n */) {
+        const line = text.slice(scanState.lineStart, i);
+        consumeLine(line, i);
+        scanState.lineStart = i + 1;
+      }
+      i += 1;
+    }
+    scanState.cursor = i;
+  }
+
+  function consumeLine(line, newlineOffset) {
+    const trimmed = line.trim();
+
+    if (!scanState.inMath) {
+      if (!scanState.inFence) {
+        const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+        if (fenceMatch) {
+          scanState.inFence = true;
+          scanState.fenceMark = fenceMatch[1];
+        }
+      } else if (trimmed.startsWith(scanState.fenceMark)) {
+        scanState.inFence = false;
+        scanState.fenceMark = '';
+      }
+    }
+
+    if (!scanState.inFence) {
+      if (trimmed === '$$') {
+        scanState.inMath = !scanState.inMath;
+      }
+    }
+
+    if (!scanState.inFence && !scanState.inMath && trimmed === '') {
+      if (scanState.prevNonBlankLine !== null && !LIST_LIKE.test(scanState.prevNonBlankLine)) {
+        scanState.lastSafe = newlineOffset + 1;
+      }
+    }
+
+    if (trimmed !== '') {
+      scanState.prevNonBlankLine = trimmed;
+    }
+  }
+
+  function resetScan() {
+    Object.assign(scanState, newScanState());
+    stableText = '';
+    stableHtml = '';
+  }
+
+  // ---------------------------------------------------------------------
+  // Render helpers
+  // ---------------------------------------------------------------------
+
+  function renderSegment(text, options) {
+    if (!text) return '';
+    try {
+      return renderLib.renderMarkdown(text, options);
+    } catch (err) {
+      console.error('Markdown segment render error:', err);
+      if (bridge && typeof bridge.notifyError === 'function') {
+        bridge.notifyError(err, 'render');
+      }
+      return '';
+    }
+  }
+
+  function commit(html) {
+    // Prefer DOM diffing when the renderer exports applyStreamingHtml — it
+    // preserves code-block scroll positions across stream flushes.
+    if (typeof renderLib.applyStreamingHtml === 'function') {
+      renderLib.applyStreamingHtml(container, html, { preserveCodeBlockScroll: true });
+    } else {
+      container.innerHTML = html;
+    }
+  }
+
+  function fullRerender(options) {
+    commit(renderSegment(streamingBuffer, options));
+  }
+
+  function incrementalRerender(options) {
+    advanceScan(streamingBuffer);
+    const cutoff = scanState.lastSafe;
+    if (cutoff > stableText.length) {
+      const newStable = streamingBuffer.slice(stableText.length, cutoff);
+      if (newStable.length > 0) {
+        stableHtml += renderSegment(newStable, options);
+        stableText = streamingBuffer.slice(0, cutoff);
+      }
+    }
+    const unstable = streamingBuffer.slice(stableText.length);
+    const unstableHtml = renderSegment(unstable, options);
+    commit(stableHtml + unstableHtml);
+  }
+
+  function flush() {
+    pendingFrame = null;
+    if (renderingInProgress) {
+      pendingFrame = raf(flush);
+      return;
+    }
+    renderingInProgress = true;
+    try {
+      const options = Object.assign({}, runtimeConfig.markdown || {});
+      if (runtimeConfig.extensions) {
+        options.extensions = runtimeConfig.extensions;
+      }
+      // The copy button is built inside the render pipeline, so the strings
+      // have to travel with the render options rather than only reaching the
+      // click handler.
+      options.i18n = runtimeConfig.i18n || {};
+      if (runtimeConfig.streaming && runtimeConfig.streaming.incremental !== false) {
+        incrementalRerender(options);
+      } else {
+        fullRerender(options);
+      }
+      // Event contract: `renderComplete` fires once when a content cycle first
+      // paints (initial render), and once more on the final flush of a stream.
+      // Every in-between streaming flush reports through the (cheaper,
+      // host-debounced) height-change channel instead of re-announcing
+      // "render complete" on every animation frame.
+      if (!heightSync.hasPostedInitial() || finalFlush) {
+        heightSync.scheduleInitial(pendingReason);
+      } else {
+        heightSync.scheduleHeight(pendingReason);
+      }
+      finalFlush = false;
+    } finally {
+      renderingInProgress = false;
+    }
+  }
+
+  function raf(fn) {
+    if (typeof global.requestAnimationFrame === 'function') {
+      return global.requestAnimationFrame(fn);
+    }
+    return setTimeout(fn, 16);
+  }
+
+  function cancelFrame(handle) {
+    if (handle === null) return;
+    if (typeof global.cancelAnimationFrame === 'function') {
+      global.cancelAnimationFrame(handle);
+    } else {
+      clearTimeout(handle);
+    }
+  }
+
+  function scheduleFlush(reason) {
+    pendingReason = reason || pendingReason;
+    if (pendingFrame !== null) return;
+    pendingFrame = raf(flush);
+  }
+
+  // ---------------------------------------------------------------------
+  // Public API used by the SDK bridge
+  // ---------------------------------------------------------------------
+
+  function renderMarkdown(markdownText) {
+    if (typeof markdownText !== 'string') {
+      if (bridge && typeof bridge.notifyError === 'function') {
+        bridge.notifyError(new Error('Invalid markdown: expected string'), 'render');
+      }
+      return false;
+    }
+    resetScan();
+    streamingBuffer = markdownText;
+    heightSync.beginRenderCycle();
+    scheduleFlush('render');
+    return true;
+  }
+
+  function renderMarkdownStream(markdownText) {
+    return renderMarkdown(markdownText);
+  }
+
+  function appendMarkdownChunk(chunk, opts) {
+    const options = opts || {};
+    streamingBuffer += typeof chunk === 'string' ? chunk : '';
+    scheduleFlush('append');
+    if (options.isLast) {
+      cancelFrame(pendingFrame);
+      pendingFrame = null;
+      finalFlush = true;
+      flush();
+    }
+    return true;
+  }
+
+  function getContentHeight() {
+    return heightSync.measure();
+  }
+
+  function clearContent() {
+    cancelFrame(pendingFrame);
+    pendingFrame = null;
+    streamingBuffer = '';
+    resetScan();
+    container.innerHTML = '';
+    heightSync.beginRenderCycle();
+    heightSync.scheduleHeight('clear', { force: true });
+  }
+
+  function onRenderComplete(callback) {
+    if (typeof callback === 'function') renderCompleteCallbacks.push(callback);
+  }
+
+  function emitRenderComplete(info) {
+    renderCompleteCallbacks.forEach((cb) => {
+      try { cb(info); } catch (err) { console.warn('onRenderComplete callback failed', err); }
+    });
+  }
+
+  const heightSync = global.MarkdownHeightSync.createHeightSync({
+    container,
+    bridge,
+    onInitialRender(height) {
+      emitRenderComplete({ height, reason: pendingReason });
+    }
+  });
+
+  if (typeof runtimeConfig.onRenderComplete === 'function') {
+    onRenderComplete(runtimeConfig.onRenderComplete);
+  }
+
+  let detachCopy = () => {};
+  if (global.MarkdownCopy && typeof global.MarkdownCopy.attachCopyHandler === 'function') {
+    detachCopy = global.MarkdownCopy.attachCopyHandler({
+      bridge,
+      strings: runtimeConfig.i18n
+    });
+  }
+
+  global.renderMarkdown = renderMarkdown;
+  global.renderMarkdownStream = renderMarkdownStream;
+  global.appendMarkdownChunk = appendMarkdownChunk;
+  global.getContentHeight = getContentHeight;
+  global.clearContent = clearContent;
+  global.MarkdownRenderer = {
+    onRenderComplete,
+    version: bridge && bridge.VERSION ? bridge.VERSION : '1.0.0'
+  };
+
+  if (bridge && typeof bridge.notifyPageReady === 'function') {
+    bridge.notifyPageReady();
+  }
+
+  if (typeof global.addEventListener === 'function') {
+    global.addEventListener('pagehide', () => {
+      if (typeof detachCopy === 'function') detachCopy();
+      heightSync.disconnect();
+      cancelFrame(pendingFrame);
+      pendingFrame = null;
+    });
+  }
+})(window);

package/ios-example/MarkdownViewController.swift

@@ -8,6 +8,21 @@ class MarkdownViewController: UIViewController {
 
     private var webView: WKWebView!
     private var isHTMLLoaded = false
+    private let maxRenderRetries = 20
+    private let renderRetryDelay: TimeInterval = 0.1
+    private var renderRetryCount = 0
+    var onContentHeightChange: ((CGFloat) -> Void)?
+
+    private enum ScriptHandler: String, CaseIterable {
+        case renderComplete
+        case pageReady
+        case contentHeightChanged
+        case iOSHandler
+    }
+
+    private var scriptMessageNames: [String] {
+        return ScriptHandler.allCases.map { $0.rawValue }
+    }
 
     // MARK: - Lifecycle
 
@@ -16,8 +31,7 @@ class MarkdownViewController: UIViewController {
 
         // Configure message handlers for iOS communication
         let contentController = WKUserContentController()
-        contentController.add(self, name: "renderComplete")
-        contentController.add(self, name: "pageReady")
+        scriptMessageNames.forEach { contentController.add(self, name: $0) }
         config.userContentController = contentController
 
         // Create and configure webView
@@ -38,29 +52,42 @@ class MarkdownViewController: UIViewController {
         loadHTMLFile()
     }
 
+    deinit {
+        removeScriptMessageHandlers()
+    }
+
     // MARK: - Public Methods
 
     /// Render markdown content
     /// - Parameter markdown: The markdown string to render
     func renderMarkdown(_ markdown: String) {
         guard isHTMLLoaded else {
-            // Queue the render request until HTML is loaded
-            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+            // Queue the render request until HTML is loaded, with a bounded retry count
+            guard renderRetryCount < maxRenderRetries else {
+                print("❌ HTML not ready after \(maxRenderRetries) retries; aborting render.")
+                return
+            }
+            renderRetryCount += 1
+            DispatchQueue.main.asyncAfter(deadline: .now() + renderRetryDelay) { [weak self] in
                 self?.renderMarkdown(markdown)
             }
             return
         }
 
-        // Escape the markdown string for JavaScript
-        let escapedMarkdown = markdown
-            .replacingOccurrences(of: "\\", with: "\\\\")
-            .replacingOccurrences(of: "`", with: "\\`")
-            .replacingOccurrences(of: "$", with: "\\$")
-            .replacingOccurrences(of: "\n", with: "\\n")
-            .replacingOccurrences(of: "\r", with: "\\r")
-            .replacingOccurrences(of: "\"", with: "\\\"")
+        // Reset retry counter once HTML is ready
+        renderRetryCount = 0
+
+        // Serialize markdown safely for JS (avoids manual escaping and script-breaking sequences)
+        let jsonString: String
+        if let data = try? JSONSerialization.data(withJSONObject: markdown, options: []),
+           let serialized = String(data: data, encoding: .utf8) {
+            jsonString = serialized
+        } else {
+            print("❌ Failed to serialize markdown to JSON; aborting render.")
+            return
+        }
 
-        let javascript = "window.renderMarkdown(`\(escapedMarkdown)`)"
+        let javascript = "window.renderMarkdown(\(jsonString))"
 
         webView.evaluateJavaScript(javascript) { result, error in
             if let error = error {
@@ -75,13 +102,7 @@ class MarkdownViewController: UIViewController {
     /// - Parameter completion: Callback with the content height in points
     func getContentHeight(completion: @escaping (CGFloat) -> Void) {
         webView.evaluateJavaScript("window.getContentHeight()") { result, error in
-            if let height = result as? CGFloat {
-                completion(height)
-            } else if let height = result as? Int {
-                completion(CGFloat(height))
-            } else {
-                completion(0)
-            }
+            completion(self.parseHeight(from: result))
         }
     }
 
@@ -117,6 +138,42 @@ class MarkdownViewController: UIViewController {
             print("❌ Error loading HTML: \(error.localizedDescription)")
         }
     }
+
+    private func removeScriptMessageHandlers() {
+        guard let contentController = webView?.configuration.userContentController else { return }
+        // Avoid WKUserContentController retaining self after the controller is gone.
+        scriptMessageNames.forEach { contentController.removeScriptMessageHandler(forName: $0) }
+    }
+
+    private func parseHeight(from value: Any?) -> CGFloat {
+        switch value {
+        case let number as NSNumber:
+            return CGFloat(truncating: number)
+        default:
+            return 0
+        }
+    }
+
+    private struct BridgeMessage {
+        let action: String
+        let payload: [String: Any]
+        let version: String?
+    }
+
+    private func decodeBridgeMessage(_ message: WKScriptMessage) -> BridgeMessage {
+        let dictionary = message.body as? [String: Any] ?? [:]
+        let action = dictionary["action"] as? String ?? message.name
+        let payload = dictionary["payload"] as? [String: Any] ?? dictionary
+        let version = dictionary["version"] as? String
+        return BridgeMessage(action: action, payload: payload, version: version)
+    }
+
+    private func extractHeight(from payload: [String: Any]) -> CGFloat? {
+        if let value = payload["height"] ?? payload["contentHeight"] ?? payload["value"] {
+            return parseHeight(from: value)
+        }
+        return nil
+    }
 }
 
 // MARK: - WKScriptMessageHandler
@@ -126,22 +183,55 @@ extension MarkdownViewController: WKScriptMessageHandler {
         _ userContentController: WKUserContentController,
         didReceive message: WKScriptMessage
     ) {
-        if message.name == "pageReady" {
-            print("✅ WebView page is ready")
+        let bridgeMessage = decodeBridgeMessage(message)
+        let payload = bridgeMessage.payload
+        let versionLabel = bridgeMessage.version.map { " [v\($0)]" } ?? ""
+
+        switch bridgeMessage.action {
+        case "pageReady":
+            print("✅ WebView page is ready\(versionLabel)")
             isHTMLLoaded = true
-        } else if message.name == "renderComplete" {
-            if let body = message.body as? [String: Any] {
-                if let success = body["success"] as? Bool {
-                    if success {
-                        print("✅ Render completed successfully")
-                        if let height = body["height"] as? CGFloat {
-                            print("📏 Content height: \(height)")
-                        }
-                    } else if let error = body["error"] as? String {
-                        print("❌ Render failed: \(error)")
-                    }
+
+        case "renderComplete":
+            let success = payload["success"] as? Bool ?? true
+            if success {
+                if let height = extractHeight(from: payload) {
+                    print("✅ Render completed successfully\(versionLabel), height: \(height)")
+                    notifyHeightChange(height)
+                } else {
+                    print("✅ Render completed successfully\(versionLabel)")
                 }
+            } else {
+                let errorMessage = payload["error"] as? String ?? "Unknown render error"
+                print("❌ Render failed\(versionLabel): \(errorMessage)")
+            }
+
+        case "contentHeight", "contentHeightChanged":
+            if let height = extractHeight(from: payload) {
+                print("↔️ Content height updated\(versionLabel): \(height)")
+                notifyHeightChange(height)
             }
+
+        case "copyMarkdownText":
+            if let info = payload["dict"] as? [String: Any] {
+                print("📋 Copy event received\(versionLabel): \(info)")
+            } else {
+                print("📋 Copy event received\(versionLabel)")
+            }
+
+        case "renderError":
+            let errorMessage = payload["error"] as? String ?? "Unknown render error"
+            print("❌ Render error\(versionLabel): \(errorMessage)")
+
+        default:
+            print("ℹ️ Received iOS handler action\(versionLabel): \(bridgeMessage.action)")
+        }
+    }
+
+    private func notifyHeightChange(_ height: CGFloat) {
+        guard height >= 0 else { return }
+        DispatchQueue.main.async { [weak self] in
+            self?.onContentHeightChange?(height)
         }
     }
 }

package/ios-example/README.md

@@ -79,6 +79,8 @@ struct ContentView: View {
 }
 ```
 
+> ✅ 完整示例参考 `SwiftUIMarkdownExample.swift`，其中演示了如何通过 `onContentHeightChange` 绑定高度实现自适应布局。
+
 ## API 参考
 
 ### renderMarkdown(_ markdown: String)