✨ enhance MarkManager and attribute of html (#136)

* ✨ enhance MarkManager to handle raw text extraction and improve approx_source management

* ✨ add language attribute to article HTML and enable hyphenation in article styles

* ✨ enhance MarkManager to extract raw text from approximate sources and improve error handling

* ✨ enhance handleHTMLImgs to set padding and height styles for images

* ✨ refactor handleHTMLImgs to apply multiple styles using a loop for better readability

Author: Whyjsee

apps/slax-reader-dweb/layers/core/components/Article/BookmarkArticle.vue

@@ -19,7 +19,7 @@
       <BookmarkTags :bookmarkId="bookmarkId || 0" :tags="detail.tags" :readonly="!allowTagged" />
     </div>
     <div class="article-detail" ref="articleDetail" :class="{ [articleStyle]: true }">
-      <div class="html-text" v-html="articleHTML"></div>
+      <div class="html-text" lang="en" v-html="articleHTML"></div>
     </div>
     <div class="end">
       <div class="line"></div>
@@ -245,6 +245,10 @@ const handleHTMLImgs = (imgs: HTMLImageElement[]) => {
           img.setAttribute('style', `width: ${img.naturalWidth}px !important;`)
           return
         }
+
+        ;[`padding: 0 !important`, `height: auto !important;`].forEach(style => {
+          img.setAttribute('style', style)
+        })
       }
 
       img.onclick = () => {
@@ -680,7 +684,7 @@ defineExpose({
 }
 
 .article-detail {
-  --style: mt-24px;
+  --style: mt-24px hyphens-auto;
   @include article.reset;
 
   &.default {

apps/slax-reader-dweb/layers/core/components/Article/Selection/manager.ts

@@ -1,4 +1,5 @@
 import { HighlightRange, type HighlightRangeInfo } from '@commons/utils/range'
+import { getRangeTextWithNewlines } from '@commons/utils/string'
 
 import type { QuoteData } from '../../Chat/type'
 import { Base } from './base'
@@ -225,7 +226,7 @@ export class MarkManager extends Base {
     const texts: string[] = []
 
     if (approx) {
-      texts.push(approx.exact)
+      texts.push(approx.raw_text ?? approx.exact)
     } else if (source && source.length > 0) {
       let lastNode: Node | null = null
       for (const markItem of source) {
@@ -498,6 +499,7 @@ export class MarkManager extends Base {
   }
 
   private generateMarkItemInfos(markList: MarkInfo[], commentMap: Map<number, MarkCommentInfo>): MarkItemInfo[] {
+    const rangeSvc = new HighlightRange(this.document, this.config.monitorDom!)
     const infoItems: MarkItemInfo[] = []
     for (const mark of markList) {
       const userId = mark.user_id
@@ -509,6 +511,16 @@ export class MarkManager extends Base {
       let markInfoItem = infoItems.find(infoItem => this.checkMarkSourceIsSame(infoItem.source, markSources))
 
       if (!markInfoItem) {
+        try {
+          if (mark.approx_source) {
+            const newRange = rangeSvc.getRange(mark.approx_source)
+            const rawText = newRange ? getRangeTextWithNewlines(newRange) : undefined
+            mark.approx_source.raw_text = rawText
+          }
+        } catch (error) {
+          console.error('create raw text failed', error, mark.approx_source?.exact)
+        }
+
         markInfoItem = { id: getUUID(), source: markSources, comments: [], stroke: [], approx: mark.approx_source }
         infoItems.push(markInfoItem)
       }

apps/slax-reader-extensions/src/components/Selection/manager.ts

@@ -1,5 +1,6 @@
 import { getElementFullSelector } from '@commons/utils/dom'
 import { HighlightRange, type HighlightRangeInfo } from '@commons/utils/range'
+import { getRangeTextWithNewlines } from '@commons/utils/string'
 
 import type { QuoteData } from '../Chat/type'
 import Toast, { ToastType } from '../Toast'
@@ -226,7 +227,7 @@ export class MarkManager extends Base {
     const texts: string[] = []
 
     if (approx) {
-      texts.push(approx.exact)
+      texts.push(approx.raw_text ?? approx.exact)
     } else if (source && source.length > 0) {
       let lastNode: Node | null = null
       for (const markItem of source) {
@@ -510,6 +511,7 @@ export class MarkManager extends Base {
 
   private async saveMarkSelectContent(value: MarkPathItem[], type: MarkType, approx: MarkPathApprox, comment?: string, replyToId?: number) {
     const bookmarkId = await this.config.bookmarkIdQuery()
+    const { raw_text: _, ...approxSource } = approx
     try {
       const res = await request.post<{ mark_id: number; root_id: number }>({
         url: RESTMethodPath.ADD_MARK,
@@ -520,7 +522,7 @@ export class MarkManager extends Base {
           source: value,
           parent_id: replyToId,
           select_content: this._selectContent.value,
-          approx_source: approx
+          approx_source: approxSource
         }
       })
       return res || null
@@ -578,6 +580,7 @@ export class MarkManager extends Base {
   }
 
   private generateMarkItemInfos(markList: MarkInfo[], commentMap: Map<number, MarkCommentInfo>): MarkItemInfo[] {
+    const rangeSvc = new HighlightRange(this.document, this.config.monitorDom!)
     const infoItems: MarkItemInfo[] = []
     for (const mark of markList) {
       const userId = mark.user_id
@@ -589,6 +592,16 @@ export class MarkManager extends Base {
       let markInfoItem = infoItems.find(infoItem => this.checkMarkSourceIsSame(infoItem.source, markSources))
 
       if (!markInfoItem) {
+        try {
+          if (mark.approx_source) {
+            const newRange = rangeSvc.getRange(mark.approx_source)
+            const rawText = newRange ? getRangeTextWithNewlines(newRange) : undefined
+            mark.approx_source.raw_text = rawText
+          }
+        } catch (error) {
+          console.error('create raw text failed', error, mark.approx_source?.exact)
+        }
+
         markInfoItem = { id: getUUID(), source: markSources, comments: [], stroke: [], approx: mark.approx_source }
         infoItems.push(markInfoItem)
       }

commons/types/src/interface.ts

@@ -55,6 +55,7 @@ export type MarkPathApprox = {
   suffix: string
   position_start: number
   position_end: number
+  raw_text?: string
 }
 
 export interface ShareInfo {

commons/utils/src/range.ts

@@ -1,4 +1,5 @@
 import search from 'approx-string-match'
+import { getRangeTextWithNewlines } from './string'
 
 export interface HighlightRangeInfo {
   // postion selector
@@ -9,6 +10,7 @@ export interface HighlightRangeInfo {
   exact: string
   prefix: string
   suffix: string
+  raw_text?: string
 }
 
 export class HighlightRange {
@@ -221,7 +223,8 @@ export class HighlightRange {
       prefix,
       suffix,
       position_start: startOffset,
-      position_end: endOffset
+      position_end: endOffset,
+      raw_text: getRangeTextWithNewlines(range)
     }
   }
 

commons/utils/src/string.ts

@@ -45,3 +45,36 @@ export const urlHttpString = (url: string) => {
 
   return 'https://' + url
 }
+
+/**
+ * 根据range返回对应文本
+ */
+export const getRangeTextWithNewlines = (range: Range): string => {
+  const selection = window.getSelection()
+  if (!selection) {
+    console.warn('无法获取 window.getSelection()')
+
+    const temp = document.createElement('div')
+    temp.appendChild(range.cloneContents())
+    return temp.innerText
+  }
+
+  const originalRanges: Range[] = []
+  for (let i = 0; i < selection.rangeCount; i++) {
+    originalRanges.push(selection.getRangeAt(i))
+  }
+
+  try {
+    selection.removeAllRanges()
+    selection.addRange(range)
+
+    const text = selection.toString()
+
+    return text
+  } finally {
+    selection.removeAllRanges()
+    for (const originalRange of originalRanges) {
+      selection.addRange(originalRange)
+    }
+  }
+}