From 60f661694ef2bcfd0860d738f0458531fdfb53d7 Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Wed, 7 Jan 2026 15:20:00 -0600 Subject: [PATCH 1/5] Add subscript and superscript buttons to the Trix editor toolbar --- composer.lock | 4 ++-- public/js/app.js | 15 +++++++++++++++ public/mix-manifest.json | 4 ++-- resources/assets/js/app.js | 1 - resources/assets/js/bootstrap.js | 15 ++++++++++++++- 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/composer.lock b/composer.lock index 4656b979..a690b868 100644 --- a/composer.lock +++ b/composer.lock @@ -12527,12 +12527,12 @@ ], "aliases": [], "minimum-stability": "stable", - "stability-flags": {}, + "stability-flags": [], "prefer-stable": true, "prefer-lowest": false, "platform": { "php": "^8.3.0" }, - "platform-dev": {}, + "platform-dev": [], "plugin-api-version": "2.6.0" } diff --git a/public/js/app.js b/public/js/app.js index 6940d828..132c693c 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -787,6 +787,21 @@ window.Bloodhound = __webpack_require__(/*! corejs-typeahead */ "./node_modules/ // Trix editor __webpack_require__(/*! trix */ "./node_modules/trix/dist/trix.esm.min.js"); +Trix.config.textAttributes.sup = { + tagName: "sup", + inheritable: true +}; +Trix.config.textAttributes.sub = { + tagName: "sub", + inheritable: true +}; +addEventListener("trix-initialize", function (event) { + var buttonHTML, buttonGroup; + buttonHTML = ''; + buttonHTML += ''; + buttonGroup = event.target.toolbarElement.querySelector(".trix-button-group--block-tools"); + buttonGroup.insertAdjacentHTML("beforeend", buttonHTML); +}); /***/ }), diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 9c83cf3b..878d668f 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/js/app.js": "/js/app.js?id=bb647bfe8f8b8ae096323cb6ea42da03", - "/js/app.js.map": "/js/app.js.map?id=9f321a4814e4648916c37b2e980f55e7", + "/js/app.js": "/js/app.js?id=48b30a8272fd64c6b0bc09d2a749970a", + "/js/app.js.map": "/js/app.js.map?id=4dc1dc1b24d493458d19c4c5637410bd", "/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", diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index d09f9a79..ba7072f2 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -674,4 +674,3 @@ if (typeof Livewire === 'object') { }); } - diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js index 1cf5c1cf..406f7786 100644 --- a/resources/assets/js/bootstrap.js +++ b/resources/assets/js/bootstrap.js @@ -36,4 +36,17 @@ window.Sortable = require('sortablejs/Sortable'); window.Bloodhound = require('corejs-typeahead'); // Trix editor -require('trix'); \ No newline at end of file +require('trix'); + +Trix.config.textAttributes.sup = { tagName: "sup", inheritable: true } +Trix.config.textAttributes.sub = { tagName: "sub", inheritable: true } + +addEventListener("trix-initialize", function(event) { + var buttonHTML, buttonGroup + + buttonHTML = '' + buttonHTML += '' + + buttonGroup = event.target.toolbarElement.querySelector(".trix-button-group--block-tools") + buttonGroup.insertAdjacentHTML("beforeend", buttonHTML) +}) \ No newline at end of file From 4c36bfc357b2401c9ff740e06dd8e4854795c12e Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Wed, 7 Jan 2026 15:21:05 -0600 Subject: [PATCH 2/5] Update purify config file to proper Html5Definition --- config/purify.php | 193 ++++++++++++++++------------------------------ 1 file changed, 66 insertions(+), 127 deletions(-) diff --git a/config/purify.php b/config/purify.php index de6f0a9e..7cbcee32 100644 --- a/config/purify.php +++ b/config/purify.php @@ -1,148 +1,87 @@ '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: '

Test

