feat: 修改划词快捷键实现

yuque · Oct 31, 2023 · 47810a4 · 47810a4
1 parent c319cb0
commit 47810a4
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 43 deletions.
diff --git a/src/components/SelectSavePosition/index.tsx b/src/components/SelectSavePosition/index.tsx
@@ -75,7 +75,7 @@ function SelectSavePosition(props: ISelectSavePositionProps) {
 
   const positionList = useMemo(() => {
     return [
-      { value: 'note', label: __i18n('保存小记') },
+      { value: 'note', label: __i18n('存为小记') },
       { value: 'book', label: __i18n('存为文档') },
     ];
   }, []);

diff --git a/src/core/system-info.ts b/src/core/system-info.ts
@@ -0,0 +1,4 @@
+import bowser from 'bowser';
+
+const info = bowser.getParser(navigator.userAgent);
+export const isMacOs = info.getOSName() === 'macOS';
diff --git a/src/pages/inject/WordMark/app.tsx b/src/pages/inject/WordMark/app.tsx
@@ -5,7 +5,6 @@ import React, {
   useState,
   useLayoutEffect,
 } from 'react';
-import keymaster from 'keymaster';
 import { message } from 'antd';
 import classnames from 'classnames';
 import LinkHelper from '@/isomorphic/link-helper';
@@ -24,10 +23,10 @@ import Inner from './Inner';
 import styles from './app.module.less';
 
 function WordMarkApp() {
-  const [showWordMark, setShowWordMark] = useState(false);
   const [type, setType] = useState<WordMarkOptionTypeEnum | null>(null);
   const [selectText, setSelectText] = useState<string>('');
   const { forceUpdate } = useForceUpdate();
+  const showWordMarkRef = useRef(false);
   const editorRef = useRef<IEditorRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const wordMarkPositionRef = useRef({
@@ -49,7 +48,8 @@ function WordMarkApp() {
           ClipAssistantMessageActions.addContent,
           text,
         );
-        setShowWordMark(false);
+        showWordMarkRef.current = false;
+        forceUpdate();
         return;
       }
       if (isSaving.current) {
@@ -96,7 +96,8 @@ function WordMarkApp() {
             </span>,
           );
         }
-        setShowWordMark(false);
+        showWordMarkRef.current = false;
+        forceUpdate();
       } catch (e) {
         message.error(__i18n('保存失败，请重试！'));
       }
@@ -108,7 +109,7 @@ function WordMarkApp() {
   const executeCommand = useCallback(
     async (t: WordMarkOptionTypeEnum) => {
       if (t === WordMarkOptionTypeEnum.clipping) {
-        const selection = document.getSelection();
+        const selection = window.getSelection();
         let html = '';
         if (selection) {
           html = Array.from(selection.getRangeAt(0).cloneContents().childNodes)
@@ -142,7 +143,8 @@ function WordMarkApp() {
   }, []);
 
   const closeWordMark = useCallback(() => {
-    setShowWordMark(false);
+    showWordMarkRef.current = false;
+    forceUpdate();
   }, []);
 
   useEffect(() => {
@@ -163,23 +165,30 @@ function WordMarkApp() {
         const selection = window.getSelection();
         // 如果选中区域可编辑，那么不展示划词
         if (isEdit || !selection) {
-          setShowWordMark(false);
+          showWordMarkRef.current = false;
+          setVisible(false);
+          forceUpdate();
           return;
         }
         const selectionText = selection.toString();
         if (selection.rangeCount <= 0) {
-          setShowWordMark(false);
+          showWordMarkRef.current = false;
+          setVisible(false);
+          forceUpdate();
           return;
         }
         if (!selectionText.trim().length) {
-          setShowWordMark(false);
+          showWordMarkRef.current = false;
+          setVisible(false);
+          forceUpdate();
           return;
         }
         const range = selection.getRangeAt(0);
         const rect = range.getBoundingClientRect();
         const x = (rect.left + rect.right) / 2;
         const y = rect.bottom;
-        setShowWordMark(true);
+        showWordMarkRef.current = true;
+        forceUpdate();
         setSelectText(selectionText);
         mouseupPositionRef.current = {
           x,
@@ -196,7 +205,7 @@ function WordMarkApp() {
 
   useEffect(() => {
     setType(null);
-  }, [selectText, showWordMark]);
+  }, [selectText, showWordMarkRef.current]);
 
   useLayoutEffect(() => {
     if (!selectText) {
@@ -207,20 +216,14 @@ function WordMarkApp() {
 
   useEffect(() => {
     const onkeydown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      setVisible(v => {
-        message.success(
-          !v
-            ? __i18n('本次访问已开启划词工具栏')
-            : __i18n('本次访问已关闭划词工具栏'),
-        );
-        return !v;
-      });
+      if (e.key === wordMarkContext.evokeWordMarkShortKey && showWordMarkRef.current) {
+        setVisible(v => !v);
+      }
     };
-    keymaster(wordMarkContext.evokeWordMarkShortKey, onkeydown);
+    window.addEventListener('keydown', onkeydown);
 
     return () => {
-      keymaster.unbind(wordMarkContext.evokeWordMarkShortKey);
+      window.removeEventListener('keydown', onkeydown);
     };
   }, [wordMarkContext]);
 
@@ -232,7 +235,7 @@ function WordMarkApp() {
           top: `${wordMarkPositionRef.current.top}px`,
         }}
         className={classnames(styles.wordMarkWrapper, {
-          [styles.hidden]: !showWordMark,
+          [styles.hidden]: !showWordMarkRef.current,
         })}
         onMouseUp={e => {
           // 内部面板阻止冒泡，避免触发 mouseup 事件

diff --git a/src/pages/setting/shortcut/index.module.less b/src/pages/setting/shortcut/index.module.less
@@ -32,6 +32,7 @@
       font-size: @font-size-lg;
       line-height: 24px;
       margin-bottom: 16px;
+      font-weight: 500;
     }
 
     .body {

diff --git a/src/pages/setting/wordMark/index.module.less b/src/pages/setting/wordMark/index.module.less
@@ -12,6 +12,7 @@
       font-size: @font-size-lg;
       line-height: 24px;
       margin-bottom: 16px;
+      font-weight: 500;
     }
 
     .body {

diff --git a/src/pages/setting/wordMark/index.tsx b/src/pages/setting/wordMark/index.tsx
@@ -1,16 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import { Switch } from 'antd';
+import { Select, Switch } from 'antd';
 import { __i18n } from '@/isomorphic//i18n';
 import {
   IWordMarkConfig,
   WordMarkConfigKey,
 } from '@/isomorphic/constant/wordMark';
 import SelectSavePosition from '@/components/SelectSavePosition';
 import LinkHelper from '@/isomorphic/link-helper';
-import ShortItem from '@/components/ShortItem';
 import { backgroundBridge } from '@/core/bridge/background';
+import { isMacOs } from '@/core/system-info';
 import styles from './index.module.less';
 
+const mac = [
+  {
+    value: '',
+    label: '无',
+  },
+  {
+    value: 'Meta',
+    label: 'Command',
+  },
+  {
+    value: 'Alt',
+    label: 'Alt',
+  },
+  {
+    value: 'Shift',
+    label: 'Shift',
+  },
+  {
+    value: 'Control',
+    label: 'Ctrl',
+  },
+];
+
+const windows = [
+  {
+    value: '',
+    label: '无',
+  },
+  {
+    value: 'Alt',
+    label: 'Alt',
+  },
+  {
+    value: 'Shift',
+    label: 'Shift',
+  },
+  {
+    value: 'Control',
+    label: 'Ctrl',
+  },
+];
+
 function WordMark() {
   const [config, setConfig] = useState<IWordMarkConfig | null>(null);
 
@@ -48,19 +90,15 @@ function WordMark() {
           </div>
           {!config.enable && (
             <div className={styles.configItem}>
-              <div className={styles.desc}>{__i18n('快捷键唤起工具栏')}</div>
-              <ShortItem
-                defaultShortcut={
-                  config[WordMarkConfigKey.evokeWordMarkShortKey]
-                }
-                onRemoveShortcut={() => {
-                  onConfigChange(WordMarkConfigKey.evokeWordMarkShortKey, '');
-                }}
-                onChangeShortCut={shortcut => {
-                  onConfigChange(
-                    WordMarkConfigKey.evokeWordMarkShortKey,
-                    shortcut,
-                  );
+              <div className={styles.desc}>
+                {__i18n('选中文本+按指定修饰键唤起')}
+              </div>
+              <Select
+                value={config[WordMarkConfigKey.evokeWordMarkShortKey]}
+                options={isMacOs ? mac : windows}
+                style={{ width: '120px' }}
+                onChange={(v: string) => {
+                  onConfigChange(WordMarkConfigKey.evokeWordMarkShortKey, v);
                 }}
               />
             </div>

diff --git a/src/styles/global.less b/src/styles/global.less
@@ -5,10 +5,6 @@
   margin: 0;
 }
 
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
 .yuque-chrome-extension-tooltip > .yuque-chrome-extension-tooltip-arrow {
   display: none;
 }