@ooakloowj/tiptap-preset-ohoo 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# @ooakloowj/tiptap-preset-ohoo
+
+Ohoo 项目专用的 Tiptap preset 与扩展，构建在 `@ooakloowj/tiptap-preset` 之上。
+
+## 包含能力
+
+- `wikilink`
+- `internal-link`
+- `ohoo-image`
+- `dictionary-highlight`
+- `createOhooPreset()`
+- Ohoo 适配器：`dictionaryProvider`、`imageUploader`、`imageResolver`
+
+## 安装
+
+```bash
+npm i @ooakloowj/tiptap-preset-ohoo
+```
+
+## 快速使用
+
+```js
+import {
+  createOhooPreset,
+  createOhooImageUploader,
+} from '@ooakloowj/tiptap-preset-ohoo';
+
+const preset = createOhooPreset({
+  imageUploader: createOhooImageUploader({
+    addImage: (filePath, fileName, options) =>
+      contentService.addImage(filePath, fileName, options),
+  }),
+  metadataAccessor: (type, id) => metadataService.getMetadataSync(type, id),
+});
+```
+
+## 导出
+
+- `@ooakloowj/tiptap-preset-ohoo`
+- `@ooakloowj/tiptap-preset-ohoo/extensions`
+- `@ooakloowj/tiptap-preset-ohoo/preset`
+- `@ooakloowj/tiptap-preset-ohoo/adapters/dictionaryProvider`
+- `@ooakloowj/tiptap-preset-ohoo/adapters/imageUploader`
+- `@ooakloowj/tiptap-preset-ohoo/adapters/imageResolver`
+
+## 说明
+
+- 本包为源码发布（`src`），由宿主项目构建。
+- 图片上传已改为注入 `addImage` 回调，不再直接依赖宿主项目服务路径。

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ooakloowj/tiptap-preset-ohoo",
+  "version": "0.1.0",
+  "description": "Ohoo-specific Tiptap preset and adapters built on top of @ooakloowj/tiptap-preset.",
+  "private": false,
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "tiptap",
+    "editor",
+    "ohoo",
+    "wikilink",
+    "internal-link"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./extensions": "./src/extensions/index.js",
+    "./preset": "./src/preset/createOhooPreset.js",
+    "./adapters/dictionaryProvider": "./src/adapters/dictionaryProvider.js",
+    "./adapters/imageUploader": "./src/adapters/imageUploader.js",
+    "./adapters/imageResolver": "./src/adapters/imageResolver.js"
+  },
+  "peerDependencies": {
+    "@ooakloowj/tiptap-preset": "^0.1.0",
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
+    "@tiptap/core": "^3.6.0",
+    "@tiptap/pm": "^3.6.0",
+    "@tiptap/react": "^3.6.0",
+    "aho-corasick": "^0.1.0",
+    "lucide-react": "^0.500.0",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/adapters/dictionaryProvider.js

@@ -0,0 +1,14 @@
+import { invoke } from '@tauri-apps/api/core';
+
+/**
+ * Ohoo 字典词库提供器
+ *
+ * 返回格式：
+ * [{ term: string, definition: string }]
+ */
+export function createOhooDictionaryProvider() {
+  return async () => {
+    const terms = await invoke('get_all_dictionary_terms');
+    return Array.isArray(terms) ? terms : [];
+  };
+}

package/src/adapters/imageResolver.js

@@ -0,0 +1,41 @@
+import { convertFileSrc, invoke } from '@tauri-apps/api/core';
+
+/**
+ * Ohoo 图片地址解析适配器
+ *
+ * 输入：节点 src/resourceId
+ * 输出：缩略图与原图 URL
+ */
+export function createOhooImageResolver() {
+  return async ({ src, resourceId }) => {
+    if (!resourceId) {
+      return {
+        thumbnailSrc: src,
+        originalSrc: src,
+      };
+    }
+
+    const resource = await invoke('get_resource', { id: resourceId });
+    if (!resource?.filePath) {
+      throw new Error(`Resource not found or missing filePath: ${resourceId}`);
+    }
+
+    const filePath = resource.filePath;
+    let thumbnailPath = filePath;
+
+    try {
+      const pyramid = await invoke('get_image_pyramid', { filePath });
+      if (pyramid) {
+        thumbnailPath = pyramid.quarter?.path || pyramid.half?.path || pyramid.eighth?.path || filePath;
+      }
+    } catch {
+      // pyramid 不可用时回退到原图
+    }
+
+    return {
+      resourceInfo: resource,
+      thumbnailSrc: convertFileSrc(thumbnailPath),
+      originalSrc: convertFileSrc(filePath),
+    };
+  };
+}

package/src/adapters/imageUploader.js

@@ -0,0 +1,51 @@
+import { tempDir, join } from '@tauri-apps/api/path';
+import { writeFile as writeBinaryFile } from '@tauri-apps/plugin-fs';
+import { buildOhooUrl } from '../extensions/ohoo-image';
+
+/**
+ * Ohoo 图片上传适配器
+ *
+ * 输出会被 OhooImage 扩展转换为节点属性。
+ */
+export function createOhooImageUploader(options = {}) {
+  const {
+    addImage,
+    context = 'library',
+    sourceTypeMap = {
+      paste: 'clipboard',
+      drop: 'drag_drop',
+    },
+  } = options;
+
+  return async (file, { source = 'paste' } = {}) => {
+    if (typeof addImage !== 'function') {
+      throw new Error('createOhooImageUploader requires options.addImage(filePath, fileName, options)');
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const uint8Array = new Uint8Array(arrayBuffer);
+    const tempDirPath = await tempDir();
+    const ext = file.type.split('/')[1] || 'png';
+    const timestamp = Date.now();
+    const random = Math.random().toString(36).substring(2, 8);
+    const tempFileName = `editor-${source}-${timestamp}-${random}.${ext}`;
+    const tempFilePath = await join(tempDirPath, tempFileName);
+    await writeBinaryFile(tempFilePath, uint8Array);
+
+    const result = await addImage(tempFilePath, tempFileName, {
+      context,
+      sourceType: sourceTypeMap[source] || source,
+    });
+
+    const resourceId = result?.entityId;
+    if (!resourceId) {
+      throw new Error('Image upload returned empty entityId');
+    }
+
+    return {
+      src: buildOhooUrl(resourceId),
+      alt: file.name || '',
+      resourceId,
+    };
+  };
+}

package/src/extensions/dictionary/DynamicDictionaryHighlight.js

@@ -0,0 +1,332 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import AhoCorasick from 'aho-corasick';
+
+/**
+ * 辅助函数：检查中英文单词边界
+ */
+function isWordBoundary(text, index) {
+  if (index < 0 || index >= text.length) return true;
+  const char = text[index];
+  return /[\s\p{P}\p{Z}\n\r]/u.test(char);
+}
+
+/**
+ * 查找所有词条（Aho-Corasick 算法优化版）
+ * 使用 Decoration（装饰）而不是 Mark（标记），确保不会被保存到文档中
+ *
+ * 性能改进：
+ * - 原算法: O(n × m × p) - 文档节点数 × 词条数 × 文本长度
+ * - 优化后: O(n + k) - 文档节点数 + 匹配数量
+ */
+function findTerms(doc, termsMap, sortedTerms) {
+  console.log('[DictionaryHighlight] 🔍 findTerms 被调用');
+  console.log('[DictionaryHighlight] 📋 词条数量:', sortedTerms?.length);
+  console.log('[DictionaryHighlight] 📄 文档大小:', doc.content.size);
+
+  const decorations = [];
+
+  // 如果没有词条，直接返回空装饰集
+  if (!sortedTerms || sortedTerms.length === 0) {
+    console.log('[DictionaryHighlight] ⚠️ 词条为空，跳过');
+    return DecorationSet.create(doc, decorations);
+  }
+
+  // 构建 Aho-Corasick 自动机（一次构建，多次匹配）
+  const ac = new AhoCorasick();
+
+  // 添加所有词条到自动机
+  for (const term of sortedTerms) {
+    ac.add(term, termsMap[term]); // 将定义作为数据存储
+  }
+
+  // 构建失败函数（必须调用）
+  ac.build_fail();
+  console.log('[DictionaryHighlight] ✅ Aho-Corasick 自动机构建完成');
+
+  // 只关心文本节点
+  let nodeCount = 0;
+  doc.descendants((node, pos) => {
+    if (!node.isText || !node.text) return;
+    nodeCount++;
+    console.log(`[DictionaryHighlight] 📝 检查节点 #${nodeCount}: "${node.text.substring(0, 50)}..."`);
+
+    // 使用 Aho-Corasick 一次性找到所有匹配
+    // 回调函数参数: (匹配的词条, 数据数组, 起始位置)
+    ac.search(node.text, (foundWord, dataArray, startIndex) => {
+      // 注意：aho-corasick返回的第二个参数是数组
+      const definition = Array.isArray(dataArray) ? dataArray[0] : dataArray;
+
+      // 检查单词边界（英文词条需要边界检查，中文不需要）
+      const isChinese = /[\u4e00-\u9fa5]/.test(foundWord);
+      let isValidMatch = true;
+
+      if (!isChinese) {
+        const endIndex = startIndex + foundWord.length - 1;
+        isValidMatch =
+          isWordBoundary(node.text, startIndex - 1) &&
+          isWordBoundary(node.text, endIndex + 1);
+      }
+
+      if (isValidMatch) {
+        const from = pos + startIndex;
+        const to = from + foundWord.length;
+
+        // 创建 Decoration (装饰)，而不是 Mark (标记)
+        decorations.push(
+          Decoration.inline(from, to, {
+            class: 'dictionary-term', // 沿用已有的 CSS
+            'data-term': foundWord,
+            'data-definition': definition,
+          })
+        );
+
+        console.log(`[DictionaryHighlight] 🎯 创建装饰: "${foundWord}" at ${from}-${to}, 定义: ${definition}`);
+      }
+    });
+  });
+
+  console.log(`[DictionaryHighlight] 📊 共创建 ${decorations.length} 个装饰`);
+  return DecorationSet.create(doc, decorations);
+}
+
+// 定义插件 Key
+const DictionaryHighlightKey = new PluginKey('dictionaryHighlight');
+
+function buildTermsPayload(rawTerms) {
+  const termsMap = {};
+  if (Array.isArray(rawTerms)) {
+    rawTerms.forEach((item) => {
+      const term = item?.term;
+      if (!term) return;
+      termsMap[term] = item?.definition || '';
+    });
+  }
+
+  const sortedTerms = Object.keys(termsMap).sort((a, b) => b.length - a.length);
+  return { termsMap, sortedTerms };
+}
+
+/**
+ * 动态字典高亮扩展
+ *
+ * 特点：
+ * 1. 使用 Decoration（装饰）而不是 Mark（标记）
+ * 2. Decoration 是纯视觉效果，永远不会被保存到文档中
+ * 3. 异步加载词库，不阻塞编辑器初始化
+ * 4. 当文档变化时自动重新计算高亮
+ * 5. 尊重手动添加的 Mark，不与之冲突
+ */
+export const DynamicDictionaryHighlight = Extension.create({
+  name: 'dynamicDictionaryHighlight',
+
+  addOptions() {
+    return {
+      dictionaryProvider: async () => [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const dictionaryProvider = this.options.dictionaryProvider;
+
+    return [
+      new Plugin({
+        key: DictionaryHighlightKey,
+
+        // 插件状态：存储词库和计算出的高亮
+        state: {
+          init() {
+            return {
+              termsMap: {},
+              sortedTerms: [],
+              decorations: DecorationSet.empty,
+            };
+          },
+          apply(tr, pluginState, oldState, newState) {
+            const { termsMap, sortedTerms } = pluginState;
+
+            // 如果只是词库更新了（通过 meta），重新计算整个文档
+            const meta = tr.getMeta(DictionaryHighlightKey);
+            if (meta?.setTerms) {
+              const { termsMap, sortedTerms } = meta.setTerms;
+              const decorations = findTerms(tr.doc, termsMap, sortedTerms);
+              return { termsMap, sortedTerms, decorations };
+            }
+
+            // 如果收到刷新请求，重新加载词库
+            if (tr.getMeta('refreshDictionary')) {
+              return { ...pluginState, needsRefresh: true };
+            }
+
+            // 如果没有词条，直接返回（但要在检查 meta 之后）
+            if (!sortedTerms || sortedTerms.length === 0) {
+              return pluginState;
+            }
+
+            // 如果文档发生变化，智能选择更新策略
+            if (tr.docChanged) {
+              // 计算变化的总范围
+              let totalChangedSize = 0;
+              tr.mapping.maps.forEach((stepMap) => {
+                stepMap.forEach((oldStart, oldEnd) => {
+                  totalChangedSize += (oldEnd - oldStart);
+                });
+              });
+
+              // 智能判断：如果变化范围小于500字符，使用增量更新；否则全量更新
+              const INCREMENTAL_THRESHOLD = 500;
+              const useIncremental = totalChangedSize < INCREMENTAL_THRESHOLD;
+
+              if (!useIncremental) {
+                // 大范围变化：全量重新计算（更快）
+                const decorations = findTerms(tr.doc, termsMap, sortedTerms);
+                return { ...pluginState, decorations };
+              }
+
+              // 小范围变化：增量更新
+              // 步骤1: 先用 map() 更新现有 decoration 的位置
+              let decorations = pluginState.decorations.map(tr.mapping, tr.doc);
+
+              // 步骤2: 找出被修改的范围（扩展一点避免边界问题）
+              const changedRanges = [];
+              tr.mapping.maps.forEach((stepMap, i) => {
+                stepMap.forEach((oldStart, oldEnd) => {
+                  // 计算新位置，并向两边扩展50字符（词条最长可能50字符）
+                  const EXPAND = 50;
+                  const newStart = Math.max(0, tr.mapping.slice(i).map(oldStart, -1) - EXPAND);
+                  const newEnd = Math.min(tr.doc.content.size, tr.mapping.slice(i).map(oldEnd, 1) + EXPAND);
+                  changedRanges.push({ from: newStart, to: newEnd });
+                });
+              });
+
+              // 步骤3: 移除变化范围内的旧装饰
+              changedRanges.forEach(({ from, to }) => {
+                decorations = decorations.remove(
+                  decorations.find(from, to)
+                );
+              });
+
+              // 步骤4: 只重新计算变化范围内的装饰
+              const newDecorations = [];
+
+              // 构建 Aho-Corasick 自动机（只构建一次，复用）
+              const ac = new AhoCorasick();
+              for (const term of sortedTerms) {
+                ac.add(term, termsMap[term]);
+              }
+              ac.build_fail();
+
+              changedRanges.forEach(({ from, to }) => {
+                tr.doc.nodesBetween(from, to, (node, pos) => {
+                  if (!node.isText || !node.text) return;
+
+                  // 搜索并创建装饰
+                  ac.search(node.text, (foundWord, dataArray, startIndex) => {
+                    // 注意：aho-corasick返回的第二个参数是数组
+                    const definition = Array.isArray(dataArray) ? dataArray[0] : dataArray;
+
+                    const isChinese = /[\u4e00-\u9fa5]/.test(foundWord);
+                    let isValidMatch = true;
+
+                    if (!isChinese) {
+                      const endIndex = startIndex + foundWord.length - 1;
+                      isValidMatch =
+                        isWordBoundary(node.text, startIndex - 1) &&
+                        isWordBoundary(node.text, endIndex + 1);
+                    }
+
+                    if (isValidMatch) {
+                      const decorationFrom = pos + startIndex;
+                      const decorationTo = decorationFrom + foundWord.length;
+
+                      newDecorations.push(
+                        Decoration.inline(decorationFrom, decorationTo, {
+                          class: 'dictionary-term',
+                          'data-term': foundWord,
+                          'data-definition': definition,
+                        })
+                      );
+                    }
+                  });
+                });
+              });
+
+              // 步骤5: 合并新旧装饰
+              decorations = decorations.add(tr.doc, newDecorations);
+              return { ...pluginState, decorations };
+            }
+
+            // 否则，保持原样（位置可能因其他 transaction 而变化）
+            return pluginState;
+          },
+        },
+
+        // 视图属性：将高亮应用到编辑器
+        props: {
+          decorations(state) {
+            return this.getState(state).decorations;
+          },
+        },
+
+        // 插件视图：处理异步加载词库
+        view(editorView) {
+          console.log('[DictionaryHighlight] 🚀 插件初始化，开始异步加载词库...');
+
+          // 加载词库的函数
+          const loadTerms = async () => {
+            try {
+              const allTerms = await dictionaryProvider?.();
+              const { termsMap, sortedTerms } = buildTermsPayload(allTerms);
+
+              if (sortedTerms.length === 0) {
+                console.log('[DictionaryHighlight] ℹ️ 词库为空');
+              } else {
+                console.log(`[DictionaryHighlight] ✅ 成功加载 ${sortedTerms.length} 个词条`);
+              }
+
+              // 通过 Transaction (事务) 将词库发送给插件（空词库也会清空旧高亮）
+              const { dispatch, state } = editorView;
+              const tr = state.tr.setMeta(DictionaryHighlightKey, {
+                setTerms: { termsMap, sortedTerms },
+              });
+              dispatch(tr);
+
+              if (sortedTerms.length > 0) {
+                console.log('[DictionaryHighlight] ✨ 词条高亮已应用');
+              }
+            } catch (err) {
+              console.error('[DictionaryHighlight] ❌ 加载词库失败:', err);
+            }
+          };
+
+          // 初始加载
+          loadTerms();
+
+          return {
+            update(view, prevState) {
+              // 检查是否需要刷新
+              const pluginState = DictionaryHighlightKey.getState(view.state);
+              if (pluginState?.needsRefresh) {
+                console.log('[DictionaryHighlight] 🔄 收到刷新请求，重新加载词库...');
+                loadTerms();
+
+                // 清除刷新标志
+                const { dispatch, state } = view;
+                const tr = state.tr.setMeta(DictionaryHighlightKey, {
+                  setTerms: {
+                    termsMap: pluginState.termsMap,
+                    sortedTerms: pluginState.sortedTerms,
+                  },
+                });
+                dispatch(tr);
+              }
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
+
+export default DynamicDictionaryHighlight;

package/src/extensions/dictionary/index.js

@@ -0,0 +1,13 @@
+/**
+ * Dictionary Extension
+ *
+ * 提供字典高亮功能，支持：
+ * - 动态加载词库
+ * - 使用 Aho-Corasick 算法高效匹配
+ * - 使用 Decoration 而非 Mark，不修改文档
+ * - 悬停显示词条定义
+ */
+
+// 导出扩展
+export { default } from './DynamicDictionaryHighlight';
+export { DynamicDictionaryHighlight } from './DynamicDictionaryHighlight';

package/src/extensions/index.js

@@ -0,0 +1,24 @@
+/**
+ * Ohoo 专用扩展导出
+ */
+
+export {
+  default as WikiLinkExtension,
+  configureWikiLink,
+} from './wikilink';
+
+export {
+  default as DynamicDictionaryHighlight,
+} from './dictionary';
+
+export {
+  default as InternalLinkNode,
+  setMetadataAccessor,
+} from './internal-link';
+
+export {
+  default as OhooImage,
+  OhooImageNodeView,
+  parseOhooProtocol,
+  buildOhooUrl,
+} from './ohoo-image';