Skip to content

Add Superscript and Subscript Support for Trix Editor #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wunc merged 6 commits into from
Jan 16, 2026
Merged

Add Superscript and Subscript Support for Trix Editor #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
60f6616
Add subscript and superscript buttons to the Trix editor toolbar
betsyecastro Jan 7, 2026
4c36bfc
Update purify config file to proper Html5Definition
betsyecastro Jan 7, 2026
d9a9653
Validate existence of sub and sup buttons before adding them to Trix …
betsyecastro Jan 8, 2026
b68ef82
Change sub and sup buttons labels
betsyecastro Jan 8, 2026
a155698
Trix button adjustments
wunc Jan 16, 2026
037a019
Merge branch 'develop' into add-sub-and-sup-buttons-to-trix-toolbar
wunc Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

193 changes: 66 additions & 127 deletions config/purify.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,87 @@
<?php

use Stevebauman\Purify\Definitions\Html5Definition;

return [

/*
|--------------------------------------------------------------------------
| Settings
| Default Config
|--------------------------------------------------------------------------
|
| The configuration settings array is passed directly to HTMLPurifier.
| This option defines the default config that is provided to HTMLPurifier.
|
*/

'default' => 'default',

/*
|--------------------------------------------------------------------------
| Config sets
|--------------------------------------------------------------------------
|
| Feel free to add / remove / customize these attributes as you wish.
| Here you may configure various sets of configuration for differentiated use of HTMLPurifier.
| A specific set of configuration can be applied by calling the "config($name)" method on
| a Purify instance. Feel free to add/remove/customize these attributes as you wish.
|
| Documentation: http://htmlpurifier.org/live/configdoc/plain.html
|
| Core.Encoding The encoding to convert input to.
| HTML.Doctype Doctype to use during filtering.
| HTML.Allowed The allowed HTML Elements with their allowed attributes.
| HTML.ForbiddenElements The forbidden HTML elements. Elements that are listed in this
| string will be removed, however their content will remain.
| CSS.AllowedProperties The Allowed CSS properties.
| AutoFormat.AutoParagraph Newlines are converted in to paragraphs whenever possible.
| AutoFormat.RemoveEmpty Remove empty elements that contribute no semantic information to the document.
|
*/

'settings' => [

/*
|--------------------------------------------------------------------------
| Core.Encoding
|--------------------------------------------------------------------------
|
| The encoding to convert input to.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Core.Encoding
|
*/

'Core.Encoding' => 'utf-8',

/*
|--------------------------------------------------------------------------
| Cache.SerializerPath
|--------------------------------------------------------------------------
|
| The HTML purifier serializer cache path.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Cache.SerializerPath
|
*/

'Cache.SerializerPath' => storage_path('app/purify'),

/*
|--------------------------------------------------------------------------
| Cache.SerializerPermissions
|--------------------------------------------------------------------------
|
| The HTML purifier serializer cache path.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Cache.SerializerPermissions
|
*/

'Cache.SerializerPermissions' => env('PURIFY_CACHE_PERMISSIONS', null),

/*
|--------------------------------------------------------------------------
| HTML.Doctype
|--------------------------------------------------------------------------
|
| Doctype to use during filtering.
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.Doctype
|
*/

'HTML.Doctype' => 'XHTML 1.0 Strict',

/*
|--------------------------------------------------------------------------
| HTML.Allowed
|--------------------------------------------------------------------------
|
| The allowed HTML Elements with their allowed attributes.
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.Allowed
|
*/

'HTML.Allowed' => 'h1,h2,h3,h4,h5,h6,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span,sup,sub,img[width|height|alt|src]',

/*
|--------------------------------------------------------------------------
| HTML.ForbiddenElements
|--------------------------------------------------------------------------
|
| The forbidden HTML elements. Elements that are listed in
| this string will be removed, however their content will remain.
|
| For example if 'p' is inside the string, the string: '<p>Test</p>',
|
| Will be cleaned to: 'Test'
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.ForbiddenElements
|
*/
'configs' => [

'HTML.ForbiddenElements' => '',
'default' => [
'Core.Encoding' => 'utf-8',
'HTML.Doctype' => 'HTML 4.01 Transitional',
'Cache.SerializerPermissions' => env('PURIFY_CACHE_PERMISSIONS', null),
'HTML.Allowed' => 'h1,h2,h3,h4,h5,h6,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span,sup,sub,img[width|height|alt|src]',
'HTML.ForbiddenElements' => '',
'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
'AutoFormat.AutoParagraph' => false,
'AutoFormat.RemoveEmpty' => false,
],

/*
|--------------------------------------------------------------------------
| CSS.AllowedProperties
|--------------------------------------------------------------------------
|
| The Allowed CSS properties.
|
| http://htmlpurifier.org/live/configdoc/plain.html#CSS.AllowedProperties
|
*/

'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',

/*
|--------------------------------------------------------------------------
| AutoFormat.AutoParagraph
|--------------------------------------------------------------------------
|
| The Allowed CSS properties.
|
| This directive turns on auto-paragraphing, where double
| newlines are converted in to paragraphs whenever possible.
|
| http://htmlpurifier.org/live/configdoc/plain.html#AutoFormat.AutoParagraph
|
*/
],

'AutoFormat.AutoParagraph' => false,
/*
|--------------------------------------------------------------------------
| HTMLPurifier definitions
|--------------------------------------------------------------------------
|
| Here you may specify a class that augments the HTML definitions used by
| HTMLPurifier. Additional HTML5 definitions are provided out of the box.
| When specifying a custom class, make sure it implements the interface:
|
| \Stevebauman\Purify\Definitions\Definition
|
| Note that these definitions are applied to every Purifier instance.
|
| Documentation: http://htmlpurifier.org/docs/enduser-customize.html
|
*/

/*
|--------------------------------------------------------------------------
| AutoFormat.RemoveEmpty
|--------------------------------------------------------------------------
|
| When enabled, HTML Purifier will attempt to remove empty
| elements that contribute no semantic information to the document.
|
| http://htmlpurifier.org/live/configdoc/plain.html#AutoFormat.RemoveEmpty
|
*/
'definitions' => Html5Definition::class,

'AutoFormat.RemoveEmpty' => false,
/*
|--------------------------------------------------------------------------
| Serializer location
|--------------------------------------------------------------------------
|
| The location where HTMLPurifier can store its temporary serializer files.
| The filepath should be accessible and writable by the web server.
| A good place for this is in the framework's own storage path.
|
*/

],
'serializer' => storage_path('app/purify'),

];
];
47 changes: 28 additions & 19 deletions public/css/app.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 23 additions & 0 deletions public/js/app.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions public/mix-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"/js/app.js.map": "/js/app.js.map?id=55201ca1444675c47714f464498b2dd5",
"/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
"/js/manifest.js.map": "/js/manifest.js.map?id=389e00e7d7680b68d4e1d128ce27ff48",
"/css/app.css": "/css/app.css?id=bc1752c1cc35e38e55b5e618b7b4f544",
"/css/app.css.map": "/css/app.css.map?id=25ff699f4abf0d30aaa3aeb83cf6a71d",
"/css/app.css": "/css/app.css?id=0fd161f323dd5c77642c3240bbb47d16",
"/css/app.css.map": "/css/app.css.map?id=3ba6add83b449d9a830b1160dc25d43d",
"/js/vendor.js": "/js/vendor.js?id=77012e19e850a379f73e3ac0c76bc9b1",
"/js/vendor.js.map": "/js/vendor.js.map?id=f3f5514d1186aa088c887b6ebe999fe0"
}
47 changes: 46 additions & 1 deletion resources/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -655,6 +655,52 @@ if (typeof Trix === 'object') {
e.preventDefault();
e.stopPropagation();
});

