Merge pull request #5 from b-yp/dev

feat: 一波优化

README.md

@@ -2,10 +2,15 @@
   - > 使用拼音首字母或者全拼匹配标签🏷并插入文档。
 
 - ## 使用
-  - 输入斜杠命令 `/tags-picker-pinyin`
+  - 输入斜杠命令 `/tags-picker-pinyin` 唤出弹窗
+  - 使用快捷键 Ctrl/Command + t 唤出弹窗
+    - 快捷键可在插件设置里配置
 
 - ## 演示
   - ![demo](./assets/logseq-pinyin-match-tags.gif)
 
+- ## 鸣谢
+  - 拼音匹配引擎使用了这个库: https://github.com/aui/pinyin-engine @[aui](https://github.com/aui)
+
 - ## 许可证
   - [MIT](https://choosealicense.com/licenses/mit/)

src/App.tsx

@@ -22,6 +22,7 @@ function App() {
   });
   const [allTags, setAllTags] = useState<string[]>([]);
   const [matchTags, setMatchTags] = useState<string[]>([]);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [pinyinEngine, setPinyinEngine] = useState<PinyinEngine | null>(null);
   const [currentBlock, setCurrentBlock] = useState<BlockEntity | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
@@ -60,36 +61,72 @@ function App() {
     // );
   };
 
-  const initPinyinEngine = async () => {
+  const initPinyinEngine = async (currentBlock: BlockEntity) => {
+    const content = currentBlock.content;
+    const tagsByBlock = content
+      .match(/(#[^\s#]+)/gi)
+      ?.map((i) => i.substring(1));
+    console.log("tagsbl", tagsByBlock);
     const tags = await getTags();
+    // 过滤掉 block 中已经有的 tag
+    const newTags = tags.filter((i) => !tagsByBlock?.includes(i));
+    const uniqueArray = [...new Set(newTags)];
+    console.log("uniar", uniqueArray);
     /**
      * 建立数据索引
      * 因为查询出来的 tag 会分 [[]] 和 # 两种形式的，而我们这里不做区分，所以你建立索引之前要去重
      * 但是目前这种用 JS 去重的方法性能比较差，后期看能不能在从 datascript 上去重
      */
-    const pinyinEngine = new PinyinEngine([...new Set(tags)]); // TODO: datascript 去重
+    const pinyinEngine = new PinyinEngine(uniqueArray); // TODO: datascript 去重
 
-    setAllTags(tags);
+    setAllTags(uniqueArray);
+    // 默认设置所有 tag 为可选项
+    setMatchTags(uniqueArray);
     setPinyinEngine(pinyinEngine);
+    setSelectedTags([]);
   };
 
-  useEffect(() => {
-    logseq.Editor.registerSlashCommand("tags-picker-pinyin", async () => {
-      const currentBlock = await logseq.Editor.getCurrentBlock();
-      setCurrentBlock(currentBlock);
+  const init = async () => {
+    const currentBlock = await logseq.Editor.getCurrentBlock();
+    if (!currentBlock) return;
 
-      initMainUI();
-      initPinyinEngine();
+    setCurrentBlock(currentBlock);
+    setBlockContent(currentBlock.content);
+    setModalVisible(true);
 
-      setModalVisible(true);
+    initMainUI();
+    initPinyinEngine(currentBlock);
+  };
 
-      if (!currentBlock?.uuid) return;
-      logseq.DB.onBlockChanged(currentBlock.uuid, ({ content }) => {
-        setBlockContent(content);
-      });
-    });
+  useEffect(() => {
+    // 斜杠命令触发
+    logseq.Editor.registerSlashCommand("tags-picker-pinyin", init);
+
+    if (logseq.settings && logseq.settings["pinyinShortcutKey"]) {
+      // 快捷键触发
+      logseq.App.registerCommandShortcut(
+        {
+          mode: "editing",
+          binding: logseq.settings["pinyinShortcutKey"],
+        },
+        init
+      );
+    }
   }, []);
 
+  useEffect(() => {
+    // 当前 block 改变时要清空已选标签
+    setSelectedTags([]);
+    setBlockContent(currentBlock?.content || "");
+
+    // if (!currentBlock?.uuid) return;
+    // // 监听块的变化
+    // logseq.DB.onBlockChanged(currentBlock.uuid, ({ content }) => {
+    //   console.log('content',content)
+    //   setBlockContent(content);
+    // });
+  }, [currentBlock?.uuid]);
+
   const handleInputChange = throttle((e: any) => {
     const field = e.target.value;
     if (!field || !pinyinEngine) {
@@ -98,15 +135,34 @@ function App() {
     }
     const matchTags = pinyinEngine.query(field);
 
-    setMatchTags(matchTags);
+    // set 之前过滤一下已经插入的 tag
+    const newMatchTags = matchTags.filter((i) => !selectedTags.includes(i));
+
+    setMatchTags(newMatchTags);
     setSelectedIndex(0);
   }, 500);
 
   const handleClickTagList = async (index: number) => {
     const tag = matchTags[index];
     setSelectedIndex(index);
+    // 将已经插入的 tag 过滤掉
+    setSelectedTags((values) => {
+      const newValues = [...values];
+      newValues.push(tag);
+      return newValues;
+    });
+    setMatchTags([...matchTags].filter((i) => i !== tag));
     if (!currentBlock?.uuid) return;
+    console.log("blcol", blockContent);
+    /**
+     * TODO 使用 insertAtEditingCursor 插入性能好不用等待，并且不需要保存块的内容
+     * 但是同时将 block 变为编辑模式了，导致在插件中的键盘操作不管用了
+     * 如何在 insert 之后退出编辑模式呢 ？
+     */
+    // logseq.Editor.insertAtEditingCursor(` #${tag}`);
+    // 在这个问题没解决之前先用之前的方案
     logseq.Editor.updateBlock(currentBlock.uuid, `${blockContent} #${tag}`);
+    setBlockContent(`${blockContent} #${tag}`);
   };
 
   const handleInputKeyDown = (e: any) => {

src/main.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import * as ReactDOM from "react-dom/client";
 
 import App from "./App";
+import { settings } from "./settings";
 import { logseq as PL } from "../package.json";
 
 import "./index.css";
@@ -13,6 +14,9 @@ const pluginId = PL.id;
 function main() {
   console.info(`#${pluginId}: MAIN`);
 
+  // 注册设置项
+  logseq.useSettingsSchema(settings);
+
   const root = ReactDOM.createRoot(document.getElementById("app")!);
 
   root.render(

src/settings.ts

@@ -0,0 +1,11 @@
+import {  SettingSchemaDesc } from "@logseq/libs/dist/LSPlugin";
+
+export const settings: SettingSchemaDesc[] = [
+  {
+    key: "pinyinShortcutKey",
+    description: "/tags-picker-pinyin 弹窗拼音匹配快捷键",
+    type: "string",
+    default: "mod+t",
+    title: "拼音匹配快捷键",
+  },
+];