refactor(demo): refactor text mark component

worktile · Dec 5, 2021 · 4cd7b40 · 4cd7b40
1 parent eba024b
commit 4cd7b40
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git 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
@@ -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 {