@hyebook/vue3-adapter 0.2.1 → 0.2.2

package/dist/core/src/workbench/editor-workbench.d.ts

@@ -9,12 +9,22 @@ export interface EditorWorkbenchFeatures {
 export interface EditorWorkbenchOptions {
     initialDoc?: EbookDoc;
     features?: Partial<EditorWorkbenchFeatures>;
+    previewAnnotations?: EditorWorkbenchPreviewAnnotationOptions;
     title?: string;
     pageWidth?: number;
     upload?: EditorWorkbenchUploadOptions;
     importDocx?: EditorWorkbenchDocxImportOptions;
     onDocumentChange?: (doc: EbookDoc) => void;
 }
+export interface EditorWorkbenchPreviewAnnotationActions {
+    canDelete?: boolean;
+}
+export interface EditorWorkbenchPreviewAnnotationOptions {
+    showAnnotationList?: boolean;
+    enablePreviewSelectionToolbar?: boolean;
+    annotationListDefaultTab?: "highlights" | "notes";
+    annotationActions?: EditorWorkbenchPreviewAnnotationActions;
+}
 export interface EditorWorkbenchDocxImportOptions {
     maxSizeBytes?: number;
 }

package/dist/core/src/workbench/editor-workbench.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-workbench.d.ts","sourceRoot":"","sources":["../../../../../core/src/workbench/editor-workbench.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EAKR,kBAAkB,EAWnB,MAAM,gBAAgB,CAAC;AAkJxB,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,4BAA4B,CAAC;IACtC,UAAU,CAAC,EAAE,gCAAgC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,gCAAgC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,2BAA2B;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAyB,SAAQ,2BAA2B;CAAG;AAEhF,MAAM,WAAW,uBAAwB,SAAQ,2BAA2B;IAC1E,SAAS,EAAE,qBAAqB,CAAC;CAClC;AAED,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,uBAAuB,KAC7B,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,CACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,wBAAwB,KAC9B,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;IACjD,sBAAsB,EAAE,CACtB,WAAW,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,KAC/C,kBAAkB,CAAC;IACxB,WAAW,EAAE,MAAM,uBAAuB,CAAC;IAC3C,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,iCAAiC,EAAE,uBAM/C,CAAC;AAEF,KAAK,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC;AAsQjC,wBAAgB,8BAA8B,IAAI,QAAQ,CA6GzD;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE,sBAA2B,GACnC,qBAAqB,CAszIvB"}
+{"version":3,"file":"editor-workbench.d.ts","sourceRoot":"","sources":["../../../../../core/src/workbench/editor-workbench.ts"],"names":[],"mappings":"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"}

package/dist/core/src/workbench/editor-workbench.js

@@ -23,7 +23,9 @@ const WORKBENCH_CSS = `
 .hyewb-field-icon svg{width:14px;height:14px;stroke-width:2}
 .hyewb-field-with-icon .hyewb-select,.hyewb-field-with-icon .hyewb-number{padding-left:30px}
 .hyewb-shell{border:1px dashed #b8c3d1;border-radius:10px;background:#eef4ff;padding:10px;overflow-x:auto;overflow-y:auto;overscroll-behavior:auto;-webkit-overflow-scrolling:touch}
-.hyewb-canvas{position:relative;background:#fff;border:1px solid #d9e3ee;border-radius:8px;min-height:420px;padding:20px 24px;box-shadow:0 6px 16px rgba(15,23,42,.08);margin:0 auto}
+.hyewb-preview-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
+.hyewb-preview-layout.with-annotation-panel{grid-template-columns:minmax(0,1fr) 300px}
+.hyewb-canvas{position:relative;background:#fff;border:1px solid #d9e3ee;border-radius:8px;min-height:420px;padding:20px 24px;box-shadow:0 6px 16px rgba(15,23,42,.08);margin:0 auto;max-width:100%;box-sizing:border-box}
 .hyewb-editor{min-height:360px;outline:none;line-height:1.7;font-size:16px;color:#1e293b}
 .hyewb-float{position:fixed;z-index:9999;display:none;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;border:1px solid #0f172a;background:rgba(15,23,42,.96);box-shadow:0 10px 24px rgba(15,23,42,.22)}
 .hyewb-float.show{display:inline-flex}
@@ -139,6 +141,29 @@ const WORKBENCH_CSS = `
 .hyewb-upload-progress{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
 .hyewb-upload-progress > span{display:block;height:100%;width:0;background:#0b7285;transition:width .18s ease}
 .hyewb-upload-error{min-height:18px;font-size:12px;color:#b91c1c;margin:0}
+.hyewb-preview-highlight-mark{background:var(--hyewb-highlight-color,#fff59d);color:inherit;padding:0 .08em;border-radius:.2em}
+.hyewb-preview-note-mark{background:rgba(14,116,144,.14);border-bottom:2px solid #0e7490;color:inherit;padding:0 .04em;border-radius:.2em}
+.hyewb-preview-annotation-panel{display:none;align-content:start;gap:10px;border:1px solid #d8e0ea;border-radius:10px;background:#ffffff;padding:12px;max-height:100%;overflow:auto}
+.hyewb-preview-annotation-title{margin:0;font-size:14px}
+.hyewb-preview-annotation-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+.hyewb-preview-annotation-tab{width:auto;min-width:0;height:32px;padding:0 12px;font-size:13px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;cursor:pointer}
+.hyewb-preview-annotation-tab.active{color:#ffffff;background:#0b7285;border-color:#0b7285}
+.hyewb-preview-annotation-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
+.hyewb-preview-annotation-item{width:100%;text-align:left;display:grid;gap:4px;padding:8px 36px 8px 8px;border-radius:8px;border:1px solid #dce5ef;background:#f8fafc;position:relative;cursor:pointer}
+.hyewb-preview-annotation-item:hover{background:#eef6ff;border-color:#b9d7f4}
+.hyewb-preview-annotation-item-title{font-size:12px;color:#0f766e}
+.hyewb-preview-annotation-item-body{font-size:13px;color:#1e293b;line-height:1.5}
+.hyewb-preview-annotation-delete{position:absolute;right:8px;top:8px;border-radius:8px;border:1px solid #f1b3b3;background:#fff5f5;color:#b42318;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;cursor:pointer;padding:0}
+.hyewb-preview-annotation-item:hover .hyewb-preview-annotation-delete{opacity:1;pointer-events:auto}
+.hyewb-preview-annotation-delete svg{width:14px;height:14px}
+.hyewb-preview-annotation-empty{margin:0;color:#64748b;font-size:13px}
+.hyewb-preview-selection-toolbar{position:fixed;z-index:10060;display:none;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;border:1px solid #0f172a;background:rgba(15,23,42,.96);box-shadow:0 10px 24px rgba(15,23,42,.22);transform:translate(-50%,-100%)}
+.hyewb-preview-selection-toolbar.show{display:inline-flex}
+.hyewb-preview-selection-btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #334155;background:#1e293b;color:#f8fafc;border-radius:8px;cursor:pointer}
+.hyewb-preview-selection-btn:hover{background:#334155}
+.hyewb-preview-selection-btn svg{width:16px;height:16px}
+.hyewb-preview-annotation-flash{animation:hyewb-preview-annotation-pulse .9s ease}
+@keyframes hyewb-preview-annotation-pulse{0%{box-shadow:0 0 0 0 rgba(14,116,144,.4)}100%{box-shadow:0 0 0 12px rgba(14,116,144,0)}}
 .hyewb-root:fullscreen .hyewb-editor,.hyewb-root:fullscreen .hyewb-preview{min-height:1000px}
 .hyewb-root:-webkit-full-screen .hyewb-editor,.hyewb-root:-webkit-full-screen .hyewb-preview{min-height:1000px}
 `;
@@ -161,11 +186,13 @@ const WORKBENCH_ICON_PATHS = {
     "chevron-right": '<polyline points="9 18 15 12 9 6"/>',
     "fullscreen-enter": '<polyline points="9 3 3 3 3 9"/><line x1="3" y1="3" x2="10" y2="10"/><polyline points="15 3 21 3 21 9"/><line x1="14" y1="10" x2="21" y2="3"/><polyline points="3 15 3 21 9 21"/><line x1="3" y1="21" x2="10" y2="14"/><polyline points="15 21 21 21 21 15"/><line x1="14" y1="14" x2="21" y2="21"/>',
     "fullscreen-exit": '<polyline points="10 14 10 21 3 21"/><line x1="10" y1="14" x2="3" y2="21"/><polyline points="14 10 21 10 21 3"/><line x1="14" y1="10" x2="21" y2="3"/><polyline points="3 9 3 3 9 3"/><line x1="3" y1="3" x2="10" y2="10"/><polyline points="21 15 21 21 15 21"/><line x1="21" y1="21" x2="14" y2="14"/>',
+    highlighter: '<path d="M15 2l7 7-8.5 8.5-7-7z"/><path d="M12.5 11.5L2 22l6-1.5 6-6"/><line x1="13" y1="4" x2="20" y2="11"/>',
     "file-up": '<path d="M14 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9.5 14.5 12 12 14.5 14.5"/>',
     image: '<rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="M6 17l4-4 3 3 3-2 2 3"/>',
     italic: '<line x1="10" y1="4" x2="16" y2="4"/><line x1="8" y1="20" x2="14" y2="20"/><line x1="14" y1="4" x2="10" y2="20"/>',
     "indent-increase": '<line x1="4" y1="6" x2="14" y2="6"/><line x1="4" y1="10" x2="10" y2="10"/><line x1="4" y1="14" x2="14" y2="14"/><line x1="4" y1="18" x2="10" y2="18"/><polyline points="15 9 19 12 15 15"/>',
     move: '<polyline points="8 4 12 1 16 4"/><line x1="12" y1="1" x2="12" y2="23"/><polyline points="8 20 12 23 16 20"/><polyline points="4 8 1 12 4 16"/><line x1="1" y1="12" x2="23" y2="12"/><polyline points="20 8 23 12 20 16"/>',
+    "notebook-pen": '<path d="M4 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><line x1="8" y1="7" x2="14" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/><path d="M14.5 16.5l4-4 2 2-4 4-2.5.5z"/>',
     "paint-bucket": '<path d="M7 10l6-6 7 7-6 6z"/><path d="M12 5l7 7"/><path d="M5 19a2 2 0 1 0 4 0c0-1-1-2-2-3-1 1-2 2-2 3z"/>',
     palette: '<path d="M12 3a9 9 0 1 0 0 18h1.5a2.5 2.5 0 0 0 0-5h-1a2 2 0 0 1 0-4H16a5 5 0 0 0-4-9z"/><circle cx="7.5" cy="10" r="1"/><circle cx="10" cy="7.5" r="1"/><circle cx="14" cy="7.5" r="1"/>',
     pilcrow: '<path d="M9 4h7v16"/><path d="M12 4v16"/><path d="M9 4a4 4 0 0 0 0 8h3"/>',
@@ -175,6 +202,7 @@ const WORKBENCH_ICON_PATHS = {
     subscript: '<line x1="4" y1="8" x2="10" y2="16"/><line x1="10" y1="8" x2="4" y2="16"/><path d="M14 15c0-1.1.9-2 2-2s2 .9 2 2c0 .7-.3 1.2-.9 1.7L14 20h4"/>',
     superscript: '<line x1="4" y1="8" x2="10" y2="16"/><line x1="10" y1="8" x2="4" y2="16"/><path d="M14 6c0-1.1.9-2 2-2s2 .9 2 2c0 .7-.3 1.2-.9 1.7L14 11h4"/>',
     table: '<rect x="3" y="5" width="18" height="14" rx="1"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="9" y1="5" x2="9" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/>',
+    "trash-2": '<polyline points="3 6 5 6 21 6"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>',
     underline: '<path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/>',
     video: '<rect x="3" y="6" width="14" height="12" rx="2"/><polygon points="10 10 10 14 13 12"/><path d="M17 10l4-2v8l-4-2z"/>',
     x: '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
@@ -274,6 +302,16 @@ const RESIZE_HANDLES = [
     "w",
 ];
 const DEFAULT_FLOW_BLOCK_WIDTH = 620;
+function resolvePreviewAnnotationOptions(options) {
+    return {
+        showAnnotationList: options?.showAnnotationList ?? true,
+        enablePreviewSelectionToolbar: options?.enablePreviewSelectionToolbar ?? true,
+        annotationListDefaultTab: options?.annotationListDefaultTab === "notes" ? "notes" : "highlights",
+        annotationActions: {
+            canDelete: options?.annotationActions?.canDelete ?? true,
+        },
+    };
+}
 export function createDefaultWorkbenchDocument() {
     const now = new Date().toISOString();
     return {
@@ -394,6 +432,7 @@ export function mountEditorWorkbench(container, options = {}) {
         doc: editor.getDocument(),
         features: resolveFeatures(options.features),
     };
+    const previewAnnotationOptions = resolvePreviewAnnotationOptions(options.previewAnnotations);
     const paperWidth = resolvePaperWidth(options.pageWidth, state.doc.settings.page.width);
     const root = document.createElement("section");
     root.className = "hyewb-root";
@@ -674,6 +713,8 @@ export function mountEditorWorkbench(container, options = {}) {
     pageInfo.className = "hyewb-status";
     fullscreenBtn.style.marginLeft = "auto";
     pageRow.append(prevPageBtn, nextPageBtn, addPageBtn, pageInfo, fullscreenBtn);
+    const previewLayout = document.createElement("div");
+    previewLayout.className = "hyewb-preview-layout";
     const shell = document.createElement("div");
     shell.className = "hyewb-shell";
     const canvas = document.createElement("div");
@@ -698,6 +739,43 @@ export function mountEditorWorkbench(container, options = {}) {
     mediaList.className = "hyewb-media-list";
     canvas.append(editorArea, previewArea, mediaStage, inlineResizeOverlay, mediaList);
     shell.append(canvas);
+    const annotationPanel = document.createElement("aside");
+    annotationPanel.className = "hyewb-preview-annotation-panel";
+    const annotationTitle = document.createElement("h3");
+    annotationTitle.className = "hyewb-preview-annotation-title";
+    annotationTitle.textContent = "预览标注";
+    const annotationTabs = document.createElement("div");
+    annotationTabs.className = "hyewb-preview-annotation-tabs";
+    const annotationHighlightTab = document.createElement("button");
+    annotationHighlightTab.type = "button";
+    annotationHighlightTab.className = "hyewb-preview-annotation-tab";
+    annotationHighlightTab.textContent = "高亮";
+    const annotationNoteTab = document.createElement("button");
+    annotationNoteTab.type = "button";
+    annotationNoteTab.className = "hyewb-preview-annotation-tab";
+    annotationNoteTab.textContent = "笔记";
+    annotationTabs.append(annotationHighlightTab, annotationNoteTab);
+    const annotationList = document.createElement("ul");
+    annotationList.className = "hyewb-preview-annotation-list";
+    const annotationEmpty = document.createElement("p");
+    annotationEmpty.className = "hyewb-preview-annotation-empty";
+    annotationPanel.append(annotationTitle, annotationTabs, annotationList, annotationEmpty);
+    previewLayout.append(shell, annotationPanel);
+    const previewSelectionToolbar = document.createElement("div");
+    previewSelectionToolbar.className = "hyewb-preview-selection-toolbar";
+    const previewHighlightBtn = document.createElement("button");
+    previewHighlightBtn.type = "button";
+    previewHighlightBtn.className = "hyewb-preview-selection-btn";
+    previewHighlightBtn.title = "创建高亮";
+    previewHighlightBtn.setAttribute("aria-label", "创建高亮");
+    previewHighlightBtn.append(createIconPlaceholder("highlighter"));
+    const previewNoteBtn = document.createElement("button");
+    previewNoteBtn.type = "button";
+    previewNoteBtn.className = "hyewb-preview-selection-btn";
+    previewNoteBtn.title = "创建笔记";
+    previewNoteBtn.setAttribute("aria-label", "创建笔记");
+    previewNoteBtn.append(createIconPlaceholder("notebook-pen"));
+    previewSelectionToolbar.append(previewHighlightBtn, previewNoteBtn);
     const floatingToolbar = document.createElement("div");
     floatingToolbar.className = "hyewb-float";
     const floatBoldBtn = createButton("bold");
@@ -772,7 +850,7 @@ export function mountEditorWorkbench(container, options = {}) {
     const colorGrid = document.createElement("div");
     colorGrid.className = "hyewb-color-grid";
     colorPalette.append(colorGrid);
-    root.append(header, toolbar, pageRow, shell, status, colorPalette, tablePicker, tableTools, tableRowDeleteBtn, tableMoveHandle, tableScaleHandle, tableColEdgeLayer, tableRowEdgeLayer, tableRowGapInsertBtn, tableColGapInsertBtn, tableDropIndicator, tableContextMenu, uploadBackdrop, docxInput);
+    root.append(header, toolbar, pageRow, previewLayout, status, colorPalette, tablePicker, tableTools, tableRowDeleteBtn, tableMoveHandle, tableScaleHandle, tableColEdgeLayer, tableRowEdgeLayer, tableRowGapInsertBtn, tableColGapInsertBtn, tableDropIndicator, tableContextMenu, uploadBackdrop, docxInput, previewSelectionToolbar);
     container.innerHTML = "";
     container.append(root, floatingToolbar);
     renderWorkbenchIcons();
@@ -798,6 +876,8 @@ export function mountEditorWorkbench(container, options = {}) {
     let tableContextTarget = null;
     let selectedTableRowIndex = null;
     let selectedTableColIndex = null;
+    let annotationActiveTab = previewAnnotationOptions.annotationListDefaultTab;
+    let previewSelectionDraft = null;
     const isTableGapInsertTarget = (node) => {
         if (!node) {
             return false;
@@ -1132,6 +1212,7 @@ export function mountEditorWorkbench(container, options = {}) {
         syncEditorToDoc();
         state.mode = nextMode;
         hideFloatingToolbar();
+        hidePreviewSelectionToolbar();
         render();
     };
     const loadPreviewAnnotations = () => {
@@ -1144,6 +1225,423 @@ export function mountEditorWorkbench(container, options = {}) {
         updateStateDoc(nextDoc);
         return clone(normalized);
     };
+    const getCurrentPageId = () => {
+        return state.doc.pages[state.pageIndex]?.id || `page-${state.pageIndex}`;
+    };
+    const normalizeOffsetRange = (start, end) => {
+        const safeStart = Math.max(0, Math.floor(start || 0));
+        const safeEnd = Math.max(0, Math.floor(end || 0));
+        if (safeStart === safeEnd) {
+            return null;
+        }
+        return safeStart < safeEnd
+            ? { start: safeStart, end: safeEnd }
+            : { start: safeEnd, end: safeStart };
+    };
+    const getNodeTextLength = (rootNode) => {
+        if (!rootNode) {
+            return 0;
+        }
+        const walker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT);
+        let size = 0;
+        while (walker.nextNode()) {
+            size += walker.currentNode.textContent?.length || 0;
+        }
+        return size;
+    };
+    const getRangeTextLength = (range) => {
+        if (!range) {
+            return 0;
+        }
+        return getNodeTextLength(range.cloneContents());
+    };
+    const getSelectionOffsets = (containerNode, selection) => {
+        if (!selection.rangeCount) {
+            return null;
+        }
+        const range = selection.getRangeAt(0);
+        if (!containerNode.contains(range.startContainer) ||
+            !containerNode.contains(range.endContainer)) {
+            return null;
+        }
+        const beforeStart = range.cloneRange();
+        beforeStart.selectNodeContents(containerNode);
+        beforeStart.setEnd(range.startContainer, range.startOffset);
+        const beforeEnd = range.cloneRange();
+        beforeEnd.selectNodeContents(containerNode);
+        beforeEnd.setEnd(range.endContainer, range.endOffset);
+        return normalizeOffsetRange(getRangeTextLength(beforeStart), getRangeTextLength(beforeEnd));
+    };
+    const createRangeFromOffsets = (containerNode, start, end) => {
+        const normalized = normalizeOffsetRange(start, end);
+        if (!normalized) {
+            return null;
+        }
+        const range = document.createRange();
+        const walker = document.createTreeWalker(containerNode, NodeFilter.SHOW_TEXT);
+        let cursor = 0;
+        let startNode = null;
+        let endNode = null;
+        let startOffset = 0;
+        let endOffset = 0;
+        let lastTextNode = null;
+        while (walker.nextNode()) {
+            const node = walker.currentNode;
+            const length = node.textContent?.length || 0;
+            lastTextNode = node;
+            const nextCursor = cursor + length;
+            if (!startNode &&
+                normalized.start >= cursor &&
+                normalized.start < nextCursor) {
+                startNode = node;
+                startOffset = normalized.start - cursor;
+            }
+            if (!endNode && normalized.end > cursor && normalized.end <= nextCursor) {
+                endNode = node;
+                endOffset = normalized.end - cursor;
+                break;
+            }
+            cursor = nextCursor;
+        }
+        if (!startNode && lastTextNode && normalized.start === cursor) {
+            startNode = lastTextNode;
+            startOffset = lastTextNode.textContent?.length || 0;
+        }
+        if (!endNode && lastTextNode && normalized.end === cursor) {
+            endNode = lastTextNode;
+            endOffset = lastTextNode.textContent?.length || 0;
+        }
+        if (!startNode || !endNode) {
+            return null;
+        }
+        range.setStart(startNode, startOffset);
+        range.setEnd(endNode, endOffset);
+        return range;
+    };
+    const unwrapPreviewMarks = (containerNode, kinds) => {
+        const selector = kinds
+            .map((kind) => `mark[data-preview-annotation='${kind}']`)
+            .join(",");
+        if (!selector) {
+            return;
+        }
+        const marks = Array.from(containerNode.querySelectorAll(selector));
+        marks.forEach((mark) => {
+            const parent = mark.parentNode;
+            if (!parent) {
+                return;
+            }
+            while (mark.firstChild) {
+                parent.insertBefore(mark.firstChild, mark);
+            }
+            parent.removeChild(mark);
+        });
+    };
+    const applyHighlightMarks = (containerNode, highlights) => {
+        unwrapPreviewMarks(containerNode, ["highlight"]);
+        [...highlights]
+            .filter((item) => Number.isFinite(item.start) && Number.isFinite(item.end))
+            .sort((a, b) => b.start - a.start)
+            .forEach((item) => {
+            const range = createRangeFromOffsets(containerNode, item.start, item.end);
+            if (!range || range.collapsed) {
+                return;
+            }
+            const mark = document.createElement("mark");
+            mark.dataset.previewAnnotation = "highlight";
+            mark.className = "hyewb-preview-highlight-mark";
+            mark.style.setProperty("--hyewb-highlight-color", item.color || "#fff59d");
+            try {
+                range.surroundContents(mark);
+            }
+            catch {
+                const fragment = range.extractContents();
+                mark.append(fragment);
+                range.insertNode(mark);
+            }
+        });
+    };
+    const applyNoteMarks = (containerNode, notes) => {
+        unwrapPreviewMarks(containerNode, ["note"]);
+        [...notes]
+            .filter((item) => Number.isFinite(item.start) && Number.isFinite(item.end))
+            .sort((a, b) => b.start - a.start)
+            .forEach((item) => {
+            const range = createRangeFromOffsets(containerNode, item.start, item.end);
+            if (!range || range.collapsed) {
+                return;
+            }
+            const mark = document.createElement("mark");
+            mark.dataset.previewAnnotation = "note";
+            mark.dataset.previewNoteId = item.id || "";
+            mark.className = "hyewb-preview-note-mark";
+            try {
+                range.surroundContents(mark);
+            }
+            catch {
+                const fragment = range.extractContents();
+                mark.append(fragment);
+                range.insertNode(mark);
+            }
+        });
+    };
+    const mergeHighlightRecords = (records, draft) => {
+        const normalized = normalizeOffsetRange(draft.start, draft.end);
+        if (!normalized || !draft.pageId || !draft.blockId) {
+            return records;
+        }
+        const targetColor = draft.color || "#fff59d";
+        const sameBucket = [];
+        const rest = [];
+        records.forEach((item) => {
+            if (item.pageId === draft.pageId &&
+                item.blockId === draft.blockId &&
+                (item.color || "#fff59d") === targetColor) {
+                sameBucket.push(item);
+            }
+            else {
+                rest.push(item);
+            }
+        });
+        let mergedStart = normalized.start;
+        let mergedEnd = normalized.end;
+        const kept = [];
+        sameBucket.forEach((item) => {
+            const overlap = !(item.end < mergedStart || item.start > mergedEnd);
+            if (overlap) {
+                mergedStart = Math.min(mergedStart, item.start);
+                mergedEnd = Math.max(mergedEnd, item.end);
+            }
+            else {
+                kept.push(item);
+            }
+        });
+        return [
+            ...rest,
+            ...kept,
+            {
+                ...draft,
+                start: mergedStart,
+                end: mergedEnd,
+            },
+        ];
+    };
+    const mergeNoteRecords = (records, draft) => {
+        const index = records.findIndex((item) => {
+            return (item.pageId === draft.pageId &&
+                item.start === draft.start &&
+                item.end === draft.end);
+        });
+        if (index === -1) {
+            return [...records, draft];
+        }
+        const next = [...records];
+        const existing = next[index];
+        if (!existing) {
+            return [...records, draft];
+        }
+        next[index] = {
+            ...existing,
+            ...draft,
+            id: existing.id || draft.id,
+            updatedAt: new Date().toISOString(),
+        };
+        return next;
+    };
+    const summarizePreviewText = (text, fallback, maxLength = 52) => {
+        const raw = String(text || "")
+            .replace(/\s+/g, " ")
+            .trim();
+        if (!raw) {
+            return fallback;
+        }
+        return raw.length > maxLength ? `${raw.slice(0, maxLength)}...` : raw;
+    };
+    const flashPreviewAnnotationTarget = (node) => {
+        if (!node || !node.classList) {
+            return;
+        }
+        node.classList.remove("hyewb-preview-annotation-flash");
+        void node.offsetWidth;
+        node.classList.add("hyewb-preview-annotation-flash");
+        window.setTimeout(() => {
+            node.classList.remove("hyewb-preview-annotation-flash");
+        }, 900);
+    };
+    const focusPreviewAnnotationRecord = (record, kind) => {
+        let target = null;
+        if (kind === "note" && "id" in record && record.id) {
+            const noteId = String(record.id);
+            target = previewArea.querySelector(`mark[data-preview-annotation='note'][data-preview-note-id='${noteId.replace(/["\\]/g, "\\$&")}']`);
+        }
+        if (!target) {
+            const range = createRangeFromOffsets(previewArea, record.start, record.end);
+            if (range && !range.collapsed) {
+                const node = range.startContainer;
+                target =
+                    node.nodeType === Node.ELEMENT_NODE
+                        ? node
+                        : node.parentElement;
+            }
+        }
+        if (!target ||
+            typeof target.scrollIntoView !== "function") {
+            return;
+        }
+        target.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+        });
+        flashPreviewAnnotationTarget(target);
+    };
+    const getPreviewAnnotationsByPage = () => {
+        const pageId = getCurrentPageId();
+        const annotations = normalizePreviewAnnotations(state.doc.meta.previewAnnotations);
+        return {
+            annotations,
+            pageId,
+            highlights: annotations.highlights.filter((item) => item.pageId === pageId),
+            notes: annotations.notes.filter((item) => item.pageId === pageId),
+        };
+    };
+    const renderAnnotationPanel = () => {
+        const shouldShowPanel = state.mode === "preview" &&
+            state.features.preview &&
+            previewAnnotationOptions.showAnnotationList;
+        annotationPanel.style.display = shouldShowPanel ? "grid" : "none";
+        previewLayout.classList.toggle("with-annotation-panel", shouldShowPanel);
+        if (!shouldShowPanel) {
+            return;
+        }
+        const { highlights, notes } = getPreviewAnnotationsByPage();
+        annotationHighlightTab.classList.toggle("active", annotationActiveTab === "highlights");
+        annotationNoteTab.classList.toggle("active", annotationActiveTab === "notes");
+        const activeList = annotationActiveTab === "highlights" ? highlights : notes;
+        annotationList.innerHTML = "";
+        if (!activeList.length) {
+            annotationEmpty.style.display = "block";
+            annotationEmpty.textContent =
+                annotationActiveTab === "highlights"
+                    ? "当前页暂无高亮"
+                    : "当前页暂无笔记";
+            return;
+        }
+        annotationEmpty.style.display = "none";
+        activeList.forEach((record, index) => {
+            const item = document.createElement("li");
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "hyewb-preview-annotation-item";
+            const heading = document.createElement("span");
+            heading.className = "hyewb-preview-annotation-item-title";
+            heading.textContent =
+                annotationActiveTab === "highlights"
+                    ? `高亮 ${index + 1}`
+                    : `笔记 ${index + 1}`;
+            const body = document.createElement("span");
+            body.className = "hyewb-preview-annotation-item-body";
+            const fallbackRange = `[${record.start}, ${record.end}]`;
+            body.textContent =
+                annotationActiveTab === "highlights"
+                    ? summarizePreviewText(record.selectedText, fallbackRange)
+                    : summarizePreviewText(record.text, "未命名笔记");
+            button.append(heading, body);
+            button.addEventListener("click", () => {
+                focusPreviewAnnotationRecord(record, annotationActiveTab === "highlights" ? "highlight" : "note");
+            });
+            if (previewAnnotationOptions.annotationActions.canDelete) {
+                const deleteButton = document.createElement("button");
+                deleteButton.type = "button";
+                deleteButton.className = "hyewb-preview-annotation-delete";
+                deleteButton.title = "删除标注";
+                deleteButton.setAttribute("aria-label", "删除标注");
+                deleteButton.append(createIconPlaceholder("trash-2"));
+                deleteButton.addEventListener("click", (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!window.confirm("确定删除这条标注吗？")) {
+                        return;
+                    }
+                    const current = normalizePreviewAnnotations(state.doc.meta.previewAnnotations);
+                    if (annotationActiveTab === "highlights") {
+                        current.highlights = current.highlights.filter((item) => {
+                            if ("id" in record && record.id && item.id) {
+                                return String(item.id) !== String(record.id);
+                            }
+                            return !(item.pageId === record.pageId &&
+                                item.start === record.start &&
+                                item.end === record.end);
+                        });
+                    }
+                    else {
+                        current.notes = current.notes.filter((item) => {
+                            if ("id" in record && record.id && item.id) {
+                                return String(item.id) !== String(record.id);
+                            }
+                            return !(item.pageId === record.pageId &&
+                                item.start === record.start &&
+                                item.end === record.end);
+                        });
+                    }
+                    savePreviewAnnotations(current);
+                });
+                button.append(deleteButton);
+            }
+            item.append(button);
+            annotationList.append(item);
+        });
+    };
+    const applyPreviewAnnotationsToView = () => {
+        if (state.mode !== "preview") {
+            previewSelectionToolbar.classList.remove("show");
+            return;
+        }
+        const { highlights, notes } = getPreviewAnnotationsByPage();
+        applyHighlightMarks(previewArea, highlights);
+        applyNoteMarks(previewArea, notes);
+    };
+    const hidePreviewSelectionToolbar = () => {
+        previewSelectionToolbar.classList.remove("show");
+        previewSelectionDraft = null;
+    };
+    const syncPreviewSelectionToolbar = () => {
+        if (!previewAnnotationOptions.enablePreviewSelectionToolbar ||
+            state.mode !== "preview") {
+            hidePreviewSelectionToolbar();
+            return;
+        }
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+            hidePreviewSelectionToolbar();
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (!previewArea.contains(range.startContainer) ||
+            !previewArea.contains(range.endContainer)) {
+            hidePreviewSelectionToolbar();
+            return;
+        }
+        const offsets = getSelectionOffsets(previewArea, selection);
+        if (!offsets) {
+            hidePreviewSelectionToolbar();
+            return;
+        }
+        const rect = range.getBoundingClientRect();
+        if (!rect.width && !rect.height) {
+            hidePreviewSelectionToolbar();
+            return;
+        }
+        previewSelectionDraft = {
+            start: offsets.start,
+            end: offsets.end,
+            pageId: getCurrentPageId(),
+            text: selection.toString().trim(),
+        };
+        previewSelectionToolbar.style.left = `${Math.round(rect.left + rect.width / 2)}px`;
+        previewSelectionToolbar.style.top = `${Math.round(rect.top - 8)}px`;
+        previewSelectionToolbar.classList.add("show");
+    };
     const hideFloatingToolbar = () => {
         floatingToolbar.classList.remove("show");
         lastSelection = null;
@@ -2844,7 +3342,14 @@ export function mountEditorWorkbench(container, options = {}) {
             selectInlineImage(null);
             rememberedParagraphIndex = null;
         }
-        canvas.style.width = `${paperWidth}px`;
+        if (state.mode === "preview") {
+            canvas.style.width = "100%";
+            canvas.style.maxWidth = `${paperWidth}px`;
+        }
+        else {
+            canvas.style.width = `${paperWidth}px`;
+            canvas.style.maxWidth = "100%";
+        }
         previewArea.innerHTML = html;
         previewArea.classList.toggle("show", state.mode === "preview");
         editorArea.style.display = state.mode === "editor" ? "block" : "none";
@@ -2937,6 +3442,9 @@ export function mountEditorWorkbench(container, options = {}) {
         });
         updateInlineResizeOverlay();
         syncToolbarState();
+        applyPreviewAnnotationsToView();
+        renderAnnotationPanel();
+        syncPreviewSelectionToolbar();
     };
     boldBtn.addEventListener("click", () => {
         withSelectionCommand(() => {
@@ -3127,6 +3635,59 @@ export function mountEditorWorkbench(container, options = {}) {
     floatBgColorInput.addEventListener("click", () => {
         openColorPalette(floatBgColorInput, "background");
     });
+    annotationHighlightTab.addEventListener("click", () => {
+        annotationActiveTab = "highlights";
+        renderAnnotationPanel();
+    });
+    annotationNoteTab.addEventListener("click", () => {
+        annotationActiveTab = "notes";
+        renderAnnotationPanel();
+    });
+    previewHighlightBtn.addEventListener("click", () => {
+        if (!previewSelectionDraft) {
+            return;
+        }
+        const current = normalizePreviewAnnotations(state.doc.meta.previewAnnotations);
+        current.highlights = mergeHighlightRecords(current.highlights, {
+            id: `hl-${Date.now()}-${Math.round(Math.random() * 10000)}`,
+            pageId: previewSelectionDraft.pageId,
+            blockId: "preview-flow-text",
+            start: previewSelectionDraft.start,
+            end: previewSelectionDraft.end,
+            color: "#fff59d",
+            selectedText: previewSelectionDraft.text,
+            createdAt: new Date().toISOString(),
+        });
+        annotationActiveTab = "highlights";
+        savePreviewAnnotations(current);
+        window.getSelection()?.removeAllRanges();
+        hidePreviewSelectionToolbar();
+    });
+    previewNoteBtn.addEventListener("click", () => {
+        if (!previewSelectionDraft) {
+            return;
+        }
+        const text = window.prompt("请输入笔记内容", previewSelectionDraft.text || "") || "";
+        const noteText = text.trim();
+        if (!noteText) {
+            return;
+        }
+        const current = normalizePreviewAnnotations(state.doc.meta.previewAnnotations);
+        current.notes = mergeNoteRecords(current.notes, {
+            id: `note-${Date.now()}-${Math.round(Math.random() * 10000)}`,
+            pageId: previewSelectionDraft.pageId,
+            start: previewSelectionDraft.start,
+            end: previewSelectionDraft.end,
+            text: noteText,
+            selectedText: previewSelectionDraft.text,
+            color: "#0e7490",
+            createdAt: new Date().toISOString(),
+        });
+        annotationActiveTab = "notes";
+        savePreviewAnnotations(current);
+        window.getSelection()?.removeAllRanges();
+        hidePreviewSelectionToolbar();
+    });
     floatLeftBtn.addEventListener("click", () => updateAlign("left"));
     floatCenterBtn.addEventListener("click", () => updateAlign("center"));
     floatRightBtn.addEventListener("click", () => updateAlign("right"));
@@ -3781,12 +4342,14 @@ export function mountEditorWorkbench(container, options = {}) {
         updateInlineResizeOverlay();
         syncToolbarState();
         syncFocusedTableControls();
+        syncPreviewSelectionToolbar();
     };
     const handleWindowResize = () => {
         updateShellViewportHeight();
         updateInlineResizeOverlay();
         syncTableToolsPosition();
         syncFocusedTableControls();
+        syncPreviewSelectionToolbar();
         if (tablePicker.classList.contains("show")) {
             showTablePicker();
         }
@@ -3797,6 +4360,7 @@ export function mountEditorWorkbench(container, options = {}) {
         updateFloatingToolbarBySelection();
         syncTableToolsPosition();
         syncFocusedTableControls();
+        syncPreviewSelectionToolbar();
         if (tablePicker.classList.contains("show")) {
             showTablePicker();
         }
@@ -3819,6 +4383,7 @@ export function mountEditorWorkbench(container, options = {}) {
             updateInlineResizeOverlay();
             syncTableToolsPosition();
             syncFocusedTableControls();
+            syncPreviewSelectionToolbar();
         });
     };
     document.addEventListener("fullscreenchange", handleFullscreenChange);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyebook/vue3-adapter",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Vue3 adapter for hy-ebook core",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     "dist"
   ],
   "dependencies": {
-    "@hyebook/core": "^0.2.1"
+    "@hyebook/core": "^0.2.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",