innov
/
am-editor-001
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: placeholder

This commit is contained in:
yanmao 2021-12-20 15:58:58 +08:00
parent 0b9e0de79f
commit 7f339a1638
2 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/engine/src/engine/container.ts
View File

@ -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

8
packages/engine/src/engine/index.css
View File

@ -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;