Initial commit

ckeditor5_table_fix.ckeditor5.yml

+ckeditor5_table_fix_plugin:
+  ckeditor5:
+    plugins:
+      - htmlSupport.GeneralHtmlSupport
+      - ckeditor5_table_fix.CKEditor5TableFixPlugin
+    config:
+      htmlSupport:
+        allow:
+          - name: table
+            classes: true
+            attributes: true
+            styles: true
+          - name: thead
+            classes: true
+            attributes: true
+          - name: tbody
+            classes: true
+            attributes: true
+          - name: tfoot
+            classes: true
+            attributes: true
+          - name: tr
+            classes: true
+            attributes: true
+          - name: td
+            classes: true
+            attributes: true
+          - name: th
+            classes: true
+            attributes: true
+  drupal:
+    label: 'CKEditor5: Preserve table markup'
+    library: ckeditor5_table_fix/htmlsupport
+    admin_library: ckeditor5_table_fix/htmlsupport
+    elements:
+      - <table class style>
+      - <thead class>
+      - <tbody class>
+      - <tfoot class>
+      - <tr class>
+      - <td class>
+      - <td colspan>
+      - <th>
+      - <th scope>
+      - <th colspan>
+      - <th rowspan>
+      - <th headers>
+      - <th id>
+      - <th class>
+      - <th style>
+    toolbar_items:
+      cke5_table_fix_dummy:
+        label: Table Fix Dummy Plugin
+        icon: cke5_table_fix_dummy
\ No newline at end of file

ckeditor5_table_fix.info.yml

+name: 'CKEditor5 Table Fix'
+type: module
+description: 'Adds support for tables in CKEditor5, including <tfoot> and other elements.'
+core_version_requirement: ^10 || ^11
+package: Custom
+dependencies:
+  - ckeditor5

ckeditor5_table_fix.libraries.yml

+htmlsupport:
+  version: 1.x
+  js:
+    js/table-fix-plugin.js: {}
+  css:
+    theme:
+      css/cke5.admin.css: { preprocess: true, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+ckeditor5:
+  css:
+    theme:
+      css/cke5.css: { preprocess: true, minified: false }

ckeditor5_table_fix.module

+<?php
+
+/**
+ * @file
+ * Contains ckeditor5_table_fix.module.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements hook_form_alter().
+ */
+function ckeditor5_table_fix_form_alter(&$form, FormStateInterface $form_state, $form_id) {
+  $moduleHandler = \Drupal::service('module_handler');
+
+  // Add ckeditor5 library to forms that use ckeditor5.
+  if ($moduleHandler->moduleExists('ckeditor5')) {
+    foreach ($form as $value) {
+      if (!is_object($value)) {
+        if (!empty($value['widget'][0]['#type']) && $value['widget'][0]['#type'] == 'text_format') {
+          $form['#attached']['library'][] = 'ckeditor5_table_fix/ckeditor5';
+          break;
+        }
+      }
+    }
+  }
+}

css/cke5.admin.css

+/* Toolbar icon */
+.ckeditor5-toolbar-button-cke5_table_fix_dummy {
+	background-image: url(../icons/table-fix.svg);
+}

css/cke5.css

+.ck-content {
+	tfoot {
+		font-weight: normal;
+	}
+}

icons/table-fix.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <!-- Table outline -->
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <!-- Horizontal lines -->
+  <line x1="3" y1="9" x2="21" y2="9"></line>
+  <line x1="3" y1="15" x2="21" y2="15"></line>
+  <!-- Vertical lines -->
+  <line x1="9" y1="3" x2="9" y2="21"></line>
+  <line x1="15" y1="3" x2="15" y2="21"></line>
+  <!-- Fix wrench icon (simple cross) -->
+  <line x1="7" y1="7" x2="17" y2="17" stroke="red"></line>
+  <line x1="17" y1="7" x2="7" y2="17" stroke="red"></line>
+</svg>

js/table-fix-plugin.js

+(function () {
+  // Get CKEditor Plugin base class from Drupal’s global CKEditor5 loader
+  const Plugin = window.CKEditor5.core.Plugin;
+  const elements = ['table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th'];
+
+  class CKEditor5TableFixPlugin extends Plugin {
+    static get pluginName() {
+      return 'ckeditor5_table_fix_plugin';
+    }
+
+    init() {
+      const editor = this.editor;
+      if (!editor) {
+        console.error('Editor is undefined in init()');
+        return;
+      }
+
+      // Register all table-related elements
+      editor.model.schema.register('table', {
+        allowIn: '$root',
+        allowContentOf: '$block',
+        isBlock: true,
+      });
+
+      for (const tag of ['thead', 'tbody', 'tfoot']) {
+        editor.model.schema.register(tag, {
+          allowIn: 'table',
+          isLimit: true,
+        });
+      }
+
+      editor.model.schema.register('tr', {
+        allowIn: ['thead', 'tbody', 'tfoot'],
+        isLimit: true,
+        allowAttributes: ['scope', 'colspan', 'rowspan', 'headers', 'id', 'class', 'style'],
+      });
+
+      for (const cell of ['td', 'th']) {
+        editor.model.schema.register(cell, {
+          allowIn: 'tr',
+          allowContentOf: '$block',
+          allowChildren: '$block',
+          allowWhere: '$block',
+          isLimit: true,
+          allowAttributes: ['scope', 'colspan', 'rowspan', 'headers', 'id', 'class', 'style'],
+        });
+      }
+
+      // Simple view-model converters
+      elements.forEach((tag) => {
+        editor.conversion.elementToElement({ model: tag, view: tag });
+      });
+
+      ['th', 'td', 'tr'].forEach(tag => {
+        ['scope', 'colspan', 'rowspan', 'headers', 'id', 'class', 'style'].forEach(attr => {
+          editor.conversion.for('upcast').attributeToAttribute({
+            view: { name: tag, key: attr },
+            model: attr
+          });
+
+          editor.conversion.for('downcast').attributeToAttribute({
+            model: attr,
+            view: attr
+          });
+        });
+      });
+
+      // Deal with faux-button.
+      editor.ui.componentFactory.add('cke5_table_fix_dummy', () => null);
+
+    }
+  }
+
+  // Expose plugin for Drupal CKEditor 5 loader
+  window.CKEditor5 = window.CKEditor5 || {};
+  window.CKEditor5.ckeditor5_table_fix = {
+    CKEditor5TableFixPlugin: CKEditor5TableFixPlugin
+  };
+})();