fix(EditorMd): 点击组件外，收起hint提示 (#1808)

Author: xingyan95

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,

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) && (

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": [