第三步：编辑体验升级——实现双向同步与光标定位

import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
import remark from 'remark';
import remarkParse from 'remark-parse';
import { mdastUtilFromMarkdown } from 'mdast-util-from-markdown';
import { mdastUtilToMarkdown } from 'mdast-util-to-markdown';

// 初始化编辑器（省略 theme、keymap 等配置）
const editor = new EditorView({
  parent: document.querySelector('#editor'),
  extensions: [
    basicSetup,
    javascript(),
    EditorView.updateListener.of(update => {
      if (update.docChanged && update.transactions.length) {
        // ✅ 使用 updateListener 替代已废弃的 'change' 事件
        debounceSync(update.state.doc.toString());
      }
    })
  ]
});

let cachedAst: any = null;
const syncDebouncer = debounce((source: string) => {
  try {
    // ✅ 启用 positions: true！这是光标映射的生命线
    const ast = remark()
      .use(remarkParse, { 
        mdastExtensions: [mdastUtilFromMarkdown({ positions: true })] 
      })
      .parse(source);

    // ✅ 深比较 AST（非引用），避免空格/换行等无意义变更触发重绘
    if (!deepEqual(ast, cachedAst)) {
      updatePreview(ast); // 渲染到预览区
      cachedAst = ast;
    }
  } catch (e) {
    console.warn('AST parse failed:', e);
  }
}, 300);

// ✅ 绝对禁止使用 editor.setValue()！它会重置光标和选区
// 正确做法：通过 dispatch 应用 transaction（即使不修改内容，也确保 state 一致性）
function updatePreview(ast: any) {
  const html = remark()
    .use(() => () => ast)
    .use(() => () => {}) // 占位插件
    .use(() => () => {}) 
    .processSync(); // 同步生成 HTML 字符串
  previewEl.innerHTML = String(html);
}

{
  type: 'heading',
  depth: 2,
  children: [...],
  position: {
    start: { line: 3, column: 1, offset: 127 },
    end: { line: 3, column: 15, offset: 141 }
  }
}

function renderWithOffsets(ast: any) {
  const visitor = (node: any) => {
    if (node.position && node.position.start && node.position.end) {
      const start = node.position.start.offset;
      const end = node.position.end.offset;
      // 为 <h2>, <p>, <pre> 等渲染节点添加 data-offset 属性
      return h(node.type === 'heading' ? `h${node.depth}` : 'p', 
        { 'data-offset-start': start, 'data-offset-end': end }, 
        node.children
      );
    }
    return h('div', node.children);
  };
  const html = remark().use(() => visitor).processSync();
  previewEl.innerHTML = String(html);
}

// 从预览 DOM 点击位置反查源码 offset
function getOffsetAtPoint(el: HTMLElement): number {
  const start = parseInt(el.dataset.offsetStart || '0', 10);
  return start;
}

// 从源码 offset 推导预览中对应 DOM 元素（用于滚动定位）
function getDomElementAtOffset(offset: number): HTMLElement | null {
  const els = previewEl.querySelectorAll('[data-offset-start]');
  for (const el of els) {
    const s = parseInt(el.dataset.offsetStart || '0', 10);
    const e = parseInt(el.dataset.offsetEnd || '0', 10);
    if (offset >= s && offset <= e) return el as HTMLElement;
  }
  return null;
}

// 预览点击 → 光标跳转
previewEl.addEventListener('click', (e) => {
  const target = e.target as HTMLElement;
  const offset = getOffsetAtPoint(target);
  editor.dispatch({
    selection: { anchor: offset, head: offset }
  });
  editor.focus(); // ✅ 必须显式 focus，否则光标不显示
});

let currentHighlightRange: Range | null = null;

function highlightInPreview(range: Range) {
  // ✅ 清除旧高亮，防内存泄漏
  if (currentHighlightRange) {
    const selection = window.getSelection();
    if (selection) selection.removeAllRanges();
  }

  const selection = window.getSelection();
  if (selection && range) {
    selection.removeAllRanges();
    selection.addRange(range);
    currentHighlightRange = range;
  }
}

// 构建 DOM Range：根据源码选区 [from, to] 查找对应预览节点
function getDomRangeForOffset(from: number, to: number): Range {
  const range = document.createRange();
  const startEl = getDomElementAtOffset(from);
  const endEl = getDomElementAtOffset(to);

  if (startEl && endEl) {
    range.setStart(startEl, 0);
    range.setEnd(endEl, endEl.childNodes.length);
  }
  return range;
}

function scrollPreviewToLine(lineNumber: number) {
  const targetEl = previewEl.querySelector(`[data-line="${lineNumber}"]`);
  if (targetEl) {
    // ✅ 节流：避免高频滚动
    requestIdleCallback(() => {
      previewEl.scrollTop = targetEl.offsetTop - previewEl.offsetHeight / 3;
    });
  }
}

// 监听选区变更（非仅光标移动）
editor.on('selectionChange', () => {
  const { from, to } = editor.state.selection.main;
  const range = getDomRangeForOffset(from, to);
  highlightInPreview(range);
  
  // 获取光标所在行号（CM6 提供 lineAt API）
  const lineObj = editor.state.doc.lineAt(from);
  scrollPreviewToLine(lineObj.number);
});