@startinblox/core 0.19.18 → 0.19.19

package/dist/index.js

@@ -50939,9 +50939,69 @@ const RichtextMixin = {
     }
     const ops = deltaMd.toDelta(this.value);
     this.quill.setContents(ops);
+    if (this.isRequired()) {
+      this.createHiddenRequiredInput();
+      this.quill.on("text-change", this.onTextChange.bind(this));
+    }
     const nextProcessor = listCallbacks.shift();
     if (nextProcessor)
       nextProcessor(value, listCallbacks);
+  },
+  isRequired() {
+    return Array.from(this.element.attributes).some((attr) => attr.name === "required");
+  },
+  createHiddenRequiredInput() {
+    const attributeName = this.getAttributeValue("name");
+    this.hiddenInput = document.querySelector(`input[name="${attributeName + "-hidden"}"]`);
+    if (!this.hiddenInput) {
+      this.hiddenInput = this.createHiddenInput(attributeName + "-hidden");
+      this.element.appendChild(this.hiddenInput);
+      this.addInvalidEventListener();
+    }
+    this.hiddenInput.value = this.quill.getText();
+  },
+  createHiddenInput(attributeName) {
+    const input = document.createElement("input");
+    input.name = attributeName;
+    input.setAttribute("required", "true");
+    input.style.opacity = "0";
+    input.style.position = "absolute";
+    input.style.pointerEvents = "none";
+    return input;
+  },
+  getAttributeValue(attributeName) {
+    const attribute2 = Array.from(this.element.attributes).find((attr) => attr.name === attributeName);
+    return attribute2 ? attribute2.value : "";
+  },
+  displayCustomErrorMessage(message) {
+    const richtext = this.element.querySelector("[data-richtext]");
+    if (richtext) {
+      let errorMessageElement = richtext.querySelector(".required-error-message");
+      if (!errorMessageElement) {
+        errorMessageElement = document.createElement("div");
+        errorMessageElement.className = "required-error-message";
+      }
+      richtext.appendChild(errorMessageElement);
+      errorMessageElement.textContent = message;
+      richtext.classList.add("error-border-richtext");
+    }
+  },
+  addInvalidEventListener() {
+    this.hiddenInput.addEventListener("invalid", (e) => {
+      e.preventDefault();
+      this.displayCustomErrorMessage("Please fill out this field.");
+    });
+  },
+  onTextChange() {
+    this.hiddenInput.value = this.quill.getText();
+    this.removeErrorMessageAndStyling();
+  },
+  removeErrorMessageAndStyling() {
+    const richtext = this.element.querySelector("[data-richtext]");
+    let errorMessageElement = richtext.querySelector(".required-error-message");
+    if (errorMessageElement)
+      errorMessageElement.remove();
+    richtext.classList.remove("error-border-richtext");
   }
 };
 const callbackDirectory = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/core",
-  "version": "0.19.18",
+  "version": "0.19.19",
   "description": "This is a series of web component respecting both the web components standards and the Linked Data Platform convention.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",