// Register text attributes
Trix.config.textAttributes.sub = {
tagName: 'sub',
inheritable: true,
};

Trix.config.textAttributes.sup = {
tagName: 'sup',
inheritable: true,
};

addEventListener('trix-initialize', function (e) {
const textToolsButtonGroup = e.target.toolbarElement.querySelector('.trix-button-group--text-tools');

if (!textToolsButtonGroup) return;

const hasButton = (attribute) =>
textToolsButtonGroup.querySelector(`.trix-button[data-trix-attribute="${attribute}"]`);

if (!hasButton('sub')) {
textToolsButtonGroup.insertAdjacentHTML('beforeend', `
<button
type="button"
class="trix-button trix-button--icon trix-button--icon-sub"
data-trix-attribute="sub"
title="Subscript"
tabindex="-1"
>
</button>
`);
}

if (!hasButton('sup')) {
textToolsButtonGroup.insertAdjacentHTML('beforeend', `
<button
type="button"
class="trix-button trix-button--icon trix-button--icon-sup"
data-trix-attribute="sup"
title="Superscript"
tabindex="-1"
>
</button>
`);
}
});
}

// Livewire global hooks
Expand All @@ -674,4 +720,3 @@ if (typeof Livewire === 'object') {
});
}


2 changes: 1 addition & 1 deletion resources/assets/js/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ window.Sortable = require('sortablejs/Sortable');
window.Bloodhound = require('corejs-typeahead');

// Trix editor
require('trix');
require('trix');
Loading
Loading