@hyebook/vue3-adapter 2.3.2 → 2.3.4

package/dist/core/src/player/ebook-player.js

@@ -1,6 +1,6 @@
 import { PlayerEngine } from "./engine";
 const EBOOK_PLAYER_STYLE_ID = "hy-ebook-lite-player-style";
-const EBOOK_PLAYER_STYLE_VERSION = "0.1.0";
+const EBOOK_PLAYER_STYLE_VERSION = "0.2.0";
 const HIGHLIGHT_ICON_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 22V12.5H6V8.5H18V12.5H21V22H3Z" stroke="#333333" stroke-width="2" stroke-linejoin="round"/><path d="M8.5 8.5V4L15.5 2V8.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 const NOTE_ICON_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4998 4.49951L19.4998 8.4995" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.99977 15.9995L17.9997 2L21.9998 5.9995L7.99975 19.9995L2.99976 20.9995L3.99977 15.9995Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.49976 15.9995L7.99975 19.4995" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.49976 17.4995L17.4998 6.4995" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 const BOOKMARK_ICON_SVG = `<svg width="30" height="40" viewBox="0 0 30 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3C0 1.34315 1.34315 0 3 0H27C28.6569 0 30 1.34315 30 3V38.1989C30 38.9837 29.1374 39.4627 28.4713 39.0477L15 30.6562L1.52873 39.0477C0.862627 39.4627 0 38.9837 0 38.1989L0 3Z" fill="#4FCEBB"/></svg>`;
