first version text align selector working

Author: RafaelGB

src/components/cellTypes/FormulaCell.tsx

@@ -46,7 +46,7 @@ const FormulaCell = (mdProps: CellComponentProps) => {
   return (
     <span
       ref={formulaRef}
-      className={`${c("md_cell")}`}
+      className={`${c("md_cell " + tableColumn.config.content_alignment)}`}
       key={`formula_${cell.id}`}
     />
   );

src/components/cellTypes/NumberCell.tsx

@@ -1,5 +1,6 @@
 import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
+import { c } from "helpers/StylesHelper";
 import React, {
   ChangeEventHandler,
   KeyboardEventHandler,
@@ -15,7 +16,7 @@ const NumberCell = (props: CellComponentProps) => {
   const dataActions = tableState.data((state) => state.actions);
   const numberRow = tableState.data((state) => state.rows[row.index]);
   const configInfo = tableState.configState((state) => state.info);
-
+  const tableColumn = column.columnDef as TableColumn;
   const [editableValue, setEditableValue] = useState(null);
   const [dirtyCell, setDirtyCell] = useState(false);
 
@@ -34,7 +35,7 @@ const NumberCell = (props: CellComponentProps) => {
   function persistChange(changedValue: number) {
     dataActions.updateCell(
       row.index,
-      column.columnDef as TableColumn,
+      tableColumn,
       changedValue,
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings()
@@ -60,11 +61,11 @@ const NumberCell = (props: CellComponentProps) => {
       onChange={handleOnChange}
       onKeyDown={handleKeyDown}
       onBlur={handleOnBlur}
-      className="text-align-right"
+      className={c(tableColumn.config.content_alignment)}
     />
   ) : (
     <span
-      className="text-align-right"
+      className={c(tableColumn.config.content_alignment)}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
     >

src/components/cellTypes/TextCell.tsx

@@ -4,12 +4,13 @@ import React, { MouseEventHandler, useEffect, useRef } from "react";
 import { useState } from "react";
 import EditorCell from "components/cellTypes/EditorCell";
 import { TableColumn } from "cdm/FolderModel";
+import { c } from "helpers/StylesHelper";
 
 const TextCell = (props: CellComponentProps) => {
   const { defaultCell } = props;
   const { cell, column, table, row } = defaultCell;
   const { tableState } = table.options.meta;
-
+  const tableColumn = column.columnDef as TableColumn;
   const textRow = tableState.data((state) => state.rows[row.index]);
 
   const configInfo = table.options.meta.tableState.configState(
@@ -52,7 +53,7 @@ const TextCell = (props: CellComponentProps) => {
     if (changedValue !== undefined && changedValue !== textCell) {
       dataActions.updateCell(
         row.index,
-        column.columnDef as TableColumn,
+        tableColumn,
         changedValue.trim(),
         columnsInfo.getAllColumns(),
         configInfo.getLocalSettings()
@@ -72,6 +73,7 @@ const TextCell = (props: CellComponentProps) => {
       ref={containerCellRef}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
+      className={c(tableColumn.config.content_alignment)}
     />
   );
 };

src/components/modals/columnSettings/ColumnSections.ts

@@ -12,6 +12,34 @@ import { InputType } from "helpers/Constants";
 import { AbstractChain } from "patterns/AbstractFactoryChain";
 import { AbstractHandler } from "patterns/AbstractHandler";
 
+class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse> {
+    private input: string = InputType.TEXT;
+    protected runBefore(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
+        this.input = columnHandlerResponse.column.input;
+        return columnHandlerResponse;
+    }
+    protected customHandle(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
+        const style_section = columnHandlerResponse.containerEl.createDiv("column-section-container-style");
+        add_setting_header(style_section, "Style", "h3");
+        columnHandlerResponse.containerEl = style_section;
+        return columnHandlerResponse;
+    }
+    protected getHandlers(): AbstractHandler<ColumnSettingsHandlerResponse>[] {
+        const particularHandlers: AbstractHandler<ColumnSettingsHandlerResponse>[] = [];
+        switch (this.input) {
+            case InputType.TEXT:
+            case InputType.NUMBER:
+            case InputType.FORMULA:
+                particularHandlers.push(new AlignmentSelectorHandler());
+                break;
+            default:
+            // do nothing
+        }
+        return particularHandlers;
+    }
+}
+export const style_settings_section = new StyleSetttingsSection();
+
 class BehaviorSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse> {
     private input: string = InputType.TEXT;
     protected runBefore(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
@@ -26,7 +54,6 @@ class BehaviorSetttingsSection extends AbstractChain<ColumnSettingsHandlerRespon
     }
     protected getHandlers(): AbstractHandler<ColumnSettingsHandlerResponse>[] {
         const particularHandlers: AbstractHandler<ColumnSettingsHandlerResponse>[] = [];
-        particularHandlers.push(new AlignmentSelectorHandler());
         switch (this.input) {
             case InputType.TASK:
                 // do nothing

src/components/modals/columnSettings/ColumnSettingsModal.ts

@@ -4,7 +4,7 @@ import { Modal } from "obsidian";
 import { add_setting_header } from "settings/SettingsComponents";
 import { StyleClasses } from "helpers/Constants";
 import { ColumnSettingsHandlerResponse, ColumnSettingsModalProps } from "cdm/ModalsModel";
-import { particular_settings_section, behavior_settings_section } from "components/modals/columnSettings/ColumnSections";
+import { particular_settings_section, behavior_settings_section, style_settings_section } from "components/modals/columnSettings/ColumnSections";
 import { HeaderMenuProps } from "cdm/HeaderModel";
 import { ColumnsState, ConfigState, DataState } from "cdm/TableStateInterface";
 
@@ -70,6 +70,8 @@ export class ColumnSettingsManager {
     constructBody(response: ColumnSettingsHandlerResponse) {
         /** behavior section */
         behavior_settings_section.run(response);
+        /** styles section */
+        style_settings_section.run(response);
         /** Particular settings section */
         particular_settings_section.run(response);
     }

src/helpers/Constants.ts

@@ -75,9 +75,9 @@ export const MetadataLabels = Object.freeze({
  *                          COLUMN CONFIGURATIONS                             *
  ******************************************************************************/
 export const COLUMN_ALIGNMENT_OPTIONS = Object.freeze({
-  LEFT: 'left',
-  CENTER: 'center',
-  RIGHT: 'right',
+  LEFT: 'text-align-left',
+  CENTER: 'text-align-center',
+  RIGHT: 'text-align-right',
 });
 
 export const DEFAULT_COLUMN_CONFIG: ConfigColumn = Object.freeze({

src/helpers/StylesHelper.ts

@@ -1,4 +1,4 @@
-import { DatabaseCore, MetadataLabels } from "helpers/Constants";
+import { COLUMN_ALIGNMENT_OPTIONS, DatabaseCore, MetadataLabels } from "helpers/Constants";
 
 /**
  * Wrap the classname of css elements
@@ -39,4 +39,4 @@ export function getLabelHeader(input: string) {
         }
     });
     return labelCandidate === undefined ? input : labelCandidate[1];
-}
+}

styles.css

@@ -489,12 +489,18 @@ div.database-plugin__checkbox {
   gap: 0.3rem;
 }
 
-span.text-align-right {
+.database-plugin__text-align-right {
   display: flex;
-  align-items: center;
+  align-items: right;
   justify-content: flex-end;
 }
 
+.database-plugin__text-align-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .database-plugin__text-align-left {
   display: flex;
   text-align: left;