From f89ce415fe48556a21bfe03c5257245c4147cf6f Mon Sep 17 00:00:00 2001 From: Ram Shukla Date: Fri, 14 Feb 2025 20:36:45 +0530 Subject: [PATCH 1/2] Adjust CSS styling of rich text toolbar to Bootstrap 4 for consistency Fixes #664 Adjust the CSS styling of the rich text toolbar buttons to match Bootstrap 4 for consistency. * Add the `btn` and `btn-light` classes to the buttons in `src/adapters/PublicLab.Woofmark.js`. * Remove the `btn-sm` class from the buttons in `src/adapters/PublicLab.Woofmark.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-insert` button in `src/modules/PublicLab.CustomInsert.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-insert` button in `src/modules/PublicLab.CustomInsert.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-autocenter` button in `src/modules/PublicLab.RichTextModule.AutoCenter.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-autocenter` button in `src/modules/PublicLab.RichTextModule.AutoCenter.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-embed` button in `src/modules/PublicLab.RichTextModule.Embed.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-embed` button in `src/modules/PublicLab.RichTextModule.Embed.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-horizontal-rule` button in `src/modules/PublicLab.RichTextModule.HorizontalRule.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-horizontal-rule` button in `src/modules/PublicLab.RichTextModule.HorizontalRule.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-table` button in `src/modules/PublicLab.RichTextModule.Table.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-table` button in `src/modules/PublicLab.RichTextModule.Table.js`. --- src/adapters/PublicLab.Woofmark.js | 3 ++- src/modules/PublicLab.CustomInsert.js | 2 +- src/modules/PublicLab.RichTextModule.AutoCenter.js | 2 +- src/modules/PublicLab.RichTextModule.Embed.js | 2 +- src/modules/PublicLab.RichTextModule.HorizontalRule.js | 2 +- src/modules/PublicLab.RichTextModule.Table.js | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/adapters/PublicLab.Woofmark.js b/src/adapters/PublicLab.Woofmark.js index 05b20dbf..fc88123a 100644 --- a/src/adapters/PublicLab.Woofmark.js +++ b/src/adapters/PublicLab.Woofmark.js @@ -371,7 +371,8 @@ module.exports = function(textarea, _editor, _module) { $(".wk-commands button.woofmark-command-ol").hide(); $(".wk-commands button.woofmark-command-ul").hide(); } else { - $(".wk-switchboard button").addClass("btn-sm"); + $(".wk-switchboard button").addClass("btn"); + $(".wk-switchboard button").addClass("btn-light"); } }; diff --git a/src/modules/PublicLab.CustomInsert.js b/src/modules/PublicLab.CustomInsert.js index b071931c..23227c0d 100644 --- a/src/modules/PublicLab.CustomInsert.js +++ b/src/modules/PublicLab.CustomInsert.js @@ -67,7 +67,7 @@ module.exports = function CustomInsert(_module, wysiwyg) { } }); const builder = require("./PublicLab.CustomInsert.Template.js"); - $('.wk-commands').append(''); + $('.wk-commands').append(''); $(document).ready(function() { $('[data-toggle="insert"]').tooltip(); diff --git a/src/modules/PublicLab.RichTextModule.AutoCenter.js b/src/modules/PublicLab.RichTextModule.AutoCenter.js index c0d50bb1..a41bf7a1 100644 --- a/src/modules/PublicLab.RichTextModule.AutoCenter.js +++ b/src/modules/PublicLab.RichTextModule.AutoCenter.js @@ -6,7 +6,7 @@ module.exports = function initAutoCenter(_module, wysiwyg) { // $('.woofmark-mode-markdown').removeClass('disabled') // create a menu option for auto center: - $('.wk-commands').append(''); + $('.wk-commands').append(''); // since chunk.selection returns null for images $(document).ready(function() { diff --git a/src/modules/PublicLab.RichTextModule.Embed.js b/src/modules/PublicLab.RichTextModule.Embed.js index 536444cd..41443874 100644 --- a/src/modules/PublicLab.RichTextModule.Embed.js +++ b/src/modules/PublicLab.RichTextModule.Embed.js @@ -4,7 +4,7 @@ module.exports = function initEmbed(_module, wysiwyg) { // create a menu option for embeds: - $('.wk-commands').append(''); + $('.wk-commands').append(''); $(document).ready(function() { $('[data-toggle="youtube"]').tooltip(); diff --git a/src/modules/PublicLab.RichTextModule.HorizontalRule.js b/src/modules/PublicLab.RichTextModule.HorizontalRule.js index d6a5e9f6..97b89795 100644 --- a/src/modules/PublicLab.RichTextModule.HorizontalRule.js +++ b/src/modules/PublicLab.RichTextModule.HorizontalRule.js @@ -4,7 +4,7 @@ module.exports = function initHorizontalRule(_module, wysiwyg) { // create a menu option for horizontal rules: - $('.wk-commands').append(''); + $('.wk-commands').append(''); $(document).ready(function() { $('[data-toggle="horizontal"]').tooltip(); diff --git a/src/modules/PublicLab.RichTextModule.Table.js b/src/modules/PublicLab.RichTextModule.Table.js index 81a30f87..d12a54b2 100644 --- a/src/modules/PublicLab.RichTextModule.Table.js +++ b/src/modules/PublicLab.RichTextModule.Table.js @@ -41,7 +41,7 @@ module.exports = function initTables(_module, wysiwyg) { // create a submenu for sizing tables - $('.wk-commands').append(''); + $('.wk-commands').append(''); $(document).ready(function() { $('[data-toggle="table"]').tooltip(); From b8248c06e8fc48ebe26935abdccd733cce1617bf Mon Sep 17 00:00:00 2001 From: Ram Shukla Date: Fri, 14 Feb 2025 20:39:34 +0530 Subject: [PATCH 2/2] Fix UI bugs in PublicLab.Editor Fix basic bugs in the UI. * Enable the "Publish" button in `examples/index.html` when all required fields are filled by adding an event listener. * Remove the "Drag an image here to upload" text in `examples/errors.html` after an image is uploaded. * Fix the toolbar in `src/modules/PublicLab.RichTextModule.js` to float correctly when scrolling through the editor text area. * Remove the markdown warning message in `src/modules/PublicLab.RichTextModule.js` after switching to markdown mode. * Remove the data URLs warning message in `src/modules/PublicLab.RichTextModule.js` after removing the invalid image format. * Remove the invalid bold tags warning message in `src/modules/PublicLab.RichTextModule.js` after removing the invalid tags. --- examples/errors.html | 2 +- examples/index.html | 14 +++ src/modules/PublicLab.RichTextModule.js | 151 ++++++++++++++++++++++++ 3 files changed, 166 insertions(+), 1 deletion(-) diff --git a/examples/errors.html b/examples/errors.html index d9cb6992..0dc8a40d 100644 --- a/examples/errors.html +++ b/examples/errors.html @@ -101,7 +101,7 @@

