feat: clear format (#69)

devlzl · Jan 16, 2024 · fcd43aa · fcd43aa
1 parent c89d473
commit fcd43aa
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/BlockHub/Block/Block.ts b/src/BlockHub/Block/Block.ts
@@ -92,12 +92,19 @@ export class Block {
     }
   }
 
+  clearFormatBlock() {
+    for (const controller of Object.values(this.controllerMap)) {
+      controller.clearFormat()
+    }
+  }
+
   getController(...params: any): RichTextController {
     // should be overridden by subclass
     return {
       isFocus: () => false,
       getCommonAttributes: () => ({}),
       format: (name: AttributeName, value: AttributeValue) => {},
+      clearFormat: () => {},
       delete: () => {},
       insert: (text: string) => {},
     }

diff --git a/src/RichText/RichText.ts b/src/RichText/RichText.ts
@@ -9,6 +9,7 @@ export interface RichTextController {
   isFocus(): boolean
   getCommonAttributes(): Attributes
   format(name: AttributeName, value: AttributeValue): void
+  clearFormat(): void
   delete(): void
   insert(text: string): void
 }
@@ -75,6 +76,28 @@ export class RichText {
         }
         this.events.formatChange.emit({ index, length })
       },
+      clearFormat: () => {
+        const selectedLength = this.getSelection().length
+        let { index, length } = this.getSelection()
+        if (selectedLength === 0) {
+          index = 0
+          length = this.textStore.length
+        }
+        this.textStore.format(index, length, {
+          bold: undefined,
+          italic: undefined,
+          underline: undefined,
+          strike: undefined,
+          color: undefined,
+          background: undefined,
+          fontFamily: undefined,
+          fontSize: undefined,
+        })
+        if (selectedLength > 0) {
+          this.setSelectionByInput({ index, length })
+        }
+        this.events.formatChange.emit({ index, length })
+      },
       delete: () => {
         // for clipboard cut
         handleInput('deleteContentBackward', this, { text: '', attributes: {} })

diff --git a/src/UserInterface/ToolBar/components/Home/FontStyle.vue b/src/UserInterface/ToolBar/components/Home/FontStyle.vue
@@ -40,6 +40,17 @@ const format = (name: AttributeName, value: AttributeValue) => {
   })
 }
 
+const clearFormat = () => {
+  selectionManager.selectedBlocks.forEach((block) => {
+    const controller = block.getController()
+    if (controller.isFocus()) {
+      controller.clearFormat()
+    } else {
+      block.clearFormatBlock()
+    }
+  })
+}
+
 const fontStyle = ref<Attributes>({
   bold: false,
   italic: false,
@@ -92,7 +103,7 @@ richTextObserver.on(async (newState) => {
       <button class="menu-btn">
         <AddText theme="outline" size="20" :strokeWidth="2" />
       </button> -->
-      <button :class="buttonStyle">
+      <button :class="buttonStyle" @click="clearFormat">
         <ClearFormat theme="two-tone" size="20" :fill="['#333', '#DE6C00']" :strokeWidth="2" />
       </button>
       <button
@@ -133,7 +144,7 @@ richTextObserver.on(async (newState) => {
       </button>
 
       <button :class="buttonStyle" @click="colorInputRef?.click()">
-        <Write theme="two-tone" size="20" :fill="[fontStyle.color as string, '#ffffff']" />
+        <write theme="two-tone" size="20" :fill="['#ff0000', '#ffffff']" />
         <input
           ref="colorInputRef"
           type="color"
@@ -143,7 +154,7 @@ richTextObserver.on(async (newState) => {
       </button>
 
       <button :class="buttonStyle" @click="backgroundInputRef?.click()">
-        <Platte theme="filled" size="20" :fill="fontStyle.background" :strokeWidth="2" />
+        <Platte theme="filled" size="20" fill="#f9da74" :strokeWidth="2" />
         <input
           ref="backgroundInputRef"
           type="color"