fix: list-style-type parsing from and to html

Author: gjulivan

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

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - We fixed an issue where rich text table failed to properly functions if the widget is placed inside a table structure.
+- We fixed an issue where rich text list-style-type format incorrectly parsed.
 
 ## [4.8.0] - 2025-07-01
 

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.8.0",
+    "version": "4.8.1",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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.8.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="4.8.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>

packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss

@@ -124,6 +124,13 @@ $rte-brand-primary: #264ae5;
         }
     }
 
+    .ql-editor li[data-list="ordered"][data-custom-list="lower-roman"] {
+        counter-increment: custom-list-roman;
+        & > .ql-ui:before {
+            content: counter(custom-list-roman, lower-roman) ". ";
+        }
+    }
+
     .widget-rich-text-prompt {
         position: absolute;
         top: 0;

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

@@ -41,6 +41,7 @@ import Quill, { EmitterSource, QuillOptions } from "quill";
 import TextBlot, { escapeText } from "quill/blots/text";
 import { Delta, Op } from "quill/core";
 import Editor from "quill/core/editor";
+import { STANDARD_LIST_TYPES } from "./formats/customList";
 
 interface ListItem {
     child: Blot;
@@ -109,6 +110,18 @@ const ListSequence = ["ordered", "lower-alpha", "lower-roman"];
 
 // construct proper "list-style-type" style attribute
 function getExpectedType(type: string | undefined, indent: number): string {
+    // bullet is standard list type, convert to disc for correct css display
+    if (type === "bullet") {
+        return "disc";
+    }
+
+    // custom list type is not dependant on indent level, use as is
+    const isCustomList = !STANDARD_LIST_TYPES.find(x => x === type);
+    if (isCustomList && type) {
+        return type;
+    }
+
+    // list type that is dependant on indent level, find the expected type based on indent level
     const currentIndex = ListSequence.indexOf(type || "ordered");
     const expectedIndex = (currentIndex + indent) % 3;
     const expectedType = ListSequence[expectedIndex] ?? type;

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

@@ -16,7 +16,7 @@ import QuillResize from "quill-resize-module";
 import QuillTableBetter from "./formats/quill-table-better/quill-table-better";
 import MxUploader from "./modules/uploader";
 import MxBlock from "./formats/block";
-
+import CustomClipboard from "./modules/clipboard";
 class Empty {
     doSomething(): string {
         return "";
@@ -43,3 +43,4 @@ Quill.register("modules/resize", QuillResize, true);
 // add empty handler for view code, this format is handled by toolbar's custom config via ViewCodeDialog
 Quill.register({ "ui/view-code": Empty });
 Quill.register({ "modules/table-better": QuillTableBetter }, true);
+Quill.register({ "modules/clipboard": CustomClipboard }, true);

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

@@ -3,10 +3,26 @@ import "./customList.scss";
 /**
  * adding custom list item, alowing extra list style
  */
+
+export const STANDARD_LIST_TYPES = ["ordered", "checked", "unchecked", "bullet"];
+
 export default class CustomListItem extends ListItem {
+    format(name: string, value: string): void {
+        if (name === this.statics.blotName && value) {
+            if (!STANDARD_LIST_TYPES.find(x => x === value)) {
+                this.domNode.setAttribute("data-custom-list", value);
+                this.domNode.setAttribute("data-list", "ordered");
+            } else {
+                this.domNode.setAttribute("data-list", value);
+            }
+        } else {
+            super.format(name, value);
+        }
+    }
+
     static create(value: any): any {
         const node = super.create(value) as HTMLElement;
-        if (!["ordered", "checked", "unchecked", "bullet"].find(x => x === value)) {
+        if (!STANDARD_LIST_TYPES.find(x => x === value)) {
             node.setAttribute("data-custom-list", value);
             node.setAttribute("data-list", "ordered");
         } else {
@@ -15,4 +31,8 @@ export default class CustomListItem extends ListItem {
         node.setAttribute("title", this.blotName);
         return node;
     }
+
+    static formats(domNode: HTMLElement): string | undefined {
+        return domNode.dataset.customList || domNode.dataset.list || undefined;
+    }
 }

packages/pluggableWidgets/rich-text-web/src/utils/modules/clipboard.ts

@@ -0,0 +1,48 @@
+import Quill, { Delta } from "quill";
+import Clipboard from "quill/modules/clipboard";
+
+export default class CustomClipboard extends Clipboard {
+    constructor(quill: Quill, options: any) {
+        super(quill, options);
+
+        // remove default list matchers for ol and ul
+        this.matchers = this.matchers.filter(matcher => matcher[0] !== "ol, ul");
+
+        // add custom list matchers for ol and ul to allow custom list types (lower-alpha, lower-roman, etc.)
+        this.addMatcher("ol, ul", (node, delta) => {
+            const format = "list";
+            let list = "ordered";
+            const element = node as HTMLUListElement;
+            const checkedAttr = element.getAttribute("data-checked");
+            if (checkedAttr) {
+                list = checkedAttr === "true" ? "checked" : "unchecked";
+            } else {
+                const listStyleType = element.style.listStyleType;
+                if (listStyleType) {
+                    if (listStyleType === "disc") {
+                        // disc is standard list type, convert to bullet
+                        list = "bullet";
+                    } else if (listStyleType === "decimal") {
+                        // list decimal type is dependant on indent level, convert to standard ordered list
+                        list = "ordered";
+                    } else {
+                        list = listStyleType;
+                    }
+                } else {
+                    list = element.tagName === "OL" ? "ordered" : "bullet";
+                }
+            }
+
+            // apply list format to delta
+            return delta.reduce((newDelta, op) => {
+                if (!op.insert) return newDelta;
+                if (op.attributes && op.attributes[format]) {
+                    return newDelta.push(op);
+                }
+                const formats = list ? { [format]: list } : {};
+
+                return newDelta.insert(op.insert, { ...formats, ...op.attributes });
+            }, new Delta());
+        });
+    }
+}