Fix issue editor-js#47 The text alignment is now visible in the editor

sanchesfree · Apr 11, 2023 · 0552be1 · 0552be1
1 parent 5fc5030
commit 0552be1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/index.css b/src/index.css
@@ -11,6 +11,22 @@
   margin-bottom: 10px;
 }
 
+.cdx-quote__text--left {
+  text-align: left;
+}
+
+.cdx-quote__text--center {
+  text-align: center;
+}
+
+.cdx-quote__text--right {
+  text-align: right;
+}
+
+.cdx-quote__text--justify {
+  text-align: justify;
+}
+
 .cdx-quote__caption {}
 
 .cdx-quote [contentEditable=true][data-placeholder]::before{

diff --git a/src/index.js b/src/index.js
@@ -143,13 +143,14 @@ export default class Quote {
   /**
    * Tool`s styles
    *
-   * @returns {{baseClass: string, wrapper: string, quote: string, input: string, caption: string}}
+   * @returns {{baseClass: string, wrapper: string, text: string, textTune: string, input: string, caption: string}}
    */
   get CSS() {
     return {
       baseClass: this.api.styles.block,
       wrapper: 'cdx-quote',
       text: 'cdx-quote__text',
+      textTune: 'cdx-quote__text--' + this.data.alignment,
       input: this.api.styles.input,
       caption: 'cdx-quote__caption',
     };
@@ -216,7 +217,7 @@ export default class Quote {
    */
   render() {
     const container = this._make('blockquote', [this.CSS.baseClass, this.CSS.wrapper]);
-    const quote = this._make('div', [this.CSS.input, this.CSS.text], {
+    const quote = this._make('div', [this.CSS.input, this.CSS.text, this.CSS.textTune], {
       contentEditable: !this.readOnly,
       innerHTML: this.data.text,
     });
@@ -292,8 +293,13 @@ export default class Quote {
    * @private
    */
   _toggleTune(tune) {
+    const text = this.blockAPI.holder.querySelector(`.${this.CSS.text}`);
+    text.classList.remove(this.CSS.textTune)
+
     this.data.alignment = tune;
 
+    text.classList.add(this.CSS.textTune)
+
     // Tell Editor to know that block was changed
     this.blockAPI.dispatchChange()
   }