From 4cd7b4086d5a92c1f328a7ef4b8eecc610df0e95 Mon Sep 17 00:00:00 2001
From: pubuzhixing8 <pubuzhixing@gmail.com>
Date: Sun, 5 Dec 2021 11:03:23 +0800
Subject: [PATCH] refactor(demo): refactor text mark component

---
 demo/app/components/text/text.component.ts | 31 +++++++++-------------
 demo/editor-typo.scss                      | 30 +++++++++++++++++----
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/demo/app/components/text/text.component.ts b/demo/app/components/text/text.component.ts
index 11840440..b6fa8991 100644
--- a/demo/app/components/text/text.component.ts
+++ b/demo/app/components/text/text.component.ts
@@ -17,30 +17,23 @@ export enum MarkTypes {
     }
 })
 export class DemoMarkTextComponent extends BaseTextComponent {
+    attributes = [];
+
     constructor(public elementRef: ElementRef, public renderer2: Renderer2, cdr: ChangeDetectorRef) {
         super(elementRef, cdr);
     }
     
     applyTextMark() {
-        if (this.text[MarkTypes.bold]) {
-            this.renderer2.setStyle(this.elementRef.nativeElement, 'font-weight', 'bold');
-        } else {
-            this.renderer2.removeStyle(this.elementRef.nativeElement, 'font-weight');
-        }
-        if (this.text[MarkTypes.italic]) {
-            this.renderer2.setStyle(this.elementRef.nativeElement, 'font-style', 'italic');
-        } else {
-            this.renderer2.removeStyle(this.elementRef.nativeElement, 'font-style');
-        }
-        if (this.text[MarkTypes.code]) {
-            this.renderer2.addClass(this.elementRef.nativeElement, 'code-line');
-        } else {
-            this.renderer2.removeClass(this.elementRef.nativeElement, 'code-line');
-        }
-        if (this.text[MarkTypes.underline]) {
-            this.renderer2.setStyle(this.elementRef.nativeElement, 'text-decoration', 'underline');
-        } else {
-            this.renderer2.removeStyle(this.elementRef.nativeElement, 'text-decoration');
+        this.attributes.forEach(attr => {
+            this.renderer2.removeAttribute(this.elementRef.nativeElement, attr);
+        });
+        this.attributes = [];
+        for (const key in this.text) {
+            if (Object.prototype.hasOwnProperty.call(this.text, key) && !!this.text[key]) {
+                const attr = `slate-${key}`;
+                this.renderer2.setAttribute(this.elementRef.nativeElement, attr, 'true');
+                this.attributes.push(attr);
+            }
         }
     }
 
diff --git a/demo/editor-typo.scss b/demo/editor-typo.scss
index 2a2a05b1..a918727c 100644
--- a/demo/editor-typo.scss
+++ b/demo/editor-typo.scss
@@ -1,10 +1,30 @@
 .slate-editable-container {
-    .code-line {
-        background-color: rgba($color: #000000, $alpha: 0.06);
-        border-radius: 2px;
+    [slate-underlined][slate-strike] {
+        text-decoration: underline line-through;
+    }
+
+    [slate-strike] {
+        text-decoration: line-through;
+    }
+
+    [slate-underlined] {
+        text-decoration: underline;
+    }
+
+    [slate-italic] {
+        font-style: italic;
+    }
+
+    [slate-bold] {
+        font-weight: bold;
+    }
+
+    [slate-code-line] {
+        margin: 0 4px;
+        padding: 2px 3px;
         border: 1px solid rgba($color: #000000, $alpha: 0.08);
-        padding: 0 2px;
-        margin: 0 1px;
+        border-radius: 2px;
+        background-color: rgba($color: #000000, $alpha: 0.06);
     }
 
     blockquote {