chore: allow list indent and fix code view flow

gjulivan · gjulivan · commit 22836196cfb8 · 2026-07-13T22:17:28.000+02:00
diff --git a/packages/pluggableWidgets/rich-text-web/package.json b/packages/pluggableWidgets/rich-text-web/package.json
@@ -72,6 +72,7 @@
         "@tiptap/starter-kit": "^3.23.4",
         "@uiw/react-color-compact": "^2.10.1",
         "classnames": "^2.5.1",
+        "highlight.js": "^11.11.1",
         "js-beautify": "^2.0.3",
         "katex": "^0.16.22",
         "linkifyjs": "^4.3.2",
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
@@ -1,4 +1,3 @@
-import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import type { Editor as TipTapEditor } from "@tiptap/core";
 import { Subscript } from "@tiptap/extension-subscript";
 import { Superscript } from "@tiptap/extension-superscript";
@@ -10,6 +9,10 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
 import { forwardRef, ReactElement, useImperativeHandle, useMemo } from "react";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
+import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
+import { Toolbar } from "./toolbars";
 import { RichTextContainerProps } from "../../typings/RichTextProps";
 import { FontFamilyClass } from "../extensions/FontFamilyClass";
 import { FontSize } from "../extensions/FontSize";
@@ -26,9 +29,6 @@ import { TextColorClass } from "../extensions/TextColorClass";
 import { TextDirection } from "../extensions/TextDirection";
 import { TextHighlightClass } from "../extensions/TextHighlightClass";
 import { YouTubeResize } from "../extensions/YouTubeResize";
-import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
-import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
-import { Toolbar } from "./toolbars";
 import { ConfirmDialog } from "./toolbars/components/ConfirmDialog";
 import { ToolbarGroupsConfig } from "./toolbars/ToolbarConfig";
 