2

-
+
Drag an image here to upload.
diff --git a/examples/index.html b/examples/index.html index 925ceae2..d629e114 100644 --- a/examples/index.html +++ b/examples/index.html @@ -417,6 +417,20 @@

5

lon: 77, zoom: 5, }); + + // Add an event listener to check if all required fields are filled + const requiredFields = document.querySelectorAll('.ple-module-content input, .ple-module-content textarea'); + requiredFields.forEach(field => { + field.addEventListener('input', () => { + if (editor.validate()) { + document.querySelector('.ple-publish').classList.remove('disabled'); + document.querySelector('.ple-publish').disabled = false; + } else { + document.querySelector('.ple-publish').classList.add('disabled'); + document.querySelector('.ple-publish').disabled = true; + } + }); + }); })(); diff --git a/src/modules/PublicLab.RichTextModule.js b/src/modules/PublicLab.RichTextModule.js index 724b78f2..329d8d55 100644 --- a/src/modules/PublicLab.RichTextModule.js +++ b/src/modules/PublicLab.RichTextModule.js @@ -152,6 +152,7 @@ module.exports = PublicLab.RichTextModule = PublicLab.Module.extend({ ); $(".alert-change-mode").click(function alertChangeMode() { _module.setMode("markdown"); + $(".markdown-warning").remove(); }); var refer = "#scrollpointMD_" + timestamp; $("html, body").animate( @@ -300,6 +301,156 @@ module.exports = PublicLab.RichTextModule = PublicLab.Module.extend({ if (_module.wysiwyg.mode == "wysiwyg") { _module.focusables[0] = $(_module.editable); } else _module.focusables[0] = $(_module.textarea); + + $(".markdown-warning").remove(); + }); + + $(_module.options.textarea).on("change keydown", function(e) { + _module.resize(); + }); + + // if scrolling through the editor text area the toolbar will float + var wkC = document.getElementsByClassName("wk-commands")[0]; + console.log('one2'); + + $(window).scroll(function() { + var textAreaRect = $(".ple-textarea")[0] + .getBoundingClientRect(); + var richAreaRect = $(".wk-wysiwyg")[0] + .getBoundingClientRect(); + var footerRect = $(".ple-footer")[0] + .getBoundingClientRect().height; + + if ( + (textAreaRect.bottom || richAreaRect.bottom) >= ((window.innerHeight || document.documentElement.clientHeight) - footerRect) && (textAreaRect.top || richAreaRect.top) <= ((window.innerHeight || document.documentElement.clientHeight) - footerRect) + ) { + wkC.style.position = "fixed"; + wkC.style.bottom = footerRect + "px"; + wkC.style.zIndex= 2; + } else { + wkC.style.position = "relative"; + wkC.style.bottom = 0 + "px"; + } + }); + + crossvent.add(_module.wysiwyg.editable, "keyup", function(e) { + _editor.validate(); + var regexp = /data:image\/[^\s]+/i; + var timestamp = Date.now(); + if ( + _module.wysiwyg.mode == "wysiwyg" && + _module.value().search(regexp) && + $(".data-urls-warning").length === 0 + ) { + var diRegEx = _module.value().match(regexp); + if (diRegEx) { + var message = + "Sorry, this editor can't handle images of this format. Please follow these steps:
  • Download your image
  • Drag it back into the editor, it's that simple!
