Adjust CSS styling of rich text toolbar to Bootstrap 4 for consistency

examples/errors.html

@@ -101,7 +101,7 @@ <h2>2</h2>
           </div>
 
           <div class="ple-module-content col-md-9 container">
-            <div class="ple-drag-drop col-md-6">
+            <div class="ple-drag-drop col-md-6" id="mainImage">
               Drag an image here to upload.
             </div>
             <div class="col-md-6 help">

examples/index.html

@@ -417,6 +417,20 @@ <h2>5</h2>
           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;
+            }
+          });
+        });
       })();
     </script>
     <script src="data/atwho.PLE.js"></script>

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");
     }
   };
 

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('<button class="woofmark-command-insert btn btn-outline-secondary" data-toggle="insert" title="Custom Insert"><i class="fa fa-tags"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-insert btn btn btn-light" data-toggle="insert" title="Custom Insert"><i class="fa fa-tags"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="insert"]').tooltip();

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('<button class="woofmark-command-autocenter btn btn-outline-secondary" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-autocenter btn btn btn-light" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
   // since chunk.selection returns null for images
 
   $(document).ready(function() {

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('<button class="woofmark-command-embed btn btn-outline-secondary" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-embed btn btn btn-light" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="youtube"]').tooltip();

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('<button class="woofmark-command-horizontal-rule btn btn-outline-secondary" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-horizontal-rule btn btn btn-light" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="horizontal"]').tooltip();

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('<button class="woofmark-command-table btn btn-outline-secondary" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-table btn btn btn-light" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="table"]').tooltip();

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:<br/><ul><li><a download href='" +
+            diRegEx[0] +
+            "'>Download</a> your image</li><li>Drag it back into the editor, it's that simple!</li></ul>";
+          _module.wysiwyg.editable.innerHTML = _module.wysiwyg.editable.innerHTML.replace(
+              regexp,
+              ""
+          );
+          $(_module.wysiwyg.editable).after(
+              "<div id='scrollpointDURI_" +
+              timestamp +
+              "' class='data-urls-warning alert alert-warning'>" +
+              message +
+              "</div>"
+          );
+          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:<br><br>**<br>**";
+        _module.wysiwyg.textarea.innerHTML = _module.wysiwyg.textarea.innerHTML.replace(
+            regexp,
+            ""
+        );
+        $(_module.wysiwyg.textarea).after(
+            "<div id='scrollpointBold_" +
+            timestamp +
+            "' class='invalid-bold-tags-warning alert alert-warning'>" +
+            message +
+            "</div>"
+        );
+        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
+      // <double asterisks><zero or one space>
+      // <atleast one new lines>
+      // <atleast one hash><include atleast one characters that is NOT an asterisk><double asterisks>
+      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) {