From 01bbf57c645f3e9e75f91e196a5cb5a674207be2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com>
Date: Tue, 26 Mar 2024 20:46:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(EditorMd):=20=E7=82=B9=E5=87=BB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=96=EF=BC=8C=E6=94=B6=E8=B5=B7hint=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=20(#1808)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/composables/use-editor-md.ts          | 22 +++++++++++++------
 .../devui/editor-md/src/editor-md.tsx         |  7 ++++--
 packages/devui-vue/package.json               |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
index 99cb38482d..d3741c7985 100644
--- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
+++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
-import { computed, nextTick, onMounted, reactive, Ref, ref, SetupContext, toRefs, watch } from 'vue';
+import { computed, nextTick, onMounted, reactive, Ref, ref, SetupContext, toRefs, watch, onBeforeUnmount } from 'vue';
 import { debounce } from '../../../shared/utils';
 import { EditorMdProps, Mode } from '../editor-md-types';
 import { DEFAULT_TOOLBARS } from '../toolbar-config';
@@ -27,6 +27,7 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
   const renderRef = ref();
   const overlayRef = ref();
   const cursorRef = ref();
+  const containerRef = ref();
   const isHintShow = ref();
   const previewHtmlList: Ref<any[]> = ref([]);
   let editorIns: any;
@@ -214,12 +215,7 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
       const startPos = value.lastIndexOf(nowPrefix, cursor.ch);
       const endPos = value.indexOf(' ', cursor.ch) > -1 ? value.indexOf(' ', cursor.ch) : value.length;
       hint = value.slice(startPos, cursor.ch);
-      if (
-        startPos < 0 ||
-        !hint.includes(nowPrefix) ||
-        hint.endsWith(' ') ||
-        isImgRegx.test(hint)
-      ) {
+      if (startPos < 0 || !hint.includes(nowPrefix) || hint.endsWith(' ') || isImgRegx.test(hint)) {
         cursorHint = '';
         cursorHintStart = -1;
         cursorHintEnd = -1;
@@ -342,12 +338,23 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
     }
   };
 
+  const onDocumentClick = (e: Event) => {
+    if (isHintShow.value && e.target !== containerRef.value && !containerRef.value?.contains(e.target)) {
+      hideHint();
+    }
+  };
+
   onMounted(async () => {
     await import('codemirror/addon/display/placeholder.js');
     await import('codemirror/mode/markdown/markdown.js');
     const module = await import('codemirror');
     CodeMirror = module.default;
     initEditor();
+    document.addEventListener('click', onDocumentClick);
+  });
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('click', onDocumentClick);
   });
 
   watch(modelValue, (val: string) => {
@@ -398,6 +405,7 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
     overlayRef,
     cursorRef,
     renderRef,
+    containerRef,
     toolbars,
     previewHtmlList,
     isHintShow,
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
index 68fbdd1470..cf6c3a7d1f 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, provide, ref, SetupContext } from 'vue';
+import { defineComponent, toRefs, provide, ref, SetupContext, withModifiers } from 'vue';
 import { Fullscreen } from '../../fullscreen';
 import { useEditorMd } from './composables/use-editor-md';
 import { useEditorMdTheme } from './composables/use-editor-md-theme';
@@ -40,6 +40,7 @@ export default defineComponent({
       overlayRef,
       cursorRef,
       renderRef,
+      containerRef,
       isHintShow,
       toolbars,
       previewHtmlList,
@@ -65,6 +66,7 @@ export default defineComponent({
     return () => (
       <Fullscreen v-model={showFullscreen.value} z-index={fullscreenZIndex.value}>
         <div
+          ref={containerRef}
           class={[
             'dp-md-container',
             { 'dp-md-readonly': mode.value === 'readonly', 'dp-md-editonly': mode.value === 'editonly', 'dp-md-dark': isDarkMode.value },
@@ -85,7 +87,8 @@ export default defineComponent({
                 v-model={isHintShow.value}
                 origin={cursorRef.value || undefined}
                 align="start"
-                position={['bottom-start']}>
+                position={['bottom-start']}
+                onClick={withModifiers(() => {}, ['stop'])}>
                 {ctx.slots?.hintTemplate?.()}
               </FlexibleOverlay>
               {Boolean(maxlength?.value) && (
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index c2aa3ab74c..dbde99e541 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.4-alpha.0",
+  "version": "1.6.4-markdown.0",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [