feat: 优化全文剪藏规则

src/background/index.ts

@@ -12,7 +12,6 @@ import { listenShortcut } from './shortcut-listener';
 import chromeExtension from './core/chromeExtension';
 import HttpClient from './core/httpClient';
 
-console.log('-- in background.js');
 const httpClient = new HttpClient();
 initI18N();
 listenContextMenuEvents();
@@ -73,6 +72,8 @@ chromeExtension.storage.local.onChanged.addListener(res => {
     STORAGE_KEYS.SETTINGS.LEVITATE_BALL_CONFIG,
     STORAGE_KEYS.SETTINGS.SIDE_PANEL_CONFIG,
     STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG,
+    // 用户信息发生变化
+    STORAGE_KEYS.CURRENT_ACCOUNT,
   ];
 
   Object.keys(res).forEach(key => {

src/components/AccountLayout/Login.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Button, message } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { backgroundBridge } from '@/core/bridge/background';
-import { IUser } from '@/isomorphic/interface';
 import { __i18n } from '@/isomorphic/i18n';
 import LinkHelper from '@/isomorphic/link-helper';
 import { VERSION } from '@/config';
@@ -13,20 +12,18 @@ import Typography from '../Typography';
 import styles from './Login.module.less';
 
 interface ILoginProps {
-  onLoginSuccess: (user: IUser) => void;
   forceUpgradeHtml?: string;
 }
 
 function Login(props: ILoginProps) {
-  const { onLoginSuccess, forceUpgradeHtml } = props;
+  const { forceUpgradeHtml } = props;
 
   const onLogin = async () => {
     const user = await backgroundBridge.user.login();
     if (!user) {
       message.error(__i18n('登录失败'));
       return;
     }
-    onLoginSuccess(user);
   };
 
   if (forceUpgradeHtml) {

src/components/AccountLayout/index.tsx

@@ -38,14 +38,26 @@ function AccountLayout(props: IAccountLayoutProps) {
       setAppReady(true);
       return;
     }
-    try {
-      setUser(info);
-    } catch (error) {
-      console.log('init user error:', error);
-    }
+    setUser(info);
     setAppReady(true);
   }, []);
 
+  useEffect(() => {
+    const remover = pageEvent.addListener(PageEventTypes.StorageUpdate, (data: Record<string, any>) => {
+      if (data.key !== STORAGE_KEYS.CURRENT_ACCOUNT) {
+        return;
+      }
+      if (!data.value) {
+        onLogout();
+        return;
+      }
+      setUser(data.value);
+    });
+    return () => {
+      remover();
+    };
+  }, []);
+
   useEffect(() => {
     const removerLoginOutListener = pageEvent.addListener(PageEventTypes.LogOut, onLogout);
     const removerForceUpdateListener = pageEvent.addListener(PageEventTypes.ForceUpgradeVersion, res => {
@@ -68,7 +80,7 @@ function AccountLayout(props: IAccountLayoutProps) {
       {isLogined && !forceUpgradeHtml ? (
         props.children
       ) : (
-        <Login onLoginSuccess={setUser} forceUpgradeHtml={forceUpgradeHtml} />
+        <Login forceUpgradeHtml={forceUpgradeHtml} />
       )}
     </AccountContext.Provider>
   );

src/components/SelectSavePosition/index.tsx

@@ -93,7 +93,7 @@ function SelectSavePosition(props: ISelectSavePositionProps) {
           storage.update(rememberKey, DefaultSavePosition);
         }
       } else {
-        books[0] && setSelectSaveItem(books[0]);
+        books[0] && onSelectBook(books[0].id);
       }
       setPosition(value);
     },

src/components/SuperSideBar/container/RightBar/index.tsx

@@ -6,6 +6,7 @@ import cs from 'classnames';
 import { AssistantType, IAssistant } from '@/components/SuperSideBar/declare';
 import useMeasure from '@/hooks/useMeasure';
 import { superSidebar } from '@/components/SuperSideBar';
+import LarkIcon from '@/components/LarkIcon';
 import styles from './index.module.less';
 
 interface IItemProps {
@@ -160,7 +161,7 @@ export const RightBar = () => {
             overlayClassName={styles.popover}
           >
             <div className={cs(styles.manifestsBtn, styles.moreAction)}>
-              <Icon name="moreAction" size={20} />
+              <LarkIcon name="more" size={20} />
             </div>
           </Popover>
         ) : null}

src/components/lake-editor/editor.tsx

@@ -188,10 +188,6 @@ export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
           },
           placeholder: __i18n('输入内容...'),
           defaultFontsize: 14,
-          typography: {
-            typography: 'classic',
-            paragraphSpacing: 'relax',
-          },
         });
         newEditor.on('visitLink', (url: string) => {
           window.open(url, '__blank');
@@ -216,6 +212,7 @@ export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
   useEffect(() => {
     if (!editor) return;
     editor.setDocument('text/html', value);
+    editor.execCommand('paragraphSpacing', 'relax');
     contextRef.current?.onLoad?.();
   }, [editor, value]);
 
@@ -304,7 +301,7 @@ export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
           await sleep(100);
         }
         if (type === 'lake') {
-          return editor.getDocument('text/lake');
+          return editor.getDocument('text/lake', { includeMeta: true });
         } else if (type === 'text/html') {
           return editor.getDocument('text/html');
         }

src/core/ocr-manager.ts

@@ -29,9 +29,7 @@ export enum EnableOcrStatus {
 class OCRManager {
   private iframe: HTMLIFrameElement | undefined;
   private ocrIframeId = 'yq-ocr-iframe-id';
-  private sendMessageRef:
-  | ((requestData: { action: string; data?: any }) => Promise<any>)
-  | undefined;
+  private sendMessageRef: ((requestData: { action: string; data?: any }) => Promise<any>) | undefined;
   private initSidePanelPromise: Promise<boolean> | undefined;
 
   async init() {

src/core/parseDom/index.ts

@@ -107,6 +107,9 @@ class ParseDom {
     Array.from(cloneDocument.body.children).forEach(item => item.parentNode?.removeChild(item));
     cloneDocument.body.appendChild(fragment);
 
+    // 克隆一份清洗后的 document ，这份不要做更改
+    const originCloneDocument = cloneDocument.cloneNode(true) as Document;
+
     // 将内容交给 Readability 去解析一次
     const result = new Readability(cloneDocument, {
       keepClasses: true,
@@ -119,6 +122,21 @@ class ParseDom {
           item.setAttribute('style', dataStyle as string);
           item.removeAttribute('data-style');
         });
+
+        /**
+         * 为了避免代码块的一些注释内容被 Readability 清掉
+         * 将 pre 结构的 dom 替换回去
+         * 如果清洗完成后和原先 pre 数量不一致，先不做处理
+         */
+        const originPres = originCloneDocument.querySelectorAll('pre');
+        const elPres = (el as HTMLElement).querySelectorAll('pre');
+        if (originPres.length === elPres.length) {
+          Array.from(elPres).forEach((pre, index) => {
+            const clonePre = originPres[index].cloneNode(true);
+            pre.parentNode?.replaceChild(clonePre, pre);
+          });
+        }
+
         return (el as HTMLElement).innerHTML;
       },
     }).parse();

src/core/parseDom/plugin/code.ts

@@ -5,13 +5,15 @@ export class CodeParsePlugin extends BasePlugin {
    * 查询所有 pre 节点
    * 并将 pre 节点下所有的 code 节点融合成一个新的 code 节点
    * <pre>
-   *  <code>1</code>
+   *  <code><span>1</span></code>
    *  <ol><code>2</code></ol>
    * </pre>
    * 转化后
    * <pre>
    *  <code>
    *    <div>1</div>
+   *  </code>
+   *  <code>
    *    <div>2</div>
    *  </code>
    * </pre>
@@ -21,17 +23,16 @@ export class CodeParsePlugin extends BasePlugin {
     preElements.forEach(pre => {
       // 查询所有的代码块
       const codeElementArray = pre.querySelectorAll('code');
-      const code = document.createElement('code');
-      for (const codeElement of codeElementArray) {
-        Array.from(codeElement.childNodes).forEach(item => {
-          code.appendChild(item);
-        });
-      }
       Array.from(pre.childNodes).forEach(item => {
         pre.removeChild(item);
       });
-      pre.appendChild(code);
-      console.log(pre);
+      codeElementArray.forEach(code => {
+        const div = document.createElement('div');
+        Array.from(code.childNodes).forEach(item => {
+          div.appendChild(item);
+        });
+        pre.appendChild(div);
+      });
     });
   }
 }

src/core/parseDom/plugin/image.ts

@@ -4,8 +4,12 @@ export class ImageParsePlugin extends BasePlugin {
   public parse(cloneDom: HTMLElement): Promise<void> | void {
     const images = cloneDom.querySelectorAll('img');
     images.forEach(image => {
-      // 有些 img 采用 srcset 属性去实现，src 中放的其实是小图，所以以 currentSrc 作为渲染的 src
-      image.setAttribute('src', image.currentSrc || image.src);
+      /**
+       * data-src 占位图
+       * currentSrc 真实渲染的图片
+       * src
+       */
+      image.setAttribute('src', image.getAttribute('data-src') || image.currentSrc || image.src);
     });
   }
 }

src/core/screen-shot.ts

@@ -7,9 +7,7 @@ interface IScreenShotOptions {
   y: number;
 }
 
-export async function screenShot(
-  options: IScreenShotOptions,
-): Promise<HTMLCanvasElement> {
+export async function screenShot(options: IScreenShotOptions): Promise<HTMLCanvasElement> {
   return new Promise(async (resolve, rejected) => {
     const base64: any = await backgroundBridge.tab.screenShot();
     try {

src/core/webProxy/mine.ts

@@ -1,5 +1,6 @@
 import { pick } from 'lodash';
 import { httpProxy } from './base';
+import { IUser } from '@/isomorphic/interface';
 
 export interface ISavePosition {
   id: number;
@@ -65,5 +66,20 @@ export function createMineProxy() {
         );
       });
     },
+    getUserInfo: async (): Promise<IUser> => {
+      return new Promise(resolve => {
+        httpProxy.sendMethodCallToBackground(
+          {
+            url: '/api/mine',
+            config: {
+              method: 'GET',
+            },
+          },
+          res => {
+            resolve(res.data.data);
+          },
+        );
+      });
+    },
   };
 }

src/pages/sidePanel/app.tsx

@@ -19,6 +19,7 @@ import {
 import { IUser } from '@/isomorphic/interface';
 import Env from '@/isomorphic/env';
 import { useForceUpdate } from '@/hooks/useForceUpdate';
+import { webProxy } from '@/core/webProxy';
 import styles from './app.module.less';
 import '@/styles/global.less';
 
@@ -58,6 +59,10 @@ function App() {
           const info = await storage.get(
             STORAGE_KEYS.CURRENT_ACCOUNT,
           );
+          const user = await webProxy.mine.getUserInfo();
+          if (user.id !== info.id) {
+            await storage.remove(STORAGE_KEYS.CURRENT_ACCOUNT);
+          }
           Tracert.start({
             spmAPos: TRACERT_CONFIG.spmAPos,
             spmBPos: TRACERT_CONFIG.spmBPos,