build: 更新 postrelease 规则 (#79) (#80)

<!--
首先，感谢你的贡献！😄

在维护者审核通过后会合并。
请确保填写以下 pull request 的信息，谢谢！~
-->

### 🤔 这个变动的性质是？

- [ ] 新特性提交
- [x] 日常 bug 修复
- [ ] 性能优化
- [ ] 功能增强
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 其他改动（是关于什么的改动？）

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
2. 例如 close #xxxx、 fix #xxxx
-->
无法通过右键菜单创建剪藏

### 💡 需求背景和解决方案

无法通过右键菜单创建剪藏
<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

src/components/lake-editor/editor.tsx

@@ -6,6 +6,7 @@ import { InjectEditorPlugin } from './editor-plugin';
 export interface EditorProps {
   value: string;
   onChange: (value: string) => void;
+  onLoad?: () => void;
   children?: React.ReactElement;
 }
 
@@ -82,11 +83,12 @@ const templateHtml = `
 `;
 
 export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
-  const { value, onChange } = props;
+  const { value, onChange, onLoad } = props;
   const [ _loading, setLoading ] = useState(true);
   const [ editor, setEditor ] = useState<any>(null);
   const contextRef = useRef({
     onChange: props.onChange,
+    onLoad: props.onLoad,
   });
   const rootNodeRef = useRef<{ div: HTMLDivElement | null }>({
     div: null,
@@ -147,12 +149,14 @@ export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
   useEffect(() => {
     if (!editor) return;
     editor.setDocument('text/html', value);
+    contextRef.current?.onLoad?.();
   }, [ editor, value ]);
 
   // 更新回调
   useEffect(() => {
     contextRef.current.onChange = onChange;
-  }, [ onChange ]);
+    contextRef.current.onLoad = onLoad;
+  }, [ onChange, onLoad ]);
 
   // 导出ref
   useImperativeHandle(ref, () => ({

src/core/action-listener.ts

@@ -0,0 +1,52 @@
+import { GLOBAL_EVENTS } from '@/events';
+import Chrome from './chrome';
+
+type MessageSender = chrome.runtime.MessageSender;
+
+type SendResponse = (response: boolean) => void;
+
+export interface RequestMessage {
+  action: keyof typeof GLOBAL_EVENTS;
+  HTMLs?: string[];
+}
+
+export const ActionListener: {
+  currentType: string | null;
+  HTMLs: string[];
+  listener: ((request: RequestMessage) => void)[];
+  addListener: (callback: (request: RequestMessage) => void) => () => void;
+  getSelectHTMLs: () => string[];
+} = {
+  currentType: null,
+  listener: [],
+  HTMLs: [],
+  getSelectHTMLs() {
+    const HTMLs = this.HTMLs;
+    this.HTMLs = [];
+    return HTMLs;
+  },
+  addListener(callback: (request: RequestMessage) => void) {
+    this.listener.push(callback);
+    return () => {
+      this.listener = this.listener.filter(item => item !== callback);
+    };
+  },
+};
+
+const onReceiveMessage = async (
+  request: RequestMessage,
+  _sender: MessageSender,
+  sendResponse: SendResponse,
+) => {
+  ActionListener.listener.forEach(listener => listener(request));
+  if (request.action === GLOBAL_EVENTS.GET_SELECTED_TEXT) {
+    ActionListener.currentType = 'selection';
+    ActionListener.HTMLs = request.HTMLs || [];
+  }
+  sendResponse(true);
+};
+
+Chrome.runtime.onMessage.addListener(onReceiveMessage);
+window.addEventListener('beforeunload', () => {
+  Chrome.runtime.onMessage.removeListener(onReceiveMessage);
+});

src/pages/inject/content-scripts.ts

@@ -90,14 +90,14 @@ class App {
       .appendTo(`.${this.maskCls}`)
       .on('click', async () => {
         const selectedElems = this.areaSelection.getSelectedElems();
-        const htmls = Array.from(selectedElems).map(elem =>
+        const HTMLs = Array.from(selectedElems).map(elem =>
           $(elem).prop('outerHTML'),
         );
 
         Chrome.runtime.sendMessage(
           {
             action: GLOBAL_EVENTS.GET_SELECTED_HTML,
-            htmls,
+            HTMLs,
           },
           () => {
             iframe.addClass('show');
@@ -142,14 +142,14 @@ class App {
 
   private confirmSelection() {
     const selectedElems = this.areaSelection.getSelectedElems();
-    const htmls = Array.from(selectedElems).map(elem =>
+    const HTMLs = Array.from(selectedElems).map(elem =>
       $(elem).prop('outerHTML'),
     );
 
     Chrome.runtime.sendMessage(
       {
         action: GLOBAL_EVENTS.GET_SELECTED_HTML,
-        htmls,
+        HTMLs,
       },
       () => {
         const { sandboxURL } = this;
@@ -251,7 +251,7 @@ class App {
      */
     setTimeout(() => {
       this.areaSelection.overlay.focus();
-    }, 300)
+    }, 300);
     document.addEventListener('keydown', this.handleKeyDown);
   }
 
@@ -268,7 +268,7 @@ class App {
         const { selectionText } = data;
         Chrome.runtime.sendMessage({
           action: GLOBAL_EVENTS.GET_SELECTED_TEXT,
-          htmls: [ selectionText ],
+          HTMLs: [ selectionText ],
         });
       });
 

src/pages/sandbox/App.tsx

@@ -20,15 +20,7 @@ import styles from './App.module.less';
 import { EditorValueContext } from './EditorValueContext';
 import { Other } from './Other';
 import SaveTo from './SaveTo';
-
-type MessageSender = chrome.runtime.MessageSender;
-
-type SendResponse = (response: any) => void;
-
-interface RequestMessage {
-  action: keyof typeof GLOBAL_EVENTS;
-  htmls?: string[];
-}
+import { ActionListener } from '@/core/action-listener';
 
 initI18N();
 
@@ -134,7 +126,7 @@ type TabName = 'save-to' | 'other';
 
 const App = () => {
   const [ editorValue, setEditorValue ] = useState([]);
-  const [ currentType, setCurrentType ] = useState(null);
+  const [ currentType, setCurrentType ] = useState(ActionListener.currentType);
   const {
     state: { account, forceUpgradeInfo, appReady },
     onClose,
@@ -155,6 +147,12 @@ const App = () => {
     setTab(e.target.value as unknown as TabName);
   };
 
+  useEffect(() => {
+    if (currentType === null && ActionListener.currentType) {
+      setCurrentType(ActionListener.currentType);
+    }
+  }, [ currentType ]);
+
   const isLogined = account?.id;
 
   if (!appReady) return null;

src/pages/sandbox/SaveTo.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import React, { useState, useEffect, useContext, useRef, useCallback } from 'react';
 import { ConfigProvider, Button, Select, message, Menu } from 'antd';
 import classnames from 'classnames';
 import { get as safeGet } from 'lodash';
@@ -16,20 +16,16 @@ import ClipperSvg from '@/assets/svg/clipper.svg';
 import BookLogoSvg from '@/assets/svg/book-logo.svg';
 import NoteLogoSvg from '@/assets/svg/note-logo.svg';
 import styles from './SaveTo.module.less';
-
-type MessageSender = chrome.runtime.MessageSender;
-
-type SendResponse = (response: any) => void;
-
-interface RequestMessage {
-  action: keyof typeof GLOBAL_EVENTS;
-  htmls?: string[];
-}
+import { ActionListener } from '@/core/action-listener';
 
 const getBookmarkHtml = (tab: chrome.tabs.Tab) => {
   return `<h2>${tab.title}</h2><p><a href="${tab.url}">${tab.title}</a></p>`;
 };
 
+const getCitation = (tab: chrome.tabs.Tab) => {
+  return `<p>来自: <a href="${tab.url}">${tab.url}</a></p>`;
+};
+
 const getCurrentTab = (): Promise<chrome.tabs.Tab> =>
   new Promise(resolve => {
     Chrome.tabs.getCurrent(tab => {
@@ -110,45 +106,36 @@ const useViewModel = props => {
       });
   }, []);
 
-  const onReceiveMessage = async (
-    request: RequestMessage,
-    _sender: MessageSender,
-    sendResponse: SendResponse,
-  ) => {
-    switch (request.action) {
-      case GLOBAL_EVENTS.GET_SELECTED_HTML: {
-        const { htmls } = request;
+  const onLoad = useCallback(() => {
+    if (editorRef.current) {
+      const HTMLs = ActionListener.getSelectHTMLs();
+      (async () => {
         const noteId = await getNoteId();
-        const processedHTMLs = await processHTMLs(htmls, noteId);
-        if (editorRef.current.isEmpty()) {
-          const initHtml = getBookmarkHtml(await getCurrentTab());
-          editorRef.current?.appendContent(initHtml);
-        }
-        editorRef.current?.appendContent(processedHTMLs.join(''), true);
-        sendResponse(true);
-        return;
-      }
-      case GLOBAL_EVENTS.GET_SELECTED_TEXT: {
-        const { htmls } = request;
-        if (editorRef.current.isEmpty()) {
-          const initHtml = getBookmarkHtml(await getCurrentTab());
-          editorRef.current?.appendContent(initHtml);
-        }
-        editorRef.current?.appendContent(htmls.join(''), true);
-        setCurrentType('selection');
-        sendResponse(true);
-        return;
-      }
-      default:
-        sendResponse(true);
+        const processedHTMLs = await processHTMLs(HTMLs, noteId);
+        editorRef.current?.appendContent(processedHTMLs.join(''));
+        editorRef.current?.appendContent(getCitation(await getCurrentTab()), true);
+      })();
     }
-  };
+  }, []);
 
   useEffect(() => {
-    Chrome.runtime.onMessage.addListener(onReceiveMessage);
-    return () => {
-      Chrome.runtime.onMessage.removeListener(onReceiveMessage);
-    };
+    return ActionListener.addListener(async request => {
+      switch (request.action) {
+        case GLOBAL_EVENTS.GET_SELECTED_HTML: {
+          const { HTMLs } = request;
+          const noteId = await getNoteId();
+          const processedHTMLs = await processHTMLs(HTMLs, noteId);
+          if (editorRef.current.isEmpty()) {
+            const initHtml = getBookmarkHtml(await getCurrentTab());
+            editorRef.current?.appendContent(initHtml);
+          }
+          editorRef.current?.appendContent(processedHTMLs.join(''), true);
+          return;
+        }
+        default:
+          break;
+      }
+    });
   }, []);
 
   useEffect(() => {
@@ -258,6 +245,7 @@ const useViewModel = props => {
     onContinue,
     onSelectType,
     onSelectBookId,
+    onLoad,
   };
 };
 
@@ -269,6 +257,7 @@ const SaveTo = React.forwardRef<IEditorRef, any>((props, ref) => {
     onSave,
     onContinue,
     onSelectType,
+    onLoad,
   } = useViewModel(props);
   const handleTypeSelect = (info: MenuInfo) => {
     onSelectType(info.key);
@@ -325,7 +314,7 @@ const SaveTo = React.forwardRef<IEditorRef, any>((props, ref) => {
         </Button>
         {currentType && (
           <div className={styles['lake-editor']}>
-            <LakeEditor ref={editorRef} value="" onChange={html => {
+            <LakeEditor ref={editorRef} value="" onLoad={onLoad} onChange={html => {
               // console.info(html);
             }}>
               <Button onClick={onContinue}>