Table centering is producing align="center" instead of style="text-align: center"

[ptmkenny]

Version(s) affected

2.3.8

Description

According to the documentation on the Table extension:

---|:----------:|----------:
td | td         | td

should produce:

<table>
<thead>
<tr>
<th style="text-align: left">th</th>
<th style="text-align: center">th(center)</th>
<th style="text-align: right">th(right)/th>
</tr>
</thead>

However, with version 2.3.8, I see the following:

<table>
<thead>
<tr><th>th</th>
<th align="center">th(center)</th>
<th align="right">th(right)</th>
</tr>
</thead>

How to reproduce

Input:

---|:----------:|----------:
td | td         | td

Config:

Running this on Drupal 10 without using the Drupal module (I am calling commonmark directly in my code).

/**
 * Converts CommonMark-compatible Markdown to HTML.
 */
final class MyModuleCommonMarkConverter extends MarkdownConverter {

  /**
   * Create a new Markdown converter pre-configured for CommonMark.
   */
  public function __construct() {
    $environment = new Environment($this->getConfig());
    $environment->addExtension(new CommonMarkCoreExtension());
    $environment->addExtension(new DefaultAttributesExtension());
    $environment->addExtension(new ExternalLinkExtension());
    $environment->addExtension(new HeadingPermalinkExtension());
    $environment->addExtension(new StrikethroughExtension());
    $environment->addExtension(new TableExtension());

    parent::__construct($environment);
  }

  /**
   * Get the environment.
   */
  public function getEnvironment(): Environment {
    \assert($this->environment instanceof Environment);

    return $this->environment;
  }

  /**
   * Generate config for CommonMark.
   *
   * This must be a function because using variables in defaultAttributes
   * will error: 'Expression is not allowed as field default value'.
   *
   * https://commonmark.thephpleague.com/2.3/configuration/.
   *
   * @return array
   *   The CommonMark config.
   */
  private function getConfig(): array {
    return [
      'default_attributes' => [
        Heading::class => [
          'class' => static function (Heading $node) {
            if ($node->getLevel() === 1) {
              return 'title';
            }
            else {
              return NULL;
            }
          },
        ],
        /* Link::class => [
             'class' => 'btn btn-link',
             'target' => '_blank',
           ], */
      ],
      'renderer' => [
        'block_separator' => "\n",
        'inner_separator' => "\n",
        'soft_break' => "\n",
      ],
      'commonmark' => [
        'enable_em' => TRUE,
        'enable_strong' => TRUE,
        'use_asterisk' => TRUE,
        'use_underscore' => FALSE,
        'unordered_list_markers' => ['-', '*', '+'],
      ],
      // https://commonmark.thephpleague.com/2.3/extensions/external-links/
      'external_link' => [
        'internal_hosts' => 'www.example.com',
        'open_in_new_window' => TRUE,
        'html_class' => 'outsidelink',
        'nofollow' => '',
        'noopener' => 'external',
        'noreferrer' => 'external',
      ],
      // https://commonmark.thephpleague.com/2.3/extensions/heading-permalinks/
      'heading_permalink' => [
        'html_class' => 'heading-permalink',
        'id_prefix' => '',
        'fragment_prefix' => '',
        'insert' => 'before',
        'max_heading_level' => 6,
        'title' => 'パーマリンク',
        'symbol' => '',
        'aria_hidden' => FALSE,
      ],
      // https://commonmark.thephpleague.com/2.3/extensions/tables/
      'table' => [
        'wrap' => [
          'enabled' => true,
          'tag' => 'figure',
          'attributes' => ['class' => 'table-responsive']
        ]
      ],
      // Allow because only the admin has markdown access.
      'html_input' => 'allow',
      'allow_unsafe_links' => FALSE,
      'max_nesting_level' => PHP_INT_MAX,
      'slug_normalizer' => [
        'max_length' => 255,
      ],
    ];
  }

}

[colinodell]

Thanks for catching this! Looks like that example has been incorrect since we switched to align= in v1.3.0 (when we adopted the GFM spec - see #409). I'll get the docs fixed shortly.

[ptmkenny]

@colinodell Ok, thanks for confirming that the output is as expected!

I discovered this issue by running the W3C validator on my site, which produced the following error for the tables:

From line 339, column 25; to line 340, column 19 in resource file:/example.com/style-guide.html
Error: The "align" attribute on the "th" element is obsolete. Use CSS instead.

I understand that following the GFM spec means that the default behavior can't be changed, but do have any suggestions on how I might override the Tables extension to produce CSS instead of the align attribute for my site?

[colinodell]

You'd likely need to override TableCellRenderer somehow - either by decorating or replacing it.

Given that align is indeed obsolete, we could add a new configuration option making it easier to switch between the different options. I'll put together a PR in a few minutes with how that might look :)