', - | - | 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'), -]; +]; \ No newline at end of file From d9a96536ea600c8775b04535a65c05b65a71c8ad Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Thu, 8 Jan 2026 11:38:10 -0600 Subject: [PATCH 3/5] Validate existence of sub and sup buttons before adding them to Trix toolbar --- public/js/app.js | 31 ++++++++++++----- public/mix-manifest.json | 4 +-- resources/assets/js/bootstrap.js | 60 +++++++++++++++++++++++++++----- 3 files changed, 75 insertions(+), 20 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 132c693c..58dd389a 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -787,20 +787,33 @@ window.Bloodhound = __webpack_require__(/*! corejs-typeahead */ "./node_modules/ // Trix editor __webpack_require__(/*! trix */ "./node_modules/trix/dist/trix.esm.min.js"); -Trix.config.textAttributes.sup = { - tagName: "sup", - inheritable: true -}; + +// Register text attributes Trix.config.textAttributes.sub = { tagName: "sub", inheritable: true }; +Trix.config.textAttributes.sup = { + tagName: "sup", + inheritable: true +}; addEventListener("trix-initialize", function (event) { - var buttonHTML, buttonGroup; - buttonHTML = ''; - buttonHTML += ''; - buttonGroup = event.target.toolbarElement.querySelector(".trix-button-group--block-tools"); - buttonGroup.insertAdjacentHTML("beforeend", buttonHTML); + var toolbar = event.target.toolbarElement; + var buttonGroup = toolbar.querySelector(".trix-button-group--block-tools"); + if (!buttonGroup) return; + var hasButton = function hasButton(attribute) { + return buttonGroup.querySelector(".trix-button[data-trix-attribute=\"".concat(attribute, "\"]")); + }; + var buttonsToAdd = []; + if (!hasButton("sub")) { + buttonsToAdd.push("\n \n SUB\n \n "); + } + if (!hasButton("sup")) { + buttonsToAdd.push("\n \n SUP\n \n "); + } + if (buttonsToAdd.length) { + buttonGroup.insertAdjacentHTML("beforeend", buttonsToAdd.join("")); + } }); /***/ }), diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 878d668f..ea82657d 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/js/app.js": "/js/app.js?id=48b30a8272fd64c6b0bc09d2a749970a", - "/js/app.js.map": "/js/app.js.map?id=4dc1dc1b24d493458d19c4c5637410bd", + "/js/app.js": "/js/app.js?id=c2f5081a73e0d40806b382f398744cb0", + "/js/app.js.map": "/js/app.js.map?id=1e5ad24e4fb7df33e0e5b17c4a4b917f", "/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", diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js index 406f7786..ff5458d8 100644 --- a/resources/assets/js/bootstrap.js +++ b/resources/assets/js/bootstrap.js @@ -38,15 +38,57 @@ window.Bloodhound = require('corejs-typeahead'); // Trix editor require('trix'); -Trix.config.textAttributes.sup = { tagName: "sup", inheritable: true } -Trix.config.textAttributes.sub = { tagName: "sub", inheritable: true } +// Register text attributes +Trix.config.textAttributes.sub = { + tagName: "sub", + inheritable: true, +}; -addEventListener("trix-initialize", function(event) { - var buttonHTML, buttonGroup +Trix.config.textAttributes.sup = { + tagName: "sup", + inheritable: true, +}; - buttonHTML = '' - buttonHTML += '' +addEventListener("trix-initialize", function (event) { + const toolbar = event.target.toolbarElement; + const buttonGroup = toolbar.querySelector(".trix-button-group--block-tools"); - buttonGroup = event.target.toolbarElement.querySelector(".trix-button-group--block-tools") - buttonGroup.insertAdjacentHTML("beforeend", buttonHTML) -}) \ No newline at end of file + if (!buttonGroup) return; + + const hasButton = (attribute) => + buttonGroup.querySelector( + `.trix-button[data-trix-attribute="${attribute}"]` + ); + + const buttonsToAdd = []; + + if (!hasButton("sub")) { + buttonsToAdd.push(` + + `); + } + + if (!hasButton("sup")) { + buttonsToAdd.push(` + + `); + } + + if (buttonsToAdd.length) { + buttonGroup.insertAdjacentHTML("beforeend", buttonsToAdd.join("")); + } +}); From b68ef8297466681600ba69f7cfd62eeabfb7e6f1 Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Thu, 8 Jan 2026 11:38:48 -0600 Subject: [PATCH 4/5] Change sub and sup buttons labels --- public/js/app.js | 4 ++-- public/mix-manifest.json | 4 ++-- resources/assets/js/bootstrap.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 58dd389a..1a780c73 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -806,10 +806,10 @@ addEventListener("trix-initialize", function (event) { }; var buttonsToAdd = []; if (!hasButton("sub")) { - buttonsToAdd.push("\n \n SUB\n \n "); + buttonsToAdd.push("\n \n X2\n \n "); } if (!hasButton("sup")) { - buttonsToAdd.push("\n \n SUP\n \n "); + buttonsToAdd.push("\n \n X2\n \n "); } if (buttonsToAdd.length) { buttonGroup.insertAdjacentHTML("beforeend", buttonsToAdd.join("")); diff --git a/public/mix-manifest.json b/public/mix-manifest.json index ea82657d..50115fa5 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/js/app.js": "/js/app.js?id=c2f5081a73e0d40806b382f398744cb0", - "/js/app.js.map": "/js/app.js.map?id=1e5ad24e4fb7df33e0e5b17c4a4b917f", + "/js/app.js": "/js/app.js?id=138a5ff0e25454fe9ec8649d5f1a700f", + "/js/app.js.map": "/js/app.js.map?id=f8db9fca85918860e8f43ad3947ba4b1", "/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", diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js index ff5458d8..cb7c33ee 100644 --- a/resources/assets/js/bootstrap.js +++ b/resources/assets/js/bootstrap.js @@ -70,7 +70,7 @@ addEventListener("trix-initialize", function (event) { data-trix-attribute="sub" title="Subscript" tabindex="-1"> - SUB + X2 `); } @@ -83,7 +83,7 @@ addEventListener("trix-initialize", function (event) { data-trix-attribute="sup" title="Superscript" tabindex="-1"> - SUP + X2 `); } From a1556988b60f5b605954a4b960d048ac349d08a0 Mon Sep 17 00:00:00 2001 From: Wun Chiou Date: Fri, 16 Jan 2026 14:28:57 -0600 Subject: [PATCH 5/5] Trix button adjustments - uses Material Design icons for sub and sup for visual consistency. For reference, these are from Material Symbols, weight 500, size 20px, fill color black, and implemented as URL-encoded data objects in CSS. - moves sub and sup buttons to 'text tools' button group - moves JS code to app.js --- public/css/app.css | 47 ++++++++++++++++----------- public/js/app.js | 51 +++++++++++++---------------- public/mix-manifest.json | 8 ++--- resources/assets/js/app.js | 46 ++++++++++++++++++++++++++ resources/assets/js/bootstrap.js | 55 -------------------------------- resources/assets/sass/_core.scss | 19 ----------- resources/assets/sass/_trix.scss | 31 ++++++++++++++++++ resources/assets/sass/app.scss | 1 + 8 files changed, 133 insertions(+), 125 deletions(-) create mode 100644 resources/assets/sass/_trix.scss diff --git a/public/css/app.css b/public/css/app.css index 0d31d7e6..be026771 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -10240,25 +10240,6 @@ textarea.form-control { flex: 1; } -trix-editor { - margin-bottom: 15px; - border-color: rgb(149.175, 149.175, 149.175); - border-radius: 0; -} -trix-editor:focus { - box-shadow: 0 0 0 0.1rem #154734; - border-color: #154734; -} - -trix-toolbar .trix-button-row { - flex-wrap: wrap; -} - -trix-toolbar .trix-button-group--history-tools, -trix-toolbar .trix-button-group--file-tools { - display: none; -} - pre { background-color: lightgrey; padding: 1em; @@ -10887,6 +10868,34 @@ table.table-live .loading-indicator { justify-content: center; } +trix-editor { + margin-bottom: 15px; + border-color: rgb(149.175, 149.175, 149.175); + border-radius: 0; +} +trix-editor:focus { + box-shadow: 0 0 0 0.1rem #154734; + border-color: #154734; +} + +trix-toolbar .trix-button-row { + flex-wrap: wrap; +} + +trix-toolbar .trix-button-group--history-tools, +trix-toolbar .trix-button-group--file-tools, +trix-toolbar .trix-button[data-trix-attribute=strike] { + display: none; +} + +trix-toolbar .trix-button--icon-sub::before { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M728.61-135.87v-98.83q0-21%2014.28-35.47%2014.28-14.48%2035.39-14.48h42.5v-43.22h-92.17v-52.78h95.28q21.11%200%2035.39%2014.2%2014.29%2014.21%2014.29%2035.21v49.41q0%2021-14.29%2035.48-14.28%2014.48-35.39%2014.48h-42.5v43.22h92.18v52.78zm-467.94-144%20164.26-258.37-153.02-237.89h101.08l105.49%20170.04h-.96L586.8-776.13h101.29L534.07-538.24l165.26%20258.37H597.8L481.52-465.39h.96L362.2-279.87z'%2F%3E%3C%2Fsvg%3E"); +} + +trix-toolbar .trix-button--icon-sup::before { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M728.61-579.35v-98.82q0-21%2014.28-35.48t35.39-14.48h42.5v-43.22h-92.17v-52.78h95.28q21.11%200%2035.39%2014.21%2014.29%2014.2%2014.29%2035.2v49.42q0%2021-14.29%2035.47-14.28%2014.48-35.39%2014.48h-42.5v43.22h92.18v52.78zM260.67-183.87l164.26-258.37-153.02-237.89h101.08l105.49%20170.04h-.96L586.8-680.13h101.29L534.07-442.24l165.26%20258.37H597.8L481.52-369.39h.96L362.2-183.87z'%2F%3E%3C%2Fsvg%3E"); +} + /* Symfony Var Dumper styling */ table td pre.sf-dump { color: rgb(119.085, 119.085, 119.085) !important; diff --git a/public/js/app.js b/public/js/app.js index 1a780c73..187a0771 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -712,6 +712,29 @@ if ((typeof Trix === "undefined" ? "undefined" : _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) { + var textToolsButtonGroup = e.target.toolbarElement.querySelector('.trix-button-group--text-tools'); + if (!textToolsButtonGroup) return; + var hasButton = function hasButton(attribute) { + return textToolsButtonGroup.querySelector(".trix-button[data-trix-attribute=\"".concat(attribute, "\"]")); + }; + if (!hasButton('sub')) { + textToolsButtonGroup.insertAdjacentHTML('beforeend', "\n \n \n "); + } + if (!hasButton('sup')) { + textToolsButtonGroup.insertAdjacentHTML('beforeend', "\n \n \n "); + } + }); } // Livewire global hooks @@ -788,34 +811,6 @@ window.Bloodhound = __webpack_require__(/*! corejs-typeahead */ "./node_modules/ // Trix editor __webpack_require__(/*! trix */ "./node_modules/trix/dist/trix.esm.min.js"); -// Register text attributes -Trix.config.textAttributes.sub = { - tagName: "sub", - inheritable: true -}; -Trix.config.textAttributes.sup = { - tagName: "sup", - inheritable: true -}; -addEventListener("trix-initialize", function (event) { - var toolbar = event.target.toolbarElement; - var buttonGroup = toolbar.querySelector(".trix-button-group--block-tools"); - if (!buttonGroup) return; - var hasButton = function hasButton(attribute) { - return buttonGroup.querySelector(".trix-button[data-trix-attribute=\"".concat(attribute, "\"]")); - }; - var buttonsToAdd = []; - if (!hasButton("sub")) { - buttonsToAdd.push("\n \n X2\n \n "); - } - if (!hasButton("sup")) { - buttonsToAdd.push("\n \n X2\n \n "); - } - if (buttonsToAdd.length) { - buttonGroup.insertAdjacentHTML("beforeend", buttonsToAdd.join("")); - } -}); - /***/ }), /***/ "./resources/assets/sass/app.scss": diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 50115fa5..f80c3b0b 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,10 +1,10 @@ { - "/js/app.js": "/js/app.js?id=138a5ff0e25454fe9ec8649d5f1a700f", - "/js/app.js.map": "/js/app.js.map?id=f8db9fca85918860e8f43ad3947ba4b1", + "/js/app.js": "/js/app.js?id=ba036f67a2937d57f18f04eba9905eb5", + "/js/app.js.map": "/js/app.js.map?id=3d1a7db1a1ace2f48fd006c36d5db526", "/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" } diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index ba7072f2..2140f29d 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -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', ` + + `); + } + + if (!hasButton('sup')) { + textToolsButtonGroup.insertAdjacentHTML('beforeend', ` + + `); + } + }); } // Livewire global hooks diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js index cb7c33ee..e85bd414 100644 --- a/resources/assets/js/bootstrap.js +++ b/resources/assets/js/bootstrap.js @@ -37,58 +37,3 @@ window.Bloodhound = require('corejs-typeahead'); // Trix editor require('trix'); - -// Register text attributes -Trix.config.textAttributes.sub = { - tagName: "sub", - inheritable: true, -}; - -Trix.config.textAttributes.sup = { - tagName: "sup", - inheritable: true, -}; - -addEventListener("trix-initialize", function (event) { - const toolbar = event.target.toolbarElement; - const buttonGroup = toolbar.querySelector(".trix-button-group--block-tools"); - - if (!buttonGroup) return; - - const hasButton = (attribute) => - buttonGroup.querySelector( - `.trix-button[data-trix-attribute="${attribute}"]` - ); - - const buttonsToAdd = []; - - if (!hasButton("sub")) { - buttonsToAdd.push(` - - `); - } - - if (!hasButton("sup")) { - buttonsToAdd.push(` - - `); - } - - if (buttonsToAdd.length) { - buttonGroup.insertAdjacentHTML("beforeend", buttonsToAdd.join("")); - } -}); diff --git a/resources/assets/sass/_core.scss b/resources/assets/sass/_core.scss index 5103c4a5..bcf1b015 100644 --- a/resources/assets/sass/_core.scss +++ b/resources/assets/sass/_core.scss @@ -320,25 +320,6 @@ textarea.form-control{ flex: 1; } -//rich text editor -trix-editor { - margin-bottom: 15px; - border-color: $input-border-color; - border-radius: $border-radius; - - &:focus { - box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color; - border-color: $input-btn-focus-color; - } -} -trix-toolbar .trix-button-row { - flex-wrap: wrap; -} -trix-toolbar .trix-button-group--history-tools, -trix-toolbar .trix-button-group--file-tools { - display: none; -} - pre { background-color: lightgrey; padding: 1em; diff --git a/resources/assets/sass/_trix.scss b/resources/assets/sass/_trix.scss new file mode 100644 index 00000000..f7351dc6 --- /dev/null +++ b/resources/assets/sass/_trix.scss @@ -0,0 +1,31 @@ +// rich text editor +trix-editor { + margin-bottom: 15px; + border-color: $input-border-color; + border-radius: $border-radius; + + &:focus { + box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color; + border-color: $input-btn-focus-color; + } +} + +trix-toolbar .trix-button-row { + flex-wrap: wrap; +} + +trix-toolbar .trix-button-group--history-tools, +trix-toolbar .trix-button-group--file-tools, +trix-toolbar .trix-button[data-trix-attribute="strike"] { + display: none; +} + +// subscript icon +trix-toolbar .trix-button--icon-sub::before { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M728.61-135.87v-98.83q0-21%2014.28-35.47%2014.28-14.48%2035.39-14.48h42.5v-43.22h-92.17v-52.78h95.28q21.11%200%2035.39%2014.2%2014.29%2014.21%2014.29%2035.21v49.41q0%2021-14.29%2035.48-14.28%2014.48-35.39%2014.48h-42.5v43.22h92.18v52.78zm-467.94-144%20164.26-258.37-153.02-237.89h101.08l105.49%20170.04h-.96L586.8-776.13h101.29L534.07-538.24l165.26%20258.37H597.8L481.52-465.39h.96L362.2-279.87z'%2F%3E%3C%2Fsvg%3E"); +} + +// superscript icon +trix-toolbar .trix-button--icon-sup::before { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M728.61-579.35v-98.82q0-21%2014.28-35.48t35.39-14.48h42.5v-43.22h-92.17v-52.78h95.28q21.11%200%2035.39%2014.21%2014.29%2014.2%2014.29%2035.2v49.42q0%2021-14.29%2035.47-14.28%2014.48-35.39%2014.48h-42.5v43.22h92.18v52.78zM260.67-183.87l164.26-258.37-153.02-237.89h101.08l105.49%20170.04h-.96L586.8-680.13h101.29L534.07-442.24l165.26%20258.37H597.8L481.52-369.39h.96L362.2-183.87z'%2F%3E%3C%2Fsvg%3E"); +} \ No newline at end of file diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 89eaf1fc..89812181 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -28,4 +28,5 @@ @import 'student'; @import 'tags'; @import 'tables'; +@import 'trix'; @import 'dump';