[GH-ISSUE #194] Column inside section ignores text-align #75

New issue

Open

opened 2026-03-01 14:39:53 +03:00 by kerem · 2 comments

kerem commented

2026-03-01 14:39:53 +03:00

Owner

Originally created by @bernaferrari on GitHub (Apr 29, 2025).
Original GitHub issue: https://github.com/arikchakma/maily.to/issues/194

when a column is inside a section, text-align from section doesn't seem to be apply to it. I asked gemini 2.5 pro to fix, and seems to work. Not sure it would work on column inside column or whatever, but basic usage seems to work well.

I fixed by

    const [newNode, totalWidth] = this.adjustColumnsContent(node, options);

in columns, then

  private adjustColumnsContent(
    node: JSONContent,
    options?: NodeOptions
  ): [JSONContent, number] {
    const { content = [] } = node;
    const parentAlign = options?.parent?.attrs?.align || DEFAULT_SECTION_ALIGN; // Get align from parent (section)

...

          return {
            ...c,
            attrs: {
              ...c.attrs,
              width: isAutoWidthColumn ? measuredWidth : c.attrs?.width,
              align: parentAlign,

then

  private column(node: JSONContent, options?: NodeOptions): JSX.Element {
    const { attrs } = node;
    const {
      width,
      paddingLeft = 0,
      paddingRight = 0,
      align: textAlign,
    } = attrs || {};
...

        className="tab-col-full"
      >
        <Section
          style={{
            margin: 0,
            paddingLeft,
            paddingRight,
            textAlign: textAlign,
          }}

Editor:

Export:

Originally created by @bernaferrari on GitHub (Apr 29, 2025). Original GitHub issue: https://github.com/arikchakma/maily.to/issues/194 when a column is inside a section, text-align from section doesn't seem to be apply to it. I asked gemini 2.5 pro to fix, and seems to work. Not sure it would work on column inside column or whatever, but basic usage seems to work well. I fixed by ```ts const [newNode, totalWidth] = this.adjustColumnsContent(node, options); ``` in columns, then ```ts private adjustColumnsContent( node: JSONContent, options?: NodeOptions ): [JSONContent, number] { const { content = [] } = node; const parentAlign = options?.parent?.attrs?.align || DEFAULT_SECTION_ALIGN; // Get align from parent (section) ... return { ...c, attrs: { ...c.attrs, width: isAutoWidthColumn ? measuredWidth : c.attrs?.width, align: parentAlign, ``` then ```ts private column(node: JSONContent, options?: NodeOptions): JSX.Element { const { attrs } = node; const { width, paddingLeft = 0, paddingRight = 0, align: textAlign, } = attrs || {}; ... className="tab-col-full" > <Section style={{ margin: 0, paddingLeft, paddingRight, textAlign: textAlign, }} ``` Editor: ![Image](https://github.com/user-attachments/assets/e5abe812-0596-4562-8f64-e438f053e296) Export: <img width="666" alt="Image" src="https://github.com/user-attachments/assets/09fd864c-34ac-4c3d-8ae6-1a3a20b16f00" />

kerem commented

2026-03-01 14:39:54 +03:00

Author

Owner

@arikchakma commented on GitHub (Apr 29, 2025):

I don't get the solution, can you please elaborate a bit also the problem?

@arikchakma commented on GitHub (Apr 29, 2025): I don't get the solution, can you please elaborate a bit also the problem?

kerem commented

2026-03-01 14:39:54 +03:00

Author

Owner

@bernaferrari commented on GitHub (Apr 29, 2025):

Add a Section
Set the section text-align to right
Add a column inside the section
Type something
In the editor the text will be right aligned, in the export it will be left aligned

@bernaferrari commented on GitHub (Apr 29, 2025): 1. Add a Section 2. Set the section text-align to right 3. Add a column inside the section 4. Type something In the editor the text will be right aligned, in the export it will be left aligned