@@ -84,13 +84,12 @@ function EditorInner({
     customFonts
 }: EditorInnerProps): ReactElement {
     const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
-
     const handleSaveCode = (): void => {
         if (!editor) return;
 
         // Update editor content with modified HTML
         editor.commands.setContent(codeViewState.htmlCode);
-        codeViewDispatch({ type: "SAVE_CODE_CHANGES" });
+        codeViewDispatch({ type: "SAVE_CODE_CHANGES", isExiting: true });
     };
 
     const handleCancelCode = (): void => {
@@ -112,7 +111,7 @@ function EditorInner({
                         toolbarGroups={toolbarGroups}
                         advancedConfig={advancedConfig}
                         customFonts={customFonts}
-                    />
+                    ></Toolbar>
                 )}
                 {codeViewState.isCodeView ? (
                     <HighlightedCodeEditor
@@ -126,8 +125,7 @@ function EditorInner({
             </div>
             {codeViewState.showConfirm && (
                 <ConfirmDialog
-                    title="Save Code Changes?"
-                    message="Do you want to save the HTML code changes and apply them to the editor?"
+                    message="Save changes?"
                     confirmLabel="Save"
                     cancelLabel="Cancel"
                     onConfirm={handleSaveCode}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx
@@ -6,14 +6,15 @@ import { createContext, useContext, useReducer, ReactNode, ReactElement, Dispatc
 export interface CodeViewState {
     isCodeView: boolean;
     htmlCode: string;
+    lastSavedHtml?: string;
     showConfirm: boolean;
 }
 
 // Code view actions
 export type CodeViewAction =
     | { type: "ENTER_CODE_VIEW"; html: string }
     | { type: "EXIT_CODE_VIEW_REQUEST" }
-    | { type: "SAVE_CODE_CHANGES" }
+    | { type: "SAVE_CODE_CHANGES"; isExiting?: boolean }
     | { type: "CANCEL_CODE_CHANGES" }
     | { type: "UPDATE_HTML_CODE"; html: string };
 
@@ -33,23 +34,28 @@ function codeViewReducer(state: CodeViewState, action: CodeViewAction): CodeView
             return {
                 isCodeView: true,
                 htmlCode: beautifiedHtml,
+                lastSavedHtml: beautifiedHtml,
                 showConfirm: false
             };
         case "EXIT_CODE_VIEW_REQUEST":
+            const isLatestHtmlSaved = state.lastSavedHtml === state.htmlCode;
             return {
                 ...state,
-                showConfirm: true
+                showConfirm: !isLatestHtmlSaved,
+                isCodeView: !isLatestHtmlSaved
             };
         case "SAVE_CODE_CHANGES":
             return {
-                isCodeView: false,
-                htmlCode: "",
+                ...state,
+                lastSavedHtml: state.htmlCode,
+                isCodeView: action.isExiting ? false : state.isCodeView,
                 showConfirm: false
             };
         case "CANCEL_CODE_CHANGES":
             return {
                 isCodeView: false,
                 htmlCode: "",
+                lastSavedHtml: "",
                 showConfirm: false
             };
         case "UPDATE_HTML_CODE":
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss
@@ -51,6 +51,11 @@ $rte-shadow-color: #00000014 !default;
         }
     }
 
+    .code-view-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+
     .toolbar-group {
         display: flex;
         gap: 2px;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useState, useEffect, useMemo, useRef } from "react";
+import { ReactElement, ReactNode, useState, useEffect, useMemo, PropsWithChildren } from "react";
 import { useCurrentEditor } from "../EditorContext";
 import { CodeViewToolbarButton } from "./components/CodeView";
 import { ColorPickerToolbarButton } from "./components/ColorPicker";
@@ -23,7 +23,7 @@ import { ToolbarDropdown } from "./components/ToolbarDropdown";
 import { ToolbarSplitButton } from "./components/ToolbarSplitButton";
 import classNames from "classnames";
 
-interface ToolbarProps {
+interface ToolbarProps extends PropsWithChildren {
     imageSourceContent?: ReactNode;
     preset?: PresetEnum;
     toolbarConfig?: ToolbarConfigEnum;
@@ -118,31 +118,29 @@ function ToolbarRow(props: ToolbarRowProps): ReactElement {
 
 function ToolbarRowCode(): ReactElement {
     const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
-    const initialHtmlCode = useRef<string | null>(codeViewState.htmlCode);
 
-    const isDisabled = initialHtmlCode.current === codeViewState.htmlCode;
+    const isDisabled = codeViewState.htmlCode === codeViewState.lastSavedHtml;
     const extraProps = isDisabled ? { "aria-disabled": true } : {};
 
     const handleSaveCode = (): void => {
         if (!editor) return;
 
         // Update editor content with modified HTML
         editor.commands.setContent(codeViewState.htmlCode);
-        initialHtmlCode.current = codeViewState.htmlCode;
-        // codeViewDispatch({ type: "SAVE_CODE_CHANGES" });
+        codeViewDispatch({ type: "SAVE_CODE_CHANGES" });
     };
 
     const handleCancelCode = (): void => {
         codeViewDispatch({ type: "CANCEL_CODE_CHANGES" });
     };
     return (
-        <div className="toolbar-row">
+        <div className="toolbar-row code-view-actions">
             <div className="mx-button button btn btn-default" onClick={handleCancelCode}>
-                Cancel
+                {isDisabled ? "Close" : "Cancel"}
             </div>
             <div
                 {...extraProps}
-                className={classNames("mx-button", "button", "btn", "btn-primary", {
+                className={classNames("mx-button", "button", "btn", "btn-success", {
                     disabled: isDisabled
                 })}
                 onClick={handleSaveCode}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
 import { useCurrentEditor } from "../../EditorContext";
 import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
-import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
 
 export function CodeViewToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
     const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
@@ -23,6 +23,7 @@ export function CodeViewToolbarButton({ config }: BaseToolbarButtonProps): React
         <ToolbarDefaultButton
             onClick={handleToggle}
             isActive={codeViewState.isCodeView}
+            allowInCodeView
             icon={config.icon}
             title={config.title}
         />
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx
@@ -26,8 +26,8 @@ export function ConfirmDialog({
     return (
         <div className="confirm-dialog-overlay">
             <div ref={dialogRef} className="toolbar-dialog confirm-dialog">
-                <h3>{title}</h3>
-                <p className="confirm-message">{message}</p>
+                {title && <h3>{title}</h3>}
+                {message && <p className="confirm-message">{message}</p>}
                 <div className="dialog-actions">
                     <button type="button" onClick={onCancel}>
                         {cancelLabel}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss
@@ -253,7 +253,7 @@
     }
 
     .confirm-message {
-        margin: 0 0 16px 0;
+        padding: 16px;
         font-size: 14px;
         color: #666;
         line-height: 1.5;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDefaultButton.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDefaultButton.tsx
@@ -1,10 +1,13 @@
 import classNames from "classnames";
 import { ButtonHTMLAttributes, forwardRef, ReactElement } from "react";
+import { useCurrentEditor } from "../../EditorContext";
 
 export interface ToolbarDefaultButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: string;
     activeIcon?: string;
     isActive?: boolean;
+    /** When true, the button stays enabled while the editor is in code view (used by the code view toggle). */
+    allowInCodeView?: boolean;
 }
 
 /**
@@ -15,16 +18,20 @@ export interface ToolbarDefaultButtonProps extends ButtonHTMLAttributes<HTMLButt
  */
 export const ToolbarDefaultButton = forwardRef<HTMLButtonElement, ToolbarDefaultButtonProps>(
     function ToolbarDefaultButton(
-        { icon, activeIcon, isActive, className, type, children, ...rest },
+        { icon, activeIcon, isActive, allowInCodeView, className, type, disabled, children, ...rest },
         ref
     ): ReactElement {
         const currentIcon = isActive && activeIcon ? activeIcon : icon;
+        const { codeViewState } = useCurrentEditor();
+
+        const lockedByCodeView = !allowInCodeView && codeViewState.isCodeView === true;
 
         return (
             <button
                 {...rest}
                 ref={ref}
                 type={type ?? "button"}
+                disabled={disabled || lockedByCodeView}
                 className={classNames(className || "icon-button", { "is-active": isActive })}
             >
                 {children ?? <span className={`icons icon-${currentIcon}`} />}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx
@@ -81,15 +81,16 @@ export function ToolbarDropdown({ config }: BaseToolbarButtonProps): ReactElemen
             {isOpen && (
                 <div ref={refs.setFloating} style={floatingStyles} className="toolbar-dropdown-menu">
                     {options?.map(option => (
-                        <button
+                        <ToolbarDefaultButton
                             key={option.value}
                             onClick={() => handleSelect(option)}
                             data-value={option.value}
-                            className={`toolbar-dropdown-item ${currentValue === option.value ? "is-active" : ""}`}
+                            className="toolbar-dropdown-item"
+                            isActive={currentValue === option.value}
                         >
                             {option.icon && <span className={`icons icon-${option.icon}`} />}
                             <span>{option.label}</span>
-                        </button>
+                        </ToolbarDefaultButton>
                     ))}
                 </div>
             )}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarSplitButton.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarSplitButton.tsx
@@ -173,16 +173,16 @@ export function ToolbarSplitButton({ config }: ToolbarSplitButtonProps): ReactEl
             {isDropdownOpen && (
                 <div ref={refs.setFloating} style={floatingStyles} className="toolbar-dropdown-menu" role="menu">
                     {config.dropdownOptions?.map(option => (
-                        <button
+                        <ToolbarDefaultButton
                             key={option.value}
                             onClick={() => handleOptionSelect(option)}
-                            className={`toolbar-dropdown-item ${currentValue === option.value ? "is-active" : ""}`}
+                            className="toolbar-dropdown-item"
+                            isActive={currentValue === option.value}
                             role="menuitem"
-                            type="button"
                         >
                             {option.icon && <span className={`icons icon-${option.icon}`} />}
                             <span>{option.label}</span>
-                        </button>
+                        </ToolbarDefaultButton>
                     ))}
                 </div>
             )}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/__tests__/ToolbarDefaultButton.spec.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/__tests__/ToolbarDefaultButton.spec.tsx
@@ -1,8 +1,23 @@
 import "@testing-library/jest-dom";
-import { createRef } from "react";
+import { createRef, ReactElement, ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
+import { EditorContext } from "../../../EditorContext";
 import { ToolbarDefaultButton } from "../ToolbarDefaultButton";
 
+function renderInCodeView(children: ReactNode): ReturnType<typeof render> {
+    return render(
+        <EditorContext.Provider
+            value={{
+                editor: null,
+                codeViewState: { isCodeView: true, htmlCode: "", showConfirm: false },
+                codeViewDispatch: () => undefined
+            }}
+        >
+            {children as ReactElement}
+        </EditorContext.Provider>
+    );
+}
+
 describe("ToolbarDefaultButton", () => {
     it("renders the default icon span from the icon prop", () => {
         const { container } = render(<ToolbarDefaultButton icon="Text-bold" title="Bold" />);
@@ -65,4 +80,22 @@ describe("ToolbarDefaultButton", () => {
 
         expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     });
+
+    it("disables the button when the editor is in code view", () => {
+        renderInCodeView(<ToolbarDefaultButton icon="Text-bold" title="Bold" />);
+
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("stays enabled in code view when allowInCodeView is set", () => {
+        renderInCodeView(<ToolbarDefaultButton icon="Code" title="Code view" allowInCodeView />);
+
+        expect(screen.getByRole("button")).toBeEnabled();
+    });
+
+    it("keeps an explicit disabled prop even with allowInCodeView", () => {
+        renderInCodeView(<ToolbarDefaultButton icon="Code" title="Code view" allowInCodeView disabled />);
+
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
 });
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/toolbarTypes.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/toolbarTypes.ts
@@ -70,8 +70,8 @@ export interface VideoDialogProps {
  * Props for ConfirmDialog component
  */
 export interface ConfirmDialogProps {
-    title: string;
-    message: string;
+    title?: string;
+    message?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     onConfirm: () => void;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,11 @@ $rte-shadow-color: #00000014 !default;`
`51`	`51`	`}`
`52`	`52`	`}`
`53`	`53`
	`54`	`+ .code-view-actions {`
	`55`	`+ width: 100%;`
	`56`	`+ justify-content: flex-end;`
	`57`	`+ }`
	`58`	`+`
`54`	`59`	`.toolbar-group {`
`55`	`60`	`display: flex;`
`56`	`61`	`gap: 2px;`
Original file line number	Diff line number	Diff line change
`@@ -253,7 +253,7 @@`
`253`	`253`	`}`
`254`	`254`
`255`	`255`	`.confirm-message {`
`256`		`- margin: 0 0 16px 0;`
	`256`	`+ padding: 16px;`
`257`	`257`	`font-size: 14px;`
`258`	`258`	`color: #666;`
`259`	`259`	`line-height: 1.5;`