From 7f339a1638a7608b18aad023838f8adafdcac275 Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Mon, 20 Dec 2021 15:58:58 +0800
Subject: [PATCH] feat: placeholder

---
 packages/engine/src/engine/container.ts | 19 +++----------------
 packages/engine/src/engine/index.css    |  8 ++++++++
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/engine/src/engine/container.ts b/packages/engine/src/engine/container.ts
index 92201f0c..c816fb8e 100644
--- a/packages/engine/src/engine/container.ts
+++ b/packages/engine/src/engine/container.ts
@@ -15,7 +15,6 @@ class Container {
 	private options: Options;
 	private node: NodeInterface;
 	private _focused: boolean = false;
-	#styleElement?: Element;
 
 	constructor(selector: Selector, options: Options) {
 		this.node = $(selector);
@@ -133,29 +132,18 @@ class Container {
 	showPlaceholder() {
 		const { placeholder } = this.options;
 		if (placeholder) {
-			if (this.#styleElement && this.#styleElement.parentNode)
-				document.body.removeChild(this.#styleElement);
-			this.#styleElement = document.createElement('style');
 			//const left = this.node.css('padding-left');
 			//const top = this.node.css('padding-top');
-			const styleText = document.createTextNode(`.am-engine:before {
-                content: attr(data-placeholder);
-                pointer-events: none;
-                position: absolute;
-                color: #bbbfc4;
-                height: 0;
-            }`);
-			this.#styleElement.appendChild(styleText);
-			document.body.appendChild(this.#styleElement);
 			this.node.attributes({
 				'data-placeholder': placeholder,
 			});
-		} else if (this.#styleElement && this.#styleElement.parentNode)
-			document.body.removeChild(this.#styleElement);
+			this.node.addClass('am-engine-placeholder');
+		}
 	}
 
 	hidePlaceholder() {
 		this.node.removeAttributes('data-placeholder');
+		this.node.removeClass('am-engine-placeholder');
 	}
 
 	destroy() {
@@ -169,7 +157,6 @@ class Container {
 		this.node.removeAttributes('data-gramm');
 		this.node.removeAttributes('tabindex');
 		this.node.removeAttributes('data-placeholder');
-		if (this.#styleElement) document.body.removeChild(this.#styleElement);
 		if (this.options.className) {
 			(Array.isArray(className)
 				? className
diff --git a/packages/engine/src/engine/index.css b/packages/engine/src/engine/index.css
index f50eed97..dd397e18 100644
--- a/packages/engine/src/engine/index.css
+++ b/packages/engine/src/engine/index.css
@@ -598,6 +598,14 @@
     background-color: #FFFFFF;
 }
 
+.am-engine.am-engine-placeholder:before {
+  content: attr(data-placeholder);
+  pointer-events: none;
+  position: absolute;
+  color: #bbbfc4;
+  height: 0;
+}
+
 .am-engine ::selection {
     background: rgba(180, 213, 254, 0.5) !important;
     color: inherit!important;