[Bug 41452] New: Add optional “Beautify” formatting for CodeMirror SQL / JS / CSS editors
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Bug ID: 41452 Summary: Add optional “Beautify” formatting for CodeMirror SQL / JS / CSS editors Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: saiful@semanticconsulting.com QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Koha uses CodeMirror for editing SQL (Reports) and custom JS/CSS. While syntax highlighting is available, there is no way to format existing content. Even a short SQL query (4–5 lines) quickly becomes hard to read and error-prone when pasted or modified over time. A simple "Beautify" action, similar to what tools like Postman provide, would significantly improve readability and maintainability. Expected behavior: Provide an optional, client-side “Beautify” button for CodeMirror editors that: * Formats SQL in the Reports module * Formats JS/CSS in relevant system preference editors * Runs client-side only and is explicitly triggered This would not affect query execution or validation, and would only improve editor readability. Widely used open-source client-side formatters (e.g. Prettier for JS/CSS and sql-formatter for SQL) could be integrated and loaded only on relevant pages. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Saiful Amin <saiful@semanticconsulting.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |saiful@semanticconsulting.c |ity.org |om -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 --- Comment #1 from Saiful Amin <saiful@semanticconsulting.com> --- Created attachment 194395 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194395&action=edit Bug 41452 - Add optional "Beautify" formatting for CodeMirror SQL / JS / CSS editors Adds "Beautify" button in CodeMirror editors for SQL, JavaScript, and CSS code. Latest minified versions of these two libraries are manually vendored in koha-tmpl/intranet-tmpl/lib/: - sql-formatter (https://github.com/sql-formatter-org/sql-formatter) - js-beautify (https://github.com/beautify-web/js-beautify) Test plan: 1. Apply the patch 2. Restart services and flush memcached In ktd: 'restart_all' and 'flush_memcached' 3. Test SQL formatting: - Go to Reports > Create from SQL - Copy any report from https://wiki.koha-community.org/wiki/SQL_Reports_Library - Paste it in the editor - Click the "Beautify" button - Verify that the SQL code is formatted 4. Test JavaScript formatting: - Go to Administration > System preferences > search for "userjs" - Click on Edit on any preference, e.g. OPACUserJS or IntranetUserJS - Paste any JavaScript code in the editor, e.g.: `function test() { console.log("Hello"); }` Or copy any code from https://wiki.koha-community.org/wiki/JQuery_Library - Click the "Beautify" button - Verify that the JavaScript code is formatted 5. Test CSS formatting: - Go to Administration > System preferences > search for "usercss" - Click on Edit on any preference, e.g. OPACUserCSS or IntranetUserCSS - Paste any CSS code in the editor, e.g.: `body { font-size: 12px; color: #333; }` - Click the "Beautify" button - Verify that the CSS code is formatted 6. Sign off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Saiful Amin <saiful@semanticconsulting.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |martin.renvoize@openfifth.c | |o.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |37248 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37248 [Bug 37248] [Omnibus] Power to the user -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Faheemuddin Syed <faheem@nexuslib.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |faheem@nexuslib.com Status|Needs Signoff |Patch doesn't apply --- Comment #2 from Faheemuddin Syed <faheem@nexuslib.com> --- Patch not applying due to merge conflict -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Saiful Amin <saiful@semanticconsulting.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Saiful Amin <saiful@semanticconsulting.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194395|0 |1 is obsolete| | --- Comment #3 from Saiful Amin <saiful@semanticconsulting.com> --- Created attachment 195499 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195499&action=edit Bug 41452 - Add optional "Beautify" formatting for CodeMirror SQL / JS / CSS editors Adds "Beautify" button in CodeMirror editors for SQL, JavaScript, and CSS code. Latest minified versions of these two libraries are manually vendored in koha-tmpl/intranet-tmpl/lib/: - sql-formatter (https://github.com/sql-formatter-org/sql-formatter) - js-beautify (https://github.com/beautify-web/js-beautify) Test plan: 1. Apply the patch 2. Restart services and flush memcached In ktd: 'restart_all' and 'flush_memcached' 3. Test SQL formatting: - Go to Reports > Create from SQL - Copy any report from https://wiki.koha-community.org/wiki/SQL_Reports_Library - Paste it in the editor - Click the "Beautify" button - Verify that the SQL code is formatted 4. Test JavaScript formatting: - Go to Administration > System preferences > search for "userjs" - Click on Edit on any preference, e.g. OPACUserJS or IntranetUserJS - Paste any JavaScript code in the editor, e.g.: `function test() { console.log("Hello"); }` Or copy any code from https://wiki.koha-community.org/wiki/JQuery_Library - Click the "Beautify" button - Verify that the JavaScript code is formatted 5. Test CSS formatting: - Go to Administration > System preferences > search for "usercss" - Click on Edit on any preference, e.g. OPACUserCSS or IntranetUserCSS - Paste any CSS code in the editor, e.g.: `body { font-size: 12px; color: #333; }` - Click the "Beautify" button - Verify that the CSS code is formatted 6. Sign off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Faheemuddin Syed <faheem@nexuslib.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #195499|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 --- Comment #4 from Faheemuddin Syed <faheem@nexuslib.com> --- Created attachment 195748 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195748&action=edit Bug 41452 - Add optional "Beautify" formatting for CodeMirror SQL / JS / CSS editors Adds "Beautify" button in CodeMirror editors for SQL, JavaScript, and CSS code. Latest minified versions of these two libraries are manually vendored in koha-tmpl/intranet-tmpl/lib/: - sql-formatter (https://github.com/sql-formatter-org/sql-formatter) - js-beautify (https://github.com/beautify-web/js-beautify) Test plan: 1. Apply the patch 2. Restart services and flush memcached In ktd: 'restart_all' and 'flush_memcached' 3. Test SQL formatting: - Go to Reports > Create from SQL - Copy any report from https://wiki.koha-community.org/wiki/SQL_Reports_Library - Paste it in the editor - Click the "Beautify" button - Verify that the SQL code is formatted 4. Test JavaScript formatting: - Go to Administration > System preferences > search for "userjs" - Click on Edit on any preference, e.g. OPACUserJS or IntranetUserJS - Paste any JavaScript code in the editor, e.g.: `function test() { console.log("Hello"); }` Or copy any code from https://wiki.koha-community.org/wiki/JQuery_Library - Click the "Beautify" button - Verify that the JavaScript code is formatted 5. Test CSS formatting: - Go to Administration > System preferences > search for "usercss" - Click on Edit on any preference, e.g. OPACUserCSS or IntranetUserCSS - Paste any CSS code in the editor, e.g.: `body { font-size: 12px; color: #333; }` - Click the "Beautify" button - Verify that the CSS code is formatted 6. Sign off Signed-off-by: Syed Faheemuddin <faheem@nexuslib.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Faheemuddin Syed <faheem@nexuslib.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 Faheemuddin Syed <faheem@nexuslib.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #195748|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 --- Comment #5 from Faheemuddin Syed <faheem@nexuslib.com> --- Created attachment 195749 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195749&action=edit Bug 41452 - Add optional "Beautify" formatting for CodeMirror SQL / JS / CSS editors Adds "Beautify" button in CodeMirror editors for SQL, JavaScript, and CSS code. Latest minified versions of these two libraries are manually vendored in koha-tmpl/intranet-tmpl/lib/: - sql-formatter (https://github.com/sql-formatter-org/sql-formatter) - js-beautify (https://github.com/beautify-web/js-beautify) Test plan: 1. Apply the patch 2. Restart services and flush memcached In ktd: 'restart_all' and 'flush_memcached' 3. Test SQL formatting: - Go to Reports > Create from SQL - Copy any report from https://wiki.koha-community.org/wiki/SQL_Reports_Library - Paste it in the editor - Click the "Beautify" button - Verify that the SQL code is formatted 4. Test JavaScript formatting: - Go to Administration > System preferences > search for "userjs" - Click on Edit on any preference, e.g. OPACUserJS or IntranetUserJS - Paste any JavaScript code in the editor, e.g.: `function test() { console.log("Hello"); }` Or copy any code from https://wiki.koha-community.org/wiki/JQuery_Library - Click the "Beautify" button - Verify that the JavaScript code is formatted 5. Test CSS formatting: - Go to Administration > System preferences > search for "usercss" - Click on Edit on any preference, e.g. OPACUserCSS or IntranetUserCSS - Paste any CSS code in the editor, e.g.: `body { font-size: 12px; color: #333; }` - Click the "Beautify" button - Verify that the CSS code is formatted 6. Sign off Signed-off-by: Syed Faheemuddin <faheem@nexuslib.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41452 --- Comment #6 from David Cook <dcook@prosentient.com.au> --- Comment on attachment 195749 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195749 Bug 41452 - Add optional "Beautify" formatting for CodeMirror SQL / JS / CSS editors Review of attachment 195749: --> (https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=41452&attachment=195749) ----------------------------------------------------------------- For the *.min.js files, you should add (alphabetical) references to them in ./koha-tmpl/intranet-tmpl/prog/en/modules/about.tt in the "BLOCK licenses_panel" section. ::: koha-tmpl/intranet-tmpl/js/beautify.js @@ +234,5 @@
+ // Create tooltip-like feedback + var feedback = document.createElement("span"); + feedback.className = "beautify-feedback"; + feedback.textContent = message; + feedback.style.cssText =
Why do inline styles here rather than including them in a file like you did for beautify-btn.css? ::: koha-tmpl/intranet-tmpl/lib/js-beautify/beautify-btn.css @@ +1,1 @@
+/* Beautify button styles for CodeMirror editors */
Is this custom CSS or does this come from the Beautify project? If it's custom, this file should be in ./koha-tmpl/intranet-tmpl/prog/css/ I believe -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org