feat(rte): allow button tag

Author: gjulivan

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We fixed an issue where the attribute not refreshed when the widget is not reloaded.
 
+### Added
+
+-   We allow user to create html button tag on the widget.
+
 ## [4.0.0] - 2024-10-29
 
 ### Breaking changes

packages/pluggableWidgets/rich-text-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2024. All rights reserved.",
     "repository": {

packages/pluggableWidgets/rich-text-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="RichText" version="4.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="4.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>

packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts

@@ -5,6 +5,7 @@ import "./formats/fontsize";
 import CustomListItem from "./formats/customList";
 import CustomLink from "./formats/link";
 import CustomVideo from "./formats/video";
+import Button from "./formats/button";
 import { Attributor } from "parchment";
 const direction = Quill.import("attributors/style/direction") as Attributor;
 const alignment = Quill.import("attributors/style/align") as Attributor;
@@ -16,7 +17,6 @@ class Empty {
         return "";
     }
 }
-
 /**
  * Custom format registration for quill.
  */
@@ -31,5 +31,6 @@ Quill.register(IndentLeftStyle, true);
 Quill.register(IndentRightStyle, true);
 Quill.register(Formula, true);
 Quill.register(CustomHeader, true);
+Quill.register(Button, true);
 // add empty handler for view code, this format is handled by toolbar's custom config via ViewCodeDialog
 Quill.register({ "ui/view-code": Empty });

packages/pluggableWidgets/rich-text-web/src/utils/formats/button.ts

@@ -0,0 +1,55 @@
+import Inline from "quill/blots/inline";
+const ATTRIBUTES = ["alt", "height", "width", "class", "id"];
+
+type buttonAttributes = {
+    id?: string;
+    class?: string;
+    alt?: string;
+    height?: string;
+    width?: string;
+};
+class Button extends Inline {
+    static blotName = "button";
+    static tagName = "BUTTON";
+
+    format(name: string, value: unknown): void {
+        if (name !== this.statics.blotName || !value) {
+            super.format(name, value);
+        } else {
+            // @ts-expect-error the constructor is generic function, ts will consider sanitize not exist
+            this.domNode.textContent = value;
+        }
+    }
+
+    static create(value: unknown): HTMLElement {
+        const domNode = super.create(value) as HTMLElement;
+        domNode.setAttribute("type", "button");
+        if (value as buttonAttributes) {
+            const buttonAttr = value as buttonAttributes;
+            if (buttonAttr.id) {
+                domNode.setAttribute("id", buttonAttr.id);
+            }
+            if (buttonAttr.class) {
+                domNode.setAttribute("class", buttonAttr.class);
+            }
+            if (buttonAttr.width) {
+                domNode.setAttribute("width", buttonAttr.width);
+            }
+            if (buttonAttr.height) {
+                domNode.setAttribute("height", buttonAttr.height);
+            }
+        }
+        return domNode;
+    }
+
+    static formats(domNode: Element) {
+        return ATTRIBUTES.reduce((formats: Record<string, string | null>, attribute) => {
+            if (domNode.hasAttribute(attribute)) {
+                formats[attribute] = domNode.getAttribute(attribute);
+            }
+            return formats;
+        }, {});
+    }
+}
+
+export default Button;