From d9e9770eb80119731b928eb4d4da2e4748bdb40c Mon Sep 17 00:00:00 2001
From: Jiangchunfu <mrj_kevin@163.com>
Date: Sun, 4 Aug 2024 12:38:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=8F=E5=8A=9F=E8=83=BD=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=BE(4)=20(#379)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TitleModules/TitleContent/index.jsx       | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
index 560fe7dd..0cba4d9a 100644
--- a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
+++ b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
@@ -38,6 +38,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const status = ref('')
+    const moduleTitleRef = ref()
     watch(
       () => props.isSelected,
       () => {
@@ -45,11 +46,13 @@ export default defineComponent({
       }
     )
 
-    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>}