Add table footer support

Created on 18 October 2023, over 1 year ago

Problem/Motivation

tfoot element is lost during the conversion

Steps to reproduce

  1. Go to
  2. Open the source editing.
  3. Paste the following markup:
  • Switch back to the editing mode.
  • Switch back to the source editing mode.

Expected result

tfoot is preserved.

❌ Actual result

tfoot is lost and merged to

Feature request
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 3 hours ago

Created by

🇮🇳India sahil432

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sahil432
  • Status changed to Postponed over 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Thanks for this issue! This is definitely blocked on https://github.com/ckeditor/ckeditor5/issues/12952.

  • 🇨🇦Canada smulvih2 Canada 🍁

    +1 I am running into this issue as well. In my case, my table is driving a JS chart, and adding the contents of tfoot into tbody is causing the JS to fail.

  • 🇨🇦Canada joseph.olstad

    Needing a fix for this.

  • 🇨🇦Canada joseph.olstad

    I've created a new module called please_replace_ckeditor5_with_tinymce

    added a text filter plugin in src/Plugin/Filter/TableTfootFixFilter.php

    
    namespace Drupal\please_replace_ckeditor5_with_tinymce\Plugin\Filter;
    
    use Drupal\filter\FilterProcessResult;
    use Drupal\filter\Plugin\FilterBase;
    
    /**
     * Wraps orphan <tr> tags after </tbody> in a <tfoot> section.
     *
     * @Filter(
     *   id = "table_tfoot_fix_filter",
     *   title = @Translation("Fix orphan 'tr' after 'tbody' by wrapping in 'tfoot'"),
     *   description = @Translation("Wraps 'tr' elements that appear after 'tbody' with a 'tfoot' block."),
     *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_IRREVERSIBLE,
     *   weight = 101,
     *   provider = "please_replace_ckeditor5_with_tinymce",
     *   settings = {}
     * )
     */
    class TableTfootFixFilter extends FilterBase {
    
      /**
       * {@inheritdoc}
       */
      public function process($text, $langcode) {
    
        // Match closing </tbody> followed by one or more <tr> elements not already wrapped.
        $pattern = '#</tbody>\s*((?:<tr\b.*?</tr>\s*)+)(?!\s*</tfoot>)#is';
    
        $text = preg_replace_callback($pattern, function ($matches) {
          return '</tbody><tfoot>' . $matches[1] . '</tfoot>';
        }, $text);
    
        // Process each <table> individually.
        return new FilterProcessResult(
          preg_replace_callback('#<table\b[^>]*>.*?</table>#is', function ($table_match) {
            $table = $table_match[0];
    
            // Match all <tbody> blocks inside the table.
            preg_match_all('#<tbody\b[^>]*>.*?</tbody>#is', $table, $matches);
    
            if (count($matches[0]) > 1) {
              $last = array_pop($matches[0]);
    
              // Replace last <tbody> with <tfoot>.
              $last_tfoot = preg_replace([
                '#^<tbody([^>]*)>#i',
                '#</tbody>$#i'
              ], [
                '<tfoot$1>',
                '</tfoot>'
              ], $last);
    
              // Replace the last occurrence in the table with <tfoot>.
              $pos = strrpos($table, $last);
              if ($pos !== false) {
                $table = substr_replace($table, $last_tfoot, $pos, strlen($last));
              }
            }
    
            return $table;
          }, $text)
        );
      }
    
    }
    
    

    Enable this filter on all text formats using ckeditor5.

    We also have a other text filter plugins in the please_replace_ckeditor5_with_tinymce module called VideoCleanupFilter.php and SpanLinkFixFilter.php . Perhaps we will have to turn the please_replace_ckeditor5_with_tinymce module into a full contrib project so that others can get our text filter plugins that put a bandaid on content that would otherwise be broken by ckeditor5.

  • 🇨🇦Canada joseph.olstad

    Please click the thumbs up on this pull request that fixes the issue at the root which is in ckeditor it'self.

    https://github.com/ckeditor/ckeditor5/pull/14276

Production build 0.71.5 2024