wrap content is optional now

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -40,6 +40,7 @@ export interface ConfigColumn {
     media_height: number;
     isInline: boolean;
     content_alignment?: string;
+    wrap_content?: boolean;
     task_hide_completed?: boolean;
     formula_query?: string;
     persist_formula?: boolean;

src/components/cellTypes/FormulaCell.tsx

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

src/components/cellTypes/NumberCell.tsx

@@ -70,11 +70,11 @@ const NumberCell = (props: CellComponentProps) => {
       onChange={handleOnChange}
       onKeyDown={handleKeyDown}
       onBlur={handleOnBlur}
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
     />
   ) : (
     <span
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
     >

src/components/cellTypes/TextCell.tsx

@@ -73,7 +73,7 @@ const TextCell = (props: CellComponentProps) => {
       ref={containerCellRef}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
     />
   );
 };

src/components/modals/columnSettings/ColumnSections.ts

@@ -7,7 +7,8 @@ import { SelectedColumnOptionsHandler } from "components/modals/columnSettings/h
 import { HideCompletedTaskToggleHandler } from "components/modals/columnSettings/handlers/tasks/HideCompletedTaskToggleHandler";
 import { LinkAliasToggleHandler } from "components/modals/columnSettings/handlers/media/LinkAliasToggleHandler";
 import { FormulaInputHandler } from "components/modals/columnSettings/handlers/automations/FormulaInputHandler";
-import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/AlignmentSelectorHandler";
+import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler";
+import { ToggleWrapContentHandler } from "components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler";
 import { InputType } from "helpers/Constants";
 import { AbstractChain } from "patterns/AbstractFactoryChain";
 import { AbstractHandler } from "patterns/AbstractHandler";
@@ -31,6 +32,7 @@ class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse>
             case InputType.NUMBER:
             case InputType.FORMULA:
                 particularHandlers.push(new AlignmentSelectorHandler());
+                particularHandlers.push(new ToggleWrapContentHandler());
                 break;
             default:
             // do nothing

…gs/handlers/AlignmentSelectorHandler.tsx …lers/styles/AlignmentSelectorHandler.tsxsrc/components/modals/columnSettings/handlers/AlignmentSelectorHandler.tsx renamed to src/components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler.tsx src/components/modals/columnSettings/handlers/AlignmentSelectorHandler.tsx renamed to src/components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler.tsx

@@ -0,0 +1,28 @@
+import { add_toggle } from "settings/SettingsComponents";
+import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
+import { AbstractHandlerClass } from "patterns/AbstractHandler";
+export class ToggleWrapContentHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
+  settingTitle: string = "Wrap content";
+  handle(
+    columnHandlerResponse: ColumnSettingsHandlerResponse
+  ): ColumnSettingsHandlerResponse {
+    const { column, containerEl, columnSettingsManager } =
+      columnHandlerResponse;
+    const { view } = columnSettingsManager.modal;
+    const wrap_content_togle_promise = async (value: boolean): Promise<void> => {
+      // Persist value
+      await view.diskConfig.updateColumnConfig(column.key, {
+        wrap_content: value,
+      });
+      columnSettingsManager.modal.enableReset = true;
+    };
+    add_toggle(
+      containerEl,
+      this.settingTitle,
+      "Wrap content of the cells in the column",
+      column.config.wrap_content,
+      wrap_content_togle_promise
+    );
+    return this.goNext(columnHandlerResponse);
+  }
+}

src/components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler.ts

@@ -94,7 +94,10 @@ const SelectPortal = (popperProps: CellComponentProps) => {
           menuPortalTarget={activeDocument.body}
           menuPlacement="auto"
           menuShouldBlockScroll={true}
-          className={c("text-align-center")}
+          className={`react-select-container ${c(
+            "tags-container text-align-center"
+          )}`}
+          classNamePrefix="react-select"
           key={`${tableColumn.key}-select-open`}
         />
       </div>
@@ -108,7 +111,7 @@ const SelectPortal = (popperProps: CellComponentProps) => {
       ) : (
         /* Current value of the select */
         <div
-          className={`cell-padding d-flex ${c("text-align-center")}`}
+          className={`${c("text-align-center")}`}
           onClick={() => setShowSelect(true)}
           style={{ width: column.getSize() }}
         >

src/components/portals/SelectPortal.tsx

@@ -107,7 +107,10 @@ const TagsPortal = (tagsProps: CellComponentProps) => {
           onBlur={() => setShowSelectTags(false)}
           onChange={handleOnChange}
           menuPortalTarget={activeDocument.body}
-          className={c("tags-container text-align-center")}
+          className={`react-select-container ${c(
+            "tags-container text-align-center"
+          )}`}
+          classNamePrefix="react-select"
           menuPlacement="auto"
           menuShouldBlockScroll={true}
         />

src/components/portals/TagsPortal.tsx

@@ -75,6 +75,8 @@ export const COLUMN_ALIGNMENT_OPTIONS = Object.freeze({
   CENTER: 'text-align-center',
   RIGHT: 'text-align-right',
   JUSTIFY: 'text-align-justify',
+  NOWRAP: 'text-nowrap',
+  WRAP: 'text-wrap',
 });
 
 export const DEFAULT_COLUMN_CONFIG: ConfigColumn = Object.freeze({