feat: 小功能建设(4) (didi#379)

Author: webaddkevin

web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx

@@ -38,18 +38,21 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const status = ref('')
+    const moduleTitleRef = ref()
     watch(
       () => props.isSelected,
       () => {
         status.value = 'preview'
       }
     )
 
-    const handleClick = () => {
-      if (props.isSelected) {
-        status.value = 'edit'
+    watch(status, (v) => {
+      if (v === 'edit') {
+        document.addEventListener('click', handleDocumentClick)
+      } else {
+        document.removeEventListener('click', handleDocumentClick)
       }
-    }
+    })
 
     const typeName = computed(() => {
       if (!props.showType) return ''
@@ -84,13 +87,34 @@ export default defineComponent({
       return htmlText
     })
 
-    return { slots, handleClick, status, tagTitle }
+    function handleClick(e) {
+      if (props.isSelected && status.value === 'preview') {
+        e.stopPropagation()
+        status.value = 'edit'
+      }
+    }
+
+    function handleDocumentClick(e) {
+      const richEditorDOM = moduleTitleRef.value.querySelector('.rich-editor')
+      const isClickRichEditor = richEditorDOM?.contains(e.target)
+
+      if (status.value === 'edit' && richEditorDOM && !isClickRichEditor) {
+        // 监听编辑状态时点击非编辑区域
+        status.value = 'preview'
+      }
+    }
+
+    return { slots, handleClick, status, tagTitle, moduleTitleRef }
   },
   render() {
     const { isRequired, indexNumber, slots, status, tagTitle } = this
 
     return (
-      <div class={['module-title', isRequired ? 'is-required' : '']} onClick={this.handleClick}>
+      <div
+        ref="moduleTitleRef"
+        class={['module-title', isRequired ? 'is-required' : '']}
+        onClick={this.handleClick}
+      >
         {isRequired && <i class="module-title-required">*</i>}
         <div class="module-content">
           {this.showIndex && <span class="index"> {indexNumber}.</span>}