fix: 拼音隐藏 placeholder

wangeditor-team · Sep 22, 2021 · aec1a9f · aec1a9f
1 parent 68b03e4
commit aec1a9f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/packages/core/src/text-area/TextArea.ts b/packages/core/src/text-area/TextArea.ts
@@ -11,7 +11,7 @@ import { TEXTAREA_TO_EDITOR } from '../utils/weak-maps'
 import { IDomEditor } from '../editor/interface'
 import { DomEditor } from '../editor/dom-editor'
 import updateView from './update-view'
-import handlePlaceholder from './place-holder'
+import { handlePlaceholder } from './place-holder'
 import { editorSelectionToDOM, DOMSelectionToEditor } from './syncSelection'
 import { promiseResolveThen } from '../utils/util'
 import eventHandlerConf from './event-handlers/index'

diff --git a/packages/core/src/text-area/event-handlers/composition.ts b/packages/core/src/text-area/event-handlers/composition.ts
@@ -10,6 +10,7 @@ import TextArea from '../TextArea'
 import { hasEditableTarget } from '../helpers'
 import { IS_SAFARI, IS_CHROME, IS_FIREFOX } from '../../utils/ua'
 import { DOMNode } from '../../utils/dom'
+import { hidePlaceholder } from '../place-holder'
 
 const EDITOR_TO_TEXT: WeakMap<IDomEditor, string> = new WeakMap()
 const EDITOR_TO_START_CONTAINER: WeakMap<IDomEditor, DOMNode> = new WeakMap()
@@ -38,6 +39,9 @@ export function handleCompositionStart(e: Event, textarea: TextArea, editor: IDo
     EDITOR_TO_START_CONTAINER.set(editor, startContainer)
   }
   textarea.isComposing = true
+
+  // 隐藏 placeholder
+  hidePlaceholder(textarea, editor)
 }
 
 /**

diff --git a/packages/core/src/text-area/place-holder.ts b/packages/core/src/text-area/place-holder.ts
@@ -4,7 +4,6 @@
  */
 
 import { IDomEditor } from '../editor/interface'
-import { DomEditor } from '../editor/dom-editor'
 import TextArea from './TextArea'
 import $ from '../utils/dom'
 
@@ -13,7 +12,7 @@ import $ from '../utils/dom'
  * @param textarea textarea
  * @param editor editor
  */
-function handlePlaceholder(textarea: TextArea, editor: IDomEditor) {
+export function handlePlaceholder(textarea: TextArea, editor: IDomEditor) {
   const { placeholder } = editor.getConfig()
   if (!placeholder) return
 
@@ -39,4 +38,20 @@ function handlePlaceholder(textarea: TextArea, editor: IDomEditor) {
   }
 }
 
-export default handlePlaceholder
+/**
+ * 隐藏 placeholder （如拼音输入 compositionStart 时，要先隐藏，等 compositionEnd 时再判断是否显示）
+ * @param textarea textarea
+ * @param editor editor
+ */
+export function hidePlaceholder(textarea: TextArea, editor: IDomEditor) {
+  const { placeholder } = editor.getConfig()
+  if (!placeholder) return
+
+  const isEmpty = editor.isEmpty()
+  if (!isEmpty) return
+
+  if (textarea.showPlaceholder) {
+    textarea.$placeholder?.hide()
+    textarea.showPlaceholder = false // 记录
+  }
+}
diff --git a/packages/editor/examples/default-mode.html b/packages/editor/examples/default-mode.html
@@ -55,6 +55,8 @@
       console.log('on created', editor)
     }
     editorConfig.onChange = (editor) => {
+      // console.log(editor.children)
+
       const html = editor.getHtml()
       document.getElementById('editor-content-view').innerHTML = html