@@ -9,15 +9,33 @@ const EBOOK_PLAYER_CSS = `
 .hyepl-content{position:relative}
 .hyepl-page{margin:0 0 16px}
 .hyepl-page:last-child{margin-bottom:0}
-.hyepl-block{margin:0 0 10px;white-space:pre-wrap;word-break:break-word}
+.hyepl-block{margin:0 0 10px;word-break:break-word}
 .hyepl-block:last-child{margin-bottom:0}
-.hyepl-block-text{position:relative;padding-right:18px}
+.hyepl-block-text{position:relative;padding-right:18px;white-space:normal}
+.hyepl-block-text p,.hyepl-block-text h1,.hyepl-block-text h2,.hyepl-block-text h3,.hyepl-block-text h4,.hyepl-block-text blockquote{margin:0 0 .75em;line-height:1.7}
+.hyepl-block-text p:last-child,.hyepl-block-text h1:last-child,.hyepl-block-text h2:last-child,.hyepl-block-text h3:last-child,.hyepl-block-text h4:last-child,.hyepl-block-text blockquote:last-child{margin-bottom:0}
+.hyepl-block-text h1{font-size:24px;line-height:1.3}
+.hyepl-block-text h2{font-size:20px;line-height:1.35}
+.hyepl-block-text h3{font-size:16px;line-height:1.45}
+.hyepl-block-text h4{font-size:14px;line-height:1.5}
+.hyepl-block-text blockquote{padding-left:12px;border-left:3px solid #cbd5e1;color:#475569}
+.hyepl-block-text sup,.hyepl-block-text sub{font-size:.6em;line-height:0;position:relative;vertical-align:baseline}
+.hyepl-block-text sup{top:-.5em}
+.hyepl-block-text sub{top:.5em}
+.hyepl-inline-media{display:inline-block;vertical-align:middle;max-width:100%}
+.hyepl-inline-image{height:auto;border-radius:6px}
+.hyepl-inline-video{border-radius:8px;background:#000}
+.hyepl-block-image img,.hyepl-block-video video{display:block;max-width:100%;width:100%;height:auto;border-radius:8px}
+.hyepl-block-image figcaption,.hyepl-block-video figcaption{margin-top:6px;font-size:12px;color:#64748b}
+.hyepl-block-table{overflow:auto}
+.hyepl-block-table table{width:100%;border-collapse:collapse;table-layout:fixed}
+.hyepl-block-table th,.hyepl-block-table td{border:1px solid #cbd5e1;padding:6px 8px;vertical-align:top;min-width:68px}
 .hyepl-block-muted{color:#64748b}
 .hyepl-highlight{background:var(--hyepl-highlight-color,#fff59d);color:inherit;padding:0 .08em;border-radius:.2em}
 .hyepl-note{background:rgba(14,116,144,.14);border-bottom:2px solid #0e7490;color:inherit;padding:0 .04em;border-radius:.2em}
 .hyepl-bookmark-flag{position:absolute;top:4px;right:0;display:inline-flex;align-items:center;justify-content:center;width:12px;height:16px;pointer-events:none;user-select:none}
 .hyepl-bookmark-flag svg{display:block;width:12px;height:16px}
-.hyepl-selection-toolbar{position:fixed;z-index:10060;display:none;align-items:stretch;gap:0;padding:8px 10px;border-radius:14px;border:1px solid #e5e7eb;background:#ffffff;box-shadow:0 10px 24px rgba(15,23,42,.14);transform:translate(-50%,-100%);overflow:visible}
+.hyepl-selection-toolbar{position:fixed;z-index:10070;display:none;align-items:stretch;gap:0;padding:8px 10px;border-radius:14px;border:1px solid #e5e7eb;background:#ffffff;box-shadow:0 10px 24px rgba(15,23,42,.14);transform:translate(-50%,-100%);overflow:visible}
 .hyepl-selection-toolbar.show{display:flex}
 .hyepl-selection-toolbar:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);border-width:10px 10px 0 10px;border-style:solid;border-color:#ffffff transparent transparent transparent;filter:drop-shadow(0 1px 0 #e5e7eb);pointer-events:none}
 
@@ -248,7 +266,7 @@ export class EBookPlayer {
         blockTextNode.className = "hyepl-block hyepl-block-text";
         blockTextNode.dataset.pageId = pageId;
         blockTextNode.dataset.blockId = block.id;
-        blockTextNode.textContent = this.getTextBlockContent(block);
+        blockTextNode.innerHTML = this.textBlockToHTML(block);
         const blockKey = this.toBlockKey(pageId, block.id);
         const highlights = buckets.highlightsByBlock.get(blockKey) || [];
         const notes = buckets.notesByBlock.get(blockKey) || [];
@@ -261,20 +279,17 @@ export class EBookPlayer {
         return blockTextNode;
     }
     renderNonTextBlock(block) {
-        const node = document.createElement("div");
-        node.className = "hyepl-block hyepl-block-muted";
         if (block.type === "image") {
-            node.textContent = "[图片内容]";
-            return node;
+            return this.renderImageBlock(block);
         }
         if (block.type === "video") {
-            node.textContent = "[视频内容]";
-            return node;
+            return this.renderVideoBlock(block);
         }
         if (block.type === "table") {
-            node.textContent = "[表格内容]";
-            return node;
+            return this.renderTableBlock(block);
         }
+        const node = document.createElement("div");
+        node.className = "hyepl-block hyepl-block-muted";
         node.textContent = "[内容块]";
         return node;
     }
@@ -285,21 +300,248 @@ export class EBookPlayer {
         })
             .join("\n");
     }
+    textBlockToHTML(block) {
+        const paragraphs = block.content?.paragraphs ?? [];
+        if (!paragraphs.length) {
+            return "<p><br></p>";
+        }
+        return paragraphs
+            .map((paragraph) => {
+            const tag = this.paragraphTypeToTag(paragraph.type);
+            const inlineById = Object.fromEntries((paragraph.inlineElements ?? []).map((item) => [item.id, item]));
+            const styleTokens = [
+                `text-align:${paragraph.align || "left"}`,
+                paragraph.lineHeight ? `line-height:${paragraph.lineHeight}` : "",
+                paragraph.spacingBefore !== undefined
+                    ? `margin-top:${paragraph.spacingBefore}px`
+                    : "",
+                paragraph.spacingAfter !== undefined
+                    ? `margin-bottom:${paragraph.spacingAfter}px`
+                    : "",
+                paragraph.indent !== undefined
+                    ? `text-indent:${paragraph.indent}em`
+                    : "",
+            ].filter(Boolean);
+            const body = paragraph.runs
+                ?.map((run) => this.runToHTML(run, inlineById))
+                .join("") || "<br>";
+            const styleAttr = styleTokens.length
+                ? ` style="${escapeAttribute(styleTokens.join(";"))}"`
+                : "";
+            return `<${tag}${styleAttr}>${body}</${tag}>`;
+        })
+            .join("");
+    }
+    paragraphTypeToTag(type) {
+        if (type === "h1" || type === "h2" || type === "h3" || type === "h4") {
+            return type;
+        }
+        if (type === "quote") {
+            return "blockquote";
+        }
+        return "p";
+    }
+    runToHTML(run, inlineById) {
+        const inlineElement = run.inlineRef
+            ? inlineById?.[run.inlineRef]
+            : undefined;
+        if (run.inlineRef && inlineElement) {
+            return this.inlineElementToHTML(inlineElement);
+        }
+        let text = escapeHtml(run.text || "").replace(/\n/g, "<br>");
+        const marks = run.marks || {};
+        const styleTokens = [];
+        if (marks.fontSize) {
+            styleTokens.push(`font-size:${marks.fontSize}px`);
+        }
+        if (marks.fontFamily) {
+            styleTokens.push(`font-family:${marks.fontFamily}`);
+        }
+        if (marks.color) {
+            styleTokens.push(`color:${marks.color}`);
+        }
+        if (marks.backgroundColor) {
+            styleTokens.push(`background-color:${marks.backgroundColor}`);
+        }
+        if (styleTokens.length) {
+            text = `<span style="${escapeAttribute(styleTokens.join(";"))}">${text}</span>`;
+        }
+        if (marks.bold) {
+            text = `<strong>${text}</strong>`;
+        }
+        if (marks.italic) {
+            text = `<em>${text}</em>`;
+        }
+        if (marks.underline) {
+            text = `<u>${text}</u>`;
+        }
+        if (marks.strike) {
+            text = `<s>${text}</s>`;
+        }
+        if (marks.sup) {
+            text = `<sup>${text}</sup>`;
+        }
+        if (marks.sub) {
+            text = `<sub>${text}</sub>`;
+        }
+        return text || "<br>";
+    }
+    inlineElementToHTML(element) {
+        if (element.type === "image") {
+            const sizeStyle = [
+                element.width !== undefined ? `width:${element.width}px` : "",
+                element.height !== undefined ? `height:${element.height}px` : "",
+                ...(element.align
+                    ? this.inlineImageAlignStyleParts(element.align)
+                    : []),
+            ]
+                .filter(Boolean)
+                .join(";");
+            return `<img class="hyepl-inline-media hyepl-inline-image" src="${escapeAttribute(element.src)}" alt="${escapeAttribute(element.alt || "")}" style="${escapeAttribute(sizeStyle)}" />`;
+        }
+        if (element.type === "video") {
+            const sizeStyle = [
+                element.width !== undefined ? `width:${element.width}px` : "",
+                element.height !== undefined ? `height:${element.height}px` : "",
+            ]
+                .filter(Boolean)
+                .join(";");
+            const posterAttr = element.poster
+                ? ` poster="${escapeAttribute(element.poster)}"`
+                : "";
+            return `<video class="hyepl-inline-media hyepl-inline-video" src="${escapeAttribute(element.src)}" controls${posterAttr} style="${escapeAttribute(sizeStyle)}"></video>`;
+        }
+        return "";
+    }
+    inlineImageAlignStyleParts(align) {
+        if (align === "center") {
+            return ["display:block", "margin-left:auto", "margin-right:auto"];
+        }
+        if (align === "right") {
+            return ["display:block", "margin-left:auto", "margin-right:0"];
+        }
+        if (align === "left") {
+            return ["display:block", "margin-left:0", "margin-right:auto"];
+        }
+        return [];
+    }
+    renderImageBlock(block) {
+        const figure = document.createElement("figure");
+        figure.className = "hyepl-block hyepl-block-image";
+        const image = document.createElement("img");
+        image.src = block.src;
+        image.alt = block.alt || "";
+        image.style.objectFit = block.fit || "contain";
+        figure.append(image);
+        if (block.caption) {
+            const caption = document.createElement("figcaption");
+            caption.textContent = block.caption;
+            figure.append(caption);
+        }
+        return figure;
+    }
+    renderVideoBlock(block) {
+        const figure = document.createElement("figure");
+        figure.className = "hyepl-block hyepl-block-video";
+        const video = document.createElement("video");
+        video.src = block.src;
+        video.controls = block.controls !== false;
+        video.autoplay = Boolean(block.autoplay);
+        video.muted = Boolean(block.muted);
+        video.loop = Boolean(block.loop);
+        if (block.poster) {
+            video.poster = block.poster;
+        }
+        figure.append(video);
+        return figure;
+    }
+    renderTableBlock(block) {
+        const wrapper = document.createElement("div");
+        wrapper.className = "hyepl-block hyepl-block-table";
+        const table = document.createElement("table");
+        if (block.style) {
+            table.setAttribute("style", block.style);
+        }
+        const tbody = document.createElement("tbody");
+        block.rows.forEach((row) => {
+            const tr = document.createElement("tr");
+            (row.cells || []).forEach((cell) => {
+                const node = document.createElement(cell.isHeader ? "th" : "td");
+                const rowSpan = Math.max(1, Math.round(cell.rowSpan || 1));
+                const colSpan = Math.max(1, Math.round(cell.colSpan || 1));
+                if (rowSpan > 1) {
+                    node.rowSpan = rowSpan;
+                }
+                if (colSpan > 1) {
+                    node.colSpan = colSpan;
+                }
+                if (cell.style) {
+                    node.setAttribute("style", cell.style);
+                }
+                if (cell.textStyle?.color) {
+                    node.style.color = cell.textStyle.color;
+                }
+                if (cell.textStyle?.fontFamily) {
+                    node.style.fontFamily = cell.textStyle.fontFamily;
+                }
+                if (cell.textStyle?.fontSize !== undefined) {
+                    node.style.fontSize = `${Math.round(cell.textStyle.fontSize)}px`;
+                }
+                if (cell.html) {
+                    node.innerHTML = cell.html;
+                }
+                else {
+                    node.textContent = cell.text || "";
+                }
+                if (!node.textContent && !node.children.length) {
+                    node.innerHTML = "<br>";
+                }
+                tr.append(node);
+            });
+            if (!tr.children.length) {
+                const td = document.createElement("td");
+                td.innerHTML = "<br>";
+                tr.append(td);
+            }
+            tbody.append(tr);
+        });
+        if (!tbody.children.length) {
+            const tr = document.createElement("tr");
+            const td = document.createElement("td");
+            td.innerHTML = "<br>";
+            tr.append(td);
+            tbody.append(tr);
+        }
+        table.append(tbody);
+        wrapper.append(table);
+        return wrapper;
+    }
     createAnnotationBuckets(annotations) {
         const highlightsByBlock = new Map();
         const notesByBlock = new Map();
         const bookmarksByBlock = new Map();
         annotations.highlights.forEach((item) => {
-            const key = this.toBlockKey(item.pageId, item.blockId);
-            const current = highlightsByBlock.get(key) || [];
-            current.push(item);
-            highlightsByBlock.set(key, current);
+            this.resolveAnnotationSegments(item.pageId, item.blockId, item.range, item.segments).forEach((segment) => {
+                const key = this.toBlockKey(segment.pageId, segment.blockId);
+                const current = highlightsByBlock.get(key) || [];
+                current.push({
+                    id: item.id,
+                    range: segment.range,
+                    ...(item.color ? { color: item.color } : {}),
+                });
+                highlightsByBlock.set(key, current);
+            });
         });
         annotations.notes.forEach((item) => {
-            const key = this.toBlockKey(item.pageId, item.blockId);
-            const current = notesByBlock.get(key) || [];
-            current.push(item);
-            notesByBlock.set(key, current);
+            this.resolveAnnotationSegments(item.pageId, item.blockId, item.range, item.segments).forEach((segment) => {
+                const key = this.toBlockKey(segment.pageId, segment.blockId);
+                const current = notesByBlock.get(key) || [];
+                current.push({
+                    id: item.id,
+                    range: segment.range,
+                });
+                notesByBlock.set(key, current);
+            });
         });
         const bookmarks = Array.isArray(annotations.bookmarks)
             ? annotations.bookmarks
@@ -313,6 +555,39 @@ export class EBookPlayer {
     toBlockKey(pageId, blockId) {
         return `${pageId}::${blockId}`;
     }
+    resolveAnnotationSegments(pageId, blockId, range, segments) {
+        const resolvedSegments = Array.isArray(segments)
+            ? segments
+                .map((segment) => {
+                const segmentPageId = typeof segment?.pageId === "string" ? segment.pageId : "";
+                const segmentBlockId = typeof segment?.blockId === "string" ? segment.blockId : "";
+                const normalizedRange = this.normalizeOffsetRange(segment?.range?.start || 0, segment?.range?.end || 0);
+                if (!segmentPageId || !segmentBlockId || !normalizedRange) {
+                    return null;
+                }
+                return {
+                    pageId: segmentPageId,
+                    blockId: segmentBlockId,
+                    range: normalizedRange,
+                    ...(segment?.selectedText
+                        ? { selectedText: segment.selectedText }
+                        : {}),
+                };
+            })
+                .filter((segment) => segment !== null)
+            : [];
+        if (resolvedSegments.length) {
+            return resolvedSegments;
+        }
+        if (!pageId || !blockId || !range) {
+            return [];
+        }
+        const normalizedRange = this.normalizeOffsetRange(range.start, range.end);
+        if (!normalizedRange) {
+            return [];
+        }
+        return [{ pageId, blockId, range: normalizedRange }];
+    }
     applyHighlightMarks(container, highlights) {
         [...highlights]
             .filter((item) => Number.isFinite(item.range.start) && Number.isFinite(item.range.end))
@@ -332,16 +607,12 @@ export class EBookPlayer {
     }
     applyNoteMarks(container, notes) {
         [...notes]
-            .filter((item) => !!item.range)
             .sort((a, b) => {
-            const startA = a.range?.start || 0;
-            const startB = b.range?.start || 0;
+            const startA = a.range.start || 0;
+            const startB = b.range.start || 0;
             return startB - startA;
         })
             .forEach((item) => {
-            if (!item.range) {
-                return;
-            }
             const range = this.createRangeFromOffsets(container, item.range.start, item.range.end);
             if (!range || range.collapsed) {
                 return;
@@ -438,20 +709,13 @@ export class EBookPlayer {
             return;
         }
         const range = selection.getRangeAt(0);
-        const startContainer = this.resolveTextContainer(range.startContainer);
-        const endContainer = this.resolveTextContainer(range.endContainer);
-        if (!startContainer || !endContainer || startContainer !== endContainer) {
-            this.hideSelectionToolbar();
-            return;
-        }
-        const offsets = this.getSelectionOffsets(startContainer, selection);
-        if (!offsets) {
+        const segments = this.collectSelectionSegments(selection, range);
+        if (!segments?.length) {
             this.hideSelectionToolbar();
             return;
         }
-        const pageId = startContainer.dataset.pageId;
-        const blockId = startContainer.dataset.blockId;
-        if (!pageId || !blockId) {
+        const firstSegment = segments[0];
+        if (!firstSegment) {
             this.hideSelectionToolbar();
             return;
         }
@@ -461,10 +725,11 @@ export class EBookPlayer {
             return;
         }
         this.selectionDraft = {
-            pageId,
-            blockId,
-            range: offsets,
+            pageId: firstSegment.pageId,
+            blockId: firstSegment.blockId,
+            range: firstSegment.range,
             text: selection.toString().trim(),
+            segments,
         };
         this.selectionToolbar.style.left = `${Math.round(rect.left + rect.width / 2)}px`;
         this.selectionToolbar.style.top = `${Math.round(rect.top - 20)}px`;
@@ -501,6 +766,103 @@ export class EBookPlayer {
         const end = endRange.toString().length;
         return this.normalizeOffsetRange(start, end);
     }
+    collectSelectionSegments(selection, range) {
+        const startContainer = this.resolveTextContainer(range.startContainer);
+        const endContainer = this.resolveTextContainer(range.endContainer);
+        if (!startContainer || !endContainer) {
+            return null;
+        }
+        const textContainers = Array.from(this.content.querySelectorAll(".hyepl-block-text"));
+        const startIndex = textContainers.indexOf(startContainer);
+        const endIndex = textContainers.indexOf(endContainer);
+        if (startIndex < 0 || endIndex < 0) {
+            return null;
+        }
+        const from = Math.min(startIndex, endIndex);
+        const to = Math.max(startIndex, endIndex);
+        const segments = [];
+        for (let index = from; index <= to; index += 1) {
+            const container = textContainers[index];
+            if (!container) {
+                continue;
+            }
+            const pageId = container.dataset.pageId;
+            const blockId = container.dataset.blockId;
+            if (!pageId || !blockId) {
+                continue;
+            }
+            let start = 0;
+            let end = this.getContainerTextLength(container);
+            if (container === startContainer) {
+                const boundaryOffset = this.getBoundaryOffsetInContainer(container, range.startContainer, range.startOffset);
+                if (boundaryOffset === null) {
+                    continue;
+                }
+                start = boundaryOffset;
+            }
+            if (container === endContainer) {
+                const boundaryOffset = this.getBoundaryOffsetInContainer(container, range.endContainer, range.endOffset);
+                if (boundaryOffset === null) {
+                    continue;
+                }
+                end = boundaryOffset;
+            }
+            const normalized = this.normalizeOffsetRange(start, end);
+            if (!normalized) {
+                continue;
+            }
+            const text = this.getRangeTextByOffsets(container, normalized);
+            segments.push({
+                pageId,
+                blockId,
+                range: normalized,
+                text,
+            });
+        }
+        if (!segments.length) {
+            const fallback = this.getSelectionOffsets(startContainer, selection);
+            if (!fallback) {
+                return null;
+            }
+            const pageId = startContainer.dataset.pageId;
+            const blockId = startContainer.dataset.blockId;
+            if (!pageId || !blockId) {
+                return null;
+            }
+            return [
+                {
+                    pageId,
+                    blockId,
+                    range: fallback,
+                    text: selection.toString().trim(),
+                },
+            ];
+        }
+        return segments;
+    }
+    getContainerTextLength(container) {
+        const range = document.createRange();
+        range.selectNodeContents(container);
+        return range.toString().length;
+    }
+    getBoundaryOffsetInContainer(container, boundaryNode, boundaryOffset) {
+        if (!container.contains(boundaryNode) && container !== boundaryNode) {
+            return null;
+        }
+        const range = document.createRange();
+        range.selectNodeContents(container);
+        try {
+            range.setEnd(boundaryNode, boundaryOffset);
+        }
+        catch {
+            return null;
+        }
+        return range.toString().length;
+    }
+    getRangeTextByOffsets(container, offsets) {
+        const range = this.createRangeFromOffsets(container, offsets.start, offsets.end);
+        return range ? range.toString().trim() : "";
+    }
     hideSelectionToolbar() {
         this.selectionToolbar.classList.remove("show");
         this.selectionDraft = null;
@@ -529,16 +891,40 @@ export class EBookPlayer {
         if (!this.selectionDraft) {
             return;
         }
+        const segments = this.selectionDraft.segments && this.selectionDraft.segments.length
+            ? this.selectionDraft.segments
+            : [
+                {
+                    pageId: this.selectionDraft.pageId,
+                    blockId: this.selectionDraft.blockId,
+                    range: this.selectionDraft.range,
+                    text: this.selectionDraft.text,
+                },
+            ];
+        const firstSegment = segments[0];
+        if (!firstSegment) {
+            return;
+        }
+        const mergedSelectedText = this.selectionDraft.text ||
+            segments
+                .map((segment) => segment.text)
+                .filter(Boolean)
+                .join("\n")
+                .trim();
         const payload = {
-            pageId: this.selectionDraft.pageId,
-            blockId: this.selectionDraft.blockId,
-            range: this.selectionDraft.range,
-            ...(this.selectionDraft.text
-                ? { selectedText: this.selectionDraft.text }
-                : {}),
+            pageId: firstSegment.pageId,
+            blockId: firstSegment.blockId,
+            range: firstSegment.range,
+            ...(mergedSelectedText ? { selectedText: mergedSelectedText } : {}),
             ...(this.selectionOptions.highlightColor
                 ? { color: this.selectionOptions.highlightColor }
                 : {}),
+            segments: segments.map((segment) => ({
+                pageId: segment.pageId,
+                blockId: segment.blockId,
+                range: segment.range,
+                ...(segment.text ? { selectedText: segment.text } : {}),
+            })),
         };
         await this.createHighlight(payload, "user");
         this.clearSelection();
@@ -548,22 +934,46 @@ export class EBookPlayer {
         if (!this.selectionDraft) {
             return;
         }
-        const defaultText = this.selectionDraft.text || "";
+        const defaultText = "";
         const content = this.promptTextWithLimit("请输入笔记内容", defaultText, this.inputLimits.noteMaxLength);
         if (content === null) {
             return;
         }
+        const segments = this.selectionDraft.segments && this.selectionDraft.segments.length
+            ? this.selectionDraft.segments
+            : [
+                {
+                    pageId: this.selectionDraft.pageId,
+                    blockId: this.selectionDraft.blockId,
+                    range: this.selectionDraft.range,
+                    text: this.selectionDraft.text,
+                },
+            ];
+        const firstSegment = segments[0];
+        if (!firstSegment) {
+            return;
+        }
+        const mergedSelectedText = this.selectionDraft.text ||
+            segments
+                .map((segment) => segment.text)
+                .filter(Boolean)
+                .join("\n")
+                .trim();
         const payload = {
-            pageId: this.selectionDraft.pageId,
-            blockId: this.selectionDraft.blockId,
-            range: this.selectionDraft.range,
+            pageId: firstSegment.pageId,
+            blockId: firstSegment.blockId,
+            range: firstSegment.range,
             content,
-            ...(this.selectionDraft.text
-                ? { selectedText: this.selectionDraft.text }
-                : {}),
+            ...(mergedSelectedText ? { selectedText: mergedSelectedText } : {}),
             ...(this.selectionOptions.noteColor
                 ? { color: this.selectionOptions.noteColor }
                 : {}),
+            segments: segments.map((segment) => ({
+                pageId: segment.pageId,
+                blockId: segment.blockId,
+                range: segment.range,
+                ...(segment.text ? { selectedText: segment.text } : {}),
+            })),
         };
         await this.createNote(payload, "user");
         this.clearSelection();
@@ -748,3 +1158,14 @@ function createRuntimeProvider(provider, getRuntimeDocument) {
 function cloneEbookDoc(doc) {
     return JSON.parse(JSON.stringify(doc));
 }
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function escapeAttribute(value) {
+    return escapeHtml(value);
+}

package/dist/core/src/player/engine.d.ts

@@ -58,6 +58,7 @@ export declare class PlayerEngine {
     private loadAnnotationsState;
     private findPageIndexByPageId;
     private normalizeRange;
+    private normalizeSegments;
     private normalizeAnnotations;
     private mapPreviewAnnotationsToReader;
     private persistAnnotations;

package/dist/core/src/player/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../../../../core/src/player/engine.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../../../../core/src/player/engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAsB,MAAM,gBAAgB,CAAC;AACnE,OAAO,KAAK,EAGV,2BAA2B,EAC3B,2BAA2B,EAC3B,iBAAiB,EACjB,4BAA4B,EAC5B,2BAA2B,EAC3B,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,cAAc,EAEf,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC;AAED,KAAK,wBAAwB,GAAG,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAC7E,KAAK,wBAAwB,GAAG,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAC7E,KAAK,wBAAwB,GAAG,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAC7E,KAAK,yBAAyB,GAAG,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,CAAC;AAM/E,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,GAAG,CAAyB;IACpC,OAAO,CAAC,KAAK,CAOX;IACF,OAAO,CAAC,yBAAyB,CAAuC;IACxE,OAAO,CAAC,yBAAyB,CAAuC;IACxE,OAAO,CAAC,yBAAyB,CAAuC;IACxE,OAAO,CAAC,0BAA0B,CAAwC;gBAE9D,QAAQ,EAAE,kBAAkB,EAAE,OAAO,GAAE,mBAAwB;IASrE,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC;IAa/B,WAAW,IAAI,QAAQ;IAOvB,QAAQ,IAAI,WAAW;IAIvB,aAAa,IAAI,eAAe,EAAE;IAIlC,QAAQ,IAAI,UAAU,EAAE;IAIxB,YAAY,IAAI,cAAc,EAAE;IAIhC,cAAc,IAAI,iBAAiB;IAQnC,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC;IAIvC,2BAA2B,IAAI,OAAO;IAIhC,iBAAiB,IAAI,OAAO,CAAC,iBAAiB,CAAC;IAQ/C,cAAc,CAClB,WAAW,EAAE,iBAAiB,EAC9B,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,iBAAiB,CAAC;IA+B7B,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAWjD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IASvC,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAS/C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAO/B,QAAQ,IAAI,MAAM;IAIlB,QAAQ,IAAI,MAAM;IAIlB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAMvB,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAc7B,eAAe,CACnB,SAAS,EAAE,IAAI,CACb,eAAe,EACf,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,CAC5C,EACD,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,eAAe,CAAC;IAiBrB,eAAe,CACnB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC,EACpE,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IA0B5B,eAAe,CACnB,WAAW,EAAE,MAAM,EACnB,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,OAAO,CAAC;IAgBb,OAAO,CACX,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,CAAC,GAClE,OAAO,CAAC,UAAU,CAAC;IAIhB,UAAU,CACd,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,CAAC,EACnE,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,UAAU,CAAC;IAgBhB,UAAU,CACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC,EAC/D,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAwBvB,UAAU,CACd,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,OAAO,CAAC;IAcb,WAAW,CACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,cAAc,CAAC;IAyCpB,cAAc,CAClB,UAAU,EAAE,MAAM,EAClB,MAAM,GAAE,KAAK,GAAG,MAAc,GAC7B,OAAO,CAAC,OAAO,CAAC;IAgBnB,kBAAkB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,IAAI;IAOlE,kBAAkB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,IAAI;IAOlE,kBAAkB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,IAAI;IAOlE,mBAAmB,CAAC,QAAQ,EAAE,yBAAyB,GAAG,MAAM,IAAI;YAOtD,gBAAgB;YAqBhB,oBAAoB;IAqDlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IA8BzB,OAAO,CAAC,oBAAoB;IAuE5B,OAAO,CAAC,6BAA6B;YA+CvB,kBAAkB;IAiBhC,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;CAYxB"}