Add a Rich Text Toolbar field setting with underline, strikethrough, subscript, superscript and inline code options. (#84)

Author: engram-design

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+### Added
+- Added a **Rich Text Toolbar** field setting to choose the formatting buttons in rich-text cells, with new underline, strikethrough, subscript, superscript and inline code options ([#84](https://github.com/verbb/tablemaker/issues/84)).
+
 ## 5.1.7 - 2026-11-05
 
 ### Removed

docs/feature-tour/field.md

@@ -24,7 +24,7 @@ Turn on **Enable Caption** when each table needs a descriptive title, such as 
 
 Use **Allowed Column Types** to limit the choices in **Configure**. For this schedule, allow Row heading, Date, Dropdown, Number, Lightswitch and Multi-line text. Choose **All** to make every built-in type available. Changing this setting preserves existing columns and their values. An existing column keeps its current type as a choice; new columns and type changes use the allowed choices.
 
-**Rich text** is available as a column choice only when CKEditor 5.0 or later is installed and enabled. Rich-text cells show a compact formatted preview so paragraphs, emphasis, links and lists remain distinguishable from plain multiline text. By default, selecting that preview opens a focused modal editor with bold, italic, link and list controls. The field setting **Rich Text Editing Mode** can instead opt a simple table into inline editing; only the active cell creates an editor, and its row expands while it is being edited. Modal editing remains recommended for tables with several columns. **Rich Text Link Types** controls whether editors can select Entries, Categories and Assets as link targets; standard URL links remain available. Element links retain Craft reference tags so generated table HTML follows later URI changes. If CKEditor is disabled, uninstalled or older than version 5.0, existing rich-text columns and their content are preserved and the cells fall back to raw HTML textareas until a supported version is available again.
+**Rich text** is available as a column choice only when CKEditor 5.0 or later is installed and enabled. Rich-text cells show a compact formatted preview so paragraphs, emphasis, links and lists remain distinguishable from plain multiline text. By default, selecting that preview opens a focused modal editor with bold, italic, link and list controls. The field setting **Rich Text Toolbar** chooses which formatting buttons editors see, from bold, italic, underline, strikethrough, subscript, superscript, inline code, links, bulleted lists and numbered lists; undo and redo are always available. Saved HTML keeps every format the toolbar can offer, so removing a button only changes the editor and never strips existing content. The field setting **Rich Text Editing Mode** can instead opt a simple table into inline editing; only the active cell creates an editor, and its row expands while it is being edited. Modal editing remains recommended for tables with several columns. **Rich Text Link Types** controls whether editors can select Entries, Categories and Assets as link targets; standard URL links remain available. Element links retain Craft reference tags so generated table HTML follows later URI changes. If CKEditor is disabled, uninstalled or older than version 5.0, existing rich-text columns and their content are preserved and the cells fall back to raw HTML textareas until a supported version is available again.
 
 Set **Min Rows**, **Max Rows**, **Min Columns** or **Max Columns** when the design requires bounds. For example, a minimum of two columns keeps a plan name and price together, while a maximum of four prevents a comparison table from growing too wide. **Add Row Label** lets you give the add action a name suited to the content, such as “Add a plan”.
 

src/fields/TableMakerField.php

@@ -37,6 +37,7 @@ class TableMakerField extends Field implements CrossSiteCopyableFieldInterface
     public const EDIT_COLUMNS_POSITION_TABLE_HEADER = 'tableHeader';
     public const RICH_TEXT_EDITING_MODE_MODAL = 'modal';
     public const RICH_TEXT_EDITING_MODE_INLINE = 'inline';
+    public const RICH_TEXT_TOOLBAR_DEFAULT = ['bold', 'italic', 'link', 'bulletedList', 'numberedList'];
 
     private const MIN_CKEDITOR_VERSION = '5.0.0';
     private const REJECTED_ERRORS_KEY = '__tableMakerErrors';
@@ -215,6 +216,53 @@ public static function normalizeRichTextLinkTypesSetting(mixed $value): string|a
         return count($filtered) === count($all) ? '*' : $filtered;
     }
 
+    /**
+     * Canonical storage for the rich-text toolbar: known item handles in toolbar order.
+     */
+    public static function normalizeRichTextToolbarSetting(mixed $value): array
+    {
+        // Fields saved before this setting existed keep the original toolbar.
+        if ($value === null) {
+            return self::RICH_TEXT_TOOLBAR_DEFAULT;
+        }
+
+        // An unchecked checkbox select posts an empty string.
+        if ($value === '') {
+            return [];
+        }
+
+        if (is_string($value)) {
+            $value = [$value];
+        }
+
+        if (!is_array($value)) {
+            return self::RICH_TEXT_TOOLBAR_DEFAULT;
+        }
+
+        return array_values(array_intersect(array_keys(self::allRichTextToolbarOptions()), $value));
+    }
+
+    /**
+     * Toolbar items Table Maker can offer (handle → label), in toolbar order.
+     * Each one must have matching CKEditor plugins in the field input and tags in
+     * {@see TableValue}'s rich-text allowlist.
+     */
+    public static function allRichTextToolbarOptions(): array
+    {
+        return [
+            'bold' => Craft::t('tablemaker', 'Bold'),
+            'italic' => Craft::t('tablemaker', 'Italic'),
+            'underline' => Craft::t('tablemaker', 'Underline'),
+            'strikethrough' => Craft::t('tablemaker', 'Strikethrough'),
+            'subscript' => Craft::t('tablemaker', 'Subscript'),
+            'superscript' => Craft::t('tablemaker', 'Superscript'),
+            'code' => Craft::t('tablemaker', 'Code'),
+            'link' => Craft::t('tablemaker', 'Link'),
+            'bulletedList' => Craft::t('tablemaker', 'Bulleted list'),
+            'numberedList' => Craft::t('tablemaker', 'Numbered list'),
+        ];
+    }
+
     /** Craft element types that can be selected from CKEditor's link UI. */
     public static function allRichTextLinkTypeOptions(): array
     {
@@ -234,6 +282,8 @@ public static function allRichTextLinkTypeOptions(): array
     public string $richTextEditingMode = self::RICH_TEXT_EDITING_MODE_MODAL;
     /** Craft element types offered alongside the standard URL link input. */
     public mixed $richTextLinkTypes = '*';
+    /** Formatting buttons shown in rich-text cell editors (#84). */
+    public mixed $richTextToolbar = self::RICH_TEXT_TOOLBAR_DEFAULT;
     public ?string $rowsAddRowLabel = null;
 
     /**
@@ -294,6 +344,7 @@ public function beforeSave(bool $isNew): bool
         $this->editColumnsPosition = self::normalizeEditColumnsPosition($this->editColumnsPosition);
         $this->richTextEditingMode = self::normalizeRichTextEditingMode($this->richTextEditingMode);
         $this->richTextLinkTypes = self::normalizeRichTextLinkTypesSetting($this->richTextLinkTypes);
+        $this->richTextToolbar = self::normalizeRichTextToolbarSetting($this->richTextToolbar);
 
         return parent::beforeSave($isNew);
     }
@@ -401,6 +452,7 @@ public function copyValue(ElementInterface $from, ElementInterface $to): void
         if ($copy) {
             $copy->siteId = $to->siteId;
         }
+
         $to->setFieldValue($this->handle, $copy);
     }
 
@@ -516,6 +568,8 @@ public function getSettingsHtml(): ?string
             'settings' => $this->getSettings(),
             'allColumnTypeOptions' => self::allColumnTypeSettingOptions(),
             'allRichTextLinkTypeOptions' => self::allRichTextLinkTypeOptions(),
+            'allRichTextToolbarOptions' => self::allRichTextToolbarOptions(),
+            'richTextToolbar' => self::normalizeRichTextToolbarSetting($this->richTextToolbar),
             'ckeditorAvailable' => self::isCkeditorAvailable(),
             'unavailableAllowedColumnTypes' => $unavailableAllowedColumnTypes,
         ]);
@@ -736,6 +790,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
                     foreach ($options as $option) {
                         if (!empty($option['default'])) {
                             $defaults[$columnId] = $option['value'];
+
                             break;
                         }
                     }
@@ -748,6 +803,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
                 while (array_key_exists('row' . $nextIndex, $rows)) {
                     $nextIndex++;
                 }
+
                 $rows['row' . $nextIndex] = $defaults;
                 $nextIndex++;
             }
@@ -760,6 +816,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
                 while (array_key_exists('col' . $nextIndex, $columns)) {
                     $nextIndex++;
                 }
+
                 $columns['col' . $nextIndex] = [
                     'heading' => '',
                     'align' => 'left',
@@ -801,6 +858,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
             'ckeditorAvailable' => $ckeditorAvailable,
             'richTextEditingMode' => self::normalizeRichTextEditingMode($this->richTextEditingMode),
             'richTextLinkOptions' => $ckeditorAvailable ? $this->_richTextLinkOptions($element) : [],
+            'richTextToolbar' => self::normalizeRichTextToolbarSetting($this->richTextToolbar),
             'elementSiteId' => $element?->siteId,
             'enableWidthColumn' => $this->enableWidthColumn,
             'enableAlignmentColumn' => $this->enableAlignmentColumn,
@@ -905,6 +963,7 @@ private function _richTextLinkOptions(?ElementInterface $element): array
                     $sources[] = "group:$group->uid";
                 }
             }
+
             $sources = array_merge($sources, $this->_customElementSources(Category::class));
 
             if ($sources !== []) {
@@ -929,6 +988,7 @@ private function _richTextLinkOptions(?ElementInterface $element): array
                     $sources[] = "volume:$volume->uid";
                 }
             }
+
             $sources = array_merge($sources, $this->_customElementSources(Asset::class));
 
             if ($sources !== []) {
@@ -953,6 +1013,7 @@ private function _richTextEntrySources(?ElementInterface $element): array
         foreach (Craft::$app->getEntries()->getAllSections() as $section) {
             if ($section->type === Section::TYPE_SINGLE) {
                 $showSingles = true;
+
                 continue;
             }
 
@@ -965,6 +1026,7 @@ private function _richTextEntrySources(?ElementInterface $element): array
             foreach ($sites as $site) {
                 if (isset($siteSettings[$site->id]) && $siteSettings[$site->id]->hasUrls) {
                     $sources[] = "section:$section->uid";
+
                     break;
                 }
             }
@@ -1042,6 +1104,7 @@ private function _requestSizeErrors(array $value): array
                     $errors[] = Craft::t('tablemaker', 'Table must have at most {count} submitted cells.', [
                         'count' => self::MAX_REQUEST_CELLS,
                     ]);
+
                     break;
                 }
             }

src/helpers/TableValue.php

@@ -23,7 +23,9 @@
  */
 class TableValue
 {
-    private const RICH_TEXT_ALLOWED_HTML = 'p,br,strong,b,em,i,a[href|title|target|rel],ul,ol,li';
+    // Every tag any rich-text toolbar option can produce. Fields share one policy,
+    // so turning a button off only changes the editor, not what saved HTML keeps.
+    private const RICH_TEXT_ALLOWED_HTML = 'p,br,strong,b,em,i,u,s,sub,sup,code,a[href|title|target|rel],ul,ol,li';
 
     /**
      * @return TableMakerData|null
@@ -414,6 +416,7 @@ public static function validateCell(string $type, mixed $value, ?string &$error
             case 'number':
                 if (!is_numeric($value) || !is_finite((float)$value)) {
                     $error = Craft::t('tablemaker', 'Number cells must contain a finite number.');
+
                     return false;
                 }
 
@@ -424,12 +427,15 @@ public static function validateCell(string $type, mixed $value, ?string &$error
                 }
 
                 $validator = new ColorValidator();
+
                 break;
             case 'url':
                 $validator = new UrlValidator();
+
                 break;
             case 'email':
                 $validator = new EmailValidator();
+
                 break;
             default:
                 return true;
@@ -596,6 +602,7 @@ public static function constrainColumnTypes(array $columns, array $allowedTypes,
                 if ($fallback !== 'select') {
                     unset($column['options']);
                 }
+
                 $columns[$colId] = $column;
             }
         }
@@ -746,6 +753,7 @@ private static function canonicalizeRows(mixed $rows, array $columns, bool $from
                     $decoded = Json::decodeIfJson($raw);
                     $raw = is_string($decoded) ? $decoded : $raw;
                 }
+
                 $type = $columns[$colId]['type'] ?? 'singleline';
                 $cells[$colId] = self::normalizeCell($type, $raw, $fromRequest);
             }
@@ -886,7 +894,7 @@ private static function renderCellHtml(string $type, mixed $value, ?int $siteId
         return Html::encode($string);
     }
 
-    /** Keep the cell contract as HTML text while enforcing Table Maker's small toolbar vocabulary. */
+    /** Keep the cell contract as HTML text while enforcing the vocabulary of Table Maker's toolbar options. */
     private static function sanitizeRichText(string $value): string
     {
         return HtmlPurifier::process($value, [

src/templates/_field/settings.html

@@ -46,6 +46,20 @@
         values: settings.richTextLinkTypes ?? '*',
         showAllOption: true,
     }) }}
+
+    {{ forms.checkboxSelectField({
+        label: 'Rich Text Toolbar' | t('tablemaker'),
+        instructions: 'Choose the formatting buttons available when editing rich-text cells.' | t('tablemaker'),
+        name: 'richTextToolbar',
+        options: allRichTextToolbarOptions,
+        values: richTextToolbar,
+    }) }}
+{% else %}
+    {# Keep the saved toolbar while CKEditor is unavailable, including an empty one. #}
+    <input type="hidden" name="{{ 'richTextToolbar' | namespaceInputName }}" value="">
+    {% for item in richTextToolbar %}
+        <input type="hidden" name="{{ 'richTextToolbar[]' | namespaceInputName }}" value="{{ item }}">
+    {% endfor %}
 {% endif %}
 
 {{ forms.lightswitchField({

src/translations/en/tablemaker.php

@@ -10,15 +10,27 @@
   'Alignment' => 'Alignment',
   'Allowed Column Types' => 'Allowed Column Types',
   'Automatic' => 'Automatic',
+  'Bold' => 'Bold',
+  'Bulleted list' => 'Bulleted list',
   'Caption' => 'Caption',
   'Caption Instructions' => 'Caption Instructions',
   'Caption Label' => 'Caption Label',
   'Caption Placeholder' => 'Caption Placeholder',
+  'Choose the formatting buttons available when editing rich-text cells.' => 'Choose the formatting buttons available when editing rich-text cells.',
   'CKEditor could not be loaded. You can edit the HTML directly instead.' => 'CKEditor could not be loaded. You can edit the HTML directly instead.',
+  'Code' => 'Code',
   'Enable Caption' => 'Enable Caption',
+  'Italic' => 'Italic',
+  'Link' => 'Link',
+  'Numbered list' => 'Numbered list',
+  'Rich Text Toolbar' => 'Rich Text Toolbar',
+  'Strikethrough' => 'Strikethrough',
+  'Subscript' => 'Subscript',
+  'Superscript' => 'Superscript',
   'The caption field instructions shown to editors.' => 'The caption field instructions shown to editors.',
   'The caption field label shown to editors.' => 'The caption field label shown to editors.',
   'The caption field placeholder text.' => 'The caption field placeholder text.',
+  'Underline' => 'Underline',
   'Whether editors can set a caption for each table value.' => 'Whether editors can set a caption for each table value.',
   'Center' => 'Center',
   'Select which column types editors can pick when editing columns. Rich text requires CKEditor 5.0 or later to be installed and enabled.' => 'Select which column types editors can pick when editing columns. Rich text requires CKEditor 5.0 or later to be installed and enabled.',