🐞fix: refactor tagPop logic

blinko-space · Nov 10, 2024 · 8d14f89 · 8d14f89
1 parent c91c50d
commit 8d14f89
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 15 deletions.
diff --git a/src/components/BlinkoEditor/index.tsx b/src/components/BlinkoEditor/index.tsx
@@ -22,7 +22,6 @@ export const BlinkoEditor = observer(({ mode, onSended, onHeightChange }: IProps
       originFiles={!isCreateMode ? blinko.curSelectedNote?.attachments : []}
       content={isCreateMode ? blinko.noteContent! : blinko.curSelectedNote?.content!}
       onChange={v => {
-        console.log(v, 'onChange is empty??')
         if (v == '') {
           onHeightChange?.(editorRef.current?.clientHeight < 90 ? editorRef.current?.clientHeight : 90)
         } else {

diff --git a/src/components/Common/Editor/editorPlugins.tsx b/src/components/Common/Editor/editorPlugins.tsx
@@ -1,7 +1,6 @@
 import { codeMirrorPlugin, linkPlugin, sandpackPlugin } from '@mdxeditor/editor';
 import { simpleSandpackConfig } from './type';
 const { codeBlockPlugin, tablePlugin, listsPlugin, quotePlugin, markdownShortcutPlugin } = await import('@mdxeditor/editor')
-import { hashTagPlugin } from '../MdxPlugin/hashTagPlugin';
 
 export const MyPlugins = [
   codeBlockPlugin({ defaultCodeBlockLanguage: 'js' }),
@@ -11,6 +10,5 @@ export const MyPlugins = [
   linkPlugin(),
   quotePlugin(),
   tablePlugin(),
-  markdownShortcutPlugin(),
-  hashTagPlugin(),
+  markdownShortcutPlugin()
 ]
diff --git a/src/components/Common/Editor/index.tsx b/src/components/Common/Editor/index.tsx
@@ -23,6 +23,7 @@ import { useMediaQuery } from 'usehooks-ts';
 import { api } from '@/lib/trpc';
 import { NoteType, type Attachment } from '@/server/types';
 import { UPLOAD_FILE_PATH } from '@/lib/constant';
+import { showTagSelectPop } from '../TagSelectPop';
 const { MDXEditor } = await import('@mdxeditor/editor')
 
 // https://mdxeditor.dev/editor/docs/theming
@@ -81,20 +82,26 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
 
   const store = RootStore.Local(() => ({
     files: [] as FileType[],
+    lastRange: null as Range | null,
+    lastRangeText: '',
     get canSend() {
       if (store.files.length == 0) return true
       return store.files?.every(i => !i?.uploadPromise?.loading?.value)
     },
     replaceMarkdownTag(text) {
       if (mdxEditorRef.current) {
-        const Mycontent = mdxEditorRef.current!.getMarkdown().replace(helper.regex.isEndsWithHashTag, "#" + text + '&#x20;')
-        mdxEditorRef.current.setMarkdown(Mycontent)
-        mdxEditorRef.current.focus(() => {
-          setTimeout(() => eventBus.emit('hashpop:hidden'), 100)
-          onChange?.(Mycontent)
-        }, {
-          defaultSelection: 'rootEnd'
-        })
+        if (store.lastRange) {
+          const selection = window.getSelection();
+          const currentTextBeforeRange = store.lastRangeText.replace(/&#x20;/g, " ") ?? ''
+          const currentText = mdxEditorRef.current!.getMarkdown().replace(/\\/g, '').replace(/&#x20;/g, " ")
+          const tag = currentTextBeforeRange.replace(helper.regex.isEndsWithHashTag, "#" + text + '&#x20;')
+          const MyContent = currentText.replace(currentTextBeforeRange, tag)
+          mdxEditorRef.current.setMarkdown(MyContent)
+          onChange?.(MyContent)
+          mdxEditorRef.current!.focus()
+          // selection!.removeAllRanges();
+          // selection!.addRange(store.lastRange);
+        }
       }
     },
     insertMarkdown(text) {
@@ -118,6 +125,7 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
     inertHash() {
       mdxEditorRef.current!.insertMarkdown("&#x20;#")
       mdxEditorRef.current!.focus()
+      store.handlePopTag()
     },
     async speechToText(filePath) {
       if (!blinko.showAi) {
@@ -166,6 +174,32 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
         lastModified: Date.now(), // 可以指定最后修改时间为当前时间
       });
       store.uploadFiles([mp3File])
+    },
+    handlePopTag() {
+      const selection = window.getSelection();
+      if (selection!.rangeCount > 0) {
+        let lastRange = selection!.getRangeAt(0);
+        store.lastRange = lastRange
+        store.lastRangeText = lastRange.endContainer.textContent?.slice(0, lastRange.endOffset) ?? ''
+        console.log(store.lastRange, 'lastRangeText!!!')
+        const hasHashTagRegex = /#[^\s#]+/g
+        const endsWithBankRegex = /\s$/g
+        const currentText = store.lastRange.startContainer.textContent?.slice(0, store.lastRange.endOffset) ?? ''
+        const isEndsWithBank = endsWithBankRegex.test(currentText)
+        const isEndsWithHashTag = helper.regex.isEndsWithHashTag.test(currentText)
+        if (currentText == '' || !isEndsWithHashTag) {
+          setTimeout(() => eventBus.emit('hashpop:hidden'))
+          return
+        }
+        if (isEndsWithHashTag && currentText != '' && !isEndsWithBank) {
+          const match = currentText.match(hasHashTagRegex)
+          let searchText = match?.[match?.length - 1] ?? ''
+          if (currentText.endsWith("#")) {
+            searchText = ''
+          }
+          showTagSelectPop(searchText.toLowerCase())
+        }
+      }
     }
   }))
 
@@ -221,6 +255,7 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
         contentEditableClassName='prose'
         onChange={v => {
           onChange?.(v)
+          store.handlePopTag()
         }}
         autoFocus={{
           defaultSelection: 'rootEnd'

diff --git a/src/components/Common/MdxPlugin/hashTagPlugin/index.ts b/src/components/Common/MdxPlugin/hashTagPlugin/index.ts
@@ -7,6 +7,8 @@ import {
 } from "@mdxeditor/editor";
 import { TextNode } from "lexical";
 import { showTagSelectPop } from "../../TagSelectPop";
+
+//@deprecated
 export const hashTagPlugin = realmPlugin({
   init(realm): void {
     realm.pubIn({

diff --git a/src/components/Common/TagSelectPop.tsx b/src/components/Common/TagSelectPop.tsx
@@ -32,10 +32,12 @@ const TagSelectPop = observer(() => {
     height: 200,
     maxWith: 250,
     get tagList() {
+      console.log(store.searchText, store.searchText == '' || !store.searchText)
       if (store.searchText == '' || !store.searchText) {
         return blinko.tagList?.value?.pathTags
       }
-      return blinko.tagList?.value?.pathTags?.filter(i => i.includes(store.searchText.replace("#", '')))
+      console.log(store.searchText, JSON.parse(JSON.stringify(blinko.tagList?.value?.pathTags.map(i => i.toLowerCase()))))
+      return blinko.tagList?.value?.pathTags.filter(i => i.toLowerCase().includes(store.searchText.toLowerCase().replace("#", '')))
     },
     hidden() {
       store.show = false

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
@@ -15,7 +15,7 @@ export interface TagTreeNode {
 export type TagTreeDBNode = Tag & { children?: TagTreeDBNode[]; metadata: { icon: string, path: string } }
 export const helper = {
   regex: {
-    isEndsWithHashTag: /#[\w\u4e00-\u9fa5]*$/,
+    isEndsWithHashTag: /#[/\w\p{L}\p{N}]*$/u,
     //lookbehind assertions in ios regex is not supported
     isContainHashTag: /#[^\s#]*(?:[*?.。]|$)/g
   },

diff --git a/src/server/routers/note.ts b/src/server/routers/note.ts
@@ -10,7 +10,7 @@ import { UPLOAD_FILE_PATH } from '@/lib/constant';
 import { unlink } from 'fs/promises';
 
 const extractHashtags = (input: string): string[] => {
-  const hashtagRegex = /#[^\s#]*(?<![*?.。])/g;
+  const hashtagRegex = /#[^\s#]+(?<![*?.。])/g;
   const matches = input.match(hashtagRegex);
   return matches ? matches : [];
 }