ai-learn-jsbridge

一个解耦的 JS Bridge 与富文本渲染工具集，用于：

• KaTeX 公式渲染
• 填空交互（唤起原生键盘、提交高亮）
• 图片长按放大
• 与原生应用的桥接方法注册

安装

必选：katex（公式渲染） 可选：smiles-drawer（分子式渲染）

pnpm add ai-learn-jsbridge katex
# 如果需要分子式渲染
pnpm add smiles-drawer

在应用入口引入 KaTeX 样式：

import 'katex/dist/katex.min.css'

快速开始（推荐）

一行初始化，自动挂载依赖（若已安装）并完成全部注册：

import { initAllWithAutoMount } from 'ai-learn-jsbridge'

initAllWithAutoMount() // 自动挂载 window.katex / window.SmilesDrawer，并完成初始化

说明：

• 若你已经手动挂载了 window.katex 或 window.SmilesDrawer，自动挂载会跳过。
• 若未安装可选依赖（如 smiles-drawer），会在控制台提示，但不影响其他功能。

手动初始化（更灵活）

1. 手动挂载依赖

import katex from 'katex'

import 'katex/dist/katex.min.css'
// import SmilesDrawer from 'smiles-drawer' // 可选

window.katex = katex
// window.SmilesDrawer = SmilesDrawer

2. 初始化能力

import { attachWindowGlobals, initAll } from 'ai-learn-jsbridge'

initAll() // 注册点击/长按事件、原生桥方法、KaTeX 滚动增强等
attachWindowGlobals() // 可选：把 reconstructHtml 暴露到 window，兼容旧代码

在组件中渲染含公式的富文本

如果 HTML 中包含 .ql-formula 节点，使用 reconstructHtml 可直接得到可展示的 KaTeX 内容：

import { reconstructHtml } from 'ai-learn-jsbridge'

const html = reconstructHtml(rawHtml, /* isNeedArrow? */ true)
// 然后以 dangerouslySetInnerHTML 的方式渲染到 .ql-editor 容器

提示：

• isNeedArrow（默认 false）：为横向可滚动的公式显示左右箭头提示与遮罩。
• 建议在 .ql-container .ql-editor 样式容器中渲染（Quill 或你的自定义样式）。

API 列表

• 初始化

  • initAllWithAutoMount()：自动挂载依赖 + 全量初始化 + 兼容 window 全局函数
  • initAll()：只做行为注册（不自动挂载依赖）
  • autoMountDependencies()：尝试挂载 window.katex、window.SmilesDrawer
  • attachWindowGlobals()：暴露 window.reconstructHtml

• 公式/富文本

  • reconstructHtml(html: string, isNeedArrow?: boolean): string
  • initKatexScroll()：增强可滚动 KaTeX 容器（遮罩与箭头）

• 填空/原生交互

  • registerBlankBridges()
  • registerElementToTost()
  • registerFillCallBack(...)
  • registerSubmitCallBack(...)
  • popKeyboard(target: HTMLElement)

• 图片（长按放大）

  • createLongPressHandlers(longPressDuration?: number)
  • zoomImg(target: HTMLElement)

• 桥方法

  • registerMethodCallByNative(name: string, cb: (args:any)=>unknown)
  • callNativeMethod(name: string, args?: object)

入口文件典型用法（main.tsx）

import { initAllWithAutoMount } from 'ai-learn-jsbridge'

import 'katex/dist/katex.min.css'

initAllWithAutoMount()

迁移提示

• 如果旧代码中使用了 window.reconstructHtml(...)，初始化后调用 attachWindowGlobals()，或改为模块导入 reconstructHtml(...)。
• 使用本包后可删除旧的 ./assets/AILearnJSbridge.js 文件与引用。