Merge pull request #216 from yuque/fix/fix-bug

fix: 修复剪藏语雀内容列表丢失问题 & 优化插件性能 & 优化上传失败提示文案

package.json

@@ -1,12 +1,12 @@
 {
   "name": "yuque-chrome-extension",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "语雀浏览器插件",
   "private": true,
   "releaseNotes": [
-    "[特性] 剪藏侧边栏改版",
-    "[特性] 支持剪藏快捷键操作",
-    "[特性] 划词新增修饰快捷键"
+    "[优化] 增加保存失败的提示",
+    "[修复] 修复插件导致特殊网页卡住问题",
+    "[修复] 语雀文档剪藏列表丢失情况"
   ],
   "repository": {
     "type": "git",

src/components/SuperSideBar/impl/ClipAssistant/index.tsx

@@ -139,8 +139,12 @@ function ClipContent() {
         backgroundBridge.sidePanel.close();
       }
       editor.setContent('');
-    } catch (error) {
-      message.error(__i18n('保存失败，请重试！'));
+    } catch (e: any) {
+      if (e.message === '文档上传未结束! 请删除未上传成功的图片') {
+        message.error(__i18n('图片正在上传中，请稍后保存'));
+      } else {
+        message.error(e.message || __i18n('保存失败，请重试！'));
+      }
     }
     setLoading({ loading: false });
   };

src/core/transform-dom.ts

@@ -75,6 +75,26 @@ function findYuqueNeTag(element: Element) {
   return null;
 }
 
+function findYuqueChildId(element: Element | null) {
+  let ids: string[] = [];
+
+  if (!element) {
+    return ids;
+  }
+
+  element.childNodes.forEach(item => {
+    const id = (item as Element).id;
+    if (id) {
+      ids.push(id);
+    } else {
+      const childIds = findYuqueChildId(item as Element);
+      ids = ids.concat(childIds);
+    }
+  });
+
+  return ids;
+}
+
 function isYuqueContent(element: Element) {
   if (element.closest('.ne-viewer-body') || document.querySelector('.ne-viewer-body')) {
     return true;
@@ -125,26 +145,18 @@ async function transformYuqueContent(element: Element) {
     });
 
     try {
-      const ids: string[] = [];
+      let ids: string[] = [];
       if (element.classList.contains('ne-viewer-body')) {
-        element.childNodes.forEach(item => {
-          const id = (item as Element).id;
-          if (id) {
-            ids.push(id);
-          }
-        });
+        const childIds = findYuqueChildId(element);
+        ids = ids.concat(childIds);
       } else if (element.closest('.ne-viewer-body')) {
         const id = findYuqueNeTag(element)?.id;
         if (id) {
           ids.push(id);
         }
       } else if (element.querySelector('.ne-viewer-body')) {
-        element.querySelector('.ne-viewer-body')?.childNodes.forEach(item => {
-          const id = (item as Element).id;
-          if (id) {
-            ids.push(id);
-          }
-        });
+        const childIds = findYuqueChildId(element.querySelector('.ne-viewer-body'));
+        ids = ids.concat(childIds);
       }
 
       window.postMessage(
@@ -271,7 +283,7 @@ export async function transformDOM(domArray: Element[]) {
     const imgElements = clonedDOM.querySelectorAll('img');
     imgElements.forEach(img => {
       // 有些 img 采用 srcset 属性去实现，src 中放的其实是小图，所以以 currentSrc 作为渲染的 src
-      img.setAttribute('src', img.currentSrc);
+      img.setAttribute('src', img.currentSrc || img.src);
     });
 
     // 移除 pre code 下的兄弟

src/pages/inject/content-scripts.ts

@@ -58,6 +58,8 @@ export class App {
    */
   private _shadowRoot: ShadowRoot | null = null;
 
+  private rootDiv: HTMLDivElement | null = null;
+
   /**
    * sidePanel iframe
    */
@@ -103,6 +105,7 @@ export class App {
 
   private initRoot() {
     const div = document.createElement('div');
+    this.rootDiv = div;
     div.id = 'yuque-extension-root-container';
     div.classList.add('yuque-extension-root-container-class');
     const css = Chrome.runtime.getURL('content-scripts.css');
@@ -132,20 +135,6 @@ export class App {
         this.removeLevitateBall = createLevitateBall({
           dom: root,
         });
-        // 搜索页二次搜索会清除掉一些 dom ，所以在 init 的时候需要判断我们挂载的 dom 是否还在，如果不在了，重新挂上去
-        const observer = new MutationObserver((mutationsList: MutationRecord[]) => {
-          for (const mutation of mutationsList) {
-            if (Array.from(mutation.removedNodes).includes(div)) {
-              this.sidePanelClipReadyPromise = undefined;
-              document.body.appendChild(div);
-            }
-          }
-        });
-        // 监听页面 dom 是否被卸载
-        observer.observe(document.body, {
-          childList: true,
-          subtree: true,
-        });
       });
   }
 
@@ -199,6 +188,15 @@ export class App {
 
   private async initSidePanel(): Promise<boolean> {
     if (this.initSidePanelPromise) {
+      // 如果 dom 被卸载掉，延迟 1s 重新将其挂载上去
+      if (!document.querySelector('#yuque-extension-root-container') && this.rootDiv) {
+        document.body.appendChild(this.rootDiv);
+        await new Promise(resolve => {
+          setTimeout(() => {
+            resolve(true);
+          }, 1000);
+        });
+      }
       return this.initSidePanelPromise;
     }
     this.initSidePanelPromise = new Promise(resolve => {