2 files changed, 34 insertions, 1 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index f1ae1151f..84859b94d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -14,6 +14,33 @@
     }
 }
 
+.formattedTextBox-inner {
+    &.h-center * {
+        display: flex;
+        justify-content: center;
+    }
+
+    &.h-left * {
+        display: flex;
+        justify-content: flex-start; 
+    }
+
+    &.h-right * {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &.template * {
+        ::-webkit-scrollbar-track {
+            background: none; 
+        }
+    }
+
+    &.bold * {
+        font-weight: bold;
+    }
+}
+
 .ProseMirror:focus {
     outline: none !important;
 }
@@ -52,6 +79,7 @@ audiotag:hover {
     transform-origin: left top;
     top: 0;
     left: 0;
+    
 }
 
 .formattedTextBox-cont {
@@ -1046,3 +1074,4 @@ footnote::before {
         }
     }
 }
+
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 448dd5646..18b8c9d34 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -64,6 +64,7 @@ import { removeMarkWithAttrs } from './prosemirrorPatches';
 import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
+import { Property } from 'csstype';
 // import * as applyDevTools from 'prosemirror-dev-tools';
 
 export interface FormattedTextBoxProps extends FieldViewProps {
@@ -2137,7 +2138,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         onScroll={this.onScroll}
                         onDrop={this.ondrop}>
                         <div
-                            className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''}`}
+                            className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''} ${this.layoutDoc.hCentering}`}
                             ref={this.createDropTarget}
                             style={{
                                 padding: StrCast(this.layoutDoc._textBoxPadding),
@@ -2145,6 +2146,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                                 paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`),
                                 paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
+                                color: StrCast(this.layoutDoc.text_fontColor),
+                                fontWeight: `${this.layoutDoc.contentBold ? 'bold' : ''}`,
+                                textTransform: `${this.layoutDoc.textTransform}` as Property.TextTransform,
                             }}
                         />
                     </div>