"; + _module.wysiwyg.editable.innerHTML = _module.wysiwyg.editable.innerHTML.replace( + regexp, + "" + ); + $(_module.wysiwyg.editable).after( + "
" + + message + + "
" + ); + var refer = "#scrollpointDURI_" + timestamp; + $("html, body").animate( + { + scrollTop: $(refer).offset().top + }, + 2000 + ); + } + } + }); + + crossvent.add(_module.wysiwyg.textarea, "keyup", function(e) { + _editor.validate(); + var regexp = /\*\*[\n]+\*\*/g; + var timestamp = Date.now(); + if ( + _module.wysiwyg.mode == "markdown" && + _module.value().match(regexp) && + $(".invalid-bold-tags-warning").length === 0 + ) { + var message = + "Invalid input: Please remove all invalid bold tags like the ones below:

**
**"; + _module.wysiwyg.textarea.innerHTML = _module.wysiwyg.textarea.innerHTML.replace( + regexp, + "" + ); + $(_module.wysiwyg.textarea).after( + "
" + + message + + "
" + ); + var refer = "#scrollpointBold_" + timestamp; + $("html, body").animate( + { + scrollTop: $(refer).offset().top + }, + 2000 + ); + } + }); + + crossvent.add(_module.wysiwyg.textarea, "keyup", function(e) { + _editor.validate(); + var regexp = /[\*]{2}[\s]{0,1}[\n]+[\#]+[^\P{P}*]+[\*]{2}/; + // checks for the following pattern + // + // + // + if (_module.wysiwyg.mode == "markdown" && _module.value().match(regexp)) { + _module.value( + _module + .value() + .match(regexp)[0] + .substr(3, _module.value().match(regexp)[0].length - 5) + ); + } + }); + + crossvent.add(_module.wysiwyg.editable, "mouseover", function(e) { + _editor.validate(); + if (_module.wysiwyg.mode === "wysiwyg" && e.target.href) { + var n = new Date().getTime(); + e.target.id = n; + $("#" + n).attr("data-toggle", "tooltip"); + $("#" + n).attr("title", e.target.href); + $('[data-toggle="tooltip"]').tooltip(); + } + }); + + // once woofmark's done with the textarea, this is triggered + // using woofmark's special event system, crossvent + // -- move this into the Woofmark adapter initializer + crossvent.add(_module.options.textarea, "woofmark-mode-change", function( + e + ) { + _module.resize(); + + _module.afterParse(); + + // ensure document is scrolled to the same place: + document.body.scrollTop = _module.scrollTop; + // might need to adjust for markdown/rich text not + // taking up same amount of space, if menu is below _editor... + // if (_editor.wysiwyg.mode == "markdown") + + if (_module.wysiwyg.mode == "wysiwyg") { + _module.focusables[0] = $(_module.editable); + } else _module.focusables[0] = $(_module.textarea); + + $(".markdown-warning").remove(); }); $(_module.options.textarea).on("change keydown", function(e) {