diff --git a/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/.openspec.yaml b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/.openspec.yaml
new file mode 100644
index 0000000000..8803b473ec
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-12
diff --git a/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/design.md b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/design.md
new file mode 100644
index 0000000000..1076cbebc3
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/design.md
@@ -0,0 +1,176 @@
+## Context
+
+Rich text widget renders ordered (`<ol>`) and unordered (`<ul>`) lists using Tiptap's StarterKit extensions. Current SCSS (`RichText.scss` lines 158-162) only sets basic padding and margin:
+
+```scss
+ul,
+ol {
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+}
+```
+
+All nesting levels use browser defaults:
+
+- Ordered lists: `list-style-type: decimal` (1, 2, 3) at all levels
+- Unordered lists: `list-style-type: disc` (●) at all levels
+
+Standard word processors (Word, Google Docs, Notion) auto-cycle list styles by depth for visual hierarchy. Users coming from these tools expect similar behavior.
+
+Recent change `fix-list-tab-indent` added Tab key support for nesting lists, making this enhancement more valuable.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Auto-cycle ordered list styles: decimal → lower-alpha → lower-roman (repeat)
+- Auto-cycle unordered list styles: disc → circle → square (repeat)
+- CSS-only implementation (zero JavaScript)
+- Preserve inline style overrides (user-set `style="list-style-type: ..."`)
+- Support 6+ nesting levels
+
+**Non-Goals:**
+
+- User controls for changing list style (Phase 2 scope)
+- Toolbar UI changes
+- Extending Tiptap list extensions
+- Data model changes (no new attributes)
+- RTL-specific list markers
+
+## Decisions
+
+### Decision 1: Pure CSS nested selectors
+
+**Choice**: Use CSS descendant combinators (`ol ol { ... }`) to target nested lists.
+
+**Rationale**:
+
+- Zero JavaScript overhead
+- Standard CSS, widely supported
+- Works immediately with existing HTML structure
+- No Tiptap extension modifications needed
+- Inline styles naturally override via CSS specificity
+
+**Alternatives considered**:
+
+- Data attributes (`data-list-level="2"`) → Requires Tiptap extension to inject attributes, adds complexity
+- JavaScript depth calculation → Performance overhead, unnecessary for static styling
+- CSS `:nth-child()` or counters → Incorrect semantic (targets item position, not nesting depth)
+
+### Decision 2: Cycle sequence matches Word
+
+**Choice**:
+
+- Ordered: decimal (1, 2, 3) → lower-alpha (a, b, c) → lower-roman (i, ii, iii)
+- Unordered: disc (●) → circle (○) → square (■)
+
+**Rationale**:
+
+- Industry standard (Microsoft Word, Google Docs use same sequence)
+- User familiarity reduces cognitive load
+- Lower-case styles preferred for nested content (less visual weight than uppercase)
+
+**Alternatives considered**:
+
+- Upper-case roman/alpha at level 1 → Too visually heavy for running text
+- Custom sequence → No benefit, breaks user expectations
+
+### Decision 3: Define 6 nesting levels explicitly
+
+**Choice**: Write CSS rules for 6 levels of nesting (2 full cycles).
+
+**Rationale**:
+
+- Covers 95%+ of real-world use cases
+- Cost is ~30 lines of CSS (cheap)
+- Deeper nesting (7+) falls back to browser defaults (acceptable edge case)
+
+**Alternatives considered**:
+
+- 3 levels only → Breaks at 4th level (incomplete cycle)
+- 9 levels → Unnecessary (deeply nested lists are rare, unreadable)
+- Infinite via preprocessor loops → Adds build complexity for marginal gain
+
+### Decision 4: Preserve inline style precedence
+
+**Choice**: CSS specificity naturally prioritizes inline styles. No `!important` needed for base rules.
+
+**Rationale**:
+
+- Users who manually set `style="list-style-type: upper-roman;"` keep their choice
+- Supports future Phase 2 (user overrides via toolbar)
+- Standard CSS behavior, no surprises
+
+**CSS specificity**:
+
+- Inline style: 1000 points (highest)
+- `ol ol ol`: 3 points
+- Inline wins automatically
+
+## Risks / Trade-offs
+
+**[Risk]** Users with existing nested lists see visual change after upgrade → **Mitigation**: Document in CHANGELOG as enhancement. Not breaking (only affects appearance, not functionality).
+
+**[Risk]** Deeply nested lists (7+ levels) don't cycle correctly → **Mitigation**: Define extra levels if needed (cheap). Fallback to browser default (decimal/disc) is acceptable.
+
+**[Risk]** User expectations from non-Word apps → **Mitigation**: Word/Google Docs are dominant, setting de facto standard. Other tools vary, but decimal→alpha→roman is most common.
+
+**[Trade-off]** No per-list customization in Phase 1 → Accepted. Phase 2 adds toolbar controls for manual override.
+
+**[Trade-off]** CSS file size increases ~40 lines → Negligible (gzipped impact <0.5KB).
+
+## Implementation
+
+**File modified**: `packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss`
+
+**Change location**: Lines 158-162 (existing `ul, ol` rules)
+
+**Strategy**: Replace simple `ul, ol` selector with nested rules:
+
+```scss
+// Ordered list auto-cycling (6 levels = 2 full cycles)
+ol {
+    list-style-type: decimal;
+    ol {
+        list-style-type: lower-alpha;
+        ol {
+            list-style-type: lower-roman;
+            ol {
+                list-style-type: decimal; // Cycle repeats
+                ol {
+                    list-style-type: lower-alpha;
+                    ol {
+                        list-style-type: lower-roman;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Unordered list auto-cycling (6 levels = 2 full cycles)
+ul {
+    list-style-type: disc;
+    ul {
+        list-style-type: circle;
+        ul {
+            list-style-type: square;
+            ul {
+                list-style-type: disc; // Cycle repeats
+                ul {
+                    list-style-type: circle;
+                    ul {
+                        list-style-type: square;
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+Keep existing padding/margin rules intact.
+
+## Open Questions
+
+None. Design is complete and straightforward.
diff --git a/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/proposal.md b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/proposal.md
new file mode 100644
index 0000000000..1d9e132d06
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/proposal.md
@@ -0,0 +1,48 @@
+## Why
+
+Nested lists in rich text widget currently use same numbering style at all levels (1, 2, 3 everywhere). Standard word processors (Word, Google Docs) automatically cycle through different styles for visual hierarchy (decimal → lower-alpha → lower-roman). This improves readability of complex nested lists.
+
+## What Changes
+
+- Ordered lists (`<ol>`) will auto-cycle numbering styles based on nesting depth:
+    - Level 1: decimal (1, 2, 3)
+    - Level 2: lower-alpha (a, b, c)
+    - Level 3: lower-roman (i, ii, iii)
+    - Level 4+: cycle repeats (decimal → lower-alpha → lower-roman)
+- Unordered lists (`<ul>`) will auto-cycle bullet styles based on nesting depth:
+    - Level 1: disc (●)
+    - Level 2: circle (○)
+    - Level 3: square (■)
+    - Level 4+: cycle repeats (disc → circle → square)
+- CSS-only implementation (no JavaScript changes)
+- No toolbar changes or user override controls (Phase 1 scope)
+
+## Capabilities
+
+### New Capabilities
+
+- `list-style-auto-cycle`: Nested ordered and unordered lists automatically cycle through numbering/bullet styles based on depth
+
+### Modified Capabilities
+
+<!-- No existing spec requirements changing - this is pure visual enhancement -->
+
+## Impact
+
+**Files affected**:
+
+- `packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss` — Add nested selector rules for `ol` and `ul`
+
+**User-facing changes**:
+
+- Nested lists will display different numbering/bullet styles automatically
+- Matches standard word processor behavior
+- Existing lists with manual `style="list-style-type: ..."` inline styles unchanged (inline styles override CSS)
+- No breaking changes — pure visual enhancement
+
+**Testing scope**:
+
+- Visual verification of 6 nesting levels for ordered lists
+- Visual verification of 4 nesting levels for unordered lists
+- Mixed list types (ordered inside unordered, vice versa)
+- Task lists (`ul[data-type="taskList"]`) should remain unaffected
diff --git a/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/specs/list-style-auto-cycle/spec.md b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/specs/list-style-auto-cycle/spec.md
new file mode 100644
index 0000000000..2cf6cdef03
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/specs/list-style-auto-cycle/spec.md
@@ -0,0 +1,96 @@
+## ADDED Requirements
+
+### Requirement: Ordered lists cycle through numbering styles by nesting depth
+
+Ordered lists (`<ol>`) SHALL automatically cycle through numbering styles based on nesting level using CSS descendant selectors.
+
+#### Scenario: Level 1 ordered list uses decimal
+
+- **WHEN** an ordered list is at the top level (not nested)
+- **THEN** list items display with decimal numbering (1, 2, 3)
+
+#### Scenario: Level 2 ordered list uses lower-alpha
+
+- **WHEN** an ordered list is nested one level deep inside another ordered list
+- **THEN** list items display with lower-alpha numbering (a, b, c)
+
+#### Scenario: Level 3 ordered list uses lower-roman
+
+- **WHEN** an ordered list is nested two levels deep
+- **THEN** list items display with lower-roman numbering (i, ii, iii)
+
+#### Scenario: Level 4 ordered list cycles back to decimal
+
+- **WHEN** an ordered list is nested three levels deep
+- **THEN** list items display with decimal numbering (1, 2, 3)
+
+#### Scenario: Level 5 ordered list cycles to lower-alpha
+
+- **WHEN** an ordered list is nested four levels deep
+- **THEN** list items display with lower-alpha numbering (a, b, c)
+
+#### Scenario: Level 6 ordered list cycles to lower-roman
+
+- **WHEN** an ordered list is nested five levels deep
+- **THEN** list items display with lower-roman numbering (i, ii, iii)
+
+### Requirement: Unordered lists cycle through bullet styles by nesting depth
+
+Unordered lists (`<ul>`) SHALL automatically cycle through bullet styles based on nesting level using CSS descendant selectors.
+
+#### Scenario: Level 1 unordered list uses disc
+
+- **WHEN** an unordered list is at the top level (not nested)
+- **THEN** list items display with disc bullets (●)
+
+#### Scenario: Level 2 unordered list uses circle
+
+- **WHEN** an unordered list is nested one level deep inside another unordered list
+- **THEN** list items display with circle bullets (○)
+
+#### Scenario: Level 3 unordered list uses square
+
+- **WHEN** an unordered list is nested two levels deep
+- **THEN** list items display with square bullets (■)
+
+#### Scenario: Level 4 unordered list cycles back to disc
+
+- **WHEN** an unordered list is nested three levels deep
+- **THEN** list items display with disc bullets (●)
+
+### Requirement: Inline styles override CSS defaults
+
+When a list element has an inline `style="list-style-type: ..."` attribute, that style SHALL take precedence over CSS auto-cycle rules.
+
+#### Scenario: Manually styled list preserves inline style
+
+- **WHEN** an ordered list has `style="list-style-type: upper-roman;"`
+- **THEN** list displays with upper-roman (I, II, III) regardless of nesting depth
+
+#### Scenario: Nested list without inline style uses auto-cycle
+
+- **WHEN** parent list has inline style but nested child list has no inline style
+- **THEN** child list uses CSS auto-cycle rules based on its depth
+
+### Requirement: Task lists remain unstyled
+
+Task lists with `data-type="taskList"` SHALL remain unstyled with `list-style: none`, unaffected by auto-cycle rules.
+
+#### Scenario: Task list ignores auto-cycle
+
+- **WHEN** a list has `data-type="taskList"` attribute
+- **THEN** list displays with no bullet/number markers (checkboxes only)
+
+### Requirement: Mixed list types cycle independently
+
+When ordered and unordered lists are mixed (e.g., `<ul>` inside `<ol>`), each list type SHALL follow its own cycle sequence.
+
+#### Scenario: Ordered list inside unordered list starts at decimal
+
+- **WHEN** an `<ol>` is nested inside a `<ul>`
+- **THEN** ordered list uses decimal (1, 2, 3) regardless of parent's depth
+
+#### Scenario: Unordered list inside ordered list starts at disc
+
+- **WHEN** a `<ul>` is nested inside an `<ol>`
+- **THEN** unordered list uses disc (●) regardless of parent's depth
diff --git a/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/tasks.md b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/tasks.md
new file mode 100644
index 0000000000..89ed5d5756
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-auto-cycle-list-styles/tasks.md
@@ -0,0 +1,17 @@
+## 1. Update SCSS for list style cycling
+
+- [x] 1.1 Add nested selector rules for ordered lists (ol) with 6 levels: decimal → lower-alpha → lower-roman → decimal → lower-alpha → lower-roman
+- [x] 1.2 Add nested selector rules for unordered lists (ul) with 6 levels: disc → circle → square → disc → circle → square
+- [x] 1.3 Preserve existing padding-left and margin rules for ul/ol
+
+## 2. Manual testing
+
+- [x] 2.1 Test ordered list nesting: verify 6 levels show correct cycle (1 → a → i → 1 → a → i)
+- [x] 2.2 Test unordered list nesting: verify 4 levels show correct cycle (● → ○ → ■ → ●)
+- [x] 2.3 Test mixed list types: ordered inside unordered starts at decimal, unordered inside ordered starts at disc
+- [x] 2.4 Test inline style override: list with style="list-style-type: upper-roman;" displays upper-roman at any depth
+- [x] 2.5 Test task lists remain unaffected: ul[data-type="taskList"] shows no bullets/numbers
+
+## 3. Documentation
+
+- [x] 3.1 Add entry to CHANGELOG.md describing auto-cycle enhancement
diff --git a/openspec/changes/archive/2026-07-12-fix-list-tab-indent/.openspec.yaml b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/.openspec.yaml
new file mode 100644
index 0000000000..eb5fa80e61
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-10
diff --git a/openspec/changes/archive/2026-07-12-fix-list-tab-indent/design.md b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/design.md
new file mode 100644
index 0000000000..420b25f323
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/design.md
@@ -0,0 +1,109 @@
+## Context
+
+Rich text widget uses Tiptap editor with custom `Indent` extension (`src/extensions/Indent.ts`). Current implementation:
+
+- Targets `["paragraph", "heading", "blockquote"]` node types
+- Tab handler intercepts Tab key when focus is inside editor
+- Calls `increaseIndent()`/`decreaseIndent()` commands
+- Applies margin-based indentation via `margin-left` style or `indent-*` class
+
+Tiptap's StarterKit includes list extensions with built-in commands:
+
+- `sinkListItem(typeOrName)` — increases list nesting (wraps in sublist)
+- `liftListItem(typeOrName)` — decreases list nesting
+- `listItem` node type for both ordered and unordered lists
+
+Problem: Tab handler doesn't detect list item context, applies margin-based indent to paragraph inside list item instead of structural nesting.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Tab/Shift+Tab nest/unnest list items structurally
+- Preserve existing Tab behavior for paragraphs, headings, blockquotes
+- Maintain focus handling (only intercept Tab inside editor content)
+- Work for both ordered and unordered lists
+
+**Non-Goals:**
+
+- Modifying toolbar indent buttons behavior (still call `increaseIndent`/`decreaseIndent`)
+- Adding list item support to `updateIndentLevel()` function
+- Changing maximum nesting depth limits
+- Supporting mixed content selection (list + paragraph)
+
+## Decisions
+
+### Decision 1: Modify Tab handler, not indent commands
+
+**Choice**: Add list detection to `handleKeyDown` in `addProseMirrorPlugins()`, call Tiptap's built-in list commands directly.
+
+**Rationale**:
+
+- Simplest change — Tab handler already exists and checks focus
+- Avoids modifying `increaseIndent()`/`decreaseIndent()` commands
+- Toolbar buttons unchanged (acceptable limitation for v1)
+- Leverages Tiptap's proven list nesting logic
+
+**Alternatives considered**:
+
+- Add `listItem` to `types` array and implement list logic in `updateIndentLevel()` → More complex, mixes structural changes with style changes, would affect toolbar buttons (out of scope)
+- Create separate list indent commands → Unnecessary duplication of Tiptap functionality
+
+### Decision 2: Use editor.isActive('listItem') for detection
+
+**Choice**: Check `editor.isActive('listItem')` to determine if cursor is in list.
+
+**Rationale**:
+
+- Standard Tiptap API for node detection
+- Works regardless of cursor position within list item
+- Single check covers both ordered and unordered lists
+
+**Alternatives considered**:
+
+- Check node type directly via ProseMirror state → More verbose, no benefit
+- Check parent node chain → Unnecessary complexity
+
+### Decision 3: Single typeOrName parameter 'listItem'
+
+**Choice**: Pass `'listItem'` to `sinkListItem()` and `liftListItem()` commands.
+
+**Rationale**:
+
+- `listItem` is the node type for both ordered and unordered lists in Tiptap
+- Commands handle list type conversion automatically
+- Simpler than checking `bulletList` vs `orderedList`
+
+**Alternatives considered**:
+
+- Detect list type and pass `bulletList` or `orderedList` → Unnecessary, commands work on `listItem` directly
+
+### Decision 4: Short-circuit return when in list
+
+**Choice**: When `isActive('listItem')` returns true, call list command and return result immediately (don't fall through to indent commands).
+
+**Rationale**:
+
+- List and paragraph indent are mutually exclusive behaviors
+- Prevents calling both list command and indent command
+- Clear control flow
+
+## Risks / Trade-offs
+
+**[Risk]** Toolbar indent buttons won't work on lists → **Mitigation**: Acceptable for v1, document as known limitation. Can be addressed in future by extending indent commands.
+
+**[Risk]** User muscle memory for existing Tab behavior in lists → **Mitigation**: New behavior matches industry standard (Google Docs, Word, Notion). Empty paragraph below list can still be indented.
+
+**[Risk]** Selection spanning multiple list items may behave unexpectedly → **Mitigation**: Tiptap's `sinkListItem`/`liftListItem` handle ranges. If issues arise, can add selection check.
+
+**[Trade-off]** Two separate indent systems (structure-based for lists, margin-based for paragraphs) → Accepted trade-off for simplicity. Unifying would require significant refactor.
+
+## Implementation Plan
+
+1. Modify `handleKeyDown` in `Indent.ts` `addProseMirrorPlugins()` section
+2. After Tab key check, before focus check, add list detection
+3. If `editor.isActive('listItem')`, call `sinkListItem('listItem')` or `liftListItem('listItem')`
+4. Return result immediately (don't fall through)
+5. Existing logic remains for non-list content
+
+Code location: `packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts`, lines 125-153 (handleKeyDown function).
diff --git a/openspec/changes/archive/2026-07-12-fix-list-tab-indent/proposal.md b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/proposal.md
new file mode 100644
index 0000000000..9e02a67b28
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/proposal.md
@@ -0,0 +1,38 @@
+## Why
+
+Rich text widget users cannot nest list items using Tab key. When cursor is in ordered/unordered list and Tab is pressed, content inside list item gets indented (margin added to paragraph) instead of nesting the list item structurally. Expected behavior: Tab should increase list nesting level (convert flat list to nested sublists).
+
+## What Changes
+
+- Tab key in list items will nest the list item structurally (using Tiptap's `sinkListItem` command)
+- Shift+Tab in list items will outdent/lift the list item (using Tiptap's `liftListItem` command)
+- Tab key in non-list content (paragraphs, headings) continues to work as before (margin-based indentation)
+- Toolbar indent buttons unchanged (still call `increaseIndent`/`decreaseIndent` commands)
+
+## Capabilities
+
+### New Capabilities
+
+- `list-tab-indent`: Tab/Shift+Tab keys nest and unnest list items in ordered and unordered lists
+
+### Modified Capabilities
+
+<!-- No existing spec requirements changing - this is new keyboard behavior only -->
+
+## Impact
+
+**Files affected**:
+
+- `packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts` — Tab handler logic modified
+
+**User-facing changes**:
+
+- Tab key behavior in lists now matches standard rich text editor expectations (Google Docs, Word, Notion)
+- No breaking changes — adds missing functionality
+
+**Testing scope**:
+
+- Keyboard navigation in ordered lists
+- Keyboard navigation in unordered lists
+- Mixed list types (switching between ordered/unordered)
+- Tab key in non-list content (should not regress)
diff --git a/openspec/changes/archive/2026-07-12-fix-list-tab-indent/specs/list-tab-indent/spec.md b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/specs/list-tab-indent/spec.md
new file mode 100644
index 0000000000..92e1fbdddd
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/specs/list-tab-indent/spec.md
@@ -0,0 +1,77 @@
+## ADDED Requirements
+
+### Requirement: Tab key increases list item nesting
+
+When cursor is inside a list item (ordered or unordered), pressing Tab key SHALL nest the list item one level deeper by calling Tiptap's `sinkListItem` command.
+
+#### Scenario: Tab in ordered list item
+
+- **WHEN** cursor is in an ordered list item and user presses Tab
+- **THEN** list item is nested one level deeper (becomes a sublist)
+
+#### Scenario: Tab in unordered list item
+
+- **WHEN** cursor is in an unordered list item and user presses Tab
+- **THEN** list item is nested one level deeper (becomes a sublist)
+
+#### Scenario: Tab in nested list item
+
+- **WHEN** cursor is in an already-nested list item and user presses Tab
+- **THEN** list item is nested one additional level deeper
+
+#### Scenario: Tab with cursor at any position in list line
+
+- **WHEN** cursor is anywhere in the list item text (start, middle, end) and user presses Tab
+- **THEN** entire list item is nested (not just the text)
+
+### Requirement: Shift+Tab decreases list item nesting
+
+When cursor is inside a nested list item, pressing Shift+Tab SHALL lift the list item one level up by calling Tiptap's `liftListItem` command.
+
+#### Scenario: Shift+Tab in nested ordered list
+
+- **WHEN** cursor is in a nested ordered list item and user presses Shift+Tab
+- **THEN** list item is lifted one level up (reduced nesting)
+
+#### Scenario: Shift+Tab in nested unordered list
+
+- **WHEN** cursor is in a nested unordered list item and user presses Shift+Tab
+- **THEN** list item is lifted one level up (reduced nesting)
+
+#### Scenario: Shift+Tab at top level has no effect
+
+- **WHEN** cursor is in a top-level list item (not nested) and user presses Shift+Tab
+- **THEN** no change occurs (cannot lift beyond list boundary)
+
+### Requirement: Tab in non-list content uses existing indent behavior
+
+When cursor is in paragraph, heading, or blockquote (non-list content), pressing Tab SHALL apply margin-based indentation as before.
+
+#### Scenario: Tab in paragraph
+
+- **WHEN** cursor is in a paragraph and user presses Tab
+- **THEN** paragraph receives increased margin-left indentation
+
+#### Scenario: Tab in heading
+
+- **WHEN** cursor is in a heading and user presses Tab
+- **THEN** heading receives increased margin-left indentation
+
+#### Scenario: Tab in blockquote
+
+- **WHEN** cursor is in a blockquote and user presses Tab
+- **THEN** blockquote receives increased margin-left indentation
+
+### Requirement: Tab only captures when focus is inside editor content
+
+Tab key SHALL only be intercepted for indentation when document focus is inside the editor content area, not when focus is on toolbar buttons or other UI elements.
+
+#### Scenario: Tab on toolbar button
+
+- **WHEN** focus is on a toolbar button and user presses Tab
+- **THEN** focus moves to next focusable element (standard browser Tab behavior)
+
+#### Scenario: Tab in editor content
+
+- **WHEN** focus is inside editor content area and user presses Tab
+- **THEN** Tab is intercepted for indentation (does not move focus)
diff --git a/openspec/changes/archive/2026-07-12-fix-list-tab-indent/tasks.md b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/tasks.md
new file mode 100644
index 0000000000..8134f7d6b8
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-fix-list-tab-indent/tasks.md
@@ -0,0 +1,22 @@
+## 1. Modify Tab handler in Indent extension
+
+- [x] 1.1 Add list item detection in handleKeyDown (check `editor.isActive('listItem')`)
+- [x] 1.2 When in list item and Shift+Tab pressed, call `editor.commands.liftListItem('listItem')` and return result
+- [x] 1.3 When in list item and Tab pressed, call `editor.commands.sinkListItem('listItem')` and return result
+- [x] 1.4 Ensure existing non-list Tab behavior preserved (paragraphs, headings, blockquotes)
+
+## 2. Manual testing
+
+- [x] 2.1 Test Tab in ordered list (1, 2, 3) creates nested sublist
+- [x] 2.2 Test Tab in unordered list (bullets) creates nested sublist
+- [x] 2.3 Test Shift+Tab in nested list item lifts it one level
+- [x] 2.4 Test Shift+Tab at top-level list item has no effect
+- [x] 2.5 Test Tab with cursor at start, middle, and end of list line
+- [x] 2.6 Test Tab in paragraph still applies margin indentation
+- [x] 2.7 Test Tab on toolbar button moves focus (not intercepted)
+- [x] 2.8 Test multiple Tab presses nest multiple levels
+- [x] 2.9 Test switching between ordered and unordered lists preserves nesting
+
+## 3. Documentation
+
+- [x] 3.1 Add entry to CHANGELOG.md describing new Tab behavior in lists
diff --git a/openspec/changes/archive/2026-07-12-manual-list-style-override/.openspec.yaml b/openspec/changes/archive/2026-07-12-manual-list-style-override/.openspec.yaml
new file mode 100644
index 0000000000..8803b473ec
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-manual-list-style-override/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-12
diff --git a/openspec/changes/archive/2026-07-12-manual-list-style-override/design.md b/openspec/changes/archive/2026-07-12-manual-list-style-override/design.md
new file mode 100644
index 0000000000..f7507e65de
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-manual-list-style-override/design.md
@@ -0,0 +1,250 @@
+## Context
+
+Rich text widget uses Tiptap editor with StarterKit's `OrderedList` extension. Recent Phase 1 (`auto-cycle-list-styles`) added CSS-based automatic style cycling:
+
+- Level 1: decimal → Level 2: lower-alpha → Level 3: lower-roman (repeats)
+
+Current limitations:
+
+- No way for users to manually override list style
+- All top-level lists must be decimal
+- Cannot start document with lower-alpha or lower-roman lists
+
+Widget supports two output modes via `styleDataFormat` prop:
+
+- `inline`: Outputs `style="..."` attributes
+- `class`: Outputs `data-*` attributes + CSS classes (CSP-compliant)
+
+Existing toolbar has "Numbered List" button (toggles ordered list on/off, no style control).
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Add toolbar dropdown for manual list style selection (lower-alpha, lower-roman, decimal)
+- Store style choice in `listStyleType` attribute on `<ol>` element
+- Support both inline and class-based output modes
+- Cycle offset behavior — manual styles continue cycle for nested children
+- Dropdown visible only when cursor in ordered list
+- Convert entire `<ol>` when style selected
+
+**Non-Goals:**
+
+- Upper-alpha / upper-roman styles (future Phase 3)
+- Unordered list style overrides (disc/circle/square remain auto-only)
+- Per-item styling (apply per `<li>` instead of per `<ol>`)
+- Split-button UI (icon + chevron in single button)
+- Keyboard shortcuts for style cycling
+- Preview of styles before selection
+
+## Decisions
+
+### Decision 1: Extend OrderedList vs create wrapper
+
+**Choice**: Create `OrderedListStyled` that extends Tiptap's `OrderedList`, add `listStyleType` attribute.
+
+**Rationale**:
+
+- Inherits all existing functionality (toggle, keyboard shortcuts, paste handling)
+- Adds single attribute without duplicating logic
+- Standard Tiptap extension pattern
+- Easy to maintain when StarterKit updates
+
+**Alternatives considered**:
+
+- Wrap OrderedList in higher-order component → More complex, loses access to extension internals
+- Modify StarterKit directly → Breaks future updates, not maintainable
+
+### Decision 2: Separate dropdown button vs split button
+
+**Choice**: Add new dropdown button "Numbering Style" next to existing "Numbered List" button. Dropdown only visible when in ordered list (`canExecute` check).
+
+**Rationale**:
+
+- Uses existing `action: "dropdown"` pattern (matches font family, font size)
+- Simpler implementation (no new component needed)
+- Better accessibility (single focus target per button)
+- Conditional visibility keeps toolbar clean when not applicable
+
+**Alternatives considered**:
+
+- Split button (icon | chevron) → Requires new component, harder accessibility, complex focus management
+- Always-visible dropdown → Clutters toolbar, confusing when not in list
+
+### Decision 3: Cycle offset for nested lists
+
+**Choice**: Manual `listStyleType` acts as "cycle position marker". Children without attribute continue cycle from that position.
+
+Example:
+
+- Parent has `listStyleType="lower-alpha"` (position 2) → children start at lower-roman (position 3)
+- Parent has `listStyleType="lower-roman"` (position 3) → children start at decimal (position 4)
+
+**CSS Implementation**:
+
+```scss
+ol[data-list-style="lower-alpha"] {
+    list-style-type: lower-alpha !important;
+
+    > li > ol:not([data-list-style]) {
+        list-style-type: lower-roman; // Continue from position 3
+    }
+}
+```
+
+**Rationale**:
+
+- Intuitive for users — "a, b, c" nests to "i, ii, iii"
+- Consistent with auto-cycle mental model
+- Predictable across nesting depths
+
+**Alternatives considered**:
+
+- Reset children to decimal → Breaks visual hierarchy, confusing
+- All children inherit same style → No nesting distinction, defeats purpose
+- No cycle offset (children use auto-cycle from level 1) → "a" → "1" → weird jump
+
+### Decision 4: Dropdown options
+
+**Choice**: 3 options:
+
+1. "1, 2, 3" (decimal) — removes attribute, uses auto-cycle
+2. "a, b, c" (lower-alpha) — sets `listStyleType="lower-alpha"`
+3. "i, ii, iii" (lower-roman) — sets `listStyleType="lower-roman"`
+
+Option 1 acts as "reset to auto" (removes attribute).
+
+**Rationale**:
+
+- Covers 95% of use cases (legal docs, formal outlines)
+- Keeps UI simple (3 choices, not overwhelming)
+- Decimal option allows intentional override (force decimal at level 2+)
+
+**Alternatives considered**:
+
+- 5 options (add upper-alpha, upper-roman) → Too many, clutters dropdown, rare use case
+- 2 options (only lower-alpha, lower-roman) → No way to reset to auto-cycle
+- No decimal option → Can't intentionally set decimal at non-top levels
+
+### Decision 5: Attribute storage format
+
+**Choice**: Use `listStyleType` attribute name (matches CSS property). Output format depends on `styleDataFormat`:
+
+- **Inline mode**: `<ol style="list-style-type: lower-alpha;">`
+- **Class mode**: `<ol data-list-style="lower-alpha" class="list-style-lower-alpha">`
+
+**parseHTML** accepts both formats (backward compat).
+
+**Rationale**:
+
+- Inline mode: Direct CSS, works immediately without stylesheet changes
+- Class mode: CSP-compliant, separates content from presentation
+- Dual parsing supports mixed content (e.g., pasted from other editors)
+
+**Alternatives considered**:
+
+- Always use inline style → Fails strict CSP policies
+- Always use class → Harder debugging, requires CSS class definitions
+- Custom attribute name (`data-mx-list-style`) → Diverges from web standards
+
+## Risks / Trade-offs
+
+**[Risk]** Users create lower-alpha at top level, expect children to be lower-roman, get decimal instead → **Mitigation**: Cycle offset CSS ensures lower-alpha (pos 2) → lower-roman (pos 3). Only issue if user expects "b" → "ii" (which would be wrong).
+
+**[Risk]** CSS specificity conflicts with existing auto-cycle rules → **Mitigation**: Use `!important` on manual overrides (`ol[data-list-style]` rules). Specificity: attribute selector (11 points) beats nested selectors (3 points).
+
+**[Risk]** Copy-paste from Word might have incompatible `list-style-type` values → **Mitigation**: `parseHTML` filters to allowed values (decimal, lower-alpha, lower-roman). Unknown values ignored, fall back to auto-cycle.
+
+**[Risk]** Users forget they set manual style, confused why nesting behaves differently → **Mitigation**: Dropdown checkmark shows current style. Decimal option allows reset.
+
+**[Trade-off]** Adding `OrderedListStyled` increases bundle size (~2KB) → Acceptable for functionality gain.
+
+**[Trade-off]** Toolbar gets more crowded with new dropdown → Mitigated by conditional visibility (only shows when in ordered list).
+
+**[Trade-off]** Two buttons for ordered lists ("Numbered List" + "Numbering Style") might confuse users → Acceptable, matches other dual-button patterns (e.g., "Bold" + "Font Family").
+
+## Implementation
+
+### Component Architecture
+
+```
+Editor.tsx
+  ├─ StarterKit (without OrderedList)
+  ├─ OrderedListStyled (replaces OrderedList)
+  │    ├─ Inherits: toggle, keyboard, paste
+  │    ├─ Adds: listStyleType attribute
+  │    ├─ Commands: setOrderedListStyle()
+  │    └─ parseHTML/renderHTML: dual-mode support
+  └─ Other extensions...
+
+ToolbarConfig.ts
+  ├─ orderedList button (existing)
+  └─ orderedListStyle dropdown (NEW)
+       ├─ canExecute: editor.isActive('orderedList')
+       ├─ getCurrentValue: reads listStyleType attribute
+       └─ dropdownOptions: decimal/lower-alpha/lower-roman
+```
+
+### Data Flow
+
+1. User clicks dropdown option "a, b, c"
+2. Calls `editor.commands.setOrderedListStyle('lower-alpha')`
+3. Command uses `updateAttributes('orderedList', { listStyleType: 'lower-alpha' })`
+4. `renderHTML` hook outputs:
+    - Inline mode: `<ol style="list-style-type: lower-alpha;">`
+    - Class mode: `<ol data-list-style="lower-alpha" class="list-style-lower-alpha">`
+5. CSS rule `ol[data-list-style="lower-alpha"]` applies `list-style-type: lower-alpha !important`
+6. Nested children match `ol[data-list-style="lower-alpha"] > li > ol:not([data-list-style])` → get `list-style-type: lower-roman`
+
+### CSS Structure
+
+```scss
+// Base auto-cycle rules (existing, from Phase 1)
+ol {
+    list-style-type: decimal;
+}
+ol ol {
+    list-style-type: lower-alpha;
+}
+ol ol ol {
+    list-style-type: lower-roman;
+}
+
+// Manual override rules (NEW)
+ol[data-list-style="lower-alpha"] {
+    list-style-type: lower-alpha !important;
+
+    > li > ol:not([data-list-style]) {
+        list-style-type: lower-roman; // Cycle offset
+        > li > ol:not([data-list-style]) {
+            list-style-type: decimal;
+        }
+    }
+}
+
+ol[data-list-style="lower-roman"] {
+    list-style-type: lower-roman !important;
+
+    > li > ol:not([data-list-style]) {
+        list-style-type: decimal; // Cycle offset
+        > li > ol:not([data-list-style]) {
+            list-style-type: lower-alpha;
+        }
+    }
+}
+
+// Class mode classes (NEW)
+.list-style-lower-alpha {
+    list-style-type: lower-alpha !important;
+}
+.list-style-lower-roman {
+    list-style-type: lower-roman !important;
+}
+.list-style-decimal {
+    list-style-type: decimal !important;
+}
+```
+
+## Open Questions
+
+None. Design is complete and validated through exploration phase.
diff --git a/openspec/changes/archive/2026-07-12-manual-list-style-override/proposal.md b/openspec/changes/archive/2026-07-12-manual-list-style-override/proposal.md
new file mode 100644
index 0000000000..2268e9c311
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-manual-list-style-override/proposal.md
@@ -0,0 +1,60 @@
+## Why
+
+Phase 1 auto-cycle provides good defaults, but users sometimes need specific numbering styles for documents with formal conventions (legal docs use lower-roman, outlines use lower-alpha at specific levels). Adding manual override gives users control while preserving automatic cycling where not overridden.
+
+## What Changes
+
+- New `OrderedListStyled` Tiptap extension replaces default `OrderedList` from StarterKit
+    - Adds `listStyleType` attribute to store manual style choice (lower-alpha, lower-roman, or null for auto-cycle)
+    - Supports both inline (`style="list-style-type: ..."`) and class-based (`data-list-style="..."` + class) modes for CSP compliance
+- New toolbar dropdown button "Numbering Style" visible only when cursor is in ordered list
+    - 3 options: "1, 2, 3" (decimal/auto-cycle), "a, b, c" (lower-alpha), "i, ii, iii" (lower-roman)
+    - Checkmark shows current style
+    - Selecting option converts entire `<ol>` to that style
+- CSS cycle offset behavior: manually styled lists continue cycle from their position
+    - lower-alpha (level 2 in cycle) → children start at lower-roman (level 3)
+    - lower-roman (level 3 in cycle) → children start at decimal (level 4)
+    - Selecting decimal removes override, reverts to auto-cycle
+- Regular "Numbered List" button unchanged — creates decimal list with no attribute (uses auto-cycle)
+
+## Capabilities
+
+### New Capabilities
+
+- `manual-list-style`: Users can manually override ordered list numbering style via toolbar dropdown (lower-alpha and lower-roman)
+
+### Modified Capabilities
+
+<!-- No existing spec requirements changing - this extends auto-cycle behavior -->
+
+## Impact
+
+**Files affected**:
+
+- `packages/pluggableWidgets/rich-text-web/src/extensions/OrderedListStyled.ts` — NEW extension extending OrderedList
+- `packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx` — Replace OrderedList import with OrderedListStyled
+- `packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts` — Add dropdown button config
+- `packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss` — Add CSS override rules for manual styles (~60 lines)
+
+**Dependencies**:
+
+- No new npm packages
+- Extends existing Tiptap `OrderedList` extension
+- Uses existing dropdown component pattern
+
+**User-facing changes**:
+
+- New toolbar button appears when in ordered list
+- Users can create/convert lists to lower-alpha or lower-roman styles
+- Manual styles persist in HTML as `data-list-style` attribute (class mode) or inline style
+- Backward compatible — existing lists without attribute use auto-cycle
+
+**Testing scope**:
+
+- Create list with manual style from dropdown
+- Convert existing decimal list to lower-alpha/lower-roman
+- Verify cycle offset (nested children continue from parent's position)
+- Dropdown state (checkmark on active style)
+- Class vs inline mode output
+- Copy-paste preserves manual style
+- Inline style overrides (user-edited HTML)
diff --git a/openspec/changes/archive/2026-07-12-manual-list-style-override/specs/manual-list-style/spec.md b/openspec/changes/archive/2026-07-12-manual-list-style-override/specs/manual-list-style/spec.md
new file mode 100644
index 0000000000..6ce7af6219
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-manual-list-style-override/specs/manual-list-style/spec.md
@@ -0,0 +1,129 @@
+## ADDED Requirements
+
+### Requirement: Users can manually set ordered list style via toolbar dropdown
+
+When cursor is in an ordered list, a toolbar dropdown SHALL appear with options to set the list's numbering style to decimal (auto-cycle), lower-alpha, or lower-roman.
+
+#### Scenario: Dropdown visible when in ordered list
+
+- **WHEN** cursor is inside an ordered list
+- **THEN** "Numbering Style" dropdown button is visible in toolbar
+
+#### Scenario: Dropdown hidden when not in ordered list
+
+- **WHEN** cursor is in paragraph, unordered list, or task list
+- **THEN** "Numbering Style" dropdown button is hidden
+
+#### Scenario: Dropdown shows three style options
+
+- **WHEN** user clicks "Numbering Style" dropdown
+- **THEN** dropdown displays options: "1, 2, 3" (decimal), "a, b, c" (lower-alpha), "i, ii, iii" (lower-roman)
+
+#### Scenario: Dropdown shows checkmark on current style
+
+- **WHEN** ordered list has no `listStyleType` attribute
+- **THEN** dropdown shows checkmark next to "1, 2, 3" (decimal/auto-cycle default)
+
+#### Scenario: Dropdown shows checkmark on manual style
+
+- **WHEN** ordered list has `listStyleType="lower-alpha"` attribute
+- **THEN** dropdown shows checkmark next to "a, b, c" (lower-alpha)
+
+### Requirement: Users can convert ordered list to lower-alpha via dropdown
+
+Selecting "a, b, c" from dropdown SHALL convert entire ordered list to lower-alpha numbering style.
+
+#### Scenario: Convert decimal list to lower-alpha
+
+- **WHEN** cursor is in decimal list (1, 2, 3) and user selects "a, b, c" from dropdown
+- **THEN** entire list converts to lower-alpha numbering (a, b, c)
+
+#### Scenario: Lower-alpha attribute stored in HTML
+
+- **WHEN** list is converted to lower-alpha
+- **THEN** `<ol>` element has `listStyleType="lower-alpha"` attribute stored as `data-list-style="lower-alpha"` (class mode) or inline style (inline mode)
+
+### Requirement: Users can convert ordered list to lower-roman via dropdown
+
+Selecting "i, ii, iii" from dropdown SHALL convert entire ordered list to lower-roman numbering style.
+
+#### Scenario: Convert decimal list to lower-roman
+
+- **WHEN** cursor is in decimal list (1, 2, 3) and user selects "i, ii, iii" from dropdown
+- **THEN** entire list converts to lower-roman numbering (i, ii, iii)
+
+#### Scenario: Lower-roman attribute stored in HTML
+
+- **WHEN** list is converted to lower-roman
+- **THEN** `<ol>` element has `listStyleType="lower-roman"` attribute stored as `data-list-style="lower-roman"` (class mode) or inline style (inline mode)
+
+### Requirement: Users can revert manual style to auto-cycle via dropdown
+
+Selecting "1, 2, 3" from dropdown SHALL remove manual style override and revert list to auto-cycle behavior.
+
+#### Scenario: Revert lower-alpha to auto-cycle
+
+- **WHEN** cursor is in lower-alpha list and user selects "1, 2, 3" from dropdown
+- **THEN** `listStyleType` attribute is removed and list uses auto-cycle (decimal at top level)
+
+#### Scenario: Auto-cycle applies after revert
+
+- **WHEN** manual style is removed from nested list at level 2
+- **THEN** list displays with lower-alpha (auto-cycle for level 2)
+
+### Requirement: Manual styles use cycle offset for nested lists
+
+When an ordered list has manual `listStyleType` attribute, nested children SHALL continue cycle from parent's position in sequence.
+
+#### Scenario: Lower-alpha nested children start at lower-roman
+
+- **WHEN** ordered list has `listStyleType="lower-alpha"` (cycle position 2) and contains nested ordered list without attribute
+- **THEN** nested list displays with lower-roman (cycle position 3)
+
+#### Scenario: Lower-roman nested children start at decimal
+
+- **WHEN** ordered list has `listStyleType="lower-roman"` (cycle position 3) and contains nested ordered list without attribute
+- **THEN** nested list displays with decimal (cycle position 4, cycle repeats)
+
+#### Scenario: Decimal nested children start at lower-alpha
+
+- **WHEN** ordered list has explicit `listStyleType="decimal"` (cycle position 1) and contains nested ordered list without attribute
+- **THEN** nested list displays with lower-alpha (cycle position 2)
+
+### Requirement: Manual styles support both inline and class-based modes
+
+OrderedListStyled extension SHALL output manual styles as inline `style="list-style-type: ..."` or class-based `data-list-style="..." class="list-style-..."` depending on widget configuration.
+
+#### Scenario: Inline mode outputs inline style
+
+- **WHEN** widget configured with `styleDataFormat="inline"` and list has `listStyleType="lower-alpha"`
+- **THEN** HTML output is `<ol style="list-style-type: lower-alpha;">`
+
+#### Scenario: Class mode outputs data attribute and class
+
+- **WHEN** widget configured with `styleDataFormat="class"` and list has `listStyleType="lower-alpha"`
+- **THEN** HTML output is `<ol data-list-style="lower-alpha" class="list-style-lower-alpha">`
+
+#### Scenario: Parse inline style on load
+
+- **WHEN** HTML contains `<ol style="list-style-type: lower-roman;">`
+- **THEN** extension parses and stores `listStyleType="lower-roman"` attribute
+
+#### Scenario: Parse data attribute on load
+
+- **WHEN** HTML contains `<ol data-list-style="lower-alpha">`
+- **THEN** extension parses and stores `listStyleType="lower-alpha"` attribute
+
+### Requirement: Regular numbered list button creates decimal list without attribute
+
+The existing "Numbered List" toolbar button SHALL continue creating ordered lists with no `listStyleType` attribute (uses auto-cycle).
+
+#### Scenario: Numbered list button creates decimal list
+
+- **WHEN** cursor is in paragraph and user clicks "Numbered List" button
+- **THEN** ordered list is created with decimal numbering (1, 2, 3) and no `listStyleType` attribute
+
+#### Scenario: Dropdown shows decimal as active for attribute-less list
+
+- **WHEN** ordered list has no `listStyleType` attribute
+- **THEN** dropdown displays checkmark next to "1, 2, 3" (decimal)
diff --git a/openspec/changes/archive/2026-07-12-manual-list-style-override/tasks.md b/openspec/changes/archive/2026-07-12-manual-list-style-override/tasks.md
new file mode 100644
index 0000000000..d5c3a4e146
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-manual-list-style-override/tasks.md
@@ -0,0 +1,48 @@
+## 1. Create OrderedListStyled extension
+
+- [x] 1.1 Create new file `src/extensions/OrderedListStyled.ts`
+- [x] 1.2 Extend Tiptap's OrderedList with listStyleType attribute (default: null)
+- [x] 1.3 Implement parseHTML to read from inline style or data-list-style attribute
+- [x] 1.4 Implement renderHTML to output based on styleDataFormat option (inline vs class mode)
+- [x] 1.5 Add setOrderedListStyle command that calls updateAttributes with styleType parameter
+
+## 2. Update Editor to use OrderedListStyled
+
+- [x] 2.1 Import OrderedListStyled extension in Editor.tsx
+- [x] 2.2 Configure StarterKit to disable built-in OrderedList extension
+- [x] 2.3 Add OrderedListStyled to extensions array with styleDataFormat option from props
+- [x] 2.4 Verify ordered list toggle still works (inherited behavior)
+
+## 3. Add toolbar dropdown button
+
+- [x] 3.1 Add orderedListStyle dropdown config to ToolbarConfig.ts in list group
+- [x] 3.2 Configure 3 dropdown options: "1, 2, 3" (null), "a, b, c" (lower-alpha), "i, ii, iii" (lower-roman)
+- [x] 3.3 Implement getCurrentValue function to read listStyleType from editor.getAttributes('orderedList')
+- [x] 3.4 Add canExecute check: only show when editor.isActive('orderedList')
+- [x] 3.5 Map dropdown selections to setOrderedListStyle command with correct styleType
+
+## 4. Add CSS override rules
+
+- [x] 4.1 Add manual override rule for ol[data-list-style="lower-alpha"] with cycle offset (children start at lower-roman)
+- [x] 4.2 Add manual override rule for ol[data-list-style="lower-roman"] with cycle offset (children start at decimal)
+- [x] 4.3 Add manual override rule for ol[data-list-style="decimal"] (optional, for explicit decimal at any level)
+- [x] 4.4 Add class mode CSS: .list-style-lower-alpha, .list-style-lower-roman, .list-style-decimal
+- [x] 4.5 Verify !important priority works (manual overrides beat auto-cycle rules)
+
+## 5. Manual testing
+
+- [x] 5.1 Test dropdown appears when cursor in ordered list, hidden otherwise
+- [x] 5.2 Test create lower-alpha list via dropdown, verify a, b, c numbering
+- [x] 5.3 Test create lower-roman list via dropdown, verify i, ii, iii numbering
+- [x] 5.4 Test convert decimal list to lower-alpha via dropdown
+- [x] 5.5 Test convert lower-alpha list back to decimal (revert to auto-cycle)
+- [x] 5.6 Test cycle offset: lower-alpha parent → lower-roman children → decimal grandchildren
+- [x] 5.7 Test cycle offset: lower-roman parent → decimal children → lower-alpha grandchildren
+- [x] 5.8 Test dropdown checkmark shows on correct option based on current listStyleType
+- [x] 5.9 Test inline mode outputs style="list-style-type: ..."
+- [x] 5.10 Test class mode outputs data-list-style + class
+- [x] 5.11 Test copy-paste preserves manual style attribute
+
+## 6. Documentation
+
+- [x] 6.1 Add entry to CHANGELOG.md describing manual list style override feature (Phase 2)
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/.openspec.yaml b/openspec/changes/archive/2026-07-12-ordered-list-split-button/.openspec.yaml
new file mode 100644
index 0000000000..8803b473ec
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-12
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/design.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/design.md
new file mode 100644
index 0000000000..06759d9860
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/design.md
@@ -0,0 +1,465 @@
+# Design: Ordered List Split Button
+
+## Context
+
+Current toolbar implementation:
+
+- Separate `ToolbarButton` and `ToolbarDropdown` components
+- Button actions: `toggle`, `command`, `custom`, `dropdown`, `colorPicker`, `dialog`, `tableGrid`, `codeView`, `configurationDropdown`
+- List group has 4 buttons: bulletList, orderedList, taskList, orderedListStyle
+- `orderedListStyle` dropdown only enabled when OL active (`canExecute: editor => editor.isActive("orderedList")`)
+- Icons exist in RichTextIcons.scss: `List-numbers`, `List-lower-alpha`, `List-roman`
+- Toolbar config driven by `TOOLBAR_GROUPS` array in `ToolbarConfig.ts`
+- Factory pattern in `Toolbar.tsx` renders buttons based on action type
+
+Current limitation:
+
+- No composite button pattern (split button, segmented control)
+- No per-button state tracking (style preference)
+- Dropdown options only support text labels, no icons
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Create reusable `ToolbarSplitButton` component for composite button patterns
+- Merge OL toggle + style picker into single UI element
+- Dynamic icon based on active/last-used style
+- Sticky state for style preference across toggles
+- Keyboard navigation following ARIA authoring practices
+- Zero breaking changes to existing toolbar buttons
+
+**Non-Goals:**
+
+- Bullet list split button (future work)
+- Per-editor instance state isolation (module-level acceptable for MVP)
+- LocalStorage persistence (session-scoped sufficient)
+- Refactor existing button components (reuse where possible)
+
+## Decisions
+
+### 1. Component architecture: New vs Composite
+
+**Decision**: Create new `ToolbarSplitButton` component, not composite wrapper.
+
+**Rationale**:
+
+- Split button has distinct interaction model (two focus targets, shared active state)
+- Keyboard nav differs from separate buttons (arrow keys move between parts)
+- ARIA requirements specific to split button pattern (role="group", coordinated aria-pressed/expanded)
+- Reusability for future split buttons (bullet styles, etc)
+
+**Alternative considered**: Wrap existing `ToolbarButton` + `ToolbarDropdown` in container
+
+- **Rejected**: Focus management and keyboard nav would be complex to coordinate externally. Interaction logic belongs in component.
+
+### 2. State management: Where to store lastOrderedListStyle
+
+**Decision**: Module-level variable in component file.
+
+```typescript
+// ToolbarSplitButton.tsx
+let lastOrderedListStyle: "decimal" | "lower-alpha" | "lower-roman" = "decimal";
+```
+
+**Rationale**:
+
+- Simplest implementation, no extra infrastructure
+- Multiple editor instances on same page is rare edge case
+- Easy to migrate to per-editor storage later if needed
+
+**Alternatives considered**:
+
+| Approach       | Pro                      | Con                                        | Verdict          |
+| -------------- | ------------------------ | ------------------------------------------ | ---------------- |
+| Editor.storage | Per-editor isolation     | Need to update OrderedListStyled extension | Overkill for MVP |
+| React Context  | React-idiomatic          | More boilerplate, context provider changes | Overengineered   |
+| LocalStorage   | Persists across sessions | Unnecessary complexity, sync issues        | Out of scope     |
+
+### 3. Icon update mechanism: Pull vs Push
+
+**Decision**: Component pulls icon on render via `getCurrentIcon()` helper.
+
+```typescript
+const getCurrentIcon = (): string => {
+    if (editor?.isActive("orderedList")) {
+        const attrs = editor.getAttributes("orderedList");
+        const style = attrs.listStyleType || "decimal";
+        return STYLE_ICON_MAP[style];
+    }
+    return STYLE_ICON_MAP[lastOrderedListStyle];
+};
+```
+
+**Rationale**:
+
+- Consistent with existing button patterns (re-render on editor.on("selectionUpdate"))
+- No need to track icon state separately
+- Single source of truth: editor attributes when active, sticky state when inactive
+
+**Alternative considered**: Push updates via editor events
+
+- **Rejected**: Would require tracking previous style, detecting changes, syncing with component state. Pull is simpler.
+
+### 4. Dropdown behavior when OL inactive
+
+**Decision**: Dropdown always enabled, selecting option enables OL + applies style.
+
+**Rationale**:
+
+- Matches Word/Office pattern (dropdown accessible before list enabled)
+- Improves discoverability (user can preview style options)
+- Eliminates confusion of disabled dropdown
+
+**Alternative considered**: Dropdown disabled when inactive (current behavior)
+
+- **Rejected**: Forces two-step workflow (enable OL, then pick style). Poor UX.
+
+### 5. Command strategy: New vs Compose
+
+**Decision**: Compose existing commands in component handlers, don't add new editor command.
+
+```typescript
+// Main button click
+editor.chain().focus().toggleOrderedList().updateAttributes("orderedList", { listStyleType: style }).run();
+
+// Dropdown option click
+if (isActive) {
+    editor.chain().focus().setOrderedListStyle(style).run();
+} else {
+    editor.chain().focus().toggleOrderedList().updateAttributes("orderedList", { listStyleType: style }).run();
+}
+```
+
+**Rationale**:
+
+- Existing commands cover all operations
+- Logic belongs in component (UI concern, not editor operation)
+- Easier to test (no editor extension changes)
+
+**Alternative considered**: Add `toggleOrderedListWithStyle` command to OrderedListStyled extension
+
+- **Rejected**: Mixes UI state (sticky preference) with editor logic. Commands should be stateless.
+
+### 6. Keyboard navigation model
+
+**Decision**: Two-stop tab model with arrow key navigation between parts.
+
+```
+Tab          → Focus whole split button (outline both parts)
+Enter/Space  → Execute focused part's action
+ArrowRight   → Move focus from main to dropdown
+ArrowLeft    → Move focus from dropdown to main
+ArrowDown    → Open dropdown (from either part)
+```
+
+**Rationale**:
+
+- Follows WCAG ARIA authoring practices for split button
+- Efficient keyboard workflow (Tab once, arrows to navigate parts)
+- Matches Office/Windows split button behavior
+
+**Alternative considered**: Separate tab stops for main/dropdown
+
+- **Rejected**: Doubles tab stops in toolbar, slows keyboard navigation. Split button should behave as single control.
+
+### 7. ToolbarConfig changes: Extend vs Replace
+
+**Decision**: Add `icon` field to `ToolbarDropdownOption`, add `"splitButton"` action type, keep existing config structure.
+
+```typescript
+export interface ToolbarDropdownOption {
+    label: string;
+    value: string;
+    command: string;
+    attrs?: Record<string, any>;
+    icon?: string; // NEW
+}
+
+export type ToolbarActionType =
+    | "toggle"
+    | "command"
+    | "custom"
+    | "heading"
+    | "dropdown"
+    | "splitButton" // NEW
+    | "tableGrid"
+    | "colorPicker"
+    | "dialog"
+    | "codeView"
+    | "configurationDropdown";
+```
+
+**Rationale**:
+
+- Backward compatible (icon optional, splitButton only used by OL)
+- Follows existing action type pattern
+- Dropdown options reusable by ToolbarDropdown (icon rendering conditional)
+
+### 8. SCSS structure: BEM vs Nested
+
+**Decision**: Nested selectors under `.split-button` parent class.
+
+```scss
+.split-button {
+    .split-button-main {
+        /* ... */
+    }
+    .split-button-dropdown {
+        /* ... */
+    }
+    &.is-active {
+        /* ... */
+    }
+}
+```
+
+**Rationale**:
+
+- Matches existing toolbar SCSS structure (`.toolbar-group`, `.toolbar-dropdown-button`)
+- Scoping prevents class name collisions
+- Active state applies to container, styling inherited by parts
+
+## Component API
+
+### ToolbarSplitButton Props
+
+```typescript
+interface ToolbarSplitButtonProps {
+  config: ToolbarButtonConfig;  // Reuse existing config type
+}
+
+// Config shape for split button:
+{
+  name: "orderedList",
+  title: "Numbered List",
+  icon: "List-numbers",           // Default icon (overridden by getCurrentIcon)
+  action: "splitButton",
+  command: "toggleOrderedList",   // Main button command
+  isActive: (editor) => editor.isActive("orderedList"),
+  dropdownOptions: [
+    {
+      label: "1, 2, 3",
+      value: "decimal",
+      command: "setOrderedListStyle",
+      attrs: { styleType: null },
+      icon: "List-numbers"
+    },
+    // ... more options
+  ],
+  getCurrentValue: (editor) => {
+    const attrs = editor.getAttributes("orderedList");
+    return attrs.listStyleType || "decimal";
+  }
+}
+```
+
+### Internal State
+
+```typescript
+const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+const [focusedPart, setFocusedPart] = useState<"main" | "dropdown">("main");
+const mainButtonRef = useRef<HTMLButtonElement>(null);
+const dropdownButtonRef = useRef<HTMLButtonElement>(null);
+```
+
+### Event Handlers
+
+```typescript
+handleMainClick(): void
+  // Toggle OL with sticky style when inactive
+  // Toggle OL off when active
+
+handleDropdownClick(): void
+  // Toggle dropdown open/closed
+
+handleOptionSelect(option: ToolbarDropdownOption): void
+  // Update sticky state
+  // Apply style + enable OL if inactive
+  // Just apply style if active
+  // Close dropdown
+
+handleKeyDown(e: KeyboardEvent, part: "main" | "dropdown"): void
+  // ArrowRight/Left: move focus between parts
+  // ArrowDown: open dropdown
+  // Enter/Space: execute focused part action
+```
+
+## Accessibility
+
+### ARIA attributes
+
+```tsx
+<div className="split-button" role="group" aria-label="Numbered List">
+    <button
+        className="split-button-main"
+        aria-label="Toggle numbered list"
+        aria-pressed={isActive}
+        onKeyDown={handleKeyDown}
+    >
+        <span className={`icons icon-${currentIcon}`} />
+    </button>
+
+    <button
+        className="split-button-dropdown"
+        aria-label="Numbering style options"
+        aria-expanded={isDropdownOpen}
+        aria-haspopup="menu"
+        onKeyDown={handleKeyDown}
+    >
+        <span className="icons icon-Chevron-down" />
+    </button>
+</div>;
+
+{
+    isDropdownOpen && (
+        <div role="menu" className="toolbar-dropdown-menu">
+            <button role="menuitem" className={activeClass}>
+                <span className="icons icon-List-numbers" />
+                <span>1, 2, 3</span>
+            </button>
+        </div>
+    );
+}
+```
+
+### Focus management
+
+- Split button container has visual focus indicator when either part focused
+- Focus outline on active part (`:focus-visible`)
+- Arrow keys move focus without triggering actions
+- Dropdown opens with first option pre-highlighted (via `aria-activedescendant`)
+
+### Screen reader announcements
+
+- Main button: "Toggle numbered list, button, pressed" (when active)
+- Dropdown button: "Numbering style options, button, collapsed/expanded"
+- Menu item: "1, 2, 3, menu item, selected" (when active style)
+
+## File changes
+
+### New files
+
+- `src/components/toolbars/components/ToolbarSplitButton.tsx` - Split button component
+- `src/components/toolbars/helpers/listHelpers.ts` - Icon mapping utilities
+
+### Modified files
+
+- `src/components/toolbars/ToolbarConfig.ts`
+    - Add `icon?: string` to `ToolbarDropdownOption`
+    - Add `"splitButton"` to `ToolbarActionType`
+    - Update `orderedList` button config in `TOOLBAR_GROUPS`
+    - Remove `orderedListStyle` standalone button
+    - Add icon to dropdown options
+
+- `src/components/toolbars/Toolbar.tsx`
+    - Import `ToolbarSplitButton`
+    - Add `case "splitButton"` to `ToolbarButtonFactory`
+
+- `src/components/toolbars/Toolbar.scss`
+    - Add `.split-button` styles
+    - Update `.toolbar-dropdown-item` for icon + text layout
+
+- `src/components/toolbars/components/ToolbarDropdown.tsx` (optional enhancement)
+    - Conditionally render option icons if present
+
+## Risks / Trade-offs
+
+### Risk: Multi-editor instance state collision
+
+**Scenario**: Page has two RichText widgets, user selects lower-alpha in widget A, then clicks OL in widget B. Widget B gets lower-alpha instead of decimal.
+
+**Mitigation**:
+
+- Acceptable for MVP (rare use case)
+- If reported, migrate to `editor.storage.orderedListStyled.lastUsedStyle`
+
+**Trade-off**: Simple implementation now vs perfect isolation
+
+---
+
+### Risk: Touch target size on mobile
+
+**Scenario**: Split button parts too small for touch (iOS Safari needs 44x44pt minimum)
+
+**Mitigation**:
+
+- Combined split button width: 56px (adequate)
+- Main button: 32px min-width
+- Dropdown: 24px min-width
+- Vertical height: 32px (matches other toolbar buttons)
+
+**Verification**: Test on iPhone during QA
+
+**Trade-off**: Desktop compactness vs mobile usability
+
+---
+
+### Risk: Keyboard nav complexity
+
+**Scenario**: Users confused by arrow key behavior (moves focus instead of navigating toolbar)
+
+**Mitigation**:
+
+- Standard split button pattern (Word, Office, Windows)
+- Arrow keys only active when split button focused
+- Tab continues to next toolbar button (normal flow)
+
+**Trade-off**: Richer interaction vs learning curve
+
+---
+
+### Risk: Icon not updating after style change
+
+**Scenario**: Component doesn't re-render after dropdown selection
+
+**Mitigation**:
+
+- `useEffect` on editor "selectionUpdate" and "transaction" events (same as existing buttons)
+- `getCurrentIcon()` recalculates on every render
+- Force re-render with state trigger: `setUpdateTrigger(prev => prev + 1)`
+
+**Trade-off**: Extra re-renders vs guaranteed sync
+
+---
+
+### Risk: Dropdown positioning with Floating UI
+
+**Scenario**: Dropdown anchored to whole split button, not dropdown part
+
+**Mitigation**:
+
+- Pass `dropdownButtonRef.current` to `useDropdown` hook (not container ref)
+- Floating UI anchors to dropdown part
+
+**Verification**: Test with scrolling, overflow containers
+
+## Migration Plan
+
+No user-facing migration needed (UI change only).
+
+### Deployment steps
+
+1. Deploy changes to dev environment
+2. Manual testing:
+    - Verify icon changes (decimal → alpha → roman)
+    - Verify sticky state across toggles
+    - Keyboard nav (Tab, arrows, Enter, ArrowDown)
+    - Touch on mobile (iPad/iPhone)
+    - Multiple editor instances (if possible)
+3. Run unit tests + E2E test
+4. Deploy to staging
+5. Notify QA team for UX verification
+6. Deploy to production
+
+### Rollback strategy
+
+If critical issue found:
+
+1. Revert PR (single PR includes all changes)
+2. Split button reverts to separate buttons
+3. No data loss (OrderedListStyled extension unchanged)
+
+## Open Questions
+
+None. Design ready for implementation.
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/proposal.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/proposal.md
new file mode 100644
index 0000000000..7f8e0dbe87
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/proposal.md
@@ -0,0 +1,160 @@
+# Proposal: Ordered List Split Button
+
+## Problem
+
+Current toolbar has separate buttons for ordered list toggle and style picker:
+
+```
+[Bullets] [Numbers] [Checklist] [▼ Style]
+```
+
+Issues:
+
+- Style dropdown separated from list toggle (poor spatial grouping)
+- Style dropdown disabled when no OL active (discovery problem)
+- No visual feedback of current style when OL inactive
+- Doesn't match Word/Office UX pattern users expect
+
+## Solution
+
+Merge ordered list toggle and style picker into single split button:
+
+```
+[Bullets ▼] [Numbers ▼] [Checklist]
+```
+
+Split button behavior:
+
+- **Main button**: Toggle OL on/off
+- **Dropdown arrow**: Open style picker
+- **Icon**: Dynamic based on active/last-used style (1, a, i)
+- **Sticky state**: Remember last used style across toggles
+
+### Word-like interaction flow
+
+**When OL inactive:**
+
+- Main click → Enable OL with last-used style (default: decimal)
+- Dropdown click → Show styles, selecting applies style + enables OL
+- Icon shows last-used style
+
+**When OL active:**
+
+- Main click → Disable OL
+- Dropdown click → Show styles, selecting changes style
+- Icon shows current active style
+
+**Dropdown options (icon + text):**
+
+- [#] 1, 2, 3 (decimal)
+- [a] a, b, c (lower-alpha)
+- [i] i, ii, iii (lower-roman)
+
+## Benefits
+
+- **Spatial proximity**: Style control attached to list trigger
+- **Discoverability**: Dropdown always visible, not hidden when inactive
+- **Visual feedback**: Icon changes to reflect style (1 → a → i)
+- **Familiar UX**: Matches Word/Office split button pattern
+- **Less toolbar clutter**: 4 buttons → 3 buttons
+
+## Implementation approach
+
+### 1. New component
+
+Create `ToolbarSplitButton.tsx`:
+
+- Two buttons in group (main + dropdown)
+- Independent click handlers
+- Shared active state styling
+- Keyboard nav: arrows move between buttons, ArrowDown opens menu
+- ARIA: `role="group"`, `aria-pressed`, `aria-expanded`
+
+### 2. Config changes
+
+Update `ToolbarConfig.ts`:
+
+- Add `"splitButton"` action type
+- Add `icon` field to `ToolbarDropdownOption` interface
+- Update `orderedList` button config with dropdown options
+- Remove standalone `orderedListStyle` button
+- Add icon mapping helper
+
+### 3. State management
+
+Module-level sticky state:
+
+```typescript
+let lastOrderedListStyle: "decimal" | "lower-alpha" | "lower-roman" = "decimal";
+```
+
+Updated on style selection, used when toggling OL while inactive.
+
+### 4. Icon mapping
+
+```typescript
+const STYLE_ICON_MAP = {
+    decimal: "List-numbers",
+    "lower-alpha": "List-lower-alpha",
+    "lower-roman": "List-roman"
+};
+```
+
+Icons already exist in `RichTextIcons.scss`.
+
+### 5. Dropdown options
+
+Add icons to dropdown items:
+
+```tsx
+<button className="toolbar-dropdown-item">
+    <span className="icons icon-List-numbers" />
+    <span>1, 2, 3</span>
+</button>
+```
+
+### 6. SCSS
+
+`.split-button` wrapper with:
+
+- `.split-button-main` (left side, border-right)
+- `.split-button-dropdown` (right side, chevron)
+- `&.is-active` highlighting
+- Focus indicators on both buttons
+
+## Out of scope
+
+- Bullet list split button (future enhancement for bullet styles)
+- Multi-instance isolation (module-level state acceptable for MVP)
+- Persistent storage (session-scoped sticky state sufficient)
+
+## Risks
+
+- **Multi-editor instances**: Shared module state across instances on same page. Mitigation: Rare use case, can enhance later with per-editor storage.
+- **Touch targets**: 56px combined width adequate for touch, verify on mobile.
+- **Keyboard complexity**: Split button nav more complex than single button. Mitigation: Follow ARIA authoring practices.
+
+## Testing
+
+Unit tests:
+
+- Icon changes based on active style
+- Sticky state persists across toggles
+- Main button toggles OL with correct style
+- Dropdown options apply style + toggle when inactive
+- Dropdown options change style only when active
+- Keyboard navigation
+
+E2E test:
+
+- Full workflow: select style via dropdown, toggle off/on, verify sticky
+
+## Success criteria
+
+- [ ] Ordered list button merged with style picker
+- [ ] Icon updates dynamically (List-numbers, List-lower-alpha, List-roman)
+- [ ] Last-used style remembered across toggles
+- [ ] Dropdown accessible when OL inactive
+- [ ] Keyboard navigation works
+- [ ] Tests pass
+- [ ] Visual match to Word split button pattern
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/ordered-list-interaction/spec.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/ordered-list-interaction/spec.md
new file mode 100644
index 0000000000..99186f1508
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/ordered-list-interaction/spec.md
@@ -0,0 +1,139 @@
+# Ordered List Interaction Specification
+
+## ADDED Requirements
+
+### Requirement: Sticky state tracks last-used list style
+
+The system SHALL remember the last-used ordered list style across toggle operations.
+
+#### Scenario: Default style is decimal
+
+- **WHEN** user first interacts with ordered list
+- **THEN** sticky state defaults to `"decimal"`
+
+#### Scenario: Sticky state updates on style selection
+
+- **WHEN** user selects lower-alpha from dropdown
+- **THEN** sticky state updates to `"lower-alpha"`
+
+#### Scenario: Sticky state persists after toggle off
+
+- **WHEN** user has lower-alpha active
+- **WHEN** user toggles ordered list off
+- **WHEN** user toggles ordered list on again
+- **THEN** ordered list uses lower-alpha style
+
+### Requirement: Main button toggles OL with sticky style
+
+Clicking the main button SHALL toggle ordered list on/off, using sticky style when enabling.
+
+#### Scenario: Enable OL with sticky style when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-alpha
+- **WHEN** user clicks main button
+- **THEN** ordered list enables with lower-alpha style
+
+#### Scenario: Enable OL with decimal on first use
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is default (decimal)
+- **WHEN** user clicks main button
+- **THEN** ordered list enables with decimal style (null attribute)
+
+#### Scenario: Disable OL when active
+
+- **WHEN** ordered list is active
+- **WHEN** user clicks main button
+- **THEN** ordered list disables
+- **THEN** sticky state remains unchanged
+
+### Requirement: Dropdown selection applies style and enables OL
+
+Selecting a style from dropdown SHALL apply that style and enable OL if inactive.
+
+#### Scenario: Apply style when OL inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** user selects lower-roman from dropdown
+- **THEN** ordered list enables with lower-roman style
+- **THEN** sticky state updates to lower-roman
+
+#### Scenario: Change style when OL active
+
+- **WHEN** ordered list is active with decimal style
+- **WHEN** user selects lower-alpha from dropdown
+- **THEN** ordered list style changes to lower-alpha
+- **THEN** ordered list remains active
+- **THEN** sticky state updates to lower-alpha
+
+### Requirement: Icon reflects current or sticky state
+
+The split button icon SHALL dynamically change to reflect the active style or sticky state.
+
+#### Scenario: Icon shows active style
+
+- **WHEN** ordered list is active with lower-alpha
+- **THEN** icon displays List-lower-alpha
+
+#### Scenario: Icon shows sticky state when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-roman
+- **THEN** icon displays List-roman
+
+#### Scenario: Icon updates after style change
+
+- **WHEN** user changes style from decimal to lower-alpha
+- **THEN** icon updates from List-numbers to List-lower-alpha
+
+### Requirement: Dropdown is accessible when OL inactive
+
+The dropdown button SHALL be enabled and functional even when ordered list is inactive.
+
+#### Scenario: Dropdown button is not disabled
+
+- **WHEN** ordered list is inactive
+- **THEN** dropdown button is enabled
+- **THEN** user can open dropdown menu
+
+#### Scenario: Style options are selectable when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** dropdown menu is open
+- **THEN** all style options are clickable
+- **THEN** selecting option enables OL with that style
+
+### Requirement: Active style is visually indicated in dropdown
+
+The dropdown menu SHALL highlight the currently active or sticky style.
+
+#### Scenario: Active style is highlighted
+
+- **WHEN** ordered list is active with lower-alpha
+- **WHEN** dropdown menu is open
+- **THEN** lower-alpha option has `is-active` class
+
+#### Scenario: Sticky style is highlighted when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-roman
+- **WHEN** dropdown menu is open
+- **THEN** lower-roman option has `is-active` class
+
+### Requirement: Sticky state is module-scoped
+
+The sticky state SHALL be stored at module level and shared across editor instances.
+
+#### Scenario: State persists during editor session
+
+- **WHEN** user selects lower-alpha
+- **WHEN** user navigates to different content area
+- **WHEN** user returns and toggles OL
+- **THEN** ordered list uses lower-alpha style
+
+#### Scenario: State resets on page reload
+
+- **WHEN** user selects lower-roman
+- **WHEN** page reloads
+- **THEN** sticky state resets to default (decimal)
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/split-button-component/spec.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/split-button-component/spec.md
new file mode 100644
index 0000000000..f9094a7d88
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/split-button-component/spec.md
@@ -0,0 +1,185 @@
+# Split Button Component Specification
+
+## ADDED Requirements
+
+### Requirement: Split button renders main and dropdown parts
+
+The component SHALL render two interactive button elements grouped together: a main action button and a dropdown trigger button.
+
+#### Scenario: Component renders with both parts
+
+- **WHEN** split button is mounted in toolbar
+- **THEN** main button displays configured icon
+- **THEN** dropdown button displays chevron-down icon
+- **THEN** both buttons are grouped in single container with `role="group"`
+
+#### Scenario: Container has accessible label
+
+- **WHEN** split button is rendered
+- **THEN** container has `aria-label` matching button title
+
+### Requirement: Main button executes primary action
+
+The main button SHALL execute the configured command when clicked.
+
+#### Scenario: Main button click triggers command
+
+- **WHEN** user clicks main button
+- **THEN** configured command executes via editor chain
+- **THEN** focus returns to editor
+
+#### Scenario: Main button respects active state
+
+- **WHEN** configured `isActive` function returns true
+- **THEN** main button has `aria-pressed="true"`
+- **THEN** split button container has `is-active` class
+
+### Requirement: Dropdown button opens style menu
+
+The dropdown button SHALL toggle the dropdown menu when clicked.
+
+#### Scenario: Dropdown button opens menu
+
+- **WHEN** user clicks dropdown button
+- **THEN** dropdown menu becomes visible
+- **THEN** dropdown button has `aria-expanded="true"`
+
+#### Scenario: Dropdown button closes menu
+
+- **WHEN** dropdown menu is open
+- **WHEN** user clicks dropdown button again
+- **THEN** dropdown menu becomes hidden
+- **THEN** dropdown button has `aria-expanded="false"`
+
+### Requirement: Dropdown options display icon and text
+
+Each dropdown option SHALL render both an icon and text label.
+
+#### Scenario: Option renders with icon
+
+- **WHEN** dropdown menu is open
+- **THEN** each option displays icon from config `icon` field
+- **THEN** each option displays text from config `label` field
+
+#### Scenario: Active option is highlighted
+
+- **WHEN** dropdown menu is open
+- **WHEN** current value matches option value
+- **THEN** option has `is-active` class
+
+### Requirement: Selecting dropdown option updates state
+
+When user selects a dropdown option, the component SHALL execute the option's command and close the menu.
+
+#### Scenario: Option selection executes command
+
+- **WHEN** user clicks dropdown option
+- **THEN** option's command executes with configured attrs
+- **THEN** dropdown menu closes
+- **THEN** focus returns to editor
+
+### Requirement: Icon updates dynamically
+
+The main button icon SHALL change based on editor state and last-used value.
+
+#### Scenario: Icon reflects active state
+
+- **WHEN** editor has active state matching button config
+- **THEN** icon updates to reflect current state value
+
+#### Scenario: Icon reflects last-used value when inactive
+
+- **WHEN** editor does not have active state
+- **THEN** icon shows last-used value from sticky state
+
+### Requirement: Keyboard navigation between parts
+
+The component SHALL support arrow key navigation between main and dropdown buttons.
+
+#### Scenario: ArrowRight moves focus to dropdown
+
+- **WHEN** main button has focus
+- **WHEN** user presses ArrowRight
+- **THEN** focus moves to dropdown button
+
+#### Scenario: ArrowLeft moves focus to main
+
+- **WHEN** dropdown button has focus
+- **WHEN** user presses ArrowLeft
+- **THEN** focus moves to main button
+
+#### Scenario: ArrowDown opens dropdown
+
+- **WHEN** either button has focus
+- **WHEN** user presses ArrowDown
+- **THEN** dropdown menu opens
+
+### Requirement: Tab navigation treats as single control
+
+The split button SHALL act as single tab stop in toolbar navigation.
+
+#### Scenario: Tab focuses split button once
+
+- **WHEN** user tabs through toolbar
+- **THEN** split button receives focus as single stop
+- **THEN** next tab moves to next toolbar control
+
+#### Scenario: Shift+Tab navigates backward
+
+- **WHEN** split button has focus
+- **WHEN** user presses Shift+Tab
+- **THEN** focus moves to previous toolbar control
+
+### Requirement: Enter and Space execute focused part
+
+The component SHALL execute the action of whichever part has focus when Enter or Space is pressed.
+
+#### Scenario: Enter on main button executes command
+
+- **WHEN** main button has focus
+- **WHEN** user presses Enter
+- **THEN** main button command executes
+
+#### Scenario: Space on dropdown button opens menu
+
+- **WHEN** dropdown button has focus
+- **WHEN** user presses Space
+- **THEN** dropdown menu opens
+
+### Requirement: Click outside closes dropdown
+
+The dropdown menu SHALL close when user clicks outside the component.
+
+#### Scenario: Outside click closes menu
+
+- **WHEN** dropdown menu is open
+- **WHEN** user clicks outside split button
+- **THEN** dropdown menu closes
+
+### Requirement: Focus indicators are visible
+
+Both button parts SHALL display visible focus indicators for keyboard navigation.
+
+#### Scenario: Focus outline on main button
+
+- **WHEN** main button has focus
+- **THEN** main button displays focus outline
+
+#### Scenario: Focus outline on dropdown button
+
+- **WHEN** dropdown button has focus
+- **THEN** dropdown button displays focus outline
+
+### Requirement: Component updates on editor events
+
+The component SHALL re-render when editor state changes to keep icon and active state synchronized.
+
+#### Scenario: Update on selection change
+
+- **WHEN** editor `selectionUpdate` event fires
+- **THEN** component re-renders with current state
+
+#### Scenario: Update on content change
+
+- **WHEN** editor `transaction` event fires
+- **THEN** component re-renders with current state
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/toolbar-configuration/spec.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/toolbar-configuration/spec.md
new file mode 100644
index 0000000000..a256e2b4bc
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/specs/toolbar-configuration/spec.md
@@ -0,0 +1,91 @@
+# Toolbar Configuration Specification
+
+## ADDED Requirements
+
+### Requirement: Toolbar config supports splitButton action type
+
+The toolbar configuration SHALL support `"splitButton"` as a valid action type for button definitions.
+
+#### Scenario: Split button action type is recognized
+
+- **WHEN** button config has `action: "splitButton"`
+- **THEN** toolbar factory renders ToolbarSplitButton component
+
+#### Scenario: Split button config includes dropdown options
+
+- **WHEN** button config has `action: "splitButton"`
+- **THEN** button config includes `dropdownOptions` array
+- **THEN** each option includes `label`, `value`, `command`, `attrs`, and `icon` fields
+
+### Requirement: Dropdown options support icon field
+
+The ToolbarDropdownOption interface SHALL include an optional `icon` field for visual representation.
+
+#### Scenario: Icon field is optional
+
+- **WHEN** dropdown option is defined
+- **THEN** `icon` field may be omitted without error
+
+#### Scenario: Icon field is used when present
+
+- **WHEN** dropdown option includes `icon` field
+- **THEN** rendered option displays icon before label
+
+### Requirement: Ordered list button uses split button configuration
+
+The ordered list toolbar button SHALL be configured as a split button with style options.
+
+#### Scenario: Ordered list button has split button action
+
+- **WHEN** toolbar groups are loaded
+- **THEN** orderedList button has `action: "splitButton"`
+
+#### Scenario: Ordered list dropdown includes style options
+
+- **WHEN** orderedList button config is accessed
+- **THEN** dropdownOptions includes decimal, lower-alpha, and lower-roman
+- **THEN** each option has corresponding icon (List-numbers, List-lower-alpha, List-roman)
+
+#### Scenario: Decimal option uses null styleType
+
+- **WHEN** decimal option is selected
+- **THEN** `attrs.styleType` is `null` (browser default)
+
+#### Scenario: Lower-alpha option uses styleType attribute
+
+- **WHEN** lower-alpha option is selected
+- **THEN** `attrs.styleType` is `"lower-alpha"`
+
+#### Scenario: Lower-roman option uses styleType attribute
+
+- **WHEN** lower-roman option is selected
+- **THEN** `attrs.styleType` is `"lower-roman"`
+
+### Requirement: Standalone orderedListStyle button is removed
+
+The toolbar configuration SHALL NOT include standalone `orderedListStyle` dropdown button.
+
+#### Scenario: List group has three buttons
+
+- **WHEN** list toolbar group is rendered
+- **THEN** group includes bulletList, orderedList (split), and taskList
+- **THEN** group does NOT include standalone orderedListStyle button
+
+### Requirement: Icon mapping helper is available
+
+The toolbar configuration SHALL provide helper function to map list style values to icon names.
+
+#### Scenario: Decimal maps to List-numbers
+
+- **WHEN** helper function receives `"decimal"` or `null`
+- **THEN** function returns `"List-numbers"`
+
+#### Scenario: Lower-alpha maps to List-lower-alpha
+
+- **WHEN** helper function receives `"lower-alpha"`
+- **THEN** function returns `"List-lower-alpha"`
+
+#### Scenario: Lower-roman maps to List-roman
+
+- **WHEN** helper function receives `"lower-roman"`
+- **THEN** function returns `"List-roman"`
diff --git a/openspec/changes/archive/2026-07-12-ordered-list-split-button/tasks.md b/openspec/changes/archive/2026-07-12-ordered-list-split-button/tasks.md
new file mode 100644
index 0000000000..8c380f7c91
--- /dev/null
+++ b/openspec/changes/archive/2026-07-12-ordered-list-split-button/tasks.md
@@ -0,0 +1,97 @@
+# Implementation Tasks
+
+## 1. Type and Config Updates
+
+- [x] 1.1 Add `icon?: string` field to `ToolbarDropdownOption` interface in `ToolbarConfig.ts`
+- [x] 1.2 Add `"splitButton"` to `ToolbarActionType` union type in `ToolbarConfig.ts`
+- [x] 1.3 Create `listHelpers.ts` with `getIconForOrderedListStyle()` function and `STYLE_ICON_MAP` constant
+
+## 2. Toolbar Configuration Changes
+
+- [x] 2.1 Update `orderedList` button config in `TOOLBAR_GROUPS` to use `action: "splitButton"`
+- [x] 2.2 Add `dropdownOptions` array to `orderedList` config with decimal, lower-alpha, lower-roman options
+- [x] 2.3 Add `icon` field to each dropdown option (List-numbers, List-lower-alpha, List-roman)
+- [x] 2.4 Add `getCurrentValue` function to `orderedList` config to return active style
+- [x] 2.5 Remove standalone `orderedListStyle` button from list group buttons array
+
+## 3. ToolbarSplitButton Component
+
+- [x] 3.1 Create `ToolbarSplitButton.tsx` component file with props interface
+- [x] 3.2 Add module-level `lastOrderedListStyle` sticky state variable
+- [x] 3.3 Implement `getCurrentIcon()` helper function using active/sticky state
+- [x] 3.4 Add component state: `isDropdownOpen`, `focusedPart` with refs for both buttons
+- [x] 3.5 Implement `useDropdown` hook integration for floating menu positioning
+- [x] 3.6 Add `useEffect` to re-render on editor `selectionUpdate` and `transaction` events
+
+## 4. Split Button Event Handlers
+
+- [x] 4.1 Implement `handleMainClick()` to toggle OL with sticky style when inactive, disable when active
+- [x] 4.2 Implement `handleDropdownClick()` to toggle dropdown open/closed state
+- [x] 4.3 Implement `handleOptionSelect()` to update sticky state, apply style, enable OL if needed, close dropdown
+- [x] 4.4 Implement `handleKeyDown()` with ArrowRight/Left focus movement between buttons
+- [x] 4.5 Add ArrowDown handling to open dropdown from either button
+- [x] 4.6 Add Enter/Space handling to execute focused part's action
+
+## 5. Split Button Render
+
+- [x] 5.1 Render container div with `role="group"` and `aria-label`
+- [x] 5.2 Render main button with dynamic icon, `aria-pressed`, and click/keydown handlers
+- [x] 5.3 Render dropdown button with chevron icon, `aria-expanded`, `aria-haspopup="menu"`
+- [x] 5.4 Conditionally render dropdown menu with Floating UI positioning when open
+- [x] 5.5 Render dropdown options with icon + text, `role="menuitem"`, active class
+- [x] 5.6 Apply `is-active` class to split button container when OL active
+
+## 6. Toolbar Factory Integration
+
+- [x] 6.1 Import `ToolbarSplitButton` component in `Toolbar.tsx`
+- [x] 6.2 Add `case "splitButton"` to `ToolbarButtonFactory` switch statement
+- [x] 6.3 Return `<ToolbarSplitButton key={button.name} config={button} />` in split button case
+
+## 7. Dropdown Option Icon Support
+
+- [x] 7.1 Update `ToolbarDropdown.tsx` to conditionally render icon if `option.icon` present
+- [x] 7.2 Update dropdown item layout to support icon + text (flex with gap)
+
+## 8. SCSS Styling
+
+- [x] 8.1 Add `.split-button` base styles with inline-flex layout in `Toolbar.scss`
+- [x] 8.2 Add `.split-button-main` styles with border-right separator
+- [x] 8.3 Add `.split-button-dropdown` styles with chevron rotation on `aria-expanded="true"`
+- [x] 8.4 Add `.split-button.is-active` styles for active state highlighting
+- [x] 8.5 Add focus indicator styles for both button parts (`:focus-visible`)
+- [x] 8.6 Update `.toolbar-dropdown-item` to support icon + text layout (flex with gap)
+- [x] 8.7 Add hover states for main and dropdown buttons
+
+## 9. Unit Tests
+
+- [ ] 9.1 Create `orderedListSplitButton.spec.tsx` test file
+- [ ] 9.2 Test: Split button renders with both parts and correct icons
+- [ ] 9.3 Test: Main button click toggles OL with sticky style when inactive
+- [ ] 9.4 Test: Main button click disables OL when active
+- [ ] 9.5 Test: Dropdown button opens/closes menu
+- [ ] 9.6 Test: Dropdown option selection updates sticky state and applies style
+- [ ] 9.7 Test: Dropdown option enables OL + applies style when inactive
+- [ ] 9.8 Test: Dropdown option only changes style when active
+- [ ] 9.9 Test: Icon updates based on active style
+- [ ] 9.10 Test: Icon shows sticky state when inactive
+- [ ] 9.11 Test: Sticky state persists after toggle off/on
+- [ ] 9.12 Test: Keyboard ArrowRight/Left moves focus between buttons
+- [ ] 9.13 Test: Keyboard ArrowDown opens dropdown
+- [ ] 9.14 Test: ARIA attributes (role, aria-pressed, aria-expanded, aria-haspopup)
+
+## 10. E2E Test
+
+- [ ] 10.1 Create `orderedListSplitButton.spec.js` E2E test file
+- [ ] 10.2 Test: Click dropdown, select lower-alpha, verify OL enabled with a,b,c style
+- [ ] 10.3 Test: Toggle off via main button, verify OL disabled
+- [ ] 10.4 Test: Click main button, verify OL re-enabled with lower-alpha (sticky)
+- [ ] 10.5 Test: Open dropdown, select lower-roman, verify icon updates
+- [ ] 10.6 Test: Verify dropdown accessible when OL inactive
+
+## 11. Manual Verification
+
+- [ ] 11.1 Test on desktop: Click workflow, keyboard navigation, icon updates
+- [ ] 11.2 Test on mobile/tablet: Touch targets adequate (56px combined width)
+- [ ] 11.3 Test screen reader: ARIA announcements for button states
+- [ ] 11.4 Test with multiple editor instances (if available): Verify sticky state behavior
+- [ ] 11.5 Verify visual match to Word split button pattern
diff --git a/openspec/changes/archive/2026-07-13-add-link-bubble-menu/.openspec.yaml b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/.openspec.yaml
new file mode 100644
index 0000000000..b119b63505
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-13
diff --git a/openspec/changes/archive/2026-07-13-add-link-bubble-menu/design.md b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/design.md
new file mode 100644
index 0000000000..b55298d9aa
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/design.md
@@ -0,0 +1,89 @@
+## Context
+
+The rich text widget (`@mendix/rich-text-web`) runs tiptap v3. Links come from StarterKit's link mark, configured with `openOnClick: false` so clicking a link places the caret instead of navigating. Link insertion today goes through the toolbar's `DialogToolbarButton` → `LinkDialog`, which reads `getAttributes("link")` and already renders an "Edit Link" variant. There is no affordance to edit or remove an _existing_ link without reselecting it from the toolbar.
+
+`@tiptap/react/menus` exposes `BubbleMenu` (backed by `@tiptap/extension-bubble-menu@3.27.1`, already resolved transitively). `BubbleMenu` manages its own floating position via a ProseMirror plugin and accepts `editor`, `shouldShow`, `pluginKey`, `updateDelay`, plus standard div attributes. `shouldShow` receives `{ editor, element, view, state, from, to }`.
+
+Reference: tiptap menus docs — https://tiptap.dev/docs/examples/advanced/menus
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Contextual Edit/Remove menu that appears on any link in an editable editor.
+- Reuse the existing `LinkDialog` for editing (prefilled, in-place update).
+- Correct behavior from a bare caret inside a link (no selection required).
+
+**Non-Goals:**
+
+- No change to toolbar link insertion.
+- No new bubble menus for other marks (bold, image, etc.) — link only.
+- No new npm dependency.
+
+## Decisions
+
+### Render `LinkBubbleMenu` inside `EditorInner`
+
+The bubble menu lives as a sibling to `EditorContent`, within the existing `EditorContextProvider`, so it can read `editor` via `useCurrentEditor()`. Buttons reuse `ToolbarDefaultButton`.
+
+```tsx
+<BubbleMenu editor={editor} pluginKey="linkBubbleMenu" shouldShow={showLinkMenu}>
+    <ToolbarDefaultButton icon="<edit-icon>" onClick={openEdit} title="Edit link" />
+    <ToolbarDefaultButton icon="<trash-icon>" onClick={removeLink} title="Remove link" />
+</BubbleMenu>;
+{
+    isEditing && <LinkDialog referenceElement={linkEl} onClose={closeEdit} />;
+}
+```
+
+### `shouldShow` = active link, editable, not editing
+
+```ts
+shouldShow = ({ editor }) => editor.isEditable && editor.isActive("link") && !isEditing;
+```
+
+Covers three spec requirements at once: appears on link, hidden off-link, hidden when read-only, and suppressed while the dialog is open (single floating layer).
+
+_Alternative considered:_ require a non-empty selection over the link. Rejected — less discoverable; the caret-inside case is the common one.
+
+### Full-range selection before Edit and Remove
+
+Both actions first run `editor.chain().focus().extendMarkRange("link")`. This is the crux fix:
+
+- **Edit:** `LinkDialog`'s submit branches on `selectedText`. With a bare caret, `selectedText === ""` → it takes the "insert new text" branch and **duplicates** the link. Selecting the whole link range first populates `selectedText` → correct "apply to existing selection" branch.
+- **Remove:** without `extendMarkRange`, `unsetLink()` only clears from the caret; the rest of the link survives. Extending first strips the entire link.
+
+```ts
+removeLink = () => editor.chain().focus().extendMarkRange("link").unsetLink().run();
+openEdit = () => {
+    editor.chain().focus().extendMarkRange("link").run();
+    setLinkEl(resolveLinkEl());
+    setIsEditing(true);
+};
+```
+
+### Anchor the dialog to the link DOM element
+
+`LinkDialog` takes a `referenceElement`. Anchoring to the actual `<a>`/`.tiptap-link` element (resolved from `editor.view.domAtPos(selection.from)`, walking up to the nearest anchor) keeps the dialog positioned even after the bubble menu hides on focus loss, and reads as "editing _this_ link."
+
+_Alternative considered:_ anchor to the bubble menu container ref. Rejected — the bubble hides when the editor blurs (dialog input steals focus), orphaning the dialog.
+
+## Risks / Trade-offs
+
+- **Icon names unknown** → the icon font names for edit/trash must be confirmed against the existing icon set (config uses names like `Text-bold`). Resolve during implementation; pick the closest existing glyph.
+- **Focus loss hides the bubble mid-interaction** → mitigated by anchoring the dialog to the link element (not the bubble) and by `!isEditing` in `shouldShow`, so the dialog owns the interaction once open.
+- **KeyboardNavigation extension** intercepts wrapper/toolbar keys → verify Tab/Escape inside the bubble buttons and dialog don't conflict; the bubble buttons are plain `ToolbarDefaultButton`s so Escape/click-outside close is handled by `LinkDialog`'s `useDropdown`.
+- **`extendMarkRange` changes the user's selection** → acceptable and expected; the caret ends on the whole link, which is the intent for both edit and remove.
+
+## Migration Plan
+
+1. Add `LinkBubbleMenu.tsx` (menu + edit/remove + link-element resolution + dialog).
+2. Render it in `EditorInner` inside `tiptap-wrapper`.
+3. Add `.link-bubble-menu` container styling; reuse toolbar button styles.
+4. Unit-test the edit/remove commands and `shouldShow` gating; manual check in Studio Pro.
+
+Rollback: remove the render in `EditorInner`; the new file becomes dead and can be deleted.
+
+## Open Questions
+
+- Exact icon glyph names for Edit and Remove — resolve against the shipped icon font during implementation.
diff --git a/openspec/changes/archive/2026-07-13-add-link-bubble-menu/proposal.md b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/proposal.md
new file mode 100644
index 0000000000..6bd926ad0d
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/proposal.md
@@ -0,0 +1,32 @@
+## Why
+
+Today a user can insert a link via the toolbar, but there is no quick way to edit or remove an _existing_ link — they must reselect the text and reopen the toolbar dialog, and the toolbar's link dialog even duplicates the link when invoked on a bare cursor inside a link. A contextual bubble menu that appears on any link gives an in-place Edit/Remove affordance, matching the standard rich text editor UX.
+
+## What Changes
+
+- Add a `LinkBubbleMenu` component using tiptap's `BubbleMenu` from `@tiptap/react/menus` (already resolved transitively — no new dependency).
+- The menu appears whenever the caret is inside or a selection covers a link (`editor.isActive("link")`) and the editor is editable.
+- Menu contains two `ToolbarDefaultButton` controls:
+    - **Edit** — selects the whole link (`extendMarkRange("link")`) then opens the existing `LinkDialog`, prefilled, anchored to the link's DOM element.
+    - **Remove** — `extendMarkRange("link").unsetLink()` to strip the link across its full range, turning it back into normal text.
+- While the dialog is open, the bubble menu is suppressed (`shouldShow` returns false during editing) so only one floating layer shows at a time.
+- Render `LinkBubbleMenu` inside `EditorInner`, as a sibling to `EditorContent`, within the existing `EditorContextProvider`.
+
+## Capabilities
+
+### New Capabilities
+
+- `rich-text-link-bubble-menu`: Contextual bubble menu shown on links, offering in-place Edit and Remove actions, including the full-link selection behavior that keeps editing and removal correct regardless of caret position.
+
+### Modified Capabilities
+
+<!-- None — the existing toolbar link-insert behavior is unchanged. -->
+
+## Impact
+
+- Package: `@mendix/rich-text-web`
+- New file: `src/components/LinkBubbleMenu.tsx`
+- Modified: `src/components/Editor.tsx` (`EditorInner` renders the bubble menu)
+- Reuses: `LinkDialog` (existing edit path), `ToolbarDefaultButton`, `useCurrentEditor`.
+- Styling: new `.link-bubble-menu` container class; reuses existing toolbar button styles.
+- No XML, no runtime API change, no new dependency.
diff --git a/openspec/changes/archive/2026-07-13-add-link-bubble-menu/specs/rich-text-link-bubble-menu/spec.md b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/specs/rich-text-link-bubble-menu/spec.md
new file mode 100644
index 0000000000..598d67d1a8
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/specs/rich-text-link-bubble-menu/spec.md
@@ -0,0 +1,58 @@
+## ADDED Requirements
+
+### Requirement: Contextual link bubble menu
+
+The rich text editor SHALL display a floating bubble menu whenever the caret is inside a link or a selection covers a link, and the editor is editable. The menu SHALL contain an Edit action and a Remove action.
+
+#### Scenario: Menu appears on a link
+
+- **WHEN** the caret is placed inside link text in an editable editor
+- **THEN** a bubble menu with Edit and Remove buttons appears anchored to the link
+
+#### Scenario: Menu hidden away from links
+
+- **WHEN** the caret is in text that is not part of a link
+- **THEN** the bubble menu is not shown
+
+#### Scenario: Menu suppressed when not editable
+
+- **WHEN** the editor is read-only
+- **THEN** the bubble menu is not shown even if the caret is inside a link
+
+### Requirement: Edit an existing link
+
+The Edit action SHALL select the entire link range before opening the link dialog, so the dialog is prefilled with the link's current attributes and updates the existing link in place rather than inserting a duplicate.
+
+#### Scenario: Edit from a bare caret inside a link
+
+- **WHEN** the caret is inside a link with no text selected and the user activates Edit
+- **THEN** the full link range is selected and the link dialog opens prefilled with the current URL, text, title, and target
+- **AND** submitting the dialog updates the existing link without duplicating its text
+
+#### Scenario: Dialog anchored to the link
+
+- **WHEN** the Edit action opens the link dialog
+- **THEN** the dialog is positioned relative to the link's DOM element and remains positioned there while editing
+
+### Requirement: Remove a link
+
+The Remove action SHALL strip the link mark across its entire range, converting the linked text back into normal text.
+
+#### Scenario: Remove from a bare caret inside a link
+
+- **WHEN** the caret is inside a link with no text selected and the user activates Remove
+- **THEN** the link mark is removed from the whole link range and the text remains as plain text
+
+### Requirement: Single floating layer while editing
+
+While the link dialog is open, the bubble menu SHALL be suppressed so that only one floating layer is visible at a time.
+
+#### Scenario: Bubble hides during edit
+
+- **WHEN** the link dialog is open via the Edit action
+- **THEN** the bubble menu is not shown
+
+#### Scenario: Bubble returns after editing
+
+- **WHEN** the link dialog is closed and the caret is still inside a link
+- **THEN** the bubble menu reappears
diff --git a/openspec/changes/archive/2026-07-13-add-link-bubble-menu/tasks.md b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/tasks.md
new file mode 100644
index 0000000000..d19c8cc7b8
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-add-link-bubble-menu/tasks.md
@@ -0,0 +1,30 @@
+## 1. Create the bubble menu component
+
+- [x] 1.1 Add `src/components/LinkBubbleMenu.tsx` importing `BubbleMenu` from `@tiptap/react/menus`, reading `editor` via `useCurrentEditor()`
+- [x] 1.2 Add local `isEditing` state and a `linkEl` state for the resolved link DOM element
+- [x] 1.3 Implement `shouldShow = ({ editor }) => editor.isEditable && editor.isActive("link") && !isEditing`
+- [x] 1.4 Render `<BubbleMenu editor pluginKey="linkBubbleMenu" shouldShow>` wrapping two `ToolbarDefaultButton`s (Edit, Remove) in a `.link-bubble-menu` container
+
+## 2. Wire the actions
+
+- [x] 2.1 `removeLink`: `editor.chain().focus().extendMarkRange("link").unsetLink().run()`
+- [x] 2.2 `resolveLinkEl`: from `editor.view.domAtPos(editor.state.selection.from)`, walk up to nearest `<a>` / `.tiptap-link` element
+- [x] 2.3 `openEdit`: run `extendMarkRange("link")`, set `linkEl` from `resolveLinkEl`, set `isEditing = true`
+- [x] 2.4 Render `{isEditing && <LinkDialog referenceElement={linkEl} onClose={() => setIsEditing(false)} />}`
+- [x] 2.5 Choose icons from the shipped font (`src/ui/RichTextIcons.scss`) — no pencil glyph exists; use `Hyperlink` for Edit and `Erase` (or `Delete`) for Remove, or add a new glyph if a dedicated edit icon is wanted
+
+## 3. Integrate into the editor
+
+- [x] 3.1 Render `<LinkBubbleMenu />` inside `EditorInner` in `Editor.tsx`, as a sibling to `EditorContent` within `tiptap-wrapper`
+- [x] 3.2 Confirm it only mounts when not in code view (bubble is irrelevant in the HTML code editor)
+
+## 4. Styling
+
+- [x] 4.1 Add `.link-bubble-menu` container style (inline-flex, padding, background, shadow); reuse existing toolbar `.icon-button` styles for the buttons
+
+## 5. Verify
+
+- [x] 5.1 Unit test: `shouldShow` returns true on active link + editable, false off-link, false when read-only, false while editing
+- [x] 5.2 Unit test: Remove strips the whole link from a bare caret; Edit selects the full range so `LinkDialog` prefills and updates in place (no duplicate)
+- [x] 5.3 Run package unit tests (Jest + RTL) — all pass
+- [ ] 5.4 Manual check in Studio Pro (`pnpm start` with `MX_PROJECT_PATH`): click a link → bubble shows → Edit prefills + updates, Remove unlinks; bubble hidden while dialog open and in read-only mode
diff --git a/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/.openspec.yaml b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/.openspec.yaml
new file mode 100644
index 0000000000..8803b473ec
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-12
diff --git a/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/design.md b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/design.md
new file mode 100644
index 0000000000..6c7971da89
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/design.md
@@ -0,0 +1,93 @@
+## Context
+
+The rich text toolbar (`@mendix/rich-text-web`) renders every control through `ToolbarButtonFactory` in `Toolbar.tsx`, which dispatches to 7 components. Eight `<button>` elements across those components each hand-roll the same trigger markup — `<button className="icon-button" title>` wrapping `<span className="icons icon-{icon}">` — plus their own ref forwarding and active/disabled handling.
+
+Current `<button>` sites:
+
+| Component                  | Buttons | Distinctive traits                                                                                                   |
+| -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| `ToolbarButton` (default)  | 1       | `activeIcon`, `disabled` via `canExecute`, Tab-to-editor `onKeyDown`, `isActive`                                     |
+| `CodeViewToolbarButton`    | 1       | `isActive` from `codeViewState`                                                                                      |
+| `ColorPickerToolbarButton` | 1       | ref anchors floating picker                                                                                          |
+| `DialogToolbarButton`      | 1       | ref anchors dialog                                                                                                   |
+| `TableGridToolbarButton`   | 1       | ref anchors grid selector                                                                                            |
+| `ConfigurationDropdown`    | 1       | ref anchors config panel                                                                                             |
+| `ToolbarDropdown`          | 1       | `toolbar-dropdown-button` class, label+arrow children                                                                |
+| `ToolbarSplitButton`       | 2       | `split-button-main` / `split-button-dropdown` classes, `aria-pressed`/`aria-expanded`/`aria-haspopup`, arrow-key nav |
+
+`Toolbar.scss` styles both a global `.tiptap-toolbar button {}` block and specific base classes (`.icon-button`, `.toolbar-dropdown-button`, `.split-button-main`, `.split-button-dropdown`).
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- One `ToolbarDefaultButton` component owning the toolbar `<button>` element.
+- Route all 8 button sites through it with zero user-facing behavior change.
+- Preserve existing CSS class names, native `disabled`, `aria-*`, and keyboard handlers.
+
+**Non-Goals:**
+
+- No change to `Toolbar.scss` selectors or class names.
+- No consolidation of dropdown-menu-item `<button>`s (`toolbar-dropdown-item`) — they are list rows, not toolbar controls.
+- No change to `ToolbarButtonFactory` dispatch logic, editor commands, or floating-UI hooks.
+
+## Decisions
+
+### Extend `ButtonHTMLAttributes<HTMLButtonElement>` + `forwardRef`
+
+```tsx
+interface ToolbarDefaultButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: string;
+    activeIcon?: string;
+    isActive?: boolean;
+}
+```
+
+Extending the native attribute type gives free, type-safe passthrough for `onClick`, `onKeyDown`, `title`, `type`, `disabled`, `aria-*`, and `data-*` without enumerating each. `forwardRef<HTMLButtonElement>` is mandatory — 6 of 8 sites anchor floating UI to `buttonRef.current`.
+
+_Alternative considered:_ explicit prop list. Rejected — would drop-and-miss attributes (Split's three aria props) and drift from native semantics.
+
+### Icon child is a default, not fixed
+
+```tsx
+{
+    children ?? <span className={`icons icon-${isActive && activeIcon ? activeIcon : icon}`} />;
+}
+```
+
+Icon-only sites pass just `icon`. Dropdown/Split pass `children` (label+arrow, or arrow). `activeIcon` swap only applies to the default child, matching current `ToolbarButton` behavior.
+
+### `className` replaces the base, `is-active` composes
+
+```tsx
+className={classNames(className || "icon-button", { "is-active": isActive })}
+```
+
+Because the SCSS targets distinct base classes, a supplied `className` (e.g. `split-button-main`) must _replace_ `icon-button`, not append. `is-active` layers on top of whichever base is used. This preserves all existing selectors untouched.
+
+_Alternative considered:_ always emit `icon-button` and append extra classes. Rejected — Dropdown/Split styles are not scoped under `.icon-button`, so double-base classes could pull unwanted global button rules.
+
+### Default `type="button"`
+
+`type={type ?? "button"}` — matches Split's explicit `type="button"` and prevents accidental form submission at other sites that currently omit it.
+
+## Risks / Trade-offs
+
+- **Tab-to-editor handler breaks** → keep native `disabled` attribute (never `aria-disabled`); the handler's `querySelectorAll("button:not([disabled])")` stays valid. Verified as an explicit spec requirement.
+- **Split button's two children render differently** → Split passes each of its two buttons through separate `ToolbarDefaultButton` instances with distinct `className` + `children`; no shared-state coupling introduced.
+- **Silent class regression** → snapshot/DOM assertions per site plus existing E2E (`e2e/RichText.spec.js`) guard against class-name drift.
+- **Over-consolidation of menu items** → explicitly out of scope; menu-item buttons keep their own markup.
+
+## Migration Plan
+
+1. Add `ToolbarDefaultButton.tsx`.
+2. Migrate icon-only sites first (ColorPicker, Dialog, TableGrid, ConfigurationDropdown, CodeView) — lowest risk.
+3. Migrate `ToolbarButton` (default) preserving `onKeyDown` + `disabled`.
+4. Migrate `ToolbarDropdown` (className + children) and `ToolbarSplitButton` (two instances + aria).
+5. Run unit tests + E2E; verify rendered class names and keyboard flows unchanged.
+
+Rollback: revert the call-site edits; the new file is additive and can remain unused.
+
+## Open Questions
+
+- None. Menu-item scope resolved (excluded); class-composition rule resolved (replace base).
diff --git a/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/proposal.md b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/proposal.md
new file mode 100644
index 0000000000..6b298a2040
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/proposal.md
@@ -0,0 +1,33 @@
+## Why
+
+The rich text toolbar has 8 button elements spread across 7 components, each hand-rolling a near-identical `<button className="icon-button" title>` with an `<span className="icons icon-*">` inside. Trigger markup, ref forwarding, and active/disabled state are copy-pasted, so styling and accessibility fixes must be applied in many places. A single `ToolbarDefaultButton` removes the duplication and gives one place to own button behavior.
+
+## What Changes
+
+- Add `ToolbarDefaultButton` — a `forwardRef<HTMLButtonElement>` component that renders the toolbar `<button>`, defaulting to an icon `<span>` child and composing `icon-button` / `is-active` classes.
+- Route all toolbar button `<button>` elements through it:
+    - `ToolbarButton` (default action button — icon, activeIcon, isActive, disabled, Tab keydown)
+    - `CodeViewToolbarButton` (icon + isActive)
+    - `ColorPickerToolbarButton`, `DialogToolbarButton`, `TableGridToolbarButton`, `ConfigurationDropdown` (icon triggers with forwarded ref)
+    - `ToolbarDropdown` (custom label+arrow children, `toolbar-dropdown-button` class)
+    - `ToolbarSplitButton` (main + dropdown-arrow buttons, custom classes + aria)
+- Preserve native `disabled` (Tab handler relies on `button:not([disabled])`), all `aria-*`, `type`, and `onKeyDown` passthrough via extending `ButtonHTMLAttributes`.
+- No user-facing behavior change — pure refactor. No spec/requirement changes.
+
+## Capabilities
+
+### New Capabilities
+
+- `rich-text-toolbar-button`: Shared toolbar button component contract — icon/activeIcon rendering, active/disabled state, class composition, ref forwarding, and native attribute passthrough used by every rich text toolbar control.
+
+### Modified Capabilities
+
+<!-- None — pure internal refactor, no existing spec requirements change. -->
+
+## Impact
+
+- Package: `@mendix/rich-text-web`
+- New file: `src/components/toolbars/components/ToolbarDefaultButton.tsx`
+- Modified: `ToolbarButton.tsx`, `CodeView.tsx`, `ColorPicker.tsx`, `Dialog.tsx`, `TableGrid.tsx`, `ConfigurationDropdown.tsx`, `ToolbarDropdown.tsx`, `ToolbarSplitButton.tsx`
+- Styling: `Toolbar.scss` unchanged — class names preserved (`icon-button`, `toolbar-dropdown-button`, `split-button-main`, `split-button-dropdown`).
+- No XML, no dependencies, no runtime API change.
diff --git a/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/specs/rich-text-toolbar-button/spec.md b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/specs/rich-text-toolbar-button/spec.md
new file mode 100644
index 0000000000..1771d74eb3
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/specs/rich-text-toolbar-button/spec.md
@@ -0,0 +1,67 @@
+## ADDED Requirements
+
+### Requirement: Shared toolbar button component
+
+The rich text toolbar SHALL provide a single `ToolbarDefaultButton` component that renders the `<button>` element for every toolbar control. All toolbar button and toggle controls SHALL render their `<button>` through this component rather than hand-rolling their own `<button>` markup.
+
+#### Scenario: Icon-only control renders default icon child
+
+- **WHEN** a `ToolbarDefaultButton` is given an `icon` prop and no children
+- **THEN** it renders a `<button>` containing `<span className="icons icon-{icon}">`
+
+#### Scenario: Custom children override the icon
+
+- **WHEN** a `ToolbarDefaultButton` is given `children`
+- **THEN** it renders the provided children in place of the default icon `<span>`
+
+### Requirement: Active and disabled state
+
+`ToolbarDefaultButton` SHALL reflect active state via the `is-active` CSS class and MUST render a native `disabled` attribute when disabled, so keyboard focus queries relying on `button:not([disabled])` continue to work.
+
+#### Scenario: Active state applies is-active class
+
+- **WHEN** `isActive` is true
+- **THEN** the rendered `<button>` includes the `is-active` class
+
+#### Scenario: Active icon swap
+
+- **WHEN** `isActive` is true and an `activeIcon` prop is provided and no children are given
+- **THEN** the default icon `<span>` uses `icon-{activeIcon}` instead of `icon-{icon}`
+
+#### Scenario: Disabled uses native attribute
+
+- **WHEN** the button is disabled
+- **THEN** the rendered element carries the native HTML `disabled` attribute (not `aria-disabled`)
+
+### Requirement: Class composition
+
+`ToolbarDefaultButton` SHALL default to the `icon-button` base class, and SHALL allow a caller-supplied `className` to replace that base so controls needing distinct base classes (e.g. `toolbar-dropdown-button`, `split-button-main`, `split-button-dropdown`) render with their own class. The `is-active` class SHALL compose on top of whichever base is used.
+
+#### Scenario: Default base class
+
+- **WHEN** no `className` is supplied
+- **THEN** the rendered `<button>` uses the `icon-button` base class
+
+#### Scenario: Caller replaces base class
+
+- **WHEN** a `className` such as `split-button-main` is supplied
+- **THEN** the rendered `<button>` uses that class as its base and does not include `icon-button`
+
+### Requirement: Ref forwarding and attribute passthrough
+
+`ToolbarDefaultButton` SHALL forward a ref to the underlying `<button>` element so floating dropdowns and pickers can anchor to it, and SHALL pass through standard button attributes including `onClick`, `onKeyDown`, `title`, `type`, `aria-*`, and `data-*`. The `type` SHALL default to `"button"` when not supplied.
+
+#### Scenario: Ref anchors floating UI
+
+- **WHEN** a component passes a ref to `ToolbarDefaultButton` and opens a floating dropdown
+- **THEN** the ref resolves to the underlying `<button>` element used as the floating reference
+
+#### Scenario: Accessibility attributes pass through
+
+- **WHEN** `aria-pressed`, `aria-expanded`, or `aria-haspopup` are supplied
+- **THEN** they appear on the rendered `<button>`
+
+#### Scenario: Default button type
+
+- **WHEN** no `type` prop is supplied
+- **THEN** the rendered `<button>` has `type="button"`
diff --git a/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/tasks.md b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/tasks.md
new file mode 100644
index 0000000000..fd3eed4f92
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-consolidate-toolbar-button/tasks.md
@@ -0,0 +1,31 @@
+## 1. Create the component
+
+- [x] 1.1 Add `src/components/toolbars/components/ToolbarDefaultButton.tsx` as a `forwardRef<HTMLButtonElement>` component with props `extends ButtonHTMLAttributes<HTMLButtonElement>` plus `icon?`, `activeIcon?`, `isActive?`
+- [x] 1.2 Render `<button>` with `type={type ?? "button"}`, `className={classNames(className || "icon-button", { "is-active": isActive })}`, ref forwarded, and rest attributes spread
+- [x] 1.3 Default child: `{children ?? <span className={\`icons icon-${isActive && activeIcon ? activeIcon : icon}\`} />}`
+
+## 2. Migrate icon-only trigger sites
+
+- [x] 2.1 `ColorPicker.tsx` — replace raw `<button>` with `<ToolbarDefaultButton ref={buttonRef} icon={config.icon} title={config.title} onClick={...} />`
+- [x] 2.2 `Dialog.tsx` — same replacement, forwarding `buttonRef`
+- [x] 2.3 `TableGrid.tsx` — same replacement, forwarding `buttonRef`
+- [x] 2.4 `ConfigurationDropdown.tsx` — same replacement, forwarding `buttonRef`
+- [x] 2.5 `CodeView.tsx` — replace with `isActive={codeViewState.isCodeView}` (base class stays `icon-button`)
+
+## 3. Migrate the default action button
+
+- [x] 3.1 `ToolbarButton.tsx` — replace `<button>` with `ToolbarDefaultButton`, passing `icon`, `activeIcon`, `isActive`, `disabled={isDisabled}`, `onClick={handleClick}`, `onKeyDown={handleKeyDown}`, `title`
+- [x] 3.2 Confirm native `disabled` still renders (Tab handler `querySelectorAll("button:not([disabled])")` must keep working)
+
+## 4. Migrate dropdown and split buttons
+
+- [x] 4.1 `ToolbarDropdown.tsx` — trigger button: `className={\`toolbar-dropdown-button ${config.name}\`}`, pass label+arrow as `children`
+- [x] 4.2 `ToolbarSplitButton.tsx` — main button via `ToolbarDefaultButton` with `className="split-button-main"`, `aria-pressed`, arrow-icon `children`, `onKeyDown`
+- [x] 4.3 `ToolbarSplitButton.tsx` — dropdown button via `ToolbarDefaultButton` with `className="split-button-dropdown"`, `aria-expanded`, `aria-haspopup="menu"`, arrow-icon `children`, `onKeyDown`
+
+## 5. Verify
+
+- [x] 5.1 Add/update unit tests asserting rendered class names, `is-active`, native `disabled`, and `aria-*` passthrough for `ToolbarDefaultButton`
+- [x] 5.2 Run package unit tests (Jest + RTL) — new suite passes 8/8 (pre-existing RichText snapshot + customList/fonts failures are unrelated, present on clean HEAD)
+- [ ] 5.3 Run E2E (`e2e/RichText.spec.js`) — toolbar rendering, dropdown/split keyboard nav, and Tab-to-editor unchanged
+- [ ] 5.4 Manual check in Studio Pro (`pnpm start` with `MX_PROJECT_PATH`) — no visual regression across presets
diff --git a/openspec/changes/archive/2026-07-13-list-margin-keyboard/proposal.md b/openspec/changes/archive/2026-07-13-list-margin-keyboard/proposal.md
new file mode 100644
index 0000000000..ab467fa308
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-list-margin-keyboard/proposal.md
@@ -0,0 +1,144 @@
+# Proposal: List Margin via Keyboard Shortcut
+
+## Why
+
+Lists cannot be shifted right/left as a block for layout (e.g., aligning a list with an indented paragraph). Tab is already taken by structural nesting (`sinkListItem`/`liftListItem`) and that behavior works well — we do not want to touch it.
+
+An earlier attempt overloaded Tab to do margin on top-level lists and nesting on child lists. It entangled two different mental models on one key and was reverted. This proposal keeps Tab exactly as-is and adds a **separate, dedicated keyboard control** for list margin.
+
+## What Changes
+
+Add `Ctrl+]` / `Ctrl+[` (Tiptap `Mod-]` / `Mod-[`, so Cmd on macOS) as a block indent/outdent control:
+
+- **In a list (any type, any depth)**: adjusts `margin-left` on the nearest list node.
+- **In a paragraph / heading / blockquote**: adjusts `margin-left` via the existing indent walk (gives paragraphs a keyboard indent beyond Tab).
+
+`Ctrl+]` / `Ctrl+[` was chosen over `Ctrl+Arrow` because Ctrl+Arrow is the standard word-by-word cursor navigation shortcut; overriding it would break core text editing. `Ctrl+]` / `Ctrl+[` is the Word / Google Docs indent idiom and collides with nothing in this codebase.
+
+### Behavior Table
+
+```
+┌──────────────┬───────────────────────────┬───────────────────────────┐
+│ Input        │ Context                   │ Result                    │
+├──────────────┼───────────────────────────┼───────────────────────────┤
+│ Tab          │ list item                 │ sinkListItem  (UNCHANGED) │
+│ Shift+Tab    │ list item                 │ liftListItem  (UNCHANGED) │
+│ Tab          │ paragraph/heading/bq      │ paragraph margin (UNCH.)  │
+│ Ctrl+]       │ any list, any depth       │ list margin +1   (NEW)    │
+│ Ctrl+]       │ paragraph/heading/bq      │ block margin +1  (NEW kb) │
+│ Ctrl+[       │ any list, any depth       │ list margin −1, clamp 0   │
+│ Ctrl+[       │ paragraph/heading/bq      │ block margin −1, clamp 0  │
+└──────────────┴───────────────────────────┴───────────────────────────┘
+```
+
+"Any list, any depth" means depth is ignored — the shortcut always means "shift this list right/left". It never nests and never advances the numbering cycle. Nesting stays exclusively on Tab.
+
+## Implementation Approach
+
+### 1. Dedicated list-margin commands (Approach A — target the list node)
+
+New `listIndent` / `listOutdent` commands find the nearest `bulletList` / `orderedList` / `taskList` ancestor and `setNodeMarkup` its `indent` attribute by ±1, clamped to `[minIndent, maxIndent]`. They target the **list node only** — never descend into the inner paragraph — so the double-margin trap (list +2em AND its paragraph +2em) cannot occur.
+
+```typescript
+function findListAncestor(editor) {
+    const { $from } = editor.state.selection;
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (["bulletList", "orderedList", "taskList"].includes(node.type.name)) {
+            return { node, pos: $from.before(depth) };
+        }
+    }
+    return null;
+}
+```
+
+### 2. Keyboard shortcuts route list-first
+
+```typescript
+addKeyboardShortcuts() {
+    return {
+        "Mod-]": () => (findListAncestor(this.editor) ? listIndent() : increaseIndent()),
+        "Mod-[": () => (findListAncestor(this.editor) ? listOutdent() : decreaseIndent())
+    };
+}
+```
+
+List-first, exclusive: if the cursor is in a list, only the list node is touched and the command returns; otherwise the existing paragraph walk runs. A cursor in a list is also inside a paragraph, so this ordering is what prevents double margin.
+
+### 3. Decouple attribute registration from the walk
+
+The `types` option currently does double duty: it registers the `indent` global attribute AND drives the `updateIndentLevel` walk (which the toolbar buttons and paragraph-Tab use). Lists need the attribute to store/render margin, but must stay invisible to the walk so the **toolbar buttons remain paragraph-only** (per scope decision).
+
+Split the concern:
+
+```
+Attribute registration (addGlobalAttributes):
+    [paragraph, heading, blockquote, bulletList, orderedList, taskList]
+
+updateIndentLevel walk iterates:
+    [paragraph, heading, blockquote]   ← lists excluded
+
+Only listIndent/listOutdent touch list nodes.
+```
+
+Introduce a separate option (e.g. `attributeTypes` for registration vs `types` for the walk), or keep `types` walk-only and register the attribute on a fixed superset. Exact shape decided during implementation; the invariant is: **lists carry the attribute, the walk ignores them.**
+
+### 4. CSS: margin must render for lists in BOTH modes
+
+Current indent rendering differs by mode, and neither is correct for lists yet:
+
+```
+inline mode:  style="margin-left: N*2em"          (Indent.ts renderHTML)
+class mode:   .indent-N { padding-left: N*3px }    (RichTextFormatStyle.scss)
+```
+
+Two problems for lists:
+
+- **Unit mismatch**: inline uses `margin-left` in `em`; class mode uses `padding-left` in `px`. Inconsistent shift distance between modes (pre-existing, but lists make it visible).
+- **Class-mode padding collision**: `ol`/`ul` already have `padding-left: 1.5em` for the marker gutter. A `.indent-N { padding-left }` rule would **override** the gutter (not add to it), collapsing the numbers/bullets against the text instead of shifting the list.
+
+Resolution for lists (class mode): the indent must apply `margin-left` on list elements, not `padding-left`, so it stacks with the marker gutter. Add a list-scoped rule, e.g. `ol.indent-N, ul.indent-N { margin-left: … }`, or switch the `.indent-N` contribution to `margin-left`. Verify inline-mode lists too: element-selector `ol { margin: 0.5em 0 }` sets `margin-left: 0`, but an inline `style="margin-left"` wins on specificity — confirm with a test.
+
+## Edge Cases
+
+- **Task lists**: margin targets the `taskList` container node (found via `findListAncestor`), not `taskItem`. `isActive("listItem")` vs `taskItem` is irrelevant here.
+- **Nested list**: gets margin on its own node, independent of parent. Cumulative with the parent's own margin/gutter — same as nested indented paragraphs.
+- **Clamp**: `Ctrl+[` at `margin 0` is a no-op (does not unlist, does not go negative). This differs from the reverted design — no unlist behavior on this shortcut.
+- **Style/class merge**: Indent's margin coexists with `OrderedListStyled`'s `list-style-type` on the same `<ol>` (both `style` strings / classes merge). Applies in both modes.
+
+## Impact
+
+**Files affected**:
+
+- `packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts` — `listIndent`/`listOutdent` commands, `findListAncestor` helper, `addKeyboardShortcuts`, split attribute-vs-walk types
+- `packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx` — register the `indent` attribute on list types
+- `packages/pluggableWidgets/rich-text-web/src/ui/RichTextFormatStyle.scss` (and/or `RichText.scss`) — list-scoped margin rule for class mode so it stacks with the marker gutter
+
+**Capability**: adds `list-margin-indent` (new). Does NOT modify `list-tab-indent` — Tab semantics are untouched.
+
+**User-facing changes**:
+
+- New `Ctrl+]` / `Ctrl+[` shortcut shifts lists (and other blocks) right/left by margin
+- Tab still nests list items structurally; word navigation (`Ctrl+Arrow`) unaffected
+- Toolbar indent buttons unchanged (still paragraph-only) — keyboard-only for now
+
+## Out of Scope
+
+- Toolbar buttons gaining list-margin (keyboard-only this round)
+- Any change to Tab / structural nesting
+- Advancing the numbering/bullet cycle on indent (explicitly rejected)
+- `Ctrl+[` unlisting at margin 0
+
+## Success Criteria
+
+- [ ] `Ctrl+]` in a list adds `margin-left` to the nearest list node (any depth)
+- [ ] `Ctrl+[` decreases list margin, clamped at 0 (no unlist, no negative)
+- [ ] `Ctrl+]` in a paragraph/heading/blockquote adds margin via existing walk
+- [ ] Inner paragraph of a list never receives its own margin (no double indent)
+- [ ] Tab / Shift+Tab behavior completely unchanged (still sink/lift)
+- [ ] Toolbar indent buttons still paragraph-only (do not margin lists)
+- [ ] `Ctrl+Arrow` word navigation still works inside lists
+- [ ] List margin renders correctly in BOTH inline and class modes
+- [ ] Class-mode list margin stacks with the marker gutter (markers not collapsed)
+- [ ] `list-style-type` and margin coexist on the same `<ol>`
+- [ ] Works for ordered, unordered, and task lists
diff --git a/openspec/changes/archive/2026-07-13-list-margin-keyboard/specs/list-margin-indent/spec.md b/openspec/changes/archive/2026-07-13-list-margin-keyboard/specs/list-margin-indent/spec.md
new file mode 100644
index 0000000000..c0883288d5
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-list-margin-keyboard/specs/list-margin-indent/spec.md
@@ -0,0 +1,114 @@
+## ADDED Requirements
+
+### Requirement: Ctrl+] adds margin to the current list
+
+When the cursor is inside a list of any type (ordered, unordered, or task) at any nesting depth, pressing `Ctrl+]` (Mod-] — Cmd-] on macOS) SHALL increase the `margin-left` of the nearest list node by one indent step, clamped to the configured maximum. The margin SHALL be applied only to the list node, never to the inner paragraph, so no double indentation occurs. The command SHALL NOT nest the list, change the DOM structure, or advance the numbering/bullet cycle.
+
+#### Scenario: Ctrl+] on a top-level ordered list
+
+- **WHEN** the cursor is in a top-level ordered list and the user presses `Ctrl+]`
+- **THEN** the `<ol>` receives increased `margin-left` (one step)
+- **AND** the DOM list structure is unchanged
+- **AND** the inner paragraph does not receive its own margin
+
+#### Scenario: Ctrl+] on a nested list
+
+- **WHEN** the cursor is in a nested list and the user presses `Ctrl+]`
+- **THEN** the nearest (innermost) list node receives increased `margin-left`
+- **AND** no structural nesting occurs
+
+#### Scenario: Ctrl+] on an unordered list
+
+- **WHEN** the cursor is in a bullet list and the user presses `Ctrl+]`
+- **THEN** the `<ul>` receives increased `margin-left`
+
+#### Scenario: Ctrl+] on a task list
+
+- **WHEN** the cursor is in a task list and the user presses `Ctrl+]`
+- **THEN** the task list container node receives increased `margin-left`
+- **AND** the inner paragraph does not receive its own margin
+
+#### Scenario: Ctrl+] accumulates on repeat
+
+- **WHEN** the user presses `Ctrl+]` three times in a list
+- **THEN** the list margin increases by three steps
+
+#### Scenario: Ctrl+] respects the maximum
+
+- **WHEN** the list is already at the maximum indent
+- **THEN** pressing `Ctrl+]` leaves the margin unchanged
+
+### Requirement: Ctrl+[ removes margin from the current list
+
+When the cursor is inside a list, pressing `Ctrl+[` (Mod-[ — Cmd-[ on macOS) SHALL decrease the `margin-left` of the nearest list node by one indent step, clamped at zero. It SHALL NOT unlist the item, lift nesting, or produce a negative margin.
+
+#### Scenario: Ctrl+[ decreases existing margin
+
+- **WHEN** a list has `margin-left` greater than zero and the user presses `Ctrl+[`
+- **THEN** the list margin decreases by one step
+
+#### Scenario: Ctrl+[ at zero margin is a no-op
+
+- **WHEN** a list has zero margin and the user presses `Ctrl+[`
+- **THEN** nothing changes (the item is not unlisted and margin does not go negative)
+
+### Requirement: Ctrl+] and Ctrl+[ indent non-list blocks
+
+When the cursor is in a paragraph, heading, or blockquote (not a list), `Ctrl+]` and `Ctrl+[` SHALL apply the existing margin-based block indentation (the same effect the toolbar indent buttons and paragraph Tab produce).
+
+#### Scenario: Ctrl+] in a paragraph
+
+- **WHEN** the cursor is in a paragraph and the user presses `Ctrl+]`
+- **THEN** the paragraph receives increased `margin-left`
+
+#### Scenario: Ctrl+[ in a heading at zero indent
+
+- **WHEN** the cursor is in a heading at zero indent and the user presses `Ctrl+[`
+- **THEN** nothing changes
+
+### Requirement: Tab and word navigation are unaffected
+
+The list margin shortcut SHALL NOT alter Tab behavior or cursor navigation shortcuts.
+
+#### Scenario: Tab still nests list items
+
+- **WHEN** the cursor is in a list item and the user presses Tab
+- **THEN** the list item is nested structurally (unchanged `sinkListItem` behavior)
+
+#### Scenario: Shift+Tab still lifts list items
+
+- **WHEN** the cursor is in a nested list item and the user presses Shift+Tab
+- **THEN** the list item is lifted (unchanged `liftListItem` behavior)
+
+#### Scenario: Ctrl+Arrow still navigates by word
+
+- **WHEN** the cursor is in a list and the user presses `Ctrl+ArrowLeft` or `Ctrl+ArrowRight`
+- **THEN** the cursor moves by word (standard navigation), not the list margin
+
+### Requirement: List margin renders in both inline and class modes
+
+The list margin SHALL render correctly whether the widget is configured for inline styles or CSS classes, and SHALL stack with the list marker gutter rather than replacing it.
+
+#### Scenario: Inline mode renders margin-left on the list
+
+- **WHEN** the widget is in inline mode and a list has a non-zero indent
+- **THEN** the list element renders an inline `margin-left` and the markers remain visible
+
+#### Scenario: Class mode shifts the list without collapsing markers
+
+- **WHEN** the widget is in class mode and a list has a non-zero indent
+- **THEN** the list is shifted right (via margin) and the numbers/bullets are not collapsed against the text
+
+#### Scenario: Margin coexists with list style type
+
+- **WHEN** an ordered list has both a `listStyleType` and a non-zero indent
+- **THEN** both the list style and the margin render together on the same `<ol>`
+
+### Requirement: Toolbar indent buttons remain paragraph-only
+
+The toolbar increase-indent and decrease-indent buttons SHALL continue to affect only paragraphs, headings, and blockquotes; they SHALL NOT add margin to lists.
+
+#### Scenario: Toolbar increase-indent in a list does not margin the list
+
+- **WHEN** the cursor is in a list and the user clicks the toolbar increase-indent button
+- **THEN** the list node does not receive a margin change
diff --git a/openspec/changes/archive/2026-07-13-list-margin-keyboard/tasks.md b/openspec/changes/archive/2026-07-13-list-margin-keyboard/tasks.md
new file mode 100644
index 0000000000..da02ff8887
--- /dev/null
+++ b/openspec/changes/archive/2026-07-13-list-margin-keyboard/tasks.md
@@ -0,0 +1,54 @@
+# Tasks: List Margin via Keyboard Shortcut
+
+## 1. Indent extension — list-margin commands
+
+- [x] 1.1 Add `findListAncestor(editor)` helper — nearest `bulletList`/`orderedList`/`taskList` ancestor `{ node, pos }` or null
+- [x] 1.2 Add `listIndent` command — `setNodeMarkup` on nearest list node, `indent + step`, clamp to `maxIndent`; targets list node only (no descent)
+- [x] 1.3 Add `listOutdent` command — same, `indent - step`, clamp to `minIndent` (no unlist, no negative)
+
+## 2. Indent extension — keyboard shortcuts
+
+- [x] 2.1 Add `addKeyboardShortcuts` with `Mod-]` → list ? `listIndent` : `increaseIndent`
+- [x] 2.2 Add `Mod-[` → list ? `listOutdent` : `decreaseIndent`
+- [x] 2.3 Verify shortcuts return false / pass through when no change (so browser default is not blocked unnecessarily)
+
+## 3. Indent extension — decouple attribute registration from the walk
+
+- [x] 3.1 Register the `indent` global attribute on list types (`bulletList`, `orderedList`, `taskList`) in addition to paragraph/heading/blockquote
+- [x] 3.2 Keep `updateIndentLevel` walk iterating paragraph/heading/blockquote ONLY (lists excluded) so toolbar buttons stay paragraph-only
+- [x] 3.3 Confirm invariant: lists carry the attribute but the walk never touches them
+
+## 4. Editor configuration
+
+- [x] 4.1 Pass the list types for attribute registration to `Indent.configure` (new option or fixed superset)
+
+## 5. CSS — margin renders in both modes
+
+- [x] 5.1 Inline mode: inline `margin-left` renders on `<ol>`/`<ul>` (unit-verified in HTML; visual specificity vs `margin: 0.5em 0` still needs a browser check)
+- [x] 5.2 Class mode: added list-scoped rule so `ol.indent-N`/`ul.indent-N` apply `margin-left` + keep `padding-left: 1.5em` gutter
+- [ ] 5.3 Verify in a browser that markers (numbers/bullets) are not collapsed against text in class mode (jsdom cannot compute layout)
+
+## 6. Unit tests
+
+- [x] 6.1 `Ctrl+]` (or `listIndent`) on top-level ordered list → margin on `<ol>`, no nesting, no paragraph margin
+- [x] 6.2 `listIndent` on nested list → margin on innermost list node, no structural change
+- [x] 6.3 `listIndent` on unordered list → margin on `<ul>`
+- [x] 6.4 `listIndent` on task list → margin on `taskList` node, no paragraph margin
+- [x] 6.5 Repeated `listIndent` → cumulative; capped at `maxIndent`
+- [x] 6.6 `listOutdent` decreases margin; at 0 is a no-op (no unlist, no negative)
+- [x] 6.7 `Ctrl+]` in paragraph → paragraph margin via existing walk
+- [x] 6.8 Tab still nests, Shift+Tab still lifts (regression)
+- [x] 6.9 Toolbar increase/decrease-indent does NOT margin a list (paragraph-only regression)
+- [x] 6.10 Style/class merge: `list-style-type` + margin coexist (both modes)
+
+## 7. E2E tests (Playwright)
+
+- [ ] 7.1 `Ctrl+]` shifts a list right; assert visual margin
+- [ ] 7.2 `Ctrl+[` shifts back and stops at zero
+- [ ] 7.3 Tab still nests (not margined) — guard against regression
+- [ ] 7.4 `Ctrl+ArrowLeft`/`Right` still moves by word inside a list
+
+## 8. Docs
+
+- [x] 8.1 Add CHANGELOG.md entry (user-facing: Ctrl+]/Ctrl+[ indents lists and blocks)
+- [ ] 8.2 Document the shortcut wherever editor keyboard shortcuts are listed (if such a list exists)
diff --git a/openspec/specs/list-margin-indent/spec.md b/openspec/specs/list-margin-indent/spec.md
new file mode 100644
index 0000000000..443531de48
--- /dev/null
+++ b/openspec/specs/list-margin-indent/spec.md
@@ -0,0 +1,120 @@
+# List Margin Indent Specification
+
+## Purpose
+
+`Ctrl+]` and `Ctrl+[` apply block indentation via margin. Inside a list, the margin is applied to the nearest list node at any nesting depth (never the inner paragraph); outside a list, it indents the current paragraph, heading, or blockquote. Tab-based list nesting and cursor navigation remain unchanged.
+
+## Requirements
+
+### Requirement: Ctrl+] adds margin to the current list
+
+When the cursor is inside a list of any type (ordered, unordered, or task) at any nesting depth, pressing `Ctrl+]` (Mod-] — Cmd-] on macOS) SHALL increase the `margin-left` of the nearest list node by one indent step, clamped to the configured maximum. The margin SHALL be applied only to the list node, never to the inner paragraph, so no double indentation occurs. The command SHALL NOT nest the list, change the DOM structure, or advance the numbering/bullet cycle.
+
+#### Scenario: Ctrl+] on a top-level ordered list
+
+- **WHEN** the cursor is in a top-level ordered list and the user presses `Ctrl+]`
+- **THEN** the `<ol>` receives increased `margin-left` (one step)
+- **AND** the DOM list structure is unchanged
+- **AND** the inner paragraph does not receive its own margin
+
+#### Scenario: Ctrl+] on a nested list
+
+- **WHEN** the cursor is in a nested list and the user presses `Ctrl+]`
+- **THEN** the nearest (innermost) list node receives increased `margin-left`
+- **AND** no structural nesting occurs
+
+#### Scenario: Ctrl+] on an unordered list
+
+- **WHEN** the cursor is in a bullet list and the user presses `Ctrl+]`
+- **THEN** the `<ul>` receives increased `margin-left`
+
+#### Scenario: Ctrl+] on a task list
+
+- **WHEN** the cursor is in a task list and the user presses `Ctrl+]`
+- **THEN** the task list container node receives increased `margin-left`
+- **AND** the inner paragraph does not receive its own margin
+
+#### Scenario: Ctrl+] accumulates on repeat
+
+- **WHEN** the user presses `Ctrl+]` three times in a list
+- **THEN** the list margin increases by three steps
+
+#### Scenario: Ctrl+] respects the maximum
+
+- **WHEN** the list is already at the maximum indent
+- **THEN** pressing `Ctrl+]` leaves the margin unchanged
+
+### Requirement: Ctrl+[ removes margin from the current list
+
+When the cursor is inside a list, pressing `Ctrl+[` (Mod-[ — Cmd-[ on macOS) SHALL decrease the `margin-left` of the nearest list node by one indent step, clamped at zero. It SHALL NOT unlist the item, lift nesting, or produce a negative margin.
+
+#### Scenario: Ctrl+[ decreases existing margin
+
+- **WHEN** a list has `margin-left` greater than zero and the user presses `Ctrl+[`
+- **THEN** the list margin decreases by one step
+
+#### Scenario: Ctrl+[ at zero margin is a no-op
+
+- **WHEN** a list has zero margin and the user presses `Ctrl+[`
+- **THEN** nothing changes (the item is not unlisted and margin does not go negative)
+
+### Requirement: Ctrl+] and Ctrl+[ indent non-list blocks
+
+When the cursor is in a paragraph, heading, or blockquote (not a list), `Ctrl+]` and `Ctrl+[` SHALL apply the existing margin-based block indentation (the same effect the toolbar indent buttons and paragraph Tab produce).
+
+#### Scenario: Ctrl+] in a paragraph
+
+- **WHEN** the cursor is in a paragraph and the user presses `Ctrl+]`
+- **THEN** the paragraph receives increased `margin-left`
+
+#### Scenario: Ctrl+[ in a heading at zero indent
+
+- **WHEN** the cursor is in a heading at zero indent and the user presses `Ctrl+[`
+- **THEN** nothing changes
+
+### Requirement: Tab and word navigation are unaffected
+
+The list margin shortcut SHALL NOT alter Tab behavior or cursor navigation shortcuts.
+
+#### Scenario: Tab still nests list items
+
+- **WHEN** the cursor is in a list item and the user presses Tab
+- **THEN** the list item is nested structurally (unchanged `sinkListItem` behavior)
+
+#### Scenario: Shift+Tab still lifts list items
+
+- **WHEN** the cursor is in a nested list item and the user presses Shift+Tab
+- **THEN** the list item is lifted (unchanged `liftListItem` behavior)
+
+#### Scenario: Ctrl+Arrow still navigates by word
+
+- **WHEN** the cursor is in a list and the user presses `Ctrl+ArrowLeft` or `Ctrl+ArrowRight`
+- **THEN** the cursor moves by word (standard navigation), not the list margin
+
+### Requirement: List margin renders in both inline and class modes
+
+The list margin SHALL render correctly whether the widget is configured for inline styles or CSS classes, and SHALL stack with the list marker gutter rather than replacing it.
+
+#### Scenario: Inline mode renders margin-left on the list
+
+- **WHEN** the widget is in inline mode and a list has a non-zero indent
+- **THEN** the list element renders an inline `margin-left` and the markers remain visible
+
+#### Scenario: Class mode shifts the list without collapsing markers
+
+- **WHEN** the widget is in class mode and a list has a non-zero indent
+- **THEN** the list is shifted right (via margin) and the numbers/bullets are not collapsed against the text
+
+#### Scenario: Margin coexists with list style type
+
+- **WHEN** an ordered list has both a `listStyleType` and a non-zero indent
+- **THEN** both the list style and the margin render together on the same `<ol>`
+
+### Requirement: Toolbar indent buttons remain paragraph-only
+
+The toolbar increase-indent and decrease-indent buttons SHALL continue to affect only paragraphs, headings, and blockquotes; they SHALL NOT add margin to lists.
+
+#### Scenario: Toolbar increase-indent in a list does not margin the list
+
+- **WHEN** the cursor is in a list and the user clicks the toolbar increase-indent button
+- **THEN** the list node does not receive a margin change
diff --git a/openspec/specs/list-style-auto-cycle/spec.md b/openspec/specs/list-style-auto-cycle/spec.md
new file mode 100644
index 0000000000..fe48bb60ec
--- /dev/null
+++ b/openspec/specs/list-style-auto-cycle/spec.md
@@ -0,0 +1,102 @@
+# List Style Auto-Cycle Specification
+
+## Purpose
+
+Automatic list style cycling by nesting depth using CSS. Ordered lists cycle decimal → lower-alpha → lower-roman. Unordered lists cycle disc → circle → square.
+
+## Requirements
+
+### Requirement: Ordered lists cycle through numbering styles by nesting depth
+
+Ordered lists (`<ol>`) SHALL automatically cycle through numbering styles based on nesting level using CSS descendant selectors.
+
+#### Scenario: Level 1 ordered list uses decimal
+
+- **WHEN** an ordered list is at the top level (not nested)
+- **THEN** list items display with decimal numbering (1, 2, 3)
+
+#### Scenario: Level 2 ordered list uses lower-alpha
+
+- **WHEN** an ordered list is nested one level deep inside another ordered list
+- **THEN** list items display with lower-alpha numbering (a, b, c)
+
+#### Scenario: Level 3 ordered list uses lower-roman
+
+- **WHEN** an ordered list is nested two levels deep
+- **THEN** list items display with lower-roman numbering (i, ii, iii)
+
+#### Scenario: Level 4 ordered list cycles back to decimal
+
+- **WHEN** an ordered list is nested three levels deep
+- **THEN** list items display with decimal numbering (1, 2, 3)
+
+#### Scenario: Level 5 ordered list cycles to lower-alpha
+
+- **WHEN** an ordered list is nested four levels deep
+- **THEN** list items display with lower-alpha numbering (a, b, c)
+
+#### Scenario: Level 6 ordered list cycles to lower-roman
+
+- **WHEN** an ordered list is nested five levels deep
+- **THEN** list items display with lower-roman numbering (i, ii, iii)
+
+### Requirement: Unordered lists cycle through bullet styles by nesting depth
+
+Unordered lists (`<ul>`) SHALL automatically cycle through bullet styles based on nesting level using CSS descendant selectors.
+
+#### Scenario: Level 1 unordered list uses disc
+
+- **WHEN** an unordered list is at the top level (not nested)
+- **THEN** list items display with disc bullets (●)
+
+#### Scenario: Level 2 unordered list uses circle
+
+- **WHEN** an unordered list is nested one level deep inside another unordered list
+- **THEN** list items display with circle bullets (○)
+
+#### Scenario: Level 3 unordered list uses square
+
+- **WHEN** an unordered list is nested two levels deep
+- **THEN** list items display with square bullets (■)
+
+#### Scenario: Level 4 unordered list cycles back to disc
+
+- **WHEN** an unordered list is nested three levels deep
+- **THEN** list items display with disc bullets (●)
+
+### Requirement: Inline styles override CSS defaults
+
+When a list element has an inline `style="list-style-type: ..."` attribute, that style SHALL take precedence over CSS auto-cycle rules.
+
+#### Scenario: Manually styled list preserves inline style
+
+- **WHEN** an ordered list has `style="list-style-type: upper-roman;"`
+- **THEN** list displays with upper-roman (I, II, III) regardless of nesting depth
+
+#### Scenario: Nested list without inline style uses auto-cycle
+
+- **WHEN** parent list has inline style but nested child list has no inline style
+- **THEN** child list uses CSS auto-cycle rules based on its depth
+
+### Requirement: Task lists remain unstyled
+
+Task lists with `data-type="taskList"` SHALL remain unstyled with `list-style: none`, unaffected by auto-cycle rules.
+
+#### Scenario: Task list ignores auto-cycle
+
+- **WHEN** a list has `data-type="taskList"` attribute
+- **THEN** list displays with no bullet/number markers (checkboxes only)
+
+### Requirement: Mixed list types cycle independently
+
+When ordered and unordered lists are mixed (e.g., `<ul>` inside `<ol>`), each list type SHALL follow its own cycle sequence.
+
+#### Scenario: Ordered list inside unordered list starts at decimal
+
+- **WHEN** an `<ol>` is nested inside a `<ul>`
+- **THEN** ordered list uses decimal (1, 2, 3) regardless of parent's depth
+
+#### Scenario: Unordered list inside ordered list starts at disc
+
+- **WHEN** a `<ul>` is nested inside an `<ol>`
+- **THEN** unordered list uses disc (●) regardless of parent's depth
diff --git a/openspec/specs/list-tab-indent/spec.md b/openspec/specs/list-tab-indent/spec.md
new file mode 100644
index 0000000000..5ca492f68e
--- /dev/null
+++ b/openspec/specs/list-tab-indent/spec.md
@@ -0,0 +1,83 @@
+# List Tab Indent Specification
+
+## Purpose
+
+Defines how the Tab and Shift+Tab keys behave inside the rich text editor. Inside list items, Tab controls list nesting (sink/lift) rather than margin indentation, while non-list content retains the existing margin-based indentation. Tab interception is scoped to the editor content area so it does not interfere with normal focus navigation on toolbar buttons and other UI elements.
+
+## Requirements
+
+### Requirement: Tab key increases list item nesting
+
+When cursor is inside a list item (ordered or unordered), pressing Tab key SHALL nest the list item one level deeper by calling Tiptap's `sinkListItem` command.
+
+#### Scenario: Tab in ordered list item
+
+- **WHEN** cursor is in an ordered list item and user presses Tab
+- **THEN** list item is nested one level deeper (becomes a sublist)
+
+#### Scenario: Tab in unordered list item
+
+- **WHEN** cursor is in an unordered list item and user presses Tab
+- **THEN** list item is nested one level deeper (becomes a sublist)
+
+#### Scenario: Tab in nested list item
+
+- **WHEN** cursor is in an already-nested list item and user presses Tab
+- **THEN** list item is nested one additional level deeper
+
+#### Scenario: Tab with cursor at any position in list line
+
+- **WHEN** cursor is anywhere in the list item text (start, middle, end) and user presses Tab
+- **THEN** entire list item is nested (not just the text)
+
+### Requirement: Shift+Tab decreases list item nesting
+
+When cursor is inside a nested list item, pressing Shift+Tab SHALL lift the list item one level up by calling Tiptap's `liftListItem` command.
+
+#### Scenario: Shift+Tab in nested ordered list
+
+- **WHEN** cursor is in a nested ordered list item and user presses Shift+Tab
+- **THEN** list item is lifted one level up (reduced nesting)
+
+#### Scenario: Shift+Tab in nested unordered list
+
+- **WHEN** cursor is in a nested unordered list item and user presses Shift+Tab
+- **THEN** list item is lifted one level up (reduced nesting)
+
+#### Scenario: Shift+Tab at top level has no effect
+
+- **WHEN** cursor is in a top-level list item (not nested) and user presses Shift+Tab
+- **THEN** no change occurs (cannot lift beyond list boundary)
+
+### Requirement: Tab in non-list content uses existing indent behavior
+
+When cursor is in paragraph, heading, or blockquote (non-list content), pressing Tab SHALL apply margin-based indentation as before.
+
+#### Scenario: Tab in paragraph
+
+- **WHEN** cursor is in a paragraph and user presses Tab
+- **THEN** paragraph receives increased margin-left indentation
+
+#### Scenario: Tab in heading
+
+- **WHEN** cursor is in a heading and user presses Tab
+- **THEN** heading receives increased margin-left indentation
+
+#### Scenario: Tab in blockquote
+
+- **WHEN** cursor is in a blockquote and user presses Tab
+- **THEN** blockquote receives increased margin-left indentation
+
+### Requirement: Tab only captures when focus is inside editor content
+
+Tab key SHALL only be intercepted for indentation when document focus is inside the editor content area, not when focus is on toolbar buttons or other UI elements.
+
+#### Scenario: Tab on toolbar button
+
+- **WHEN** focus is on a toolbar button and user presses Tab
+- **THEN** focus moves to next focusable element (standard browser Tab behavior)
+
+#### Scenario: Tab in editor content
+
+- **WHEN** focus is inside editor content area and user presses Tab
+- **THEN** Tab is intercepted for indentation (does not move focus)
diff --git a/openspec/specs/manual-list-style/spec.md b/openspec/specs/manual-list-style/spec.md
new file mode 100644
index 0000000000..bdfa2b0e51
--- /dev/null
+++ b/openspec/specs/manual-list-style/spec.md
@@ -0,0 +1,135 @@
+# Manual List Style Specification
+
+## Purpose
+
+Manual ordered list style override via toolbar dropdown. Users can force decimal, lower-alpha, or lower-roman numbering instead of auto-cycle behavior.
+
+## Requirements
+
+### Requirement: Users can manually set ordered list style via toolbar dropdown
+
+When cursor is in an ordered list, a toolbar dropdown SHALL appear with options to set the list's numbering style to decimal (auto-cycle), lower-alpha, or lower-roman.
+
+#### Scenario: Dropdown visible when in ordered list
+
+- **WHEN** cursor is inside an ordered list
+- **THEN** "Numbering Style" dropdown button is visible in toolbar
+
+#### Scenario: Dropdown hidden when not in ordered list
+
+- **WHEN** cursor is in paragraph, unordered list, or task list
+- **THEN** "Numbering Style" dropdown button is hidden
+
+#### Scenario: Dropdown shows three style options
+
+- **WHEN** user clicks "Numbering Style" dropdown
+- **THEN** dropdown displays options: "1, 2, 3" (decimal), "a, b, c" (lower-alpha), "i, ii, iii" (lower-roman)
+
+#### Scenario: Dropdown shows checkmark on current style
+
+- **WHEN** ordered list has no `listStyleType` attribute
+- **THEN** dropdown shows checkmark next to "1, 2, 3" (decimal/auto-cycle default)
+
+#### Scenario: Dropdown shows checkmark on manual style
+
+- **WHEN** ordered list has `listStyleType="lower-alpha"` attribute
+- **THEN** dropdown shows checkmark next to "a, b, c" (lower-alpha)
+
+### Requirement: Users can convert ordered list to lower-alpha via dropdown
+
+Selecting "a, b, c" from dropdown SHALL convert entire ordered list to lower-alpha numbering style.
+
+#### Scenario: Convert decimal list to lower-alpha
+
+- **WHEN** cursor is in decimal list (1, 2, 3) and user selects "a, b, c" from dropdown
+- **THEN** entire list converts to lower-alpha numbering (a, b, c)
+
+#### Scenario: Lower-alpha attribute stored in HTML
+
+- **WHEN** list is converted to lower-alpha
+- **THEN** `<ol>` element has `listStyleType="lower-alpha"` attribute stored as `data-list-style="lower-alpha"` (class mode) or inline style (inline mode)
+
+### Requirement: Users can convert ordered list to lower-roman via dropdown
+
+Selecting "i, ii, iii" from dropdown SHALL convert entire ordered list to lower-roman numbering style.
+
+#### Scenario: Convert decimal list to lower-roman
+
+- **WHEN** cursor is in decimal list (1, 2, 3) and user selects "i, ii, iii" from dropdown
+- **THEN** entire list converts to lower-roman numbering (i, ii, iii)
+
+#### Scenario: Lower-roman attribute stored in HTML
+
+- **WHEN** list is converted to lower-roman
+- **THEN** `<ol>` element has `listStyleType="lower-roman"` attribute stored as `data-list-style="lower-roman"` (class mode) or inline style (inline mode)
+
+### Requirement: Users can revert manual style to auto-cycle via dropdown
+
+Selecting "1, 2, 3" from dropdown SHALL remove manual style override and revert list to auto-cycle behavior.
+
+#### Scenario: Revert lower-alpha to auto-cycle
+
+- **WHEN** cursor is in lower-alpha list and user selects "1, 2, 3" from dropdown
+- **THEN** `listStyleType` attribute is removed and list uses auto-cycle (decimal at top level)
+
+#### Scenario: Auto-cycle applies after revert
+
+- **WHEN** manual style is removed from nested list at level 2
+- **THEN** list displays with lower-alpha (auto-cycle for level 2)
+
+### Requirement: Manual styles use cycle offset for nested lists
+
+When an ordered list has manual `listStyleType` attribute, nested children SHALL continue cycle from parent's position in sequence.
+
+#### Scenario: Lower-alpha nested children start at lower-roman
+
+- **WHEN** ordered list has `listStyleType="lower-alpha"` (cycle position 2) and contains nested ordered list without attribute
+- **THEN** nested list displays with lower-roman (cycle position 3)
+
+#### Scenario: Lower-roman nested children start at decimal
+
+- **WHEN** ordered list has `listStyleType="lower-roman"` (cycle position 3) and contains nested ordered list without attribute
+- **THEN** nested list displays with decimal (cycle position 4, cycle repeats)
+
+#### Scenario: Decimal nested children start at lower-alpha
+
+- **WHEN** ordered list has explicit `listStyleType="decimal"` (cycle position 1) and contains nested ordered list without attribute
+- **THEN** nested list displays with lower-alpha (cycle position 2)
+
+### Requirement: Manual styles support both inline and class-based modes
+
+OrderedListStyled extension SHALL output manual styles as inline `style="list-style-type: ..."` or class-based `data-list-style="..." class="list-style-..."` depending on widget configuration.
+
+#### Scenario: Inline mode outputs inline style
+
+- **WHEN** widget configured with `styleDataFormat="inline"` and list has `listStyleType="lower-alpha"`
+- **THEN** HTML output is `<ol style="list-style-type: lower-alpha;">`
+
+#### Scenario: Class mode outputs data attribute and class
+
+- **WHEN** widget configured with `styleDataFormat="class"` and list has `listStyleType="lower-alpha"`
+- **THEN** HTML output is `<ol data-list-style="lower-alpha" class="list-style-lower-alpha">`
+
+#### Scenario: Parse inline style on load
+
+- **WHEN** HTML contains `<ol style="list-style-type: lower-roman;">`
+- **THEN** extension parses and stores `listStyleType="lower-roman"` attribute
+
+#### Scenario: Parse data attribute on load
+
+- **WHEN** HTML contains `<ol data-list-style="lower-alpha">`
+- **THEN** extension parses and stores `listStyleType="lower-alpha"` attribute
+
+### Requirement: Regular numbered list button creates decimal list without attribute
+
+The existing "Numbered List" toolbar button SHALL continue creating ordered lists with no `listStyleType` attribute (uses auto-cycle).
+
+#### Scenario: Numbered list button creates decimal list
+
+- **WHEN** cursor is in paragraph and user clicks "Numbered List" button
+- **THEN** ordered list is created with decimal numbering (1, 2, 3) and no `listStyleType` attribute
+
+#### Scenario: Dropdown shows decimal as active for attribute-less list
+
+- **WHEN** ordered list has no `listStyleType` attribute
+- **THEN** dropdown displays checkmark next to "1, 2, 3" (decimal)
diff --git a/openspec/specs/ordered-list-interaction/spec.md b/openspec/specs/ordered-list-interaction/spec.md
new file mode 100644
index 0000000000..b8afc6e72e
--- /dev/null
+++ b/openspec/specs/ordered-list-interaction/spec.md
@@ -0,0 +1,143 @@
+# Ordered List Interaction Specification
+
+## Purpose
+
+User interaction patterns for ordered lists in the rich text editor. Covers split button behavior, sticky style preferences, and icon feedback.
+
+## Requirements
+
+### Requirement: Sticky state tracks last-used list style
+
+The system SHALL remember the last-used ordered list style across toggle operations.
+
+#### Scenario: Default style is decimal
+
+- **WHEN** user first interacts with ordered list
+- **THEN** sticky state defaults to `"decimal"`
+
+#### Scenario: Sticky state updates on style selection
+
+- **WHEN** user selects lower-alpha from dropdown
+- **THEN** sticky state updates to `"lower-alpha"`
+
+#### Scenario: Sticky state persists after toggle off
+
+- **WHEN** user has lower-alpha active
+- **WHEN** user toggles ordered list off
+- **WHEN** user toggles ordered list on again
+- **THEN** ordered list uses lower-alpha style
+
+### Requirement: Main button toggles OL with sticky style
+
+Clicking the main button SHALL toggle ordered list on/off, using sticky style when enabling.
+
+#### Scenario: Enable OL with sticky style when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-alpha
+- **WHEN** user clicks main button
+- **THEN** ordered list enables with lower-alpha style
+
+#### Scenario: Enable OL with decimal on first use
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is default (decimal)
+- **WHEN** user clicks main button
+- **THEN** ordered list enables with decimal style (null attribute)
+
+#### Scenario: Disable OL when active
+
+- **WHEN** ordered list is active
+- **WHEN** user clicks main button
+- **THEN** ordered list disables
+- **THEN** sticky state remains unchanged
+
+### Requirement: Dropdown selection applies style and enables OL
+
+Selecting a style from dropdown SHALL apply that style and enable OL if inactive.
+
+#### Scenario: Apply style when OL inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** user selects lower-roman from dropdown
+- **THEN** ordered list enables with lower-roman style
+- **THEN** sticky state updates to lower-roman
+
+#### Scenario: Change style when OL active
+
+- **WHEN** ordered list is active with decimal style
+- **WHEN** user selects lower-alpha from dropdown
+- **THEN** ordered list style changes to lower-alpha
+- **THEN** ordered list remains active
+- **THEN** sticky state updates to lower-alpha
+
+### Requirement: Icon reflects current or sticky state
+
+The split button icon SHALL dynamically change to reflect the active style or sticky state.
+
+#### Scenario: Icon shows active style
+
+- **WHEN** ordered list is active with lower-alpha
+- **THEN** icon displays List-lower-alpha
+
+#### Scenario: Icon shows sticky state when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-roman
+- **THEN** icon displays List-roman
+
+#### Scenario: Icon updates after style change
+
+- **WHEN** user changes style from decimal to lower-alpha
+- **THEN** icon updates from List-numbers to List-lower-alpha
+
+### Requirement: Dropdown is accessible when OL inactive
+
+The dropdown button SHALL be enabled and functional even when ordered list is inactive.
+
+#### Scenario: Dropdown button is not disabled
+
+- **WHEN** ordered list is inactive
+- **THEN** dropdown button is enabled
+- **THEN** user can open dropdown menu
+
+#### Scenario: Style options are selectable when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** dropdown menu is open
+- **THEN** all style options are clickable
+- **THEN** selecting option enables OL with that style
+
+### Requirement: Active style is visually indicated in dropdown
+
+The dropdown menu SHALL highlight the currently active or sticky style.
+
+#### Scenario: Active style is highlighted
+
+- **WHEN** ordered list is active with lower-alpha
+- **WHEN** dropdown menu is open
+- **THEN** lower-alpha option has `is-active` class
+
+#### Scenario: Sticky style is highlighted when inactive
+
+- **WHEN** ordered list is inactive
+- **WHEN** sticky state is lower-roman
+- **WHEN** dropdown menu is open
+- **THEN** lower-roman option has `is-active` class
+
+### Requirement: Sticky state is module-scoped
+
+The sticky state SHALL be stored at module level and shared across editor instances.
+
+#### Scenario: State persists during editor session
+
+- **WHEN** user selects lower-alpha
+- **WHEN** user navigates to different content area
+- **WHEN** user returns and toggles OL
+- **THEN** ordered list uses lower-alpha style
+
+#### Scenario: State resets on page reload
+
+- **WHEN** user selects lower-roman
+- **WHEN** page reloads
+- **THEN** sticky state resets to default (decimal)
diff --git a/openspec/specs/rich-text-link-bubble-menu/spec.md b/openspec/specs/rich-text-link-bubble-menu/spec.md
new file mode 100644
index 0000000000..d14fd851e0
--- /dev/null
+++ b/openspec/specs/rich-text-link-bubble-menu/spec.md
@@ -0,0 +1,64 @@
+# Rich Text Link Bubble Menu Specification
+
+## Purpose
+
+Contextual floating bubble menu for the rich text editor that appears when the caret is inside a link (or a selection covers a link). It provides quick Edit and Remove actions for the link, coordinating with the link dialog so that only one floating layer is visible at a time.
+
+## Requirements
+
+### Requirement: Contextual link bubble menu
+
+The rich text editor SHALL display a floating bubble menu whenever the caret is inside a link or a selection covers a link, and the editor is editable. The menu SHALL contain an Edit action and a Remove action.
+
+#### Scenario: Menu appears on a link
+
+- **WHEN** the caret is placed inside link text in an editable editor
+- **THEN** a bubble menu with Edit and Remove buttons appears anchored to the link
+
+#### Scenario: Menu hidden away from links
+
+- **WHEN** the caret is in text that is not part of a link
+- **THEN** the bubble menu is not shown
+
+#### Scenario: Menu suppressed when not editable
+
+- **WHEN** the editor is read-only
+- **THEN** the bubble menu is not shown even if the caret is inside a link
+
+### Requirement: Edit an existing link
+
+The Edit action SHALL select the entire link range before opening the link dialog, so the dialog is prefilled with the link's current attributes and updates the existing link in place rather than inserting a duplicate.
+
+#### Scenario: Edit from a bare caret inside a link
+
+- **WHEN** the caret is inside a link with no text selected and the user activates Edit
+- **THEN** the full link range is selected and the link dialog opens prefilled with the current URL, text, title, and target
+- **AND** submitting the dialog updates the existing link without duplicating its text
+
+#### Scenario: Dialog anchored to the link
+
+- **WHEN** the Edit action opens the link dialog
+- **THEN** the dialog is positioned relative to the link's DOM element and remains positioned there while editing
+
+### Requirement: Remove a link
+
+The Remove action SHALL strip the link mark across its entire range, converting the linked text back into normal text.
+
+#### Scenario: Remove from a bare caret inside a link
+
+- **WHEN** the caret is inside a link with no text selected and the user activates Remove
+- **THEN** the link mark is removed from the whole link range and the text remains as plain text
+
+### Requirement: Single floating layer while editing
+
+While the link dialog is open, the bubble menu SHALL be suppressed so that only one floating layer is visible at a time.
+
+#### Scenario: Bubble hides during edit
+
+- **WHEN** the link dialog is open via the Edit action
+- **THEN** the bubble menu is not shown
+
+#### Scenario: Bubble returns after editing
+
+- **WHEN** the link dialog is closed and the caret is still inside a link
+- **THEN** the bubble menu reappears
diff --git a/openspec/specs/rich-text-toolbar-button/spec.md b/openspec/specs/rich-text-toolbar-button/spec.md
new file mode 100644
index 0000000000..84253d40f4
--- /dev/null
+++ b/openspec/specs/rich-text-toolbar-button/spec.md
@@ -0,0 +1,73 @@
+# Rich Text Toolbar Button Specification
+
+## Purpose
+
+Shared `ToolbarDefaultButton` component for the rich text toolbar that renders the underlying `<button>` element for every toolbar control. Consolidates button markup, active/disabled state handling, class composition, ref forwarding, and attribute passthrough so individual toolbar controls no longer hand-roll their own `<button>` elements.
+
+## Requirements
+
+### Requirement: Shared toolbar button component
+
+The rich text toolbar SHALL provide a single `ToolbarDefaultButton` component that renders the `<button>` element for every toolbar control. All toolbar button and toggle controls SHALL render their `<button>` through this component rather than hand-rolling their own `<button>` markup.
+
+#### Scenario: Icon-only control renders default icon child
+
+- **WHEN** a `ToolbarDefaultButton` is given an `icon` prop and no children
+- **THEN** it renders a `<button>` containing `<span className="icons icon-{icon}">`
+
+#### Scenario: Custom children override the icon
+
+- **WHEN** a `ToolbarDefaultButton` is given `children`
+- **THEN** it renders the provided children in place of the default icon `<span>`
+
+### Requirement: Active and disabled state
+
+`ToolbarDefaultButton` SHALL reflect active state via the `is-active` CSS class and MUST render a native `disabled` attribute when disabled, so keyboard focus queries relying on `button:not([disabled])` continue to work.
+
+#### Scenario: Active state applies is-active class
+
+- **WHEN** `isActive` is true
+- **THEN** the rendered `<button>` includes the `is-active` class
+
+#### Scenario: Active icon swap
+
+- **WHEN** `isActive` is true and an `activeIcon` prop is provided and no children are given
+- **THEN** the default icon `<span>` uses `icon-{activeIcon}` instead of `icon-{icon}`
+
+#### Scenario: Disabled uses native attribute
+
+- **WHEN** the button is disabled
+- **THEN** the rendered element carries the native HTML `disabled` attribute (not `aria-disabled`)
+
+### Requirement: Class composition
+
+`ToolbarDefaultButton` SHALL default to the `icon-button` base class, and SHALL allow a caller-supplied `className` to replace that base so controls needing distinct base classes (e.g. `toolbar-dropdown-button`, `split-button-main`, `split-button-dropdown`) render with their own class. The `is-active` class SHALL compose on top of whichever base is used.
+
+#### Scenario: Default base class
+
+- **WHEN** no `className` is supplied
+- **THEN** the rendered `<button>` uses the `icon-button` base class
+
+#### Scenario: Caller replaces base class
+
+- **WHEN** a `className` such as `split-button-main` is supplied
+- **THEN** the rendered `<button>` uses that class as its base and does not include `icon-button`
+
+### Requirement: Ref forwarding and attribute passthrough
+
+`ToolbarDefaultButton` SHALL forward a ref to the underlying `<button>` element so floating dropdowns and pickers can anchor to it, and SHALL pass through standard button attributes including `onClick`, `onKeyDown`, `title`, `type`, `aria-*`, and `data-*`. The `type` SHALL default to `"button"` when not supplied.
+
+#### Scenario: Ref anchors floating UI
+
+- **WHEN** a component passes a ref to `ToolbarDefaultButton` and opens a floating dropdown
+- **THEN** the ref resolves to the underlying `<button>` element used as the floating reference
+
+#### Scenario: Accessibility attributes pass through
+
+- **WHEN** `aria-pressed`, `aria-expanded`, or `aria-haspopup` are supplied
+- **THEN** they appear on the rendered `<button>`
+
+#### Scenario: Default button type
+
+- **WHEN** no `type` prop is supplied
+- **THEN** the rendered `<button>` has `type="button"`
diff --git a/openspec/specs/split-button-component/spec.md b/openspec/specs/split-button-component/spec.md
new file mode 100644
index 0000000000..438ece10aa
--- /dev/null
+++ b/openspec/specs/split-button-component/spec.md
@@ -0,0 +1,189 @@
+# Split Button Component Specification
+
+## Purpose
+
+Toolbar split button component that combines a main action button with a dropdown menu for related options. Provides Word/Office-like UX pattern with keyboard navigation and accessibility support.
+
+## Requirements
+
+### Requirement: Split button renders main and dropdown parts
+
+The component SHALL render two interactive button elements grouped together: a main action button and a dropdown trigger button.
+
+#### Scenario: Component renders with both parts
+
+- **WHEN** split button is mounted in toolbar
+- **THEN** main button displays configured icon
+- **THEN** dropdown button displays chevron-down icon
+- **THEN** both buttons are grouped in single container with `role="group"`
+
+#### Scenario: Container has accessible label
+
+- **WHEN** split button is rendered
+- **THEN** container has `aria-label` matching button title
+
+### Requirement: Main button executes primary action
+
+The main button SHALL execute the configured command when clicked.
+
+#### Scenario: Main button click triggers command
+
+- **WHEN** user clicks main button
+- **THEN** configured command executes via editor chain
+- **THEN** focus returns to editor
+
+#### Scenario: Main button respects active state
+
+- **WHEN** configured `isActive` function returns true
+- **THEN** main button has `aria-pressed="true"`
+- **THEN** split button container has `is-active` class
+
+### Requirement: Dropdown button opens style menu
+
+The dropdown button SHALL toggle the dropdown menu when clicked.
+
+#### Scenario: Dropdown button opens menu
+
+- **WHEN** user clicks dropdown button
+- **THEN** dropdown menu becomes visible
+- **THEN** dropdown button has `aria-expanded="true"`
+
+#### Scenario: Dropdown button closes menu
+
+- **WHEN** dropdown menu is open
+- **WHEN** user clicks dropdown button again
+- **THEN** dropdown menu becomes hidden
+- **THEN** dropdown button has `aria-expanded="false"`
+
+### Requirement: Dropdown options display icon and text
+
+Each dropdown option SHALL render both an icon and text label.
+
+#### Scenario: Option renders with icon
+
+- **WHEN** dropdown menu is open
+- **THEN** each option displays icon from config `icon` field
+- **THEN** each option displays text from config `label` field
+
+#### Scenario: Active option is highlighted
+
+- **WHEN** dropdown menu is open
+- **WHEN** current value matches option value
+- **THEN** option has `is-active` class
+
+### Requirement: Selecting dropdown option updates state
+
+When user selects a dropdown option, the component SHALL execute the option's command and close the menu.
+
+#### Scenario: Option selection executes command
+
+- **WHEN** user clicks dropdown option
+- **THEN** option's command executes with configured attrs
+- **THEN** dropdown menu closes
+- **THEN** focus returns to editor
+
+### Requirement: Icon updates dynamically
+
+The main button icon SHALL change based on editor state and last-used value.
+
+#### Scenario: Icon reflects active state
+
+- **WHEN** editor has active state matching button config
+- **THEN** icon updates to reflect current state value
+
+#### Scenario: Icon reflects last-used value when inactive
+
+- **WHEN** editor does not have active state
+- **THEN** icon shows last-used value from sticky state
+
+### Requirement: Keyboard navigation between parts
+
+The component SHALL support arrow key navigation between main and dropdown buttons.
+
+#### Scenario: ArrowRight moves focus to dropdown
+
+- **WHEN** main button has focus
+- **WHEN** user presses ArrowRight
+- **THEN** focus moves to dropdown button
+
+#### Scenario: ArrowLeft moves focus to main
+
+- **WHEN** dropdown button has focus
+- **WHEN** user presses ArrowLeft
+- **THEN** focus moves to main button
+
+#### Scenario: ArrowDown opens dropdown
+
+- **WHEN** either button has focus
+- **WHEN** user presses ArrowDown
+- **THEN** dropdown menu opens
+
+### Requirement: Tab navigation treats as single control
+
+The split button SHALL act as single tab stop in toolbar navigation.
+
+#### Scenario: Tab focuses split button once
+
+- **WHEN** user tabs through toolbar
+- **THEN** split button receives focus as single stop
+- **THEN** next tab moves to next toolbar control
+
+#### Scenario: Shift+Tab navigates backward
+
+- **WHEN** split button has focus
+- **WHEN** user presses Shift+Tab
+- **THEN** focus moves to previous toolbar control
+
+### Requirement: Enter and Space execute focused part
+
+The component SHALL execute the action of whichever part has focus when Enter or Space is pressed.
+
+#### Scenario: Enter on main button executes command
+
+- **WHEN** main button has focus
+- **WHEN** user presses Enter
+- **THEN** main button command executes
+
+#### Scenario: Space on dropdown button opens menu
+
+- **WHEN** dropdown button has focus
+- **WHEN** user presses Space
+- **THEN** dropdown menu opens
+
+### Requirement: Click outside closes dropdown
+
+The dropdown menu SHALL close when user clicks outside the component.
+
+#### Scenario: Outside click closes menu
+
+- **WHEN** dropdown menu is open
+- **WHEN** user clicks outside split button
+- **THEN** dropdown menu closes
+
+### Requirement: Focus indicators are visible
+
+Both button parts SHALL display visible focus indicators for keyboard navigation.
+
+#### Scenario: Focus outline on main button
+
+- **WHEN** main button has focus
+- **THEN** main button displays focus outline
+
+#### Scenario: Focus outline on dropdown button
+
+- **WHEN** dropdown button has focus
+- **THEN** dropdown button displays focus outline
+
+### Requirement: Component updates on editor events
+
+The component SHALL re-render when editor state changes to keep icon and active state synchronized.
+
+#### Scenario: Update on selection change
+
+- **WHEN** editor `selectionUpdate` event fires
+- **THEN** component re-renders with current state
+
+#### Scenario: Update on content change
+
+- **WHEN** editor `transaction` event fires
+- **THEN** component re-renders with current state
diff --git a/openspec/specs/toolbar-configuration/spec.md b/openspec/specs/toolbar-configuration/spec.md
new file mode 100644
index 0000000000..621d023b3b
--- /dev/null
+++ b/openspec/specs/toolbar-configuration/spec.md
@@ -0,0 +1,95 @@
+# Toolbar Configuration Specification
+
+## Purpose
+
+Rich text editor toolbar configuration system. Defines button types, action handlers, and widget-specific toolbar customization (ordered list styles, etc.).
+
+## Requirements
+
+### Requirement: Toolbar config supports splitButton action type
+
+The toolbar configuration SHALL support `"splitButton"` as a valid action type for button definitions.
+
+#### Scenario: Split button action type is recognized
+
+- **WHEN** button config has `action: "splitButton"`
+- **THEN** toolbar factory renders ToolbarSplitButton component
+
+#### Scenario: Split button config includes dropdown options
+
+- **WHEN** button config has `action: "splitButton"`
+- **THEN** button config includes `dropdownOptions` array
+- **THEN** each option includes `label`, `value`, `command`, `attrs`, and `icon` fields
+
+### Requirement: Dropdown options support icon field
+
+The ToolbarDropdownOption interface SHALL include an optional `icon` field for visual representation.
+
+#### Scenario: Icon field is optional
+
+- **WHEN** dropdown option is defined
+- **THEN** `icon` field may be omitted without error
+
+#### Scenario: Icon field is used when present
+
+- **WHEN** dropdown option includes `icon` field
+- **THEN** rendered option displays icon before label
+
+### Requirement: Ordered list button uses split button configuration
+
+The ordered list toolbar button SHALL be configured as a split button with style options.
+
+#### Scenario: Ordered list button has split button action
+
+- **WHEN** toolbar groups are loaded
+- **THEN** orderedList button has `action: "splitButton"`
+
+#### Scenario: Ordered list dropdown includes style options
+
+- **WHEN** orderedList button config is accessed
+- **THEN** dropdownOptions includes decimal, lower-alpha, and lower-roman
+- **THEN** each option has corresponding icon (List-numbers, List-lower-alpha, List-roman)
+
+#### Scenario: Decimal option uses null styleType
+
+- **WHEN** decimal option is selected
+- **THEN** `attrs.styleType` is `null` (browser default)
+
+#### Scenario: Lower-alpha option uses styleType attribute
+
+- **WHEN** lower-alpha option is selected
+- **THEN** `attrs.styleType` is `"lower-alpha"`
+
+#### Scenario: Lower-roman option uses styleType attribute
+
+- **WHEN** lower-roman option is selected
+- **THEN** `attrs.styleType` is `"lower-roman"`
+
+### Requirement: Standalone orderedListStyle button is removed
+
+The toolbar configuration SHALL NOT include standalone `orderedListStyle` dropdown button.
+
+#### Scenario: List group has three buttons
+
+- **WHEN** list toolbar group is rendered
+- **THEN** group includes bulletList, orderedList (split), and taskList
+- **THEN** group does NOT include standalone orderedListStyle button
+
+### Requirement: Icon mapping helper is available
+
+The toolbar configuration SHALL provide helper function to map list style values to icon names.
+
+#### Scenario: Decimal maps to List-numbers
+
+- **WHEN** helper function receives `"decimal"` or `null`
+- **THEN** function returns `"List-numbers"`
+
+#### Scenario: Lower-alpha maps to List-lower-alpha
+
+- **WHEN** helper function receives `"lower-alpha"`
+- **THEN** function returns `"List-lower-alpha"`
+
+#### Scenario: Lower-roman maps to List-roman
+
+- **WHEN** helper function receives `"lower-roman"`
+- **THEN** function returns `"List-roman"`
diff --git a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md b/packages/pluggableWidgets/rich-text-web/CHANGELOG.md
index 2ab0b1c870..f1532c0e25 100644
--- a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/rich-text-web/CHANGELOG.md
@@ -10,6 +10,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed a security vulnerability (CVE-2026-13149).
 
+### Added
+
+- We added new configuration to allow users to use class names instead of inline styling in generated HTML to support strict CSP.
+
+### Fixed
+
+- We fixed Tiptap duplicate extension warnings for `link`, `textStyle`, `underline`, and `textDirection` by properly configuring StarterKit, removing redundant extension registrations in TextColorClass, memoizing the extensions array to prevent re-registration on component re-renders, and disabling the core TextDirection extension that conflicts with our custom implementation.
+
+- We fixed an issue where empty editor content was saving as `<p></p>` instead of an empty string, which incorrectly passed required field validation. Empty content now correctly saves as `""`, ensuring proper validation behavior. Note: This is a breaking change for forms that were relying on the incorrect behavior - required RichText fields will now correctly reject empty content.
+
+- We fixed an issue where the editor pasting back the whole sentence instead of the single copied word
+
+### Changed
+
+- We removed codemirror from code dialog viewer due to unsupported strict CSP policy. A simple internally built code editor using highlightjs is now replacing it.
+
 ## [4.12.0] - 2026-04-22
 
 ### Added
diff --git a/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js b/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js
index c05860d869..1d42e5a708 100644
--- a/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js
+++ b/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js
@@ -2,6 +2,7 @@ import { expect, test } from "@mendix/run-e2e/fixtures";
 import { waitForMendixApp } from "@mendix/run-e2e/mendix-helpers";
 
 test.describe("RichText", () => {
+    test.describe.configure({ mode: "serial" });
     test("compares with a screenshot baseline and checks if inline basic mode are rendered as expected", async ({
         page
     }) => {
@@ -115,6 +116,37 @@ test.describe("RichText", () => {
         await expect(page.locator(".mx-name-richText6")).toHaveScreenshot(`readOnlyModeReadPanel.png`);
     });
 
+    test("compares with a screenshot baseline and checks if class mode editor is rendered as expected", async ({
+        page
+    }) => {
+        await page.goto("/p/classmode");
+        await page.waitForLoadState("networkidle");
+        await expect(page.locator(".mx-name-richText1")).toBeVisible();
+        await expect(page.locator(".mx-name-richText1")).toHaveScreenshot(`classModeEditor.png`, { threshold: 0.4 });
+    });
+
+    test("checks that class mode editor output uses CSS classes instead of inline styles", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await page.waitForLoadState("networkidle");
+        const html = await page.locator(".mx-name-richText1 .ql-editor").innerHTML();
+        expect(html).toMatch(/class="ql-color-/);
+        expect(html).toMatch(/class="ql-bg-/);
+        expect(html).toMatch(/class="ql-indent-/);
+        expect(html).toMatch(/data-style-format="class"/);
+        expect(html).not.toMatch(/style="color:/);
+        expect(html).not.toMatch(/style="background-color:/);
+        expect(html).not.toMatch(/style="padding-left:/);
+    });
+
+    test("compares with a screenshot baseline of the View/Edit Code dialog in class mode", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await page.waitForLoadState("networkidle");
+        await page.click(".mx-name-richText1 .ql-toolbar button.ql-view-code");
+        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+            `classModeViewCodeDialog.png`
+        );
+    });
+
     test("compares with a screenshot for rich text inside modal popup layout", async ({ page }) => {
         await page.goto("/");
         await waitForMendixApp(page);
@@ -134,4 +166,40 @@ test.describe("RichText", () => {
             `richTextDialogInsidePopupEdit.png`
         );
     });
+
+    test("empty content persists as empty string, not <p></p>", async ({ page }) => {
+        await page.goto("/");
+        await waitForMendixApp(page);
+        await page.click("text=Generate Data");
+        await page.goto("/p/basic");
+        await waitForMendixApp(page);
+
+        // Find the first editable rich text editor
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        // Click into the editor and clear all content
+        await editor.click();
+        await page.keyboard.press("Control+A");
+        await page.keyboard.press("Backspace");
+
+        // Blur the editor to trigger save
+        await page.keyboard.press("Tab");
+        await page.waitForTimeout(500);
+
+        // The editor should now be empty (visual check)
+        const textContent = await editor.textContent();
+        expect(textContent?.trim() || "").toBe("");
+
+        // Reload the page to verify persistence
+        await page.reload();
+        await waitForMendixApp(page);
+
+        // The editor should still be empty after reload
+        const reloadedEditor = page.locator(".mx-name-richText1 .tiptap");
+        await expect(reloadedEditor).toBeVisible();
+        const reloadedContent = await reloadedEditor.textContent();
+        expect(reloadedContent?.trim() || "").toBe("");
+    });
 });
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/.openspec.yaml b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/.openspec.yaml
new file mode 100644
index 0000000000..c53ef21aaa
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-05
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/design.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/design.md
new file mode 100644
index 0000000000..b1909f37d3
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/design.md
@@ -0,0 +1,186 @@
+## Context
+
+The rich text editor uses TipTap, which already supports column widths via the `colwidth` attribute on table cells. TipTap's base `TableCell` extension includes this attribute, and the `TableBackgroundColor` extension reads it to generate `<colgroup>` elements for column sizing.
+
+Currently:
+
+- `colwidth` is an array of pixel values (e.g., `[150]` for single column, `[100, 150, 200]` for colspan)
+- TipTap has a `resizable: true` option that should enable drag-to-resize, but the custom `TableBackgroundColorNodeView` doesn't implement resize handles
+- Users can click column borders, which sets a width, but cannot drag to adjust
+- No UI control exists to set exact pixel widths
+
+The existing cell configuration dropdown already has sections for background color, border color/style/width using a `ConfigurationSection` pattern.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Add a number input control to the cell configuration dropdown for setting column width
+- Support exact pixel values (25-1000px range)
+- Provide clear button to reset to auto width
+- Handle colspan cells by setting only the first column width
+- Follow existing configuration dropdown patterns and styling
+- Validate input and clamp to acceptable ranges
+
+**Non-Goals:**
+
+- Implementing drag-to-resize handles (would require significant NodeView work)
+- Supporting percentage or other CSS units (only pixels for now)
+- Setting widths for all columns in a colspan cell (only first column)
+- Syncing widths across all rows (only first row widths apply per TipTap's design)
+- Adding column width presets dropdown (keep it simple with number input only)
+
+## Decisions
+
+### Decision 1: Use number input type (not dropdown with presets)
+
+**Rationale:** User requested "exact pixel values" in requirements. A number input provides precision without limiting users to preset sizes.
+
+**Alternatives considered:**
+
+- Dropdown with presets (Small/Medium/Large): Too restrictive, doesn't meet "exact values" requirement
+- Hybrid (input + preset buttons): Over-engineered for initial implementation
+- Text input: Number input provides better UX with built-in increment/decrement and validation
+
+**Implementation:** Add new `"numberInput"` type to `ConfigurationSection` interface alongside existing `"colorPicker"` and `"dropdown"` types.
+
+---
+
+### Decision 2: Set only first column width for colspan cells
+
+**Rationale:**
+
+- User explicitly requested "set only first column" in requirements
+- Simplifies implementation and UX (no need for multi-column width editor)
+- Matches TipTap's array-based `colwidth` structure where `colwidth[0]` is the first column
+
+**Alternatives considered:**
+
+- Set all spanned columns to same width: Could surprise users if they had different widths set
+- Show per-column width array editor: Complex UI for edge case (most cells don't have colspan)
+- Disable control for colspan cells: Too restrictive
+
+**Implementation:** `onChange` handler creates `colwidth` array with single value: `[width]`
+
+---
+
+### Decision 3: Use setCellAttribute command (not custom command)
+
+**Rationale:**
+
+- `setCellAttribute("colwidth", value)` should work because `colwidth` is in TipTap's base TableCell
+- Other cell properties (backgroundColor, borderColor, etc.) use `setCellAttribute` successfully
+- No need to define custom commands in extensions
+
+**Alternatives considered:**
+
+- Custom `setCellWidth` command in `TableCellBackgroundColor`: Unnecessary abstraction
+- Modify `TableCellBackgroundColor.addAttributes()` to re-declare colwidth: Already inherits via `...this.parent?.()`
+
+**Implementation:** Direct call to `editor.chain().focus().setCellAttribute("colwidth", [width]).run()`
+
+---
+
+### Decision 4: Render clear button conditionally (when value exists)
+
+**Rationale:**
+
+- Provides explicit way to reset to auto width (null)
+- Visual indicator that a custom width is set
+- Follows common UI pattern (seen in search inputs, etc.)
+
+**Alternatives considered:**
+
+- Always show clear button: Clutters UI when empty
+- Use empty string to mean auto: Less explicit, could be confusing
+- Add separate "Auto" button: Redundant with clear functionality
+
+**Implementation:** Render `×` button only when `currentValue !== null`
+
+---
+
+### Decision 5: Store null for auto width (not empty array or zero)
+
+**Rationale:**
+
+- TipTap treats `colwidth: null` as auto-sizing behavior
+- Consistent with how TipTap's base extensions work
+- `colwidth: []` or `colwidth: [0]` could cause layout issues
+
+**Implementation:** When user clears input, call `setCellAttribute("colwidth", null)`
+
+## Risks / Trade-offs
+
+### Risk: Parent attribute inheritance might not work
+
+If `TableCellBackgroundColor` doesn't properly inherit `colwidth` from base `TableCell`, `setCellAttribute` calls will fail silently.
+
+**Mitigation:** The extension already uses `...this.parent?.()` in `addAttributes()`, which should preserve `colwidth`. If issues arise, explicitly re-declare `colwidth` in the extension's attributes.
+
+---
+
+### Risk: First-row-only behavior might confuse users
+
+TipTap only uses `colwidth` from the first row of the table to generate `<colgroup>`. Setting widths on other rows has no effect.
+
+**Mitigation:** Could add tooltip or helper text: "Note: Only first row column widths apply." For initial implementation, leave as-is since it matches TipTap's inherent behavior.
+
+---
+
+### Risk: Custom NodeView might interfere with colwidth updates
+
+The `TableBackgroundColorNodeView` manually generates `<colgroup>` in `updateColgroup()`. If it's not reactive to `colwidth` changes, widths might not update visually.
+
+**Mitigation:** The NodeView's `update()` method already calls `updateColgroup()` on node changes, so it should react to `colwidth` updates. Test thoroughly during implementation.
+
+---
+
+### Trade-off: No drag-to-resize (only manual input)
+
+Users lose the convenience of dragging column borders to resize.
+
+**Mitigation:** The number input provides precision that drag handles lack. If drag-to-resize is needed later, it would require integrating ProseMirror's `columnResizing` plugin into the custom NodeView (~200 lines of code). For now, manual input meets the stated requirements.
+
+---
+
+### Trade-off: Pixel-only units (no percentages)
+
+Users cannot set responsive column widths using percentages.
+
+**Mitigation:** Percentage support would require custom rendering logic (TipTap's `colwidth` is pixel-only). Tables in rich text editors typically use fixed layouts. Can be added later if users request it.
+
+## Migration Plan
+
+No migration needed. This is a purely additive feature:
+
+- Existing tables without `colwidth` continue to work (auto width)
+- Existing tables with `colwidth` set (via TipTap's base functionality) display correctly
+- No data model changes or breaking API changes
+
+Deployment:
+
+1. Merge code changes
+2. Run build
+3. Deploy widget to Mendix project
+4. Feature is immediately available in cell configuration dropdown
+
+Rollback:
+
+- If issues arise, remove the new configuration section from `createCellConfigurationSections()`
+- No data corruption risk (colwidth attribute is standard TipTap)
+
+## Open Questions
+
+1. **Should we show the actual rendered column width vs. the set value?**
+    - The set `colwidth` might differ from actual rendered width due to table layout constraints
+    - For initial implementation: Show the set value only (simpler)
+    - Can add "measured width" tooltip later if needed
+
+2. **Should we prevent setting widths on non-first-row cells?**
+    - Pro: Avoids confusion about why widths don't apply
+    - Con: Restricts user control, might not match mental model
+    - Decision: Allow setting on any cell (simpler), rely on TipTap's first-row behavior
+
+3. **Should we add keyboard shortcuts for common widths?**
+    - Out of scope for initial implementation
+    - Can be added later if users request it
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/proposal.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/proposal.md
new file mode 100644
index 0000000000..282fd1302a
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/proposal.md
@@ -0,0 +1,41 @@
+## Why
+
+Users need precise control over table column widths in the rich text editor. Currently, while TipTap supports column widths via the `colwidth` attribute, there's no UI control to set them. Users can only click column borders which sets widths without drag-to-resize capability, making it difficult to achieve desired layouts.
+
+## What Changes
+
+- Add a "Column Width" number input control to the cell configuration dropdown
+- Support setting exact pixel widths (25-1000px range)
+- Provide "Clear" button to reset to auto width
+- Handle colspan cells by setting only the first column width
+- Integrate with existing `setCellAttribute` command for `colwidth` attribute
+
+## Capabilities
+
+### New Capabilities
+
+- `table-column-width-control`: UI control in cell configuration dropdown allowing users to set precise column widths in pixels, with validation, auto width support, and colspan handling
+
+### Modified Capabilities
+
+<!-- No existing spec requirements are changing - this is a new UI feature using existing TipTap colwidth infrastructure -->
+
+## Impact
+
+**Affected Files:**
+
+- `src/components/toolbars/components/ConfigurationDropdown.tsx` - Add number input type support
+- `src/components/toolbars/components/ConfigurationDropdown.scss` - Add number input styling
+- `src/components/toolbars/ToolbarConfig.ts` - Update ConfigurationSection type definition
+- `src/components/toolbars/helpers/configurationHelpers.ts` - Add column width section
+
+**User Impact:**
+
+- Positive: Users gain precise control over table column widths via familiar number input UI
+- No breaking changes: Feature is additive, existing tables continue to work
+
+**Technical Impact:**
+
+- Uses existing TipTap `colwidth` attribute mechanism (no changes to data model)
+- No impact on existing table resize behavior (custom NodeView remains unchanged)
+- Follows established configuration dropdown patterns
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/specs/table-column-width-control/spec.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/specs/table-column-width-control/spec.md
new file mode 100644
index 0000000000..1bafe2051b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/specs/table-column-width-control/spec.md
@@ -0,0 +1,102 @@
+## ADDED Requirements
+
+### Requirement: Column width input control
+
+The cell configuration dropdown SHALL include a number input control labeled "Column Width" that allows users to set the column width in pixels.
+
+#### Scenario: Opening cell configuration shows current width
+
+- **WHEN** user selects a table cell and opens the cell configuration dropdown
+- **THEN** the "Column Width" input displays the current column width value if set, or shows empty with "Auto" placeholder if width is auto
+
+#### Scenario: Setting a valid column width
+
+- **WHEN** user enters a numeric value between 25 and 1000 in the "Column Width" input
+- **THEN** the column width is set to that exact pixel value and the column resizes accordingly
+
+#### Scenario: Clearing column width for auto sizing
+
+- **WHEN** user clicks the clear button or deletes the value from the "Column Width" input
+- **THEN** the column width is reset to auto (null) and the column resizes to fit content
+
+### Requirement: Column width validation
+
+The system SHALL validate column width input to ensure values are within acceptable ranges.
+
+#### Scenario: Entering value below minimum
+
+- **WHEN** user enters a value less than 25 pixels
+- **THEN** the system clamps the value to 25 pixels
+
+#### Scenario: Entering value above maximum
+
+- **WHEN** user enters a value greater than 1000 pixels
+- **THEN** the system clamps the value to 1000 pixels
+
+#### Scenario: Entering invalid input
+
+- **WHEN** user enters non-numeric text
+- **THEN** the system ignores the input and retains the previous value
+
+### Requirement: Colspan cell width handling
+
+The system SHALL set only the first column width when the selected cell has a colspan greater than 1.
+
+#### Scenario: Setting width on colspan cell
+
+- **WHEN** user sets column width on a cell with colspan=3 that currently has colwidth=[100, 150, 200]
+- **THEN** the system sets colwidth=[new_value] affecting only the first spanned column
+
+#### Scenario: Reading width from colspan cell
+
+- **WHEN** user opens cell configuration for a cell with colspan=3 and colwidth=[100, 150, 200]
+- **THEN** the "Column Width" input displays 100 (the first column's width)
+
+### Requirement: Number input UI component
+
+The configuration dropdown SHALL support a "numberInput" type with number-specific controls.
+
+#### Scenario: Number input with unit label
+
+- **WHEN** a configuration section has type "numberInput" with unit "px"
+- **THEN** the UI renders a number input field with "px" unit label beside it
+
+#### Scenario: Number input with clear button
+
+- **WHEN** a configuration section has type "numberInput" and the field has a value
+- **THEN** the UI displays a clear button (×) that resets the field to empty when clicked
+
+#### Scenario: Number input with placeholder
+
+- **WHEN** a configuration section has type "numberInput" with placeholder "Auto"
+- **THEN** the empty input field shows "Auto" as placeholder text
+
+### Requirement: Column width persistence
+
+The system SHALL persist column width values in the document's colwidth attribute.
+
+#### Scenario: Width persists after save and reload
+
+- **WHEN** user sets a column width to 150 pixels, saves the document, and reloads the page
+- **THEN** the column width remains 150 pixels and is displayed correctly in the cell configuration
+
+#### Scenario: Width persists across editing sessions
+
+- **WHEN** user sets column widths on multiple columns and closes the editor
+- **THEN** reopening the document displays all columns at their configured widths
+
+### Requirement: Visual feedback
+
+The system SHALL provide clear visual feedback when column width changes.
+
+#### Scenario: Immediate column resize on input
+
+- **WHEN** user changes the column width value in the input field
+- **THEN** the table column resizes immediately without requiring additional confirmation
+
+#### Scenario: Clear button visibility
+
+- **WHEN** the column width input has a value
+- **THEN** the clear button is visible
+- **WHEN** the column width input is empty
+- **THEN** the clear button is hidden
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/tasks.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/tasks.md
new file mode 100644
index 0000000000..dbd8a58ee0
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/tasks.md
@@ -0,0 +1,48 @@
+## 1. Type Definition Updates
+
+- [x] 1.1 Update `ConfigurationSection` interface in `src/components/toolbars/ToolbarConfig.ts` to add `"numberInput"` to type union
+- [x] 1.2 Add optional fields to `ConfigurationSection` interface: `min?: number`, `max?: number`, `step?: number`, `placeholder?: string`, `unit?: string`
+- [x] 1.3 Update `ConfigurationSection` interface in `src/components/toolbars/components/ConfigurationDropdown.tsx` to match the updated type definition
+- [x] 1.4 Update `getCurrentValue` return type to allow `string | number | null` instead of just `string | null`
+
+## 2. UI Component Implementation
+
+- [x] 2.1 Add number input rendering case in `ConfigurationDropdown.tsx` after the dropdown case (around line 73)
+- [x] 2.2 Create wrapper div with className `configuration-number-input` containing the input, unit label, and clear button
+- [x] 2.3 Implement number input with type="number", min/max/step/placeholder props from section config
+- [x] 2.4 Implement conditional unit label display using `configuration-unit` className when `section.unit` exists
+- [x] 2.5 Implement conditional clear button (×) with `configuration-clear-button` className, shown only when `currentValue !== null`
+- [x] 2.6 Wire up onChange handler to call `section.onChange(e.target.value)` on input change
+- [x] 2.7 Wire up clear button onClick handler to call `section.onChange("")` to reset to auto width
+
+## 3. Styling
+
+- [x] 3.1 Add `.configuration-number-input` styles in `ConfigurationDropdown.scss` with flex layout and 4px gap
+- [x] 3.2 Add `.configuration-input` styles matching `.configuration-select` with padding, borders, transitions, and focus states
+- [x] 3.3 Add number input specific styles to hide spinner arrows (`::-webkit-inner-spin-button`, `::-webkit-outer-spin-button`, `-moz-appearance: textfield`)
+- [x] 3.4 Add `.configuration-input::placeholder` styles with gray color and italic font
+- [x] 3.5 Add `.configuration-unit` styles with 12px font size, gray color, and nowrap
+- [x] 3.6 Add `.configuration-clear-button` styles with padding, borders, hover/active states matching the design
+
+## 4. Cell Configuration Logic
+
+- [x] 4.1 Add new configuration section object in `createCellConfigurationSections()` function in `src/components/toolbars/helpers/configurationHelpers.ts` after `cellBorderWidth`
+- [x] 4.2 Set section id to `"cellWidth"`, label to `"Column Width"`, type to `"numberInput"`
+- [x] 4.3 Set min to 25, max to 1000, step to 1, placeholder to "Auto", unit to "px"
+- [x] 4.4 Implement `getCurrentValue` function that calls `getCellAttributes(editor)`, extracts `colwidth` array, and returns `colwidth[0]` or null
+- [x] 4.5 Implement `onChange` function that parses input value, validates it, clamps to min/max range, and calls `setCellAttribute("colwidth", [value])` or `setCellAttribute("colwidth", null)` for empty input
+- [x] 4.6 Handle edge case where input is empty string by calling `setCellAttribute("colwidth", null)` to reset to auto width
+- [x] 4.7 Handle colspan cells by creating colwidth array with single value `[clampedValue]` regardless of colspan
+
+## 5. Testing & Verification
+
+- [x] 5.1 Test setting column width to valid value (e.g., 150px) and verify column resizes
+- [x] 5.2 Test clearing column width via clear button and verify column auto-sizes
+- [x] 5.3 Test entering value below minimum (e.g., 10) and verify it clamps to 25
+- [x] 5.4 Test entering value above maximum (e.g., 2000) and verify it clamps to 1000
+- [x] 5.5 Test entering invalid input (e.g., "abc") and verify it's ignored
+- [x] 5.6 Test with colspan cell (colspan=3) and verify only first column width is set
+- [x] 5.7 Test that width persists after save/reload of document
+- [x] 5.8 Test that clear button visibility toggles correctly (hidden when empty, shown when value exists)
+- [x] 5.9 Test that placeholder "Auto" displays when input is empty
+- [x] 5.10 Test keyboard navigation and accessibility of number input control
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/README.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/README.md
new file mode 100644
index 0000000000..4bcf59afdc
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/README.md
@@ -0,0 +1,84 @@
+# Normalize Empty Content
+
+**Status:** Proposed  
+**Type:** Bug Fix  
+**Impact:** Breaking (Validation behavior)  
+**Effort:** ~3.5 hours
+
+## Quick Summary
+
+Fix the rich text editor to save empty content as `""` instead of `<p></p>`, ensuring correct validation and consistent data representation.
+
+## Problem
+
+When users delete all content, the editor currently saves `<p></p>` to the database. This breaks:
+
+- Required field validation (incorrectly passes)
+- Empty checks (`if (value)` returns true)
+- Data consistency (semantically empty ≠ empty string)
+
+## Solution
+
+Use Tiptap's `editor.isEmpty` property to return `""` when content is empty, and normalize comparison logic to treat `""` and `<p></p>` as equivalent.
+
+## Files
+
+- [`proposal.md`](./proposal.md) - Problem statement, scope, and impact
+- [`design.md`](./design.md) - Technical design, decisions, and architecture
+- [`tasks.md`](./tasks.md) - Implementation checklist and effort estimate
+
+## Key Decisions
+
+1. **Trust Tiptap's isEmpty** - Use built-in check, no custom logic
+2. **Normalize at persistence** - Convert to `""` when saving, not loading
+3. **Lazy migration** - Existing `<p></p>` records normalize on next edit
+4. **No version bump** - This Tiptap version is unreleased
+
+## Changes Required
+
+### Editor.tsx (line 237-240)
+
+```typescript
+// Before:
+const html = editor.getHTML();
+
+// After:
+const html = editor.isEmpty ? "" : editor.getHTML();
+```
+
+### EditorWrapper.tsx (line 48-60)
+
+```typescript
+// Add normalization in comparison:
+const normalizeEmpty = (val?: string) => (!val || val === "<p></p>" ? "" : val);
+
+const current = normalizeEmpty(stringAttribute.value);
+const incoming = normalizeEmpty(html);
+if (current !== incoming) {
+    stringAttribute.setValue(incoming);
+}
+```
+
+## Testing
+
+- ✓ Unit tests for empty content behavior
+- ✓ E2E test for persistence
+- ✓ Manual validation testing
+
+## Breaking Change
+
+**Required field validation will now correctly reject empty content.**
+
+Previously: `<p></p>` passed validation ❌  
+After fix: `""` fails validation ✓
+
+This is desired behavior (bug fix), but may affect existing forms.
+
+## Next Steps
+
+1. Review proposal and design
+2. Approve or request changes
+3. Implement following tasks.md
+4. Test thoroughly
+5. Update CHANGELOG
+6. Merge to main branch
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/design.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/design.md
new file mode 100644
index 0000000000..fd696c3c70
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/design.md
@@ -0,0 +1,374 @@
+## Design Overview
+
+The fix normalizes empty editor content at the persistence boundary by checking Tiptap's `isEmpty` property and returning an empty string instead of `<p></p>`. A secondary normalization in the comparison layer prevents unnecessary updates when values are semantically equivalent.
+
+## Architecture
+
+```
+User Deletes Content
+       ↓
+Tiptap Editor (internal state: <p></p>)
+       ↓
+onUpdate Event Fires
+       ↓
+┌─────────────────────────────────────────┐
+│ Editor.tsx (PRIMARY FIX)                │
+│                                         │
+│ onUpdate: ({ editor }) => {             │
+│   const html = editor.isEmpty           │
+│                 ? ""                    │ ← Use isEmpty check
+│                 : editor.getHTML();     │
+│   onUpdate?.(html);                     │
+│ }                                       │
+└─────────────────────────────────────────┘
+       ↓
+┌─────────────────────────────────────────┐
+│ EditorWrapper.tsx (OPTIMIZATION)        │
+│                                         │
+│ const current = stringAttribute.value || ""; │
+│ const incoming = html || "";            │ ← Normalize comparison
+│ if (current !== incoming) {             │
+│   stringAttribute.setValue(incoming);   │
+│ }                                       │
+└─────────────────────────────────────────┘
+       ↓
+Mendix EditableValue.setValue("")
+       ↓
+Database: RichTextField = "" ✓
+```
+
+## Key Design Decisions
+
+### 1. Use Tiptap's `isEmpty` Property
+
+**Decision:** Trust Tiptap's built-in `editor.isEmpty` check rather than implementing custom logic.
+
+**Rationale:**
+
+- Tiptap's `isEmpty` is battle-tested and handles edge cases correctly
+- Considers semantic emptiness (ignores empty marks, formatting-only nodes)
+- No need to reinvent the wheel with regex or string parsing
+- Future-proof as Tiptap evolves
+
+**Edge Cases Handled by isEmpty:**
+
+- `<p></p>` → true
+- `<p><strong></strong></p>` → true (empty marks)
+- `<p>   </p>` → Implementation depends on Tiptap's definition
+- `<p><br></p>` → false (has content - soft break)
+- `<ul><li></li></ul>` → false (has structure)
+
+### 2. Normalize at Persistence Boundary
+
+**Decision:** Convert `<p></p>` to `""` in the `onUpdate` handler, not on load.
+
+**Rationale:**
+
+- Centralizes normalization at the point where data leaves the editor
+- Tiptap can maintain whatever internal state it needs
+- Rendering is unaffected (Tiptap will render `<p></p>` internally regardless)
+- Single source of truth for what gets persisted
+
+**Rejected Alternative:** Normalize on load (`defaultValue`)
+
+- Would require changing initialization logic
+- Adds complexity without user-visible benefit
+- Lazy migration is sufficient
+
+### 3. Comparison Normalization
+
+**Decision:** Treat `undefined`, `""`, and `<p></p>` as equivalent in comparison logic.
+
+**Why:**
+
+```javascript
+// Without normalization:
+stringAttribute.value = "";
+html = "<p></p>";
+"" !== "<p></p>"  // → triggers setValue() unnecessarily
+
+// With normalization:
+current = "" || "" = "";
+incoming = "<p></p>" || "" = "";  // Wait, this doesn't work!
+
+// Correct normalization:
+const normalize = (val?: string) => val || "";
+current = normalize(stringAttribute.value);   // "" or "<p></p>" → ""
+incoming = normalize(html);                    // "" or "<p></p>" → ""
+```
+
+**Actually, we need:**
+
+```javascript
+const normalize = (val?: string) => {
+    if (!val || val === "<p></p>") return "";
+    return val;
+};
+```
+
+**Rationale:**
+
+- Prevents duplicate setValue() calls during transition period
+- Reduces unnecessary database writes
+- Handles both `""` and `<p></p>` gracefully
+
+### 4. Lazy Migration
+
+**Decision:** Don't proactively migrate existing `<p></p>` records.
+
+**Rationale:**
+
+- Records with `<p></p>` load and render fine
+- They normalize to `""` on next edit
+- No risk of data corruption
+- No need for migration script
+- Gradual, safe transition
+
+## Implementation Details
+
+### File: `src/components/Editor.tsx`
+
+**Current Code (Line 237-240):**
+
+```typescript
+onUpdate: ({ editor }) => {
+    const html = editor.getHTML();
+    onUpdate?.(html);
+};
+```
+
+**New Code:**
+
+```typescript
+onUpdate: ({ editor }) => {
+    const html = editor.isEmpty ? "" : editor.getHTML();
+    onUpdate?.(html);
+};
+```
+
+**Impact:**
+
+- Every content change triggers this check
+- Performance: Negligible (boolean property access)
+- Testing: Unit test can mock editor.isEmpty
+
+### File: `src/components/EditorWrapper.tsx`
+
+**Current Code (Line 48-60):**
+
+```typescript
+const [setAttributeValueDebounce] = useDebounceWithStatus(
+    (html?: string) => {
+        if (stringAttribute.value !== html) {
+            stringAttribute.setValue(html);
+            if (onChangeType === "onDataChange") {
+                executeAction(onChange);
+            }
+        }
+    },
+    200,
+    false
+);
+```
+
+**New Code:**
+
+```typescript
+const normalizeEmpty = (val?: string): string => {
+    if (!val || val === "<p></p>") return "";
+    return val;
+};
+
+const [setAttributeValueDebounce] = useDebounceWithStatus(
+    (html?: string) => {
+        const current = normalizeEmpty(stringAttribute.value);
+        const incoming = normalizeEmpty(html);
+
+        if (current !== incoming) {
+            stringAttribute.setValue(incoming);
+            if (onChangeType === "onDataChange") {
+                executeAction(onChange);
+            }
+        }
+    },
+    200,
+    false
+);
+```
+
+**Impact:**
+
+- Prevents spurious updates when switching representations
+- Helper function can be tested independently
+- Encapsulates normalization logic
+
+## Testing Strategy
+
+### Unit Tests
+
+**File:** `src/__tests__/RichText.spec.tsx`
+
+New test cases:
+
+```typescript
+describe("Empty content handling", () => {
+    it("returns empty string when editor is empty", () => {
+        const onUpdate = jest.fn();
+        const editor = createMockEditor({ isEmpty: true, getHTML: () => "<p></p>" });
+
+        // Trigger onUpdate
+        editor.onUpdate({ editor });
+
+        expect(onUpdate).toHaveBeenCalledWith("");
+    });
+
+    it("returns HTML when editor has content", () => {
+        const onUpdate = jest.fn();
+        const editor = createMockEditor({
+            isEmpty: false,
+            getHTML: () => "<p>Hello</p>"
+        });
+
+        editor.onUpdate({ editor });
+
+        expect(onUpdate).toHaveBeenCalledWith("<p>Hello</p>");
+    });
+
+    it("normalizes <p></p> in comparison", () => {
+        const setValue = jest.fn();
+        const stringAttribute = { value: "<p></p>", setValue };
+
+        // Trigger update with empty string
+        handleUpdate("");
+
+        // Should NOT call setValue (semantically equivalent)
+        expect(setValue).not.toHaveBeenCalled();
+    });
+});
+```
+
+### E2E Tests
+
+**File:** `e2e/RichText.spec.js`
+
+New test:
+
+```javascript
+test("empty content persists as empty string", async ({ page }) => {
+    await page.goto("/p/rich-text-test");
+    await waitForMendixApp(page);
+
+    // Type content
+    const editor = page.locator(".tiptap-editor");
+    await editor.click();
+    await page.keyboard.type("Hello World");
+
+    // Delete all content
+    await page.keyboard.press("Control+A");
+    await page.keyboard.press("Backspace");
+
+    // Blur to trigger save
+    await page.keyboard.press("Tab");
+
+    // Verify the attribute value is empty string
+    const isEmpty = await page.evaluate(() => {
+        // Access Mendix test helper
+        const context = window.mx.data.get(/* richTextEntity */);
+        const value = context.get("RichTextField");
+        return value === "" || value === null;
+    });
+
+    expect(isEmpty).toBe(true);
+});
+```
+
+## Risks and Mitigations
+
+### Risk 1: Validation Breaking Change
+
+**Risk:** Forms with required RichText that accepted `<p></p>` will now fail validation.
+
+**Mitigation:**
+
+- This is the desired behavior (bug fix)
+- Document as breaking change in CHANGELOG
+- Note: Since this is unreleased Tiptap version, no version bump needed
+
+**Verdict:** Acceptable - improves correctness
+
+### Risk 2: Tiptap's isEmpty Edge Cases
+
+**Risk:** Tiptap's `isEmpty` might have edge cases we don't anticipate.
+
+**Mitigation:**
+
+- Trust Tiptap's well-tested implementation
+- Add unit tests for known edge cases
+- Monitor issue reports after release
+
+**Verdict:** Low risk - Tiptap is mature
+
+### Risk 3: Performance
+
+**Risk:** Extra checks on every keystroke.
+
+**Analysis:**
+
+- `editor.isEmpty` is a boolean property (O(1))
+- Normalization is string comparison (O(n), but n is small)
+- Already debounced (200ms)
+
+**Verdict:** Negligible impact
+
+## Alternative Approaches Considered
+
+### Alternative 1: Normalize on Load
+
+```typescript
+const editor = useEditor({
+    content: normalizeEmpty(defaultValue),
+    ...
+});
+```
+
+**Rejected because:**
+
+- Doesn't prevent `<p></p>` from being saved in the first place
+- Adds complexity to initialization
+- No user-visible benefit
+
+### Alternative 2: Custom isEmpty Logic
+
+```typescript
+const isEmpty = (html: string) => {
+    return !html || html === "<p></p>" || html.trim() === "";
+};
+```
+
+**Rejected because:**
+
+- Fragile (what about `<p> </p>`, `<p><br></p>`, etc?)
+- Reinvents Tiptap's tested logic
+- Harder to maintain
+
+### Alternative 3: Database Migration
+
+Run a script to convert all `<p></p>` → `""` in database.
+
+**Rejected because:**
+
+- Unnecessary risk
+- Lazy migration is safer
+- No user-visible benefit
+
+## Conclusion
+
+This design provides a minimal, safe fix for the empty content bug by leveraging Tiptap's built-in `isEmpty` property and normalizing at the persistence boundary. The secondary comparison normalization prevents unnecessary updates during the transition period.
+
+**Key Benefits:**
+
+- ✓ Simple implementation (two small changes)
+- ✓ Low risk (uses proven Tiptap API)
+- ✓ Testable (unit + E2E coverage)
+- ✓ Backward compatible (lazy migration)
+- ✓ Fixes validation correctness
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/proposal.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/proposal.md
new file mode 100644
index 0000000000..5b8eb44b30
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/proposal.md
@@ -0,0 +1,58 @@
+## Why
+
+When users delete all content from the rich text editor, it currently saves as `<p></p>` instead of an empty string. This creates several problems:
+
+1. **Validation issues**: Required fields incorrectly pass validation with `<p></p>` as the value
+2. **Comparison inconsistencies**: Checking `if (value === "")` or `if (!value)` fails because `<p></p>` is truthy
+3. **Data semantics**: Semantically empty content should be represented as an empty string, not HTML markup
+4. **Developer confusion**: Backend logic must special-case `<p></p>` when checking for empty content
+
+This is a bug in the current implementation where Tiptap's `getHTML()` returns `<p></p>` for an empty editor, but we should normalize this to an empty string before persisting to the database.
+
+## What Changes
+
+- Modify `onUpdate` handler in `Editor.tsx` to return empty string (`""`) when editor is empty using Tiptap's built-in `isEmpty` property
+- Normalize value comparison in `EditorWrapper.tsx` to treat `undefined`, `""`, and `<p></p>` as equivalent, preventing unnecessary database updates
+- Add unit tests for empty content handling
+- Add E2E test to verify empty content persists as empty string
+
+## Capabilities
+
+### New Capabilities
+
+<!-- No new capabilities - this is a bug fix -->
+
+### Modified Capabilities
+
+- `rich-text-persistence`: Empty editor content now correctly saves as empty string (`""`) instead of `<p></p>`, ensuring proper validation and consistent data representation
+
+## Impact
+
+**Affected Files:**
+
+- `src/components/Editor.tsx` - Modify `onUpdate` handler to check `editor.isEmpty` and return `""` when true
+- `src/components/EditorWrapper.tsx` - Normalize value comparison to prevent spurious updates
+- `src/__tests__/RichText.spec.tsx` - Add tests for empty content handling
+- `e2e/RichText.spec.js` - Add E2E test for empty content persistence
+
+**User Impact:**
+
+- **Validation improvement** (Breaking): Required RichText fields will now correctly reject empty content. Previously, `<p></p>` incorrectly passed validation.
+- **Data consistency**: Empty content is consistently represented as `""` across all scenarios
+- **Backward compatibility**: Existing records with `<p></p>` will load normally and get normalized to `""` on next edit (lazy migration)
+
+**Technical Impact:**
+
+- Leverages Tiptap's built-in `isEmpty` property (battle-tested, no custom logic needed)
+- Minimal performance impact (one boolean property check per update)
+- No changes to Tiptap configuration or extensions
+- No version bump needed (Tiptap version is unreleased)
+
+## Migration
+
+**Lazy Migration Strategy:**
+
+- Existing records with `<p></p>` in database remain unchanged
+- Values normalize to `""` when user next edits the content
+- No database migration script required
+- Safe, gradual transition
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/tasks.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/tasks.md
new file mode 100644
index 0000000000..b3ab006932
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-06-normalize-empty-content/tasks.md
@@ -0,0 +1,107 @@
+## Implementation Tasks
+
+### Core Implementation
+
+- [ ] **Modify Editor.tsx onUpdate handler**
+    - File: `src/components/Editor.tsx`
+    - Line: 237-240
+    - Change: Replace `const html = editor.getHTML();` with `const html = editor.isEmpty ? "" : editor.getHTML();`
+    - Validation: Verify editor.isEmpty property is accessible via TypeScript types
+
+- [ ] **Add normalizeEmpty helper in EditorWrapper.tsx**
+    - File: `src/components/EditorWrapper.tsx`
+    - Add helper function above component:
+        ```typescript
+        function normalizeEmpty(value?: string): string {
+            if (!value || value === "<p></p>") return "";
+            return value;
+        }
+        ```
+    - Update comparison logic in setAttributeValueDebounce (line 48-60)
+    - Use `normalizeEmpty()` for both current and incoming values
+
+### Testing
+
+- [ ] **Add unit tests for empty content handling**
+    - File: `src/__tests__/RichText.spec.tsx`
+    - Test cases:
+        - Empty editor returns empty string
+        - Editor with content returns HTML
+        - Normalization treats "" and "<p></p>" as equivalent
+        - Edge case: whitespace-only content behavior
+
+- [ ] **Add E2E test for empty content persistence**
+    - File: `e2e/RichText.spec.js`
+    - Test scenario:
+        - Type content in editor
+        - Delete all content
+        - Blur to trigger save
+        - Verify attribute value is empty string (not "<p></p>")
+
+- [ ] **Manual testing checklist**
+    - [ ] Create new record with required RichText field
+    - [ ] Try to save with empty content → validation should fail
+    - [ ] Add content and save → should succeed
+    - [ ] Delete all content and save → validation should fail
+    - [ ] Verify database stores "" not "<p></p>"
+    - [ ] Load existing record with "<p></p>" → should render correctly
+    - [ ] Edit and save → should normalize to ""
+    - [ ] Test undo/redo with empty content
+    - [ ] Test code view → code view toggle with empty content
+
+### Documentation
+
+- [ ] **Update CHANGELOG.md**
+    - Add entry under "Fixed" section:
+        - "Empty editor content now correctly saves as empty string instead of `<p></p>`, fixing validation and comparison issues"
+    - Note breaking change: Required field validation now correctly rejects empty content
+
+- [ ] **Update README.md (if needed)**
+    - Check if empty content behavior is documented
+    - Add note about empty value representation if relevant
+
+### Code Review Checklist
+
+- [ ] Verify isEmpty property is correctly used
+- [ ] Confirm no TypeScript errors
+- [ ] Check that normalization logic handles all cases (undefined, "", "<p></p>")
+- [ ] Verify debounce behavior is maintained
+- [ ] Ensure onChange events still fire correctly
+- [ ] Confirm no regression in existing functionality
+- [ ] Review test coverage for edge cases
+
+### Pre-Merge Verification
+
+- [ ] All unit tests pass: `pnpm test`
+- [ ] All E2E tests pass: `pnpm e2e`
+- [ ] Linting passes: `pnpm lint`
+- [ ] Format check passes: `pnpm format`
+- [ ] Build succeeds: `pnpm build`
+- [ ] Manual testing completed
+- [ ] CHANGELOG updated
+- [ ] No console errors in browser during testing
+
+## Estimated Effort
+
+- Core implementation: **30 minutes**
+- Unit tests: **1 hour**
+- E2E tests: **1 hour**
+- Manual testing: **30 minutes**
+- Documentation: **15 minutes**
+- Code review and fixes: **30 minutes**
+
+**Total: ~3.5 hours**
+
+## Dependencies
+
+None - this is a self-contained fix within the RichText widget.
+
+## Success Criteria
+
+✓ Empty editor persists as `""` instead of `<p></p>`  
+✓ Required field validation correctly rejects empty content  
+✓ Existing `<p></p>` records load and normalize on next edit  
+✓ No regression in content editing functionality  
+✓ All tests pass (unit + E2E)  
+✓ No TypeScript errors  
+✓ Code review approved
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/.openspec.yaml b/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/.openspec.yaml
new file mode 100644
index 0000000000..e0c0898ffd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-11
diff --git a/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/README.md b/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/README.md
new file mode 100644
index 0000000000..cecd8401d8
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/openspec/changes/code-view-highlighting/README.md
@@ -0,0 +1,3 @@
+# code-view-highlighting
+
+Add syntax highlighting to code view mode using react-simple-code-editor and highlight.js
diff --git a/packages/pluggableWidgets/rich-text-web/package.json b/packages/pluggableWidgets/rich-text-web/package.json
index 4c8d57009c..5d560c5036 100644
--- a/packages/pluggableWidgets/rich-text-web/package.json
+++ b/packages/pluggableWidgets/rich-text-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.12.0",
+    "version": "4.13.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -24,15 +24,15 @@
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "rich-text-v4-web"
+        "branchName": "rich-text-v4-web-v2"
     },
     "scripts": {
         "build": "cross-env MPKOUTPUT=RichText.mpk pluggable-widgets-tools build:web",
         "create-gh-release": "rui-create-gh-release",
         "create-translation": "rui-create-translation",
         "dev": "cross-env MPKOUTPUT=RichText.mpk pluggable-widgets-tools start:web",
-        "e2e": "run-e2e ci",
-        "e2edev": "run-e2e dev --with-preps",
+        "e2e": "MENDIX_VERSION=11.9.1 run-e2e ci",
+        "e2edev": "MENDIX_VERSION=11.9.1 run-e2e dev --with-preps",
         "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
         "lint": "eslint src/ package.json",
         "publish-marketplace": "rui-publish-marketplace",
@@ -43,21 +43,43 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
-        "@codemirror/lang-html": "^6.4.9",
-        "@codemirror/state": "^6.5.2",
         "@floating-ui/dom": "^1.7.4",
         "@floating-ui/react": "^0.26.27",
         "@melloware/coloris": "^0.25.0",
-        "@uiw/codemirror-theme-github": "^4.23.13",
-        "@uiw/react-codemirror": "^4.23.13",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@tiptap/core": "^3.23.4",
+        "@tiptap/extension-color": "^3.23.4",
+        "@tiptap/extension-font-family": "^3.23.4",
+        "@tiptap/extension-highlight": "^3.23.5",
+        "@tiptap/extension-image": "^3.23.4",
+        "@tiptap/extension-link": "^3.23.4",
+        "@tiptap/extension-list": "^3.23.5",
+        "@tiptap/extension-list-item": "^3.23.5",
+        "@tiptap/extension-subscript": "^3.23.4",
+        "@tiptap/extension-superscript": "^3.23.4",
+        "@tiptap/extension-table": "^3.23.4",
+        "@tiptap/extension-table-cell": "^3.23.4",
+        "@tiptap/extension-table-header": "^3.23.4",
+        "@tiptap/extension-table-row": "^3.23.4",
+        "@tiptap/extension-task-item": "^3.23.5",
+        "@tiptap/extension-task-list": "^3.23.5",
+        "@tiptap/extension-text-align": "^3.23.4",
+        "@tiptap/extension-text-style": "^3.23.4",
+        "@tiptap/extension-underline": "^3.23.4",
+        "@tiptap/extension-youtube": "^3.23.4",
+        "@tiptap/pm": "^3.23.4",
+        "@tiptap/react": "^3.23.4",
+        "@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",
         "lodash.merge": "^4.6.2",
-        "parchment": "^3.0.0",
-        "quill": "^2.0.3",
-        "quill-resize-module": "^2.0.4"
+        "react-dropzone": "^14.3.8",
+        "react-scroll-sync": "^1.0.2",
+        "react-simple-code-editor": "^0.14.1"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts b/packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts
index 24a8972d85..2af5d87614 100644
--- a/packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts
+++ b/packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts
@@ -5,7 +5,7 @@ import {
     rowLayout,
     StructurePreviewProps
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
-import { RichTextPreviewProps } from "typings/RichTextProps";
+import { RichTextPreviewProps } from "../typings/RichTextProps";
 import RichTextPreviewSVGDark from "./assets/rich-text-preview-dark.svg";
 import RichTextPreviewSVGLight from "./assets/rich-text-preview-light.svg";
 
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.tsx b/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
index 283829650c..a055aab8d4 100644
--- a/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
@@ -1,59 +1,23 @@
-import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import classNames from "classnames";
-import { Fragment, ReactElement, useEffect, useState } from "react";
+import { Fragment, ReactElement } from "react";
+import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { RichTextContainerProps } from "../typings/RichTextProps";
 import EditorWrapper from "./components/EditorWrapper";
 import "./ui/RichText.scss";
-import { constructWrapperStyle } from "./utils/helpers";
 
 export default function RichText(props: RichTextContainerProps): ReactElement {
-    const { stringAttribute, readOnlyStyle } = props;
-
-    const wrapperStyle = constructWrapperStyle(props);
-    const [isIncubator, setIsIncubator] = useState(true);
-
-    useEffect(() => {
-        // this is a fix for dojo runtime rendering
-        // in dojo runtime, DOM is rendered inside <div class="mx-incubator mx-offscreen"> at the inital stage
-        // and moved to content once it fully loads, which cause rich text editor looses reference to it's iframe
-        // this fix waits for it to be fully out of incubator div, then only fully renders rich text afterwards.
-        const observedIncubator = document.querySelector(`.mx-incubator.mx-offscreen`);
-        const observer = new MutationObserver((_mutationList, _observer) => {
-            if (!observedIncubator?.childElementCount || observedIncubator?.childElementCount <= 0) {
-                setIsIncubator(false);
-            }
-        });
-
-        if (observedIncubator && observedIncubator.childElementCount) {
-            observer.observe(observedIncubator, {
-                childList: true
-            });
-        } else {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setIsIncubator(false);
-        }
-
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-
+    const { stringAttribute } = props;
     return (
         <Fragment>
-            {stringAttribute.status === "loading" || isIncubator ? (
+            {stringAttribute.status === "loading" ? (
                 <div className="mx-progress"></div>
             ) : (
                 <EditorWrapper
                     {...props}
-                    style={wrapperStyle}
                     className={classNames(
                         "widget-rich-text",
-                        stringAttribute.readOnly && readOnlyStyle === "readPanel"
-                            ? "form-control-static"
-                            : "form-control",
-                        stringAttribute.readOnly ? `widget-rich-text-readonly-${readOnlyStyle}` : ""
+                        stringAttribute.readOnly ? "form-control-static" : "form-control"
                     )}
-                    enableStatusBar={props.enableStatusBar && !stringAttribute.readOnly}
                 />
             )}
             <ValidationAlert>{stringAttribute.validation}</ValidationAlert>
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml
index 8fb841b775..ce242e9f53 100644
--- a/packages/pluggableWidgets/rich-text-web/src/RichText.xml
+++ b/packages/pluggableWidgets/rich-text-web/src/RichText.xml
@@ -17,9 +17,9 @@
             </propertyGroup>
             <propertyGroup caption="General">
                 <systemProperty key="Label" />
-                <property key="enableStatusBar" type="boolean" defaultValue="true">
+                <property key="enableStatusBar" type="boolean" defaultValue="false">
                     <caption>Enable status bar</caption>
-                    <description />
+                    <description>Show a status bar at the bottom of the editor displaying document metrics</description>
                 </property>
             </propertyGroup>
             <propertyGroup caption="Toolbar">
@@ -220,6 +220,14 @@
                         <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="styleDataFormat" type="enumeration" defaultValue="inline">
+                    <caption>Style data format</caption>
+                    <description>Choose how to render styling attribute in HTML</description>
+                    <enumerationValues>
+                        <enumerationValue key="inline">inline</enumerationValue>
+                        <enumerationValue key="class">class</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">
@@ -317,9 +325,10 @@
                                 <enumerationValue key="code">Code</enumerationValue>
                                 <enumerationValue key="codeBlock">Code Block</enumerationValue>
                                 <enumerationValue key="viewCode">View Code</enumerationValue>
-                                <enumerationValue key="align">Left Align</enumerationValue>
+                                <enumerationValue key="leftAlign">Left Align</enumerationValue>
                                 <enumerationValue key="centerAlign">Center Align</enumerationValue>
                                 <enumerationValue key="rightAlign">Right Align</enumerationValue>
+                                <enumerationValue key="justifyAlign">Justify Align</enumerationValue>
                                 <enumerationValue key="font">Font Type</enumerationValue>
                                 <enumerationValue key="size">Font Size</enumerationValue>
                                 <enumerationValue key="color">Color</enumerationValue>
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/Indent.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/Indent.spec.ts
new file mode 100644
index 0000000000..cd2928ea16
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/Indent.spec.ts
@@ -0,0 +1,296 @@
+import { Editor } from "@tiptap/core";
+import { StarterKit } from "@tiptap/starter-kit";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TaskItem } from "@tiptap/extension-task-item";
+import { Indent } from "../extensions/Indent";
+import { OrderedListStyled } from "../extensions/OrderedListStyled";
+
+type StyleFormat = "inline" | "class";
+
+const ATTRIBUTE_TYPES = ["paragraph", "heading", "blockquote", "bulletList", "orderedList", "taskList"];
+
+function makeEditor(styleDataFormat: StyleFormat = "inline"): Editor {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    return new Editor({
+        element,
+        extensions: [
+            StarterKit.configure({ orderedList: false }),
+            OrderedListStyled.configure({ styleDataFormat }),
+            TaskList,
+            TaskItem.configure({ nested: true }),
+            Indent.configure({
+                types: ["paragraph", "heading", "blockquote"],
+                attributeTypes: ATTRIBUTE_TYPES,
+                minIndent: 0,
+                maxIndent: 10,
+                indentStep: 1,
+                styleDataFormat
+            })
+        ]
+    });
+}
+
+/** Places the cursor inside the node containing the given text. */
+function placeCursorInText(editor: Editor, text: string): void {
+    let pos = 1;
+    let found = false;
+    editor.state.doc.descendants((node, nodePos) => {
+        if (found) {
+            return false;
+        }
+        if (node.isText && node.text === text) {
+            pos = nodePos + 1;
+            found = true;
+            return false;
+        }
+        return true;
+    });
+    editor.commands.setTextSelection(pos);
+}
+
+describe("Indent — listIndent adds margin to the list node", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    it("adds margin to a top-level ordered list", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+
+        const html = editor.getHTML();
+        expect(html).toContain("margin-left: 2em");
+        expect((html.match(/<ol/g) || []).length).toBe(1); // no nesting
+    });
+
+    it("adds margin to a bullet list", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ul><li><p>item</p></li></ul>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+
+        expect(editor.getHTML()).toContain("margin-left: 2em");
+    });
+
+    it("adds margin to a task list container, not the paragraph", () => {
+        editor = makeEditor();
+        editor.commands.setContent('<ul data-type="taskList"><li data-checked="false"><p>task</p></li></ul>');
+        placeCursorInText(editor, "task");
+
+        editor.commands.listIndent();
+
+        const html = editor.getHTML();
+        expect(html).toContain("margin-left: 2em");
+        expect((html.match(/margin-left/g) || []).length).toBe(1);
+    });
+
+    it("does not give the inner paragraph its own margin (no double indent)", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+
+        expect((editor.getHTML().match(/margin-left/g) || []).length).toBe(1);
+    });
+
+    it("margins the innermost (nearest) list of a nested structure", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>parent</p><ol><li><p>child</p></li></ol></li></ol>");
+        placeCursorInText(editor, "child");
+
+        editor.commands.listIndent();
+
+        // Exactly one list carries a margin, and structure is unchanged (still 2 <ol>).
+        const html = editor.getHTML();
+        expect((html.match(/margin-left/g) || []).length).toBe(1);
+        expect((html.match(/<ol/g) || []).length).toBe(2);
+    });
+
+    it("accumulates on repeated calls", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+        editor.commands.listIndent();
+        editor.commands.listIndent();
+
+        expect(editor.getHTML()).toContain("margin-left: 6em");
+    });
+
+    it("caps at maxIndent", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        for (let i = 0; i < 15; i++) {
+            editor.commands.listIndent();
+        }
+
+        expect(editor.getHTML()).toContain("margin-left: 20em");
+        expect(editor.getHTML()).not.toContain("margin-left: 22em");
+    });
+});
+
+describe("Indent — listOutdent removes margin, clamps at zero", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    it("decreases margin", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+        editor.commands.listIndent();
+        editor.commands.listOutdent();
+
+        expect(editor.getHTML()).toContain("margin-left: 2em");
+    });
+
+    it("is a no-op at zero margin (does not unlist, no negative)", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        const changed = editor.commands.listOutdent();
+
+        expect(changed).toBe(false);
+        const html = editor.getHTML();
+        expect(html).toContain("<ol");
+        expect(html).not.toContain("margin-left");
+    });
+});
+
+describe("Indent — keyboard shortcut routing (Mod-] / Mod-[)", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    function pressCtrl(editor: Editor, key: string): void {
+        editor.view.dom.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey: true, bubbles: true }));
+    }
+
+    it("Ctrl+] in a list margins the list node (real keydown)", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        pressCtrl(editor, "]");
+
+        expect(editor.getHTML()).toContain('<ol style="margin-left: 2em;">');
+    });
+
+    it("Ctrl+[ in a list at zero margin does not unlist (real keydown)", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        pressCtrl(editor, "[");
+
+        const html = editor.getHTML();
+        expect(html).toContain("<ol");
+        expect(html).not.toContain("margin-left");
+    });
+
+    it("Mod-] in a paragraph indents the paragraph (via increaseIndent)", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<p>text</p>");
+        editor.commands.setTextSelection(1);
+
+        editor.commands.increaseIndent();
+
+        expect(editor.getHTML()).toContain("margin-left: 2em");
+    });
+
+    it("Mod-[ in a paragraph at zero is a no-op", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<p>text</p>");
+        editor.commands.setTextSelection(1);
+
+        const changed = editor.commands.decreaseIndent();
+
+        expect(changed).toBe(false);
+        expect(editor.getHTML()).not.toContain("margin-left");
+    });
+});
+
+describe("Indent — Tab nesting is unaffected", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    it("increaseIndent (paragraph walk) does not margin the list node", () => {
+        // The toolbar buttons + paragraph Tab call increaseIndent. With lists excluded
+        // from `types`, the walk must not put a margin on the <ol>/<ul> node itself.
+        // (It may still indent the paragraph inside the list item — pre-existing behavior.)
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>item</p></li></ol>");
+        placeCursorInText(editor, "item");
+
+        editor.commands.increaseIndent();
+
+        const html = editor.getHTML();
+        // The <ol> tag carries no inline margin style.
+        expect(html).toMatch(/<ol>/); // bare <ol>, no style attribute
+        expect(html).not.toMatch(/<ol[^>]*margin-left/);
+    });
+
+    it("sinkListItem still nests a list item structurally", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<ol><li><p>first</p></li><li><p>second</p></li></ol>");
+        placeCursorInText(editor, "second");
+
+        const before = (editor.getHTML().match(/<ol/g) || []).length;
+        editor.commands.sinkListItem("listItem");
+        const after = (editor.getHTML().match(/<ol/g) || []).length;
+
+        expect(after).toBeGreaterThan(before);
+        expect(editor.getHTML()).not.toContain("margin-left");
+    });
+});
+
+describe("Indent — margin coexists with list style type", () => {
+    it("renders both list-style-type and margin-left in inline mode", () => {
+        const editor = makeEditor("inline");
+        editor.commands.setContent('<ol style="list-style-type: lower-alpha;"><li><p>item</p></li></ol>');
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+
+        const html = editor.getHTML();
+        expect(html).toContain("list-style-type: lower-alpha");
+        expect(html).toContain("margin-left: 2em");
+        editor.destroy();
+    });
+
+    it("renders both list-style class and indent class in class mode", () => {
+        const editor = makeEditor("class");
+        editor.commands.setContent('<ol data-list-style="lower-alpha"><li><p>item</p></li></ol>');
+        placeCursorInText(editor, "item");
+
+        editor.commands.listIndent();
+
+        const html = editor.getHTML();
+        expect(html).toContain("list-style-lower-alpha");
+        expect(html).toContain("indent-1");
+        editor.destroy();
+    });
+});
+
+describe("Indent — paragraph indent still works", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    it("indents a paragraph via the walk", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<p>text</p>");
+        editor.commands.setTextSelection(1);
+
+        editor.commands.increaseIndent();
+
+        expect(editor.getHTML()).toContain("margin-left: 2em");
+    });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/LinkBubbleMenu.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/LinkBubbleMenu.spec.ts
new file mode 100644
index 0000000000..98157e00af
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/LinkBubbleMenu.spec.ts
@@ -0,0 +1,90 @@
+import { Editor } from "@tiptap/core";
+import { StarterKit } from "@tiptap/starter-kit";
+
+function makeEditor(content: string): Editor {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    return new Editor({
+        element,
+        extensions: [StarterKit.configure({ link: { openOnClick: false } })],
+        content
+    });
+}
+
+/** Place a collapsed caret inside the first occurrence of the given text. */
+function placeCaretInText(editor: Editor, text: string): void {
+    let target = -1;
+    editor.state.doc.descendants((node, pos) => {
+        if (target === -1 && node.isText && node.text?.includes(text)) {
+            target = pos + (node.text.indexOf(text) + 1);
+            return false;
+        }
+        return true;
+    });
+    editor.commands.setTextSelection(target);
+}
+
+// Mirrors the predicate used by LinkBubbleMenu's shouldShow.
+function shouldShow(editor: Editor, isEditing: boolean): boolean {
+    return editor.isEditable && editor.isActive("link") && !isEditing;
+}
+
+describe("LinkBubbleMenu behavior", () => {
+    describe("shouldShow", () => {
+        it("is true when the caret is inside a link and editable", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a> plain</p>');
+            placeCaretInText(editor, "linked");
+
+            expect(shouldShow(editor, false)).toBe(true);
+        });
+
+        it("is false when the caret is not inside a link", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a> plain</p>');
+            placeCaretInText(editor, "plain");
+
+            expect(shouldShow(editor, false)).toBe(false);
+        });
+
+        it("is false while the dialog is open (isEditing)", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a></p>');
+            placeCaretInText(editor, "linked");
+
+            expect(shouldShow(editor, true)).toBe(false);
+        });
+
+        it("is false when the editor is not editable", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a></p>');
+            placeCaretInText(editor, "linked");
+            editor.setEditable(false);
+
+            expect(shouldShow(editor, false)).toBe(false);
+        });
+    });
+
+    describe("remove", () => {
+        it("strips the whole link from a bare caret", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a></p>');
+            placeCaretInText(editor, "linked");
+
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+            expect(editor.isActive("link")).toBe(false);
+            expect(editor.getHTML()).not.toContain("<a");
+            expect(editor.getText()).toBe("linked");
+        });
+    });
+
+    describe("edit", () => {
+        it("selects the full link range from a bare caret so the dialog can prefill", () => {
+            const editor = makeEditor('<p><a href="https://a.com">linked</a></p>');
+            placeCaretInText(editor, "linked");
+            expect(editor.state.selection.empty).toBe(true);
+
+            editor.chain().focus().extendMarkRange("link").run();
+
+            const { from, to } = editor.state.selection;
+            expect(editor.state.doc.textBetween(from, to)).toBe("linked");
+            expect(editor.getAttributes("link").href).toBe("https://a.com");
+        });
+    });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx b/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
index 1ab4c89bad..7ffa40d5d6 100644
--- a/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
@@ -47,7 +47,8 @@ describe("Rich Text", () => {
             customFonts: [],
             enableDefaultUpload: true,
             formOrientation: "vertical",
-            linkValidation: true
+            linkValidation: true,
+            styleDataFormat: "inline"
         };
     });
 
@@ -93,4 +94,24 @@ describe("Rich Text", () => {
         const component = render(<RichText {...defaultProps} statusBarContent={"both" as StatusBarContentEnum} />);
         expect(component.container).toMatchSnapshot();
     });
+
+    describe("Empty content handling", () => {
+        it("handles empty string value", () => {
+            const emptyAttribute = new EditableValueBuilder<string>().withValue("").build();
+            const component = render(<RichText {...defaultProps} stringAttribute={emptyAttribute} />);
+            expect(component.container).toBeTruthy();
+        });
+
+        it("handles undefined value", () => {
+            const undefinedAttribute = new EditableValueBuilder<string>().withValue(undefined).build();
+            const component = render(<RichText {...defaultProps} stringAttribute={undefinedAttribute} />);
+            expect(component.container).toBeTruthy();
+        });
+
+        it("handles <p></p> value", () => {
+            const emptyParagraphAttribute = new EditableValueBuilder<string>().withValue("<p></p>").build();
+            const component = render(<RichText {...defaultProps} stringAttribute={emptyParagraphAttribute} />);
+            expect(component.container).toBeTruthy();
+        });
+    });
 });
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts
new file mode 100644
index 0000000000..0fec09d663
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts
@@ -0,0 +1,59 @@
+import { CustomListItem, CustomListItemClass, STANDARD_LIST_TYPES } from "../utils/formats/customList";
+
+// CustomListItem and CustomListItemClass extend Quill's ListItem blot.
+// We test only the static helpers and the constructor-level DOM mutation,
+// which do not require a live Quill / Scroll instance.
+
+function makeListNode(listType = "ordered"): HTMLElement {
+    const li = document.createElement("li");
+    li.dataset.list = listType;
+    return li;
+}
+
+describe("STANDARD_LIST_TYPES", () => {
+    it("contains exactly the four standard types", () => {
+        expect(STANDARD_LIST_TYPES).toEqual(["ordered", "checked", "unchecked", "bullet"]);
+    });
+});
+
+describe("CustomListItem.formats", () => {
+    it("returns data-list value for standard list types", () => {
+        const node = makeListNode("ordered");
+        expect(CustomListItem.formats(node)).toBe("ordered");
+    });
+
+    it("prefers data-custom-list over data-list when both are present", () => {
+        const node = makeListNode("ordered");
+        node.dataset.customList = "lower-alpha";
+        expect(CustomListItem.formats(node)).toBe("lower-alpha");
+    });
+
+    it("returns undefined when neither attribute is present", () => {
+        const node = document.createElement("li");
+        expect(CustomListItem.formats(node)).toBeUndefined();
+    });
+});
+
+describe("CustomListItemClass — styleFormat marker contract", () => {
+    // CustomListItemClass constructor assigns domNode.dataset.styleFormat = "class".
+    // Instantiating it requires a live Quill Scroll instance (a Quill integration concern),
+    // so here we verify the contract at the class-definition level and the DOM-mutation logic
+    // in isolation.
+
+    it("is a subclass of CustomListItem", () => {
+        expect(Object.getPrototypeOf(CustomListItemClass)).toBe(CustomListItem);
+    });
+
+    it("the styleFormat marker 'class' round-trips correctly on a DOM node (logic under test)", () => {
+        // This mirrors exactly what the constructor body does:
+        //   domNode.dataset.styleFormat = "class";
+        const node = makeListNode("ordered");
+        node.dataset.styleFormat = "class";
+        expect(node.dataset.styleFormat).toBe("class");
+    });
+
+    it("inline-mode list nodes do NOT have a styleFormat marker by default", () => {
+        const node = makeListNode("ordered");
+        expect(node.dataset.styleFormat).toBeUndefined();
+    });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts
new file mode 100644
index 0000000000..780fc6dd16
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts
@@ -0,0 +1,148 @@
+import { FONT_LIST, FontClassAttributor, FontStyleAttributor, formatCustomFonts } from "../utils/formats/fonts";
+
+// parchment ClassAttributor and StyleAttributor operate directly on HTMLElement nodes —
+// no Quill instance is needed for unit-level attribute tests.
+
+function makeSpan(): HTMLElement {
+    return document.createElement("span");
+}
+
+// FontStyleAttributor --------------------------------------------------------
+
+describe("FontStyleAttributor", () => {
+    let attr: FontStyleAttributor;
+
+    beforeEach(() => {
+        attr = new FontStyleAttributor([]);
+    });
+
+    it("adds font-family style for a known font value", () => {
+        const node = makeSpan();
+        const result = attr.add(node, "arial");
+        expect(result).toBe(true);
+        expect(node.style.fontFamily).toMatch(/arial/i);
+        expect(node.dataset.value).toBe("arial");
+    });
+
+    it("returns false for an unknown font value", () => {
+        const node = makeSpan();
+        const result = attr.add(node, "not-a-real-font");
+        expect(result).toBe(false);
+        expect(node.style.fontFamily).toBe("");
+    });
+
+    it("reads back the value via dataset.value", () => {
+        const node = makeSpan();
+        attr.add(node, "courier-new");
+        expect(attr.value(node)).toBe("courier-new");
+    });
+
+    it("returns empty string for a node with no dataset.value", () => {
+        const node = makeSpan();
+        expect(attr.value(node)).toBe("");
+    });
+
+    it("applies custom fonts passed to the constructor", () => {
+        const custom = new FontStyleAttributor([
+            { value: "my-font", description: "My Font", style: "MyFont, sans-serif" }
+        ]);
+        const node = makeSpan();
+        expect(custom.add(node, "my-font")).toBe(true);
+        expect(node.style.fontFamily).toMatch(/MyFont/i);
+    });
+
+    it("FONT_LIST contains all 13 fonts including serif", () => {
+        const values = FONT_LIST.map(f => f.value);
+        expect(values).toContain("serif");
+        expect(values).toHaveLength(13);
+    });
+});
+
+// FontClassAttributor --------------------------------------------------------
+
+describe("FontClassAttributor", () => {
+    let attr: FontClassAttributor;
+
+    beforeEach(() => {
+        attr = new FontClassAttributor([]);
+    });
+
+    it("adds font-family-<value> class for a known font value", () => {
+        const node = makeSpan();
+        const result = attr.add(node, "arial");
+        expect(result).toBe(true);
+        expect(node.classList.contains("font-family-arial")).toBe(true);
+        expect(node.dataset.value).toBe("arial");
+    });
+
+    it("returns false for an unknown font value and adds no class", () => {
+        const node = makeSpan();
+        const result = attr.add(node, "not-a-real-font");
+        expect(result).toBe(false);
+        const hasClass = Array.from(node.classList).some(c => c.startsWith("font-family-"));
+        expect(hasClass).toBe(false);
+    });
+
+    it("reads back the value via dataset.value", () => {
+        const node = makeSpan();
+        attr.add(node, "impact");
+        expect(attr.value(node)).toBe("impact");
+    });
+
+    it("returns empty string for a node with no dataset.value", () => {
+        const node = makeSpan();
+        expect(attr.value(node)).toBe("");
+    });
+
+    it("adds font-family-serif class for the serif font (Critical #3 regression guard)", () => {
+        const node = makeSpan();
+        const result = attr.add(node, "serif");
+        expect(result).toBe(true);
+        expect(node.classList.contains("font-family-serif")).toBe(true);
+    });
+
+    it("applies custom fonts passed to the constructor", () => {
+        const custom = new FontClassAttributor([
+            { value: "my-font", description: "My Font", style: "MyFont, sans-serif" }
+        ]);
+        const node = makeSpan();
+        expect(custom.add(node, "my-font")).toBe(true);
+        expect(node.classList.contains("font-family-my-font")).toBe(true);
+    });
+
+    it("emits class-based name, not inline style", () => {
+        const node = makeSpan();
+        attr.add(node, "helvetica");
+        expect(node.style.fontFamily).toBe("");
+        expect(node.classList.contains("font-family-helvetica")).toBe(true);
+    });
+});
+
+// formatCustomFonts ----------------------------------------------------------
+
+describe("formatCustomFonts", () => {
+    it("maps custom font objects to FONT_LIST shape", () => {
+        const result = formatCustomFonts([{ fontName: "My Brand Font", fontStyle: "MyBrandFont, sans-serif" }]);
+        expect(result).toEqual([
+            { value: "my-brand-font", description: "My Brand Font", style: "MyBrandFont, sans-serif" }
+        ]);
+    });
+
+    it("lowercases and hyphenates multi-word font names", () => {
+        const result = formatCustomFonts([{ fontName: "Open Sans", fontStyle: "Open Sans, sans-serif" }]);
+        expect(result[0].value).toBe("open-sans");
+    });
+
+    it("returns an empty array when called with no arguments", () => {
+        expect(formatCustomFonts()).toEqual([]);
+    });
+
+    it("returns an empty array for an empty input", () => {
+        expect(formatCustomFonts([])).toEqual([]);
+    });
+
+    it("handles undefined fontName gracefully", () => {
+        const result = formatCustomFonts([{ fontName: undefined as any, fontStyle: "serif" }]);
+        expect(result[0].value).toBe("");
+    });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts
new file mode 100644
index 0000000000..85f9649a37
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts
@@ -0,0 +1,143 @@
+import { INDENT_MAGIC_NUMBER, normalizeStyleAndClassAttribute } from "../utils/helpers";
+
+function makeDoc(html: string): Document {
+    const doc = document.implementation.createHTMLDocument();
+    doc.body.innerHTML = html;
+    return doc;
+}
+
+describe("INDENT_MAGIC_NUMBER", () => {
+    it("equals 3", () => {
+        expect(INDENT_MAGIC_NUMBER).toBe(3);
+    });
+});
+
+describe("normalizeStyleAndClassAttribute — class mode (inline → class)", () => {
+    it("converts padding-left:3em to ql-indent-1 and removes the style", () => {
+        const doc = makeDoc(`<p style="padding-left: 3em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        const p = doc.querySelector("p")!;
+        expect(p.classList.contains("ql-indent-1")).toBe(true);
+        expect(p.style.paddingLeft).toBe("");
+    });
+
+    it("converts padding-left:6em to ql-indent-2", () => {
+        const doc = makeDoc(`<p style="padding-left: 6em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(true);
+    });
+
+    it("converts padding-left:9em to ql-indent-3", () => {
+        const doc = makeDoc(`<p style="padding-left: 9em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        expect(doc.querySelector("p")!.classList.contains("ql-indent-3")).toBe(true);
+    });
+
+    it("rounds non-multiples of 3 using Math.round (5em → ql-indent-2)", () => {
+        const doc = makeDoc(`<p style="padding-left: 5em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(true);
+    });
+
+    it("ignores elements with padding-left:0em (zero is falsy — no class added)", () => {
+        const doc = makeDoc(`<p style="padding-left: 0em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        const p = doc.querySelector("p")!;
+        const hasIndentClass = Array.from(p.classList).some(c => c.startsWith("ql-indent-"));
+        expect(hasIndentClass).toBe(false);
+    });
+
+    it("converts RTL padding-right:3em to ql-indent-1 and removes the style", () => {
+        const doc = makeDoc(`<p style="padding-right: 3em">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        const p = doc.querySelector("p")!;
+        expect(p.classList.contains("ql-indent-1")).toBe(true);
+        expect(p.style.paddingRight).toBe("");
+    });
+
+    it("converts multiple elements independently", () => {
+        const doc = makeDoc(`
+            <p style="padding-left: 3em">a</p>
+            <p style="padding-left: 6em">b</p>
+        `);
+        normalizeStyleAndClassAttribute(doc, "class");
+        const [a, b] = Array.from(doc.querySelectorAll("p"));
+        expect(a.classList.contains("ql-indent-1")).toBe(true);
+        expect(b.classList.contains("ql-indent-2")).toBe(true);
+    });
+
+    it("leaves elements without padding-left unchanged", () => {
+        const doc = makeDoc(`<p>text</p>`);
+        normalizeStyleAndClassAttribute(doc, "class");
+        const p = doc.querySelector("p")!;
+        const hasIndentClass = Array.from(p.classList).some(c => c.startsWith("ql-indent-"));
+        expect(hasIndentClass).toBe(false);
+    });
+});
+
+describe("normalizeStyleAndClassAttribute — inline mode (class → inline)", () => {
+    it("converts ql-indent-1 to padding-left:3em and removes the class", () => {
+        const doc = makeDoc(`<p class="ql-indent-1">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        const p = doc.querySelector("p")!;
+        expect(p.style.paddingLeft).toBe("3em");
+        expect(p.classList.contains("ql-indent-1")).toBe(false);
+    });
+
+    it("converts ql-indent-2 to padding-left:6em", () => {
+        const doc = makeDoc(`<p class="ql-indent-2">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        expect(doc.querySelector("p")!.style.paddingLeft).toBe("6em");
+    });
+
+    it("converts ql-indent-3 to padding-left:9em", () => {
+        const doc = makeDoc(`<p class="ql-indent-3">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        expect(doc.querySelector("p")!.style.paddingLeft).toBe("9em");
+    });
+
+    it("uses padding-right for RTL elements (ql-direction-rtl)", () => {
+        const doc = makeDoc(`<p class="ql-indent-1 ql-direction-rtl">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        const p = doc.querySelector("p")!;
+        expect(p.style.paddingRight).toBe("3em");
+        expect(p.style.paddingLeft).toBe("");
+    });
+
+    it("removes ql-indent-* class after conversion", () => {
+        const doc = makeDoc(`<p class="ql-indent-2">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(false);
+    });
+
+    it("skips ql-indent-0 (zero — no padding added, class still removed)", () => {
+        const doc = makeDoc(`<p class="ql-indent-0">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        const p = doc.querySelector("p")!;
+        expect(p.style.paddingLeft).toBe("");
+        expect(p.classList.contains("ql-indent-0")).toBe(false);
+    });
+
+    it("preserves other classes on the element", () => {
+        const doc = makeDoc(`<p class="ql-indent-1 some-other-class">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        expect(doc.querySelector("p")!.classList.contains("some-other-class")).toBe(true);
+    });
+
+    it("converts multiple elements independently", () => {
+        const doc = makeDoc(`
+            <p class="ql-indent-1">a</p>
+            <p class="ql-indent-3">b</p>
+        `);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        const [a, b] = Array.from(doc.querySelectorAll("p"));
+        expect(a.style.paddingLeft).toBe("3em");
+        expect(b.style.paddingLeft).toBe("9em");
+    });
+
+    it("leaves elements without ql-indent-* unchanged", () => {
+        const doc = makeDoc(`<p class="some-class">text</p>`);
+        normalizeStyleAndClassAttribute(doc, "inline");
+        expect(doc.querySelector("p")!.style.paddingLeft).toBe("");
+    });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/assets/.gitkeep b/packages/pluggableWidgets/rich-text-web/src/assets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx b/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx
deleted file mode 100644
index e6f84d8528..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { ReactElement } from "react";
-
-export function IconLowerAlpha(): ReactElement {
-    return (
-        <span className="widget-icon-container">
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g id="Ico_Lower_Alpha">
-                    <rect id="bkg" width="18" height="18" fill="white" />
-                    <path id="Rectangle 3" d="M6.04297 12.9641H15.7254V14.8149H6.04297V12.9641Z" fill="#444444" />
-                    <g id="c">
-                        <path
-                            id="Vector"
-                            d="M4.85903 14.8149C4.79202 14.8149 4.73447 14.7896 4.68639 14.7391C4.63977 14.6885 4.61646 14.628 4.61646 14.5576C4.61646 14.4871 4.63977 14.4266 4.68639 14.3761C4.73447 14.324 4.79202 14.2979 4.85903 14.2979C4.92751 14.2979 4.98579 14.324 5.03387 14.3761C5.08195 14.4266 5.10599 14.4871 5.10599 14.5576C5.10599 14.628 5.08195 14.6885 5.03387 14.7391C4.98579 14.7896 4.92751 14.8149 4.85903 14.8149Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector (Stroke)"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M4.56001 14.868L4.56002 14.8679C4.48153 14.7828 4.44043 14.6761 4.44043 14.5576C4.44043 14.4391 4.48153 14.3323 4.56002 14.2472L4.56008 14.2472C4.64019 14.1604 4.74285 14.1129 4.85905 14.1129C4.97513 14.1129 5.0785 14.1592 5.15929 14.2462C5.23925 14.3307 5.28205 14.4377 5.28205 14.5576C5.28205 14.6779 5.23892 14.7853 5.15837 14.87C5.07701 14.9555 4.97385 15 4.85905 15C4.74459 15 4.64248 14.9547 4.56192 14.87L4.56001 14.868ZM5.03388 14.3761C4.98581 14.324 4.92753 14.298 4.85905 14.298C4.79203 14.298 4.73448 14.324 4.68641 14.3761C4.63978 14.4266 4.61647 14.4871 4.61647 14.5576C4.61647 14.628 4.63978 14.6885 4.68641 14.7391C4.73448 14.7896 4.79203 14.8149 4.85905 14.8149C4.92753 14.8149 4.98581 14.7896 5.03388 14.7391C5.08196 14.6885 5.106 14.628 5.106 14.5576C5.106 14.4871 5.08196 14.4266 5.03388 14.3761Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector_2"
-                            d="M3.67201 14.6524C3.50072 14.7607 3.29748 14.8149 3.06231 14.8149C2.7444 14.8149 2.48745 14.7066 2.29148 14.4898C2.09696 14.2716 1.99969 13.9892 1.99969 13.6428C1.99969 13.2567 2.10494 12.9468 2.31543 12.7133C2.52592 12.4783 2.80682 12.3608 3.15812 12.3608C3.3541 12.3608 3.52685 12.3989 3.67637 12.4753V12.8599C3.51088 12.7378 3.33378 12.6767 3.14506 12.6767C2.91715 12.6767 2.72988 12.7629 2.58326 12.9354C2.4381 13.1063 2.36551 13.3315 2.36551 13.6107C2.36551 13.8855 2.43374 14.1022 2.5702 14.2609C2.70811 14.4196 2.89247 14.499 3.12328 14.499C3.31781 14.499 3.50072 14.4311 3.67201 14.2952V14.6524Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector (Stroke)_2"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M3.84808 14.757L3.76279 14.811C3.55959 14.9395 3.32378 15 3.06233 15C2.70245 15 2.3972 14.8753 2.16391 14.6174L2.16304 14.6164C1.93312 14.3584 1.82367 14.0283 1.82367 13.6428C1.82367 13.2195 1.94011 12.8608 2.18748 12.5862C2.43613 12.3087 2.76608 12.1757 3.15814 12.1757C3.37601 12.1757 3.57586 12.2182 3.75327 12.3088L3.85243 12.3594V13.2158L3.57526 13.0114C3.43717 12.9095 3.29497 12.8618 3.14508 12.8618C2.96527 12.8618 2.82647 12.9271 2.7146 13.0587M2.31545 12.7133C2.10496 12.9469 1.99971 13.2567 1.99971 13.6428C1.99971 13.9892 2.09697 14.2716 2.2915 14.4898C2.48747 14.7066 2.74442 14.8149 3.06233 14.8149C3.2975 14.8149 3.50074 14.7607 3.67203 14.6524V14.2952C3.61465 14.3407 3.55597 14.3786 3.49599 14.4089C3.3769 14.469 3.25267 14.499 3.1233 14.499C2.89249 14.499 2.70813 14.4196 2.57022 14.2609C2.43376 14.1022 2.36553 13.8855 2.36553 13.6107C2.36553 13.3315 2.43812 13.1063 2.58328 12.9354C2.7299 12.7629 2.91717 12.6767 3.14508 12.6767C3.26846 12.6767 3.38689 12.7028 3.50034 12.755C3.56042 12.7826 3.6191 12.8176 3.67639 12.8599V12.4753C3.52687 12.3989 3.35412 12.3608 3.15814 12.3608C2.80684 12.3608 2.52594 12.4783 2.31545 12.7133ZM3.84808 14.757V14.6524ZM3.84808 14.6524V13.9238ZM3.84808 13.9238L3.56603 14.1475ZM2.7146 13.0587C2.60426 13.1886 2.54158 13.3665 2.54158 13.6107C2.54158 13.8528 2.60105 14.0205 2.70051 14.1364C2.80055 14.2514 2.93509 14.3139 3.1233 14.3139C3.27561 14.3139 3.42195 14.2617 3.56603 14.1475"
-                            fill="#444444"
-                        />
-                    </g>
-                    <path id="Rectangle 2" d="M6.04297 8.33605H15.7254V10.1869H6.04297V8.33605Z" fill="#444444" />
-                    <g id="b">
-                        <path
-                            id="Vector_3"
-                            d="M4.85897 10.1869C4.79195 10.1869 4.73441 10.1616 4.68633 10.111C4.63971 10.0605 4.61639 9.99999 4.61639 9.92953C4.61639 9.85907 4.63971 9.79856 4.68633 9.74802C4.73441 9.69594 4.79195 9.6699 4.85897 9.6699C4.92745 9.6699 4.98573 9.69594 5.03381 9.74802C5.08188 9.79856 5.10592 9.85907 5.10592 9.92953C5.10592 9.99999 5.08188 10.0605 5.03381 10.111C4.98573 10.1616 4.92745 10.1869 4.85897 10.1869Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector (Stroke)_3"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M4.55995 10.2399L4.55996 10.2399C4.48147 10.1548 4.44037 10.0481 4.44037 9.92953C4.44037 9.81101 4.48147 9.70428 4.55996 9.61917L4.56002 9.61911C4.64013 9.53233 4.74279 9.48482 4.85899 9.48482C4.97506 9.48482 5.07844 9.5311 5.15923 9.61812C5.23919 9.70266 5.28199 9.80965 5.28199 9.92953C5.28199 10.0499 5.23886 10.1572 5.15831 10.2419C5.07695 10.3274 4.97378 10.3719 4.85899 10.3719C4.74453 10.3719 4.64242 10.3266 4.56186 10.2419L4.55995 10.2399ZM5.03382 9.74802C4.98575 9.69594 4.92747 9.6699 4.85899 9.6699C4.79197 9.6699 4.73442 9.69594 4.68634 9.74802C4.63972 9.79857 4.61641 9.85907 4.61641 9.92953C4.61641 9.99999 4.63972 10.0605 4.68634 10.111C4.73442 10.1616 4.79197 10.1869 4.85899 10.1869C4.92747 10.1869 4.98575 10.1616 5.03382 10.111C5.0819 10.0605 5.10594 9.99999 5.10594 9.92953C5.10594 9.85907 5.0819 9.79857 5.03382 9.74802Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector_4"
-                            d="M2.33818 9.97645H2.33012V10.2685H1.99969V7.27717H2.33012V8.60313H2.33818C2.50071 8.33478 2.73845 8.20061 3.05142 8.20061C3.31603 8.20061 3.52288 8.29137 3.67198 8.4729C3.82242 8.65312 3.89764 8.89516 3.89764 9.19903C3.89764 9.5371 3.81369 9.80808 3.64579 10.012C3.47789 10.2145 3.2482 10.3158 2.95672 10.3158C2.68406 10.3158 2.47787 10.2027 2.33818 9.97645ZM2.33012 9.16154V9.4437C2.33012 9.61076 2.38519 9.75283 2.49534 9.8699C2.60682 9.98566 2.74786 10.0435 2.91844 10.0435C3.11858 10.0435 3.27506 9.96856 3.38789 9.8186C3.50206 9.66864 3.55915 9.46014 3.55915 9.19311C3.55915 8.96817 3.50609 8.7919 3.39998 8.6643C3.29387 8.5367 3.15015 8.4729 2.96881 8.4729C2.77674 8.4729 2.62227 8.53868 2.50541 8.67022C2.38855 8.80045 2.33012 8.96422 2.33012 9.16154Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector (Stroke)_4"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M2.43225 9.79138C2.43632 9.79738 2.44051 9.80333 2.44483 9.80923C2.46014 9.83015 2.47698 9.85038 2.49535 9.86991C2.60684 9.98567 2.74788 10.0435 2.91846 10.0435C3.1186 10.0435 3.27508 9.96857 3.38791 9.81861C3.50208 9.66865 3.55917 9.46015 3.55917 9.19312C3.55917 8.96818 3.50611 8.79191 3.4 8.66431C3.29389 8.53671 3.15016 8.47291 2.96883 8.47291C2.78063 8.47291 2.62853 8.53606 2.51254 8.66235C2.51016 8.66495 2.50778 8.66758 2.50543 8.67023C2.49703 8.67959 2.48893 8.68912 2.48114 8.69883C2.45839 8.72715 2.43821 8.75695 2.42061 8.78822C2.3603 8.89535 2.33014 9.01979 2.33014 9.16155V9.44371C2.33014 9.57505 2.36418 9.69094 2.43225 9.79138ZM2.33014 8.60314H2.3382C2.35063 8.58262 2.3635 8.56288 2.37681 8.54393C2.37672 8.54405 2.37689 8.54382 2.37681 8.54393C2.41603 8.48812 2.45932 8.43878 2.50618 8.39659C2.65131 8.26594 2.83307 8.20062 3.05144 8.20062C3.31605 8.20062 3.5229 8.29138 3.672 8.47291C3.82244 8.65313 3.89765 8.89517 3.89765 9.19904C3.89765 9.5371 3.8137 9.80809 3.6458 10.012C3.4779 10.2146 3.24822 10.3158 2.95674 10.3158C2.77798 10.3158 2.62779 10.2672 2.50618 10.17C2.4423 10.1189 2.38631 10.0544 2.3382 9.97646H2.33014V10.2685H1.99971V7.27718H2.33014V8.60314ZM2.50618 8.16789V7.09209H1.82367V10.4536H2.50618V10.3895C2.63726 10.4638 2.78859 10.5009 2.95674 10.5009C3.29116 10.5009 3.57231 10.3824 3.77853 10.1336C3.98062 9.88816 4.0737 9.56994 4.0737 9.19904C4.0737 8.86291 3.98998 8.57356 3.80477 8.35138C3.61677 8.12283 3.3579 8.01553 3.05144 8.01553C2.84483 8.01553 2.66175 8.06659 2.50618 8.16789ZM2.61979 9.73898C2.69513 9.81684 2.79008 9.85847 2.91846 9.85847C3.07096 9.85847 3.17405 9.80451 3.24984 9.70379L3.25047 9.70295C3.33149 9.59654 3.38312 9.43429 3.38312 9.19312C3.38312 8.99811 3.33744 8.87027 3.26747 8.78613C3.19917 8.70401 3.10645 8.65799 2.96883 8.65799C2.81896 8.65799 2.71342 8.70726 2.63408 8.79656L2.63348 8.79724C2.55071 8.88948 2.50618 9.0062 2.50618 9.16155V9.44371C2.50618 9.56245 2.54326 9.65729 2.61979 9.73898Z"
-                            fill="#444444"
-                        />
-                    </g>
-                    <path id="Rectangle 1" d="M6.04297 3.68613H15.7254V5.53695H6.04297V3.68613Z" fill="#444444" />
-                    <g id="a">
-                        <path
-                            id="Vector_5"
-                            d="M4.85903 5.53695C4.79202 5.53695 4.73447 5.51168 4.68639 5.46113C4.63977 5.41058 4.61646 5.35008 4.61646 5.27962C4.61646 5.20916 4.63977 5.14865 4.68639 5.09811C4.73447 5.04603 4.79202 5.01999 4.85903 5.01999C4.92751 5.01999 4.98579 5.04603 5.03387 5.09811C5.08195 5.14865 5.10599 5.20916 5.10599 5.27962C5.10599 5.35008 5.08195 5.41058 5.03387 5.46113C4.98579 5.51168 4.92751 5.53695 4.85903 5.53695Z"
-                            fill="#444444"
-                        />
-                        <path
-                            id="Vector (Stroke)_5"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M4.55995 5.58999L4.55996 5.58997C4.48147 5.50487 4.44037 5.39814 4.44037 5.27962C4.44037 5.1611 4.48147 5.05437 4.55996 4.96926L4.56002 4.9692C4.64013 4.88242 4.74279 4.83491 4.85899 4.83491C4.97506 4.83491 5.07844 4.88119 5.15923 4.96821C5.23919 5.05275 5.28199 5.15974 5.28199 5.27962C5.28199 5.39996 5.23886 5.50731 5.15831 5.592C5.07695 5.67753 4.97378 5.72203 4.85899 5.72203C4.74453 5.72203 4.64242 5.67669 4.56186 5.592L4.55995 5.58999ZM5.03382 5.09811C4.98575 5.04603 4.92747 5.01999 4.85899 5.01999C4.79197 5.01999 4.73442 5.04603 4.68634 5.09811C4.63972 5.14866 4.61641 5.20916 4.61641 5.27962C4.61641 5.35008 4.63972 5.41058 4.68634 5.46113C4.73442 5.51168 4.79197 5.53695 4.85899 5.53695C4.92747 5.53695 4.98575 5.51168 5.03382 5.46113C5.0819 5.41058 5.10594 5.35008 5.10594 5.27962C5.10594 5.20916 5.0819 5.14866 5.03382 5.09811Z"
-                            fill="#444444"
-                        />
-                        <g id="a.">
-                            <path
-                                id="Vector_6"
-                                d="M4.74555 5.63463C4.67877 5.63463 4.62143 5.60945 4.57353 5.55908C4.52707 5.50872 4.50385 5.44843 4.50385 5.37823C4.50385 5.30802 4.52707 5.24774 4.57353 5.19737C4.62143 5.14548 4.67877 5.11954 4.74555 5.11954C4.81378 5.11954 4.87184 5.14548 4.91975 5.19737C4.96765 5.24774 4.9916 5.30802 4.9916 5.37823C4.9916 5.44843 4.96765 5.50872 4.91975 5.55908C4.87184 5.60945 4.81378 5.63463 4.74555 5.63463Z"
-                                fill="#444444"
-                            />
-                            <path
-                                id="Vector_7"
-                                d="M3.66309 5.58426H3.30598V5.21798H3.29727C3.14194 5.4988 2.9133 5.63921 2.61135 5.63921C2.38925 5.63921 2.21505 5.5774 2.08875 5.45377C1.96391 5.33015 1.90149 5.16609 1.90149 4.96157C1.90149 4.52356 2.14682 4.26868 2.63748 4.19695L3.30598 4.09851C3.30598 3.70017 3.15283 3.501 2.84652 3.501C2.57797 3.501 2.33554 3.59715 2.11924 3.78946V3.40485C2.33844 3.25834 2.59103 3.18508 2.87701 3.18508C3.40106 3.18508 3.66309 3.47659 3.66309 4.05959V5.58426ZM3.30598 4.39841L2.76813 4.47624C2.60264 4.50066 2.4778 4.54416 2.3936 4.60673C2.30941 4.66778 2.26731 4.77691 2.26731 4.9341C2.26731 5.04857 2.30578 5.14243 2.38272 5.21569C2.46111 5.28742 2.5649 5.32328 2.6941 5.32328C2.8712 5.32328 3.01709 5.25842 3.13178 5.12869C3.24791 4.99744 3.30598 4.83185 3.30598 4.63192V4.39841Z"
-                                fill="#444444"
-                            />
-                            <path
-                                id="Vector (Stroke)_6"
-                                fillRule="evenodd"
-                                clipRule="evenodd"
-                                d="M3.83909 5.76935H3.12989V5.67317C2.9824 5.77298 2.80854 5.82429 2.61131 5.82429C2.35791 5.82429 2.13616 5.7531 1.96875 5.58923L1.96801 5.5885C1.80295 5.42506 1.7254 5.20957 1.7254 4.96158C1.7254 4.70411 1.79879 4.47951 1.96171 4.31026C2.12087 4.1449 2.34609 4.05269 2.61315 4.01364C2.61316 4.01364 2.61313 4.01364 2.61315 4.01364L3.11841 3.93924C3.10481 3.85571 3.08064 3.80116 3.05417 3.76674C3.0194 3.72152 2.96141 3.68609 2.84648 3.68609C2.62195 3.68609 2.41928 3.76506 2.23287 3.93078L1.94315 4.18835V3.3032L2.02475 3.24867C2.275 3.0814 2.56103 3 2.87697 3C3.16875 3 3.41926 3.08166 3.59447 3.27659C3.76792 3.46955 3.83909 3.74209 3.83909 4.05959V5.76935ZM3.30593 4.09851L2.63744 4.19695C2.14678 4.26868 1.90145 4.52356 1.90145 4.96158C1.90145 5.16609 1.96387 5.33015 2.08871 5.45377C2.21501 5.5774 2.38921 5.63921 2.61131 5.63921C2.81878 5.63921 2.99164 5.57292 3.12989 5.44034C3.19284 5.37996 3.24862 5.30584 3.29722 5.21798H3.30593V5.58426H3.66304V4.05959C3.66304 3.47659 3.40102 3.18508 2.87697 3.18508C2.59099 3.18508 2.3384 3.25834 2.1192 3.40485V3.78946C2.17607 3.73889 2.23475 3.69497 2.29524 3.65771C2.46479 3.55324 2.64854 3.501 2.84648 3.501C3.15278 3.501 3.30593 3.70017 3.30593 4.09851ZM3.20252 5.03289C3.19145 5.05108 3.17949 5.06875 3.16664 5.08589C3.15565 5.10054 3.14402 5.11481 3.13173 5.12869C3.01705 5.25842 2.87116 5.32328 2.69406 5.32328C2.56486 5.32328 2.46106 5.28742 2.38267 5.21569C2.30574 5.14243 2.26727 5.04857 2.26727 4.9341C2.26727 4.77691 2.30936 4.66778 2.39356 4.60673C2.47776 4.54416 2.6026 4.50066 2.76809 4.47624L3.30593 4.39841V4.63192C3.30593 4.78596 3.27146 4.91962 3.20252 5.03289ZM3.12989 4.61071L2.79256 4.65953C2.79248 4.65954 2.79264 4.65952 2.79256 4.65953C2.63966 4.68212 2.54646 4.71975 2.49518 4.75787L2.49351 4.75911C2.47636 4.77154 2.44331 4.80787 2.44331 4.9341C2.44331 4.99845 2.46231 5.04124 2.49955 5.07726C2.53866 5.11243 2.5977 5.1382 2.69406 5.1382C2.82506 5.1382 2.92329 5.09262 3.00278 5.00269C3.08503 4.90973 3.12989 4.79091 3.12989 4.63192V4.61071Z"
-                                fill="#444444"
-                            />
-                        </g>
-                    </g>
-                </g>
-            </svg>
-        </span>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/assets/RichTextIconFont.woff2 b/packages/pluggableWidgets/rich-text-web/src/assets/RichTextIconFont.woff2
index 392204cc36..27a350a60f 100644
Binary files a/packages/pluggableWidgets/rich-text-web/src/assets/RichTextIconFont.woff2 and b/packages/pluggableWidgets/rich-text-web/src/assets/RichTextIconFont.woff2 differ
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx
deleted file mode 100644
index bc464f3264..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ReactElement, useCallback, useContext } from "react";
-import { ToolbarButton } from "./ToolbarWrapper";
-import { CustomToolbarProps } from "./customToolbars";
-import { ACTION_DISPATCHER } from "../../utils/helpers";
-import { SET_FULLSCREEN_ACTION } from "../../store/store";
-import { EditorContext } from "../../store/EditorProvider";
-import classNames from "classnames";
-
-export function FullscreenButton({ quill }: CustomToolbarProps): ReactElement {
-    const handleClick = useCallback(() => {
-        quill?.emitter.emit(ACTION_DISPATCHER, { type: SET_FULLSCREEN_ACTION });
-    }, [quill]);
-
-    const { isFullscreen } = useContext(EditorContext);
-
-    return (
-        <ToolbarButton
-            className={classNames(`icons icon-Expand`, { "ql-active": isFullscreen })}
-            title={"Fullscreen"}
-            onClick={handleClick}
-        />
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/ToolbarWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/ToolbarWrapper.tsx
deleted file mode 100644
index a1d08a66ff..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/ToolbarWrapper.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import { createContext, PropsWithChildren, ReactElement, useContext } from "react";
-import { PresetEnum } from "typings/RichTextProps";
-import type { ToolbarButtonProps, ToolbarConsumerContext, ToolbarContextType } from "./customToolbars";
-
-export function presetToNumberConverter(preset: PresetEnum): number {
-    switch (preset) {
-        case "basic":
-            return 1;
-        case "standard":
-            return 2;
-        case "full":
-            return 3;
-        case "custom":
-            return 4;
-        default:
-            return 1;
-    }
-}
-
-export const ToolbarContext = createContext<ToolbarContextType>({
-    presetValue: 0
-});
-
-export function FormatsContainer({ presetValue, children }: ToolbarConsumerContext & PropsWithChildren): ReactElement {
-    const toolbarContextValue = useContext(ToolbarContext);
-    return (
-        <If condition={presetValue === undefined || toolbarContextValue.presetValue >= presetValue}>
-            <span className="ql-formats" tabIndex={-1}>
-                {children}
-            </span>
-        </If>
-    );
-}
-
-export function ToolbarButton({
-    presetValue,
-    children,
-    className,
-    value,
-    onClick,
-    title
-}: ToolbarButtonProps): ReactElement {
-    const toolbarContextValue = useContext(ToolbarContext);
-    return (
-        <If condition={presetValue === undefined || toolbarContextValue.presetValue >= presetValue}>
-            <button
-                className={className}
-                onClick={onClick}
-                value={value}
-                title={title}
-                aria-label={title}
-                tabIndex={-1}
-            >
-                {children}
-            </button>
-        </If>
-    );
-}
-
-export function ToolbarDropdown({ presetValue, className, value, title }: ToolbarButtonProps): ReactElement {
-    const toolbarContextValue = useContext(ToolbarContext);
-    return (
-        <If condition={presetValue === undefined || toolbarContextValue.presetValue >= presetValue}>
-            <select className={className} title={title} aria-label={title} tabIndex={-1}>
-                {Array.isArray(value) ? (
-                    value.map((v, idx) => {
-                        if (v === false) {
-                            return <option key={`${className}_${idx}`}></option>;
-                        }
-
-                        return (
-                            <option value={v.value || v} key={v.value || v}>
-                                {v.description}
-                            </option>
-                        );
-                    })
-                ) : (
-                    <option value={value} key={value}></option>
-                )}
-            </select>
-        </If>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx
deleted file mode 100644
index 6f84717003..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ReactElement, useCallback } from "react";
-import { ToolbarButton } from "./ToolbarWrapper";
-import type { CustomToolbarProps } from "./customToolbars";
-
-export function UndoToolbar({ quill }: CustomToolbarProps): ReactElement {
-    const onUndo = useCallback(() => {
-        quill?.history.undo();
-    }, [quill]);
-
-    return <ToolbarButton className="icons icon-Undo" title="undo" onClick={onUndo}></ToolbarButton>;
-}
-
-export function RedoToolbar({ quill }: CustomToolbarProps): ReactElement {
-    const onRedo = useCallback(() => {
-        quill?.history.redo();
-    }, [quill]);
-
-    return <ToolbarButton className="icons icon-Redo" title="redo" onClick={onRedo}></ToolbarButton>;
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/constants.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/constants.ts
deleted file mode 100644
index dfcda2a3c4..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/constants.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-import type Quill from "quill";
-import { FunctionComponent } from "react";
-import { IconLowerAlpha } from "../../assets/Icons";
-import { FONT_LIST } from "../../utils/formats/fonts";
-import { FONT_SIZE_LIST } from "../../utils/formats/fontsize";
-import { ToolbarButton, ToolbarDropdown } from "./ToolbarWrapper";
-import { RedoToolbar, UndoToolbar } from "./UndoRedo";
-import { FullscreenButton } from "./Fullscreen";
-type DefaultComponentProps = {
-    className?: string;
-    value?: string | any[];
-    presetValue?: number;
-    title: string;
-    children?: FunctionComponent;
-};
-
-type CustomComponentProps =
-    | {
-          quill?: Quill | null;
-      }
-    | DefaultComponentProps;
-
-type toolbarMappingType = {
-    [k: string]: {
-        component: FunctionComponent<CustomComponentProps>;
-        custom?: boolean;
-    } & DefaultComponentProps;
-};
-
-export const TOOLBAR_MAPPING: toolbarMappingType = {
-    undo: { component: UndoToolbar, custom: true, title: "Undo" },
-    redo: { component: RedoToolbar, custom: true, title: "Redo" },
-    bold: { component: ToolbarButton, className: "ql-bold icons icon-Text-bold", title: "Bold" },
-    italic: { component: ToolbarButton, className: "ql-italic icons icon-Text-italic", title: "Italic" },
-    underline: {
-        component: ToolbarButton,
-        className: "ql-underline icons icon-Text-underline",
-        presetValue: 2,
-        title: "Underline"
-    },
-    strike: {
-        component: ToolbarButton,
-        className: "ql-strike icons icon-Text-strikethrough",
-        presetValue: 3,
-        title: "Strike"
-    },
-    superScript: {
-        component: ToolbarButton,
-        className: "ql-script icons icon-Text-superscript",
-        value: "super",
-        title: "Superscript"
-    },
-    subScript: {
-        component: ToolbarButton,
-        className: "ql-script icons icon-Text-subscript",
-        value: "sub",
-        title: "Subscript"
-    },
-    size: { component: ToolbarDropdown, className: "size ql-size", value: FONT_SIZE_LIST, title: "Font size" },
-    orderedList: {
-        component: ToolbarButton,
-        className: "ql-list icons icon-List-numbers",
-        value: "ordered",
-        title: "Default list"
-    },
-    bulletList: {
-        component: ToolbarButton,
-        className: "ql-list icons icon-List-bullets",
-        value: "bullet",
-        title: "Bullet list"
-    },
-    lowerAlphaList: {
-        component: ToolbarButton,
-        className: "ql-list icons icon-List-lower-alpha",
-        value: "lower-alpha",
-        presetValue: 2,
-        title: "Lower alpha list",
-        children: IconLowerAlpha
-    },
-    checkList: {
-        component: ToolbarButton,
-        className: "ql-list  icons icon-List-checklist",
-        value: "check",
-        presetValue: 3,
-        title: "Check list"
-    },
-    minIndent: {
-        component: ToolbarButton,
-        className: "ql-indent icons icon-Text-indent-right",
-        value: "-1",
-        title: "Decrease indent"
-    },
-    plusIndent: {
-        component: ToolbarButton,
-        className: "ql-indent icons icon-Text-indent-left",
-        value: "+1",
-        title: "Increase indent"
-    },
-    direction: {
-        component: ToolbarButton,
-        className: "ql-direction direction icons",
-        value: "rtl",
-        presetValue: 2,
-        title: "Text direction"
-    },
-    link: { component: ToolbarButton, className: "ql-link icons icon-Hyperlink", title: "Insert/edit link" },
-    image: {
-        component: ToolbarButton,
-        className: "ql-image icons icon-Image",
-        presetValue: 2,
-        title: "Insert/edit image"
-    },
-    video: {
-        component: ToolbarButton,
-        className: "ql-video icons icon-Film",
-        presetValue: 3,
-        title: "Insert/edit video"
-    },
-    formula: {
-        component: ToolbarButton,
-        className: "ql-formula icons icon-Insert-edit-math",
-        presetValue: 3,
-        title: "Insert/edit formula"
-    },
-    blockquote: { component: ToolbarButton, className: "ql-blockquote icons icon-Blockquote", title: "Blockquote" },
-    codeBlock: { component: ToolbarButton, className: "ql-code-block icons icon-Code-block", title: "Code block" },
-    code: { component: ToolbarButton, className: "ql-code icons icon-Inline-code", title: "Code" },
-    viewCode: {
-        component: ToolbarButton,
-        className: "ql-view-code icons icon-View-edit-code",
-        title: "View/edit Code"
-    },
-    align: { component: ToolbarButton, className: "ql-align icons icon-Text-align-left", title: "Left align" },
-    centerAlign: {
-        component: ToolbarDropdown,
-        className: "ql-align icons",
-        value: ["center", "justify"],
-        title: "Center align"
-    },
-    rightAlign: {
-        component: ToolbarButton,
-        className: "ql-align icons icon-Text-align-right",
-        value: "right",
-        title: "Right align"
-    },
-    font: { component: ToolbarDropdown, className: "ql-font font", value: FONT_LIST, title: "Font type" },
-    color: { component: ToolbarDropdown, className: "ql-color icons", value: [], title: "Font color" },
-    background: { component: ToolbarDropdown, className: "ql-background icons", value: [], title: "Font background" },
-    header: {
-        component: ToolbarDropdown,
-        className: "ql-header",
-        value: ["1", "2", "3", "4", "5", "6", false],
-        title: "Font header"
-    },
-    clean: { component: ToolbarButton, className: "ql-clean icons icon-Clear-formating", title: "Clear formatting" },
-    fullscreen: {
-        component: FullscreenButton,
-        title: "Fullscreen",
-        custom: true
-    },
-    tableBetter: {
-        component: ToolbarButton,
-        className: "ql-table-better icons icon-Table",
-        title: "Create Table",
-        presetValue: 2
-    }
-};
-
-type ToolbarGroupType = {
-    [k: string]: string[];
-};
-
-export const TOOLBAR_GROUP: ToolbarGroupType = {
-    history: ["undo", "redo"],
-    fontStyle: ["bold", "italic", "underline", "strike"],
-    fontScript: ["superScript", "subScript"],
-    list: ["orderedList", "bulletList", "lowerAlphaList", "checkList"],
-    indent: ["minIndent", "plusIndent", "direction"],
-    align: ["align", "centerAlign", "rightAlign"],
-    fontColor: ["font", "size", "color", "background"],
-    embed: ["link", "image", "video", "formula"],
-    header: ["header"],
-    code: ["blockquote", "code", "codeBlock", "viewCode"],
-    remove: ["clean"],
-    view: ["fullscreen"],
-    tableBetter: ["tableBetter"]
-};
-
-export type toolbarContentType = {
-    presetValue?: number;
-    children: Array<keyof toolbarMappingType>;
-};
-
-export const DEFAULT_TOOLBAR: toolbarContentType[] = [
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.history
-    },
-    {
-        presetValue: 1,
-        children: TOOLBAR_GROUP.fontStyle
-    },
-    {
-        presetValue: 3,
-        children: TOOLBAR_GROUP.fontScript
-    },
-    {
-        presetValue: 1,
-        children: TOOLBAR_GROUP.list
-    },
-    {
-        presetValue: 1,
-        children: TOOLBAR_GROUP.indent
-    },
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.align
-    },
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.fontColor
-    },
-    {
-        presetValue: 1,
-        children: TOOLBAR_GROUP.embed
-    },
-    {
-        presetValue: 3,
-        children: TOOLBAR_GROUP.header
-    },
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.code
-    },
-    {
-        presetValue: 1,
-        children: TOOLBAR_GROUP.remove
-    },
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.view
-    },
-    {
-        presetValue: 2,
-        children: TOOLBAR_GROUP.tableBetter
-    }
-];
-
-export const IMG_MIME_TYPES = ["image/png", "image/jpeg"];
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts
deleted file mode 100644
index ab02d0d63a..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import Quill from "quill";
-
-export type ToolbarContextType = {
-    presetValue: number;
-};
-
-export type ToolbarConsumerContext = {
-    presetValue?: number;
-};
-
-export type ToolbarButtonProps = {
-    className?: string;
-    onClick?: () => void;
-    value?: any;
-    title: string;
-} & ToolbarConsumerContext &
-    PropsWithChildren;
-
-export type CustomToolbarProps = {
-    quill: Quill;
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts
deleted file mode 100644
index f4534048b8..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { DEFAULT_TOOLBAR, TOOLBAR_GROUP, type toolbarContentType } from "./constants";
-
-export function createPreset(config?: Partial<RichTextContainerProps>): toolbarContentType[] {
-    return config?.preset !== "custom"
-        ? DEFAULT_TOOLBAR
-        : config?.toolbarConfig === "basic"
-          ? defineBasicGroups(config)
-          : defineAdvancedGroups(config!);
-}
-
-function defineBasicGroups(widgetProps: Partial<RichTextContainerProps>): toolbarContentType[] {
-    const enabledGroups: Array<toolbarContentType | undefined> = Object.entries(widgetProps).map(([prop, enabled]) => {
-        if (Object.hasOwn(TOOLBAR_GROUP, prop) && enabled) {
-            return {
-                children: TOOLBAR_GROUP[prop]
-            };
-        } else {
-            return undefined;
-        }
-    });
-    return enabledGroups.filter(x => x !== undefined) as toolbarContentType[];
-}
-
-function defineAdvancedGroups(widgetProps: Partial<RichTextContainerProps>): toolbarContentType[] {
-    const { advancedConfig: items } = widgetProps;
-
-    const result: toolbarContentType[] = [
-        {
-            children: []
-        }
-    ];
-    items?.forEach(item => {
-        if (item.ctItemType === "separator") {
-            result.push({
-                children: []
-            });
-        } else {
-            result[result.length - 1].children.push(item.ctItemType);
-        }
-    });
-
-    return result;
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts
deleted file mode 100644
index 34aee064a9..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import Quill, { Range } from "quill";
-import { Delta } from "quill/core";
-import Emitter from "quill/core/emitter";
-import { Dispatch, MutableRefObject, SetStateAction, useState } from "react";
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { IMG_MIME_TYPES } from "./constants";
-import {
-    imageConfigType,
-    type linkConfigType,
-    type videoConfigType,
-    type videoEmbedConfigType,
-    viewCodeConfigType
-} from "../../utils/formats";
-import { type ChildDialogProps } from "../ModalDialog/Dialog";
-import { type VideoFormType } from "../ModalDialog/VideoDialog";
-
-type ModalReturnType = {
-    showDialog: boolean;
-    setShowDialog: Dispatch<SetStateAction<boolean>>;
-    dialogConfig: ChildDialogProps;
-    customLinkHandler(value: any): void;
-    customVideoHandler(value: any): void;
-    customViewCodeHandler(value: any): void;
-    customImageUploadHandler(value: any): void;
-};
-
-export function useEmbedModal(
-    ref: MutableRefObject<Quill | null>,
-    props: Pick<RichTextContainerProps, "formOrientation">
-): ModalReturnType {
-    const [showDialog, setShowDialog] = useState<boolean>(false);
-    const [dialogConfig, setDialogConfig] = useState<ChildDialogProps>({});
-    const openDialog = (): void => {
-        setShowDialog(true);
-    };
-    const closeDialog = (): void => {
-        setShowDialog(false);
-        setTimeout(() => ref.current?.focus(), 50);
-    };
-    const customLinkHandler = (value: any): void => {
-        const selection = ref.current?.getSelection();
-        const text = selection ? ref.current?.getText(selection.index, selection.length) : "";
-        if (value) {
-            setDialogConfig({
-                dialogType: "link",
-                config: {
-                    onSubmit: (value: linkConfigType) => {
-                        const index = selection?.index ?? 0;
-                        const length = selection?.length ?? 0;
-                        const textToDisplay = value.text ?? value.href;
-                        const linkDelta = new Delta().retain(index).delete(length).insert(textToDisplay);
-                        ref.current?.updateContents(linkDelta, Emitter.sources.SILENT);
-                        ref.current?.setSelection(index, textToDisplay.length);
-                        ref.current?.format("link", value);
-                        closeDialog();
-                    },
-                    onClose: closeDialog,
-                    defaultValue: { ...value, text },
-                    formOrientation: props.formOrientation
-                }
-            });
-            openDialog();
-        } else {
-            ref.current?.format("link", false);
-            closeDialog();
-        }
-    };
-
-    const customVideoHandler = (value: any): void => {
-        const selection = ref.current?.getSelection();
-        if (value === true || value.type === "video") {
-            setDialogConfig({
-                dialogType: "video",
-                config: {
-                    onSubmit: (submittedValue: VideoFormType) => {
-                        if (
-                            Object.hasOwn(submittedValue, "src") &&
-                            (submittedValue as videoConfigType).src !== undefined
-                        ) {
-                            const currentValue = submittedValue as videoConfigType;
-                            if (value.type === "video") {
-                                const index = selection?.index ?? 0;
-                                const length = selection?.length ?? 1;
-                                const videoConfig = {
-                                    width: currentValue.width,
-                                    height: currentValue.height
-                                };
-                                // update existing video value
-                                const delta = new Delta().retain(index).retain(length, videoConfig);
-                                ref.current?.updateContents(delta, Emitter.sources.USER);
-                            } else {
-                                // insert new video
-                                const delta = new Delta()
-                                    .retain(selection?.index ?? 0)
-                                    .delete(selection?.length ?? 0)
-                                    .insert(
-                                        { video: currentValue },
-                                        { width: currentValue.width, height: currentValue.height }
-                                    );
-                                ref.current?.updateContents(delta, Emitter.sources.USER);
-                            }
-                        } else {
-                            const currentValue = submittedValue as videoEmbedConfigType;
-                            const res = ref.current?.clipboard.convert({
-                                html: currentValue.embedcode
-                            });
-                            if (res) {
-                                // insert video via embed code;
-                                const delta = new Delta()
-                                    .retain(selection?.index ?? 0)
-                                    .delete(selection?.length ?? 0)
-                                    .concat(res);
-                                ref.current?.updateContents(delta, Emitter.sources.USER);
-                            }
-                        }
-
-                        closeDialog();
-                    },
-                    onClose: closeDialog,
-                    selection: ref.current?.getSelection(),
-                    defaultValue: { ...value },
-                    formOrientation: props.formOrientation
-                }
-            });
-            openDialog();
-        } else {
-            ref.current?.format("link", false);
-            closeDialog();
-        }
-    };
-
-    const customViewCodeHandler = (value: any): void => {
-        if (value === true) {
-            setDialogConfig({
-                dialogType: "view-code",
-                config: {
-                    currentCode: ref.current?.getSemanticHTML(),
-                    onSubmit: (value: viewCodeConfigType) => {
-                        const newDelta = ref.current?.clipboard.convert({ html: value.src });
-                        if (newDelta) {
-                            ref.current?.setContents(newDelta, Emitter.sources.USER);
-                        }
-                        closeDialog();
-                    },
-                    onClose: closeDialog,
-                    formOrientation: props.formOrientation
-                }
-            });
-            openDialog();
-        } else {
-            ref.current?.format("link", false);
-            closeDialog();
-        }
-    };
-
-    const customImageUploadHandler = (value: any): void => {
-        const selection = ref.current?.getSelection(true);
-        setDialogConfig({
-            dialogType: "image",
-            config: {
-                onSubmit: (value: imageConfigType) => {
-                    const defaultImageConfig = {
-                        alt: value.alt,
-                        width: value.width,
-                        height: value.keepAspectRatio ? undefined : value.height
-                    };
-
-                    if (value.src) {
-                        const index = selection?.index ?? 0;
-                        const length = 1;
-                        const imageConfig = defaultImageConfig;
-                        // update existing image attribute
-                        const imageUpdateDelta = new Delta().retain(index).retain(length, imageConfig);
-                        ref.current?.updateContents(imageUpdateDelta, Emitter.sources.USER);
-                    } else {
-                        // upload new image
-                        if (selection) {
-                            if (value.files) {
-                                uploadImage(ref, selection, value);
-                            } else if (value.entityGuid) {
-                                const imageConfig = {
-                                    ...defaultImageConfig,
-                                    "data-src": value.entityGuid
-                                };
-                                const delta = new Delta()
-                                    .retain(selection.index)
-                                    .delete(selection.length)
-                                    .insert({ image: value.entityGuid }, imageConfig);
-                                ref.current?.updateContents(delta, Emitter.sources.USER);
-                            }
-                        }
-                    }
-                    closeDialog();
-                },
-                onClose: closeDialog,
-                defaultValue: { ...value },
-                formOrientation: props.formOrientation
-            }
-        });
-        openDialog();
-    };
-
-    return {
-        showDialog,
-        setShowDialog,
-        dialogConfig,
-        customLinkHandler,
-        customVideoHandler,
-        customViewCodeHandler,
-        customImageUploadHandler
-    };
-}
-
-function uploadImage(ref: MutableRefObject<Quill | null>, range: Range, options: imageConfigType): void {
-    const uploads: File[] = [];
-    const { files } = options;
-    if (files) {
-        Array.from(files).forEach(file => {
-            if (file && IMG_MIME_TYPES.includes(file.type)) {
-                uploads.push(file);
-            }
-        });
-        if (uploads.length > 0) {
-            if (!ref.current?.scroll.query("image")) {
-                return;
-            }
-            const promises = uploads.map<Promise<string>>(file => {
-                return new Promise(resolve => {
-                    const reader = new FileReader();
-                    reader.onload = () => {
-                        resolve(reader.result as string);
-                    };
-                    reader.readAsDataURL(file);
-                });
-            });
-            Promise.all(promises).then(images => {
-                const update = images.reduce((delta: Delta, image) => {
-                    return delta.insert(
-                        { image },
-                        {
-                            alt: options.alt,
-                            width: options.width,
-                            height: options.height
-                        }
-                    );
-                }, new Delta().retain(range.index).delete(range.length)) as Delta;
-                ref.current?.updateContents(update, Emitter.sources.USER);
-                ref.current?.setSelection(range.index + images.length, Emitter.sources.SILENT);
-            });
-        }
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx
new file mode 100644
index 0000000000..98a4830d2e
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef } from "react";
+import { Editor } from "@tiptap/react";
+
+export interface DynamicTableStylesProps {
+    editor: Editor | null;
+}
+
+export function DynamicTableStyles({ editor }: DynamicTableStylesProps): null {
+    const styleElementRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        if (!editor) return;
+
+        // Create style element if it doesn't exist
+        if (!styleElementRef.current) {
+            styleElementRef.current = document.createElement("style");
+            styleElementRef.current.setAttribute("data-tiptap-table-styles", "");
+            document.head.appendChild(styleElementRef.current);
+        }
+
+        const updateStyles = (): void => {
+            if (!styleElementRef.current) return;
+
+            // Find all elements with data-background-color attribute
+            const elements = document.querySelectorAll<HTMLElement>("[data-background-color]");
+            const colorsInUse = new Set<string>();
+
+            elements.forEach(element => {
+                const color = element.getAttribute("data-background-color");
+                if (color) {
+                    colorsInUse.add(color);
+                    // Add color-specific class to element
+                    const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+                    const colorClass = `bg-color-${sanitizedColor}`;
+
+                    if (!element.classList.contains(colorClass)) {
+                        element.classList.add(colorClass);
+                    }
+                }
+            });
+
+            // Generate CSS rules only for colors that are actually in use
+            const cssRules: string[] = [];
+            colorsInUse.forEach(color => {
+                const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+                cssRules.push(`.bg-color-${sanitizedColor} { background-color: ${color} !important; }`);
+            });
+
+            // Update style element
+            styleElementRef.current.textContent = cssRules.join("\n");
+        };
+
+        // Update styles on editor update
+        editor.on("update", updateStyles);
+        editor.on("selectionUpdate", updateStyles);
+
+        // Initial update
+        updateStyles();
+
+        // Cleanup
+        return () => {
+            editor.off("update", updateStyles);
+            editor.off("selectionUpdate", updateStyles);
+        };
+    }, [editor]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (styleElementRef.current && styleElementRef.current.parentNode) {
+                styleElementRef.current.parentNode.removeChild(styleElementRef.current);
+            }
+        };
+    }, []);
+
+    return null;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx
new file mode 100644
index 0000000000..e286ff5816
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+import { Editor } from "@tiptap/react";
+
+export interface DynamicTextColorStylesProps {
+    editor: Editor | null;
+}
+
+export function DynamicTextColorStyles({ editor }: DynamicTextColorStylesProps): null {
+    const styleElementRef = useRef<HTMLStyleElement | null>(null);
+    const processedColorsRef = useRef<Set<string>>(new Set());
+
+    useEffect(() => {
+        if (!editor) return;
+
+        // Create style element if it doesn't exist
+        if (!styleElementRef.current) {
+            styleElementRef.current = document.createElement("style");
+            styleElementRef.current.setAttribute("data-tiptap-text-color-styles", "");
+            document.head.appendChild(styleElementRef.current);
+        }
+
+        const updateStyles = (): void => {
+            if (!styleElementRef.current) return;
+
+            // Find all elements with data-text-color attribute
+            const elements = document.querySelectorAll<HTMLElement>("[data-text-color]");
+            const colorsInUse = new Set<string>();
+
+            elements.forEach(element => {
+                const color = element.getAttribute("data-text-color");
+                if (color) {
+                    colorsInUse.add(color);
+                    // Add color-specific class to element
+                    const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+                    const colorClass = `text-color-${sanitizedColor}`;
+
+                    if (!element.classList.contains(colorClass)) {
+                        element.classList.add(colorClass);
+                    }
+                }
+            });
+
+            // Generate CSS rules only for colors that are actually in use
+            const cssRules: string[] = [];
+            colorsInUse.forEach(color => {
+                const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+                cssRules.push(`.text-color-${sanitizedColor} { color: ${color} !important; }`);
+            });
+
+            // Update style element
+            styleElementRef.current.textContent = cssRules.join("\n");
+
+            // Update processed colors reference
+            processedColorsRef.current = colorsInUse;
+        };
+
+        // Update styles on editor update
+        editor.on("update", updateStyles);
+        editor.on("selectionUpdate", updateStyles);
+
+        // Initial update
+        updateStyles();
+
+        // Cleanup
+        return () => {
+            editor.off("update", updateStyles);
+            editor.off("selectionUpdate", updateStyles);
+        };
+    }, [editor]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (styleElementRef.current && styleElementRef.current.parentNode) {
+                styleElementRef.current.parentNode.removeChild(styleElementRef.current);
+            }
+        };
+    }, []);
+
+    return null;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
index a13fdd1730..642b9ef75b 100644
--- a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
@@ -1,206 +1,302 @@
-import Quill, { EmitterSource, QuillOptions, Range } from "quill";
-import Delta from "quill-delta";
-import {
-    CSSProperties,
-    forwardRef,
-    Fragment,
-    MutableRefObject,
-    useContext,
-    useEffect,
-    useLayoutEffect,
-    useRef
-} from "react";
+import type { Editor as TipTapEditor } from "@tiptap/core";
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TaskItem } from "@tiptap/extension-task-item";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { forwardRef, ReactElement, useEffect, useImperativeHandle, useMemo } from "react";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
+import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
+import { LinkBubbleMenu } from "./LinkBubbleMenu";
+import { Toolbar } from "./toolbars";
 import { RichTextContainerProps } from "../../typings/RichTextProps";
-import { EditorDispatchContext } from "../store/EditorProvider";
-import { SET_FULLSCREEN_ACTION } from "../store/store";
-import "../utils/customPluginRegisters";
-import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss";
-import { getResizeModuleConfig } from "../utils/formats/resizeModuleConfig";
-import { ACTION_DISPATCHER } from "../utils/helpers";
-import { getKeyboardBindings } from "../utils/modules/keyboard";
-import { getIndentHandler } from "../utils/modules/toolbarHandlers";
-import MxUploader from "../utils/modules/uploader";
-import MxQuill, { MxQuillModulesOptions } from "../utils/MxQuill";
-import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
-import Dialog from "./ModalDialog/Dialog";
+import { FontFamilyClass } from "../extensions/FontFamilyClass";
+import { FontSize } from "../extensions/FontSize";
+import { Fullscreen } from "../extensions/Fullscreen";
+import { GenericEmbed } from "../extensions/GenericEmbed";
+import { ImageResize } from "../extensions/ImageResize";
+import { Indent } from "../extensions/Indent";
+import { KeyboardNavigation } from "../extensions/KeyboardNavigation";
+import { OrderedListStyled } from "../extensions/OrderedListStyled";
+import { TableBackgroundColor } from "../extensions/TableBackgroundColor";
+import { TableCellBackgroundColor } from "../extensions/TableCellBackgroundColor";
+import { TextAlign } from "../extensions/TextAlignClass";
+import { TextColorClass } from "../extensions/TextColorClass";
+import { TextDirection } from "../extensions/TextDirection";
+import { TextHighlightClass } from "../extensions/TextHighlightClass";
+import { YouTubeResize } from "../extensions/YouTubeResize";
+import { ConfirmDialog } from "./toolbars/components/ConfirmDialog";
+import { ToolbarGroupsConfig } from "./toolbars/ToolbarConfig";
 
 export interface EditorProps extends Pick<
     RichTextContainerProps,
-    "imageSource" | "imageSourceContent" | "enableDefaultUpload"
+    | "styleDataFormat"
+    | "imageSourceContent"
+    | "preset"
+    | "toolbarConfig"
+    | "toolbarLocation"
+    | "advancedConfig"
+    | "customFonts"
+    | "onFocus"
+    | "onBlur"
+    | "onLoad"
+    | "onChangeType"
+    | "onChange"
 > {
-    options: MxQuillModulesOptions;
     defaultValue?: string;
-    onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
-    onSelectionChange?: (...args: [range: Range, oldRange: Range, source: EmitterSource]) => void;
-    formOrientation: "horizontal" | "vertical";
-    theme: string;
-    style?: CSSProperties;
-    className?: string;
-    toolbarId?: string | Array<string | string[] | { [k: string]: any }>;
+    onUpdate?: (html: string) => void;
     readOnly?: boolean;
+    className?: string;
+    toolbarGroups?: ToolbarGroupsConfig;
+}
+
+export interface EditorHandle {
+    getHTML: () => string;
+    getText: () => string;
+    focus: () => void;
+    blur: () => void;
+    getEditor: () => TipTapEditor | null;
+}
+
+interface EditorInnerProps extends Pick<
+    RichTextContainerProps,
+    "imageSourceContent" | "preset" | "toolbarConfig" | "advancedConfig" | "customFonts"
+> {
+    showToolbar: boolean;
+    readOnly: boolean;
+    className?: string;
+    toolbarGroups?: ToolbarGroupsConfig;
 }
 
-// Editor is an uncontrolled React component
-const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | null>) => {
+function EditorInner({
+    showToolbar,
+    readOnly,
+    className,
+    imageSourceContent,
+    preset,
+    toolbarConfig,
+    toolbarGroups,
+    advancedConfig,
+    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", isExiting: true });
+    };
+
+    const handleCancelCode = (): void => {
+        codeViewDispatch({ type: "CANCEL_CODE_CHANGES" });
+    };
+
+    const handleHtmlChange = (value: string): void => {
+        codeViewDispatch({ type: "UPDATE_HTML_CODE", html: value });
+    };
+
+    return (
+        <>
+            <div className="tiptap-wrapper">
+                {showToolbar && !readOnly && (
+                    <Toolbar
+                        imageSourceContent={imageSourceContent}
+                        preset={preset}
+                        toolbarConfig={toolbarConfig}
+                        toolbarGroups={toolbarGroups}
+                        advancedConfig={advancedConfig}
+                        customFonts={customFonts}
+                    ></Toolbar>
+                )}
+                {codeViewState.isCodeView ? (
+                    <HighlightedCodeEditor
+                        value={codeViewState.htmlCode}
+                        onChange={handleHtmlChange}
+                        readOnly={false}
+                    />
+                ) : (
+                    <>
+                        <EditorContent editor={editor} className={className} />
+                        {!readOnly && <LinkBubbleMenu />}
+                    </>
+                )}
+            </div>
+            {codeViewState.showConfirm && (
+                <ConfirmDialog
+                    message="Save changes?"
+                    confirmLabel="Save"
+                    cancelLabel="Cancel"
+                    onConfirm={handleSaveCode}
+                    onCancel={handleCancelCode}
+                />
+            )}
+        </>
+    );
+}
+
+const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
     const {
-        theme,
         defaultValue,
-        style,
-        className,
-        toolbarId,
-        onTextChange,
-        onSelectionChange,
+        onUpdate,
         readOnly,
-        options: mxOptions
+        className,
+        styleDataFormat = "inline",
+        toolbarLocation,
+        ...others
     } = props;
-    const containerRef = useRef<HTMLDivElement>(null);
-    const modalRef = useRef<HTMLDivElement>(null);
-    const onTextChangeRef = useRef(onTextChange);
-    const onSelectionChangeRef = useRef(onSelectionChange);
-    const contextDispatch = useContext(EditorDispatchContext);
 
-    const {
-        showDialog,
-        setShowDialog,
-        dialogConfig,
-        customLinkHandler,
-        customVideoHandler,
-        customViewCodeHandler,
-        customImageUploadHandler
-    } = useEmbedModal(ref, props);
-    const customIndentHandler = getIndentHandler(ref);
-
-    // quill instance is not changing, thus, the function reference has to stays.
-    useLayoutEffect(() => {
-        onTextChangeRef.current = onTextChange;
-        onSelectionChangeRef.current = onSelectionChange;
-    }, [onTextChange, onSelectionChange]);
-
-    // update quills content on value change.
-    useEffect(() => {
-        // if there is an update comes from external element
-        if (!ref.current?.hasFocus() && defaultValue !== ref.current?.getSemanticHTML()) {
-            const newContent = ref.current?.clipboard.convert({
-                html: defaultValue
-            });
-            if (newContent && newContent !== ref.current?.getContents()) {
-                ref.current?.setContents(newContent);
-            }
-        }
-    }, [ref, defaultValue]);
-
-    // use effect for constructing Quill instance
-    useEffect(
-        () => {
-            const container = containerRef.current;
-            if (container) {
-                const editorDiv = container.ownerDocument.createElement<"div">("div");
-                const editorContainer = container.appendChild(editorDiv);
-
-                const toolbar = toolbarId
-                    ? {
-                          container: Array.isArray(toolbarId) ? toolbarId : `#${toolbarId}`,
-                          handlers: {
-                              link: customLinkHandler,
-                              video: customVideoHandler,
-                              indent: customIndentHandler,
-                              "view-code": customViewCodeHandler,
-                              image: customImageUploadHandler
-                          }
-                      }
-                    : // we cannot set toolbar to false, because "table-better" needs toolbar module
-                      // hidden toolbar will be set with display: none
-                      [];
-
-                // Quill instance configurations.
-                const options: QuillOptions = {
-                    theme,
-                    modules: {
-                        keyboard: {
-                            bindings: getKeyboardBindings()
-                        },
-                        table: false,
-                        "table-better": {
-                            language: "en_US",
-                            menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete", "grid"],
-                            toolbarTable: !readOnly
-                        },
-                        toolbar,
-                        ...getResizeModuleConfig(readOnly)
-                    },
-                    readOnly
-                };
-
-                const quill = new MxQuill(editorContainer, options);
-                ref.current = quill;
-                quill.registerCustomModules(mxOptions);
-
-                const delta = quill.clipboard.convert({ html: defaultValue ?? "" });
-                quill.updateContents(delta, Quill.sources.SILENT);
-
-                quill.on(Quill.events.TEXT_CHANGE, (...arg) => {
-                    onTextChangeRef.current?.(...arg);
-                });
-                quill.on(Quill.events.SELECTION_CHANGE, (...arg) => {
-                    onSelectionChangeRef.current?.(...arg);
-                });
-                quill.on(ACTION_DISPATCHER, (...arg: any[]) => {
-                    if (arg[0]) {
-                        if (arg[0].href) {
-                            customLinkHandler(arg[0]);
-                        } else if (arg[0].src) {
-                            // open dialog editor for updating image or video
-                            if (arg[0].type === "video") {
-                                customVideoHandler(arg[0]);
-                            } else {
-                                customImageUploadHandler(arg[0]);
-                            }
-                        } else if (arg[0].type) {
-                            if (arg[0].type === SET_FULLSCREEN_ACTION) {
-                                if (contextDispatch) {
-                                    contextDispatch(arg[0]);
-                                }
-                            } else if (arg[0].type === "image") {
-                                // open dialog editor for updating image (triggered by module uploader)
-                                customImageUploadHandler(arg[0]);
-                            }
-                        }
-                    }
-                });
-            }
+    const extensions = useMemo(
+        () => [
+            StarterKit.configure({
+                orderedList: false,
+                link: {
+                    openOnClick: false,
+                    HTMLAttributes: { class: "tiptap-link" }
+                }
+            }),
+            OrderedListStyled.configure({
+                styleDataFormat
+            }),
+            TextStyle,
+            Superscript,
+            Subscript,
+            TaskList,
+            TaskItem.configure({
+                nested: true
+            }),
+            FontFamilyClass.configure({
+                types: ["textStyle"],
+                styleDataFormat
+            }),
+            FontSize.configure({
+                types: ["textStyle"],
+                styleDataFormat
+            }),
+            TextAlign.configure({
+                types: ["heading", "paragraph"],
+                alignments: ["left", "center", "right", "justify"],
+                styleDataFormat
+            }),
+            Indent.configure({
+                types: ["paragraph", "heading", "blockquote"],
+                // Lists carry the indent attribute (so Ctrl+]/[ can margin them) but are
+                // excluded from `types` so the toolbar/paragraph walk stays paragraph-only.
+                attributeTypes: ["paragraph", "heading", "blockquote", "bulletList", "orderedList", "taskList"],
+                minIndent: 0,
+                maxIndent: 10,
+                indentStep: 1,
+                styleDataFormat
+            }),
+            KeyboardNavigation.configure({
+                wrapperSelector: ".tiptap-wrapper",
+                toolbarSelector: ".tiptap-toolbar",
+                statusBarSelector: ".rich-text-status-bar",
+                widgetSelector: ".widget-rich-text"
+            }),
+            TextDirection.configure({
+                types: ["paragraph", "heading"],
+                directions: ["ltr", "rtl"],
+                defaultDirection: "ltr"
+            }),
+            Fullscreen.configure({
+                widgetSelector: ".widget-rich-text",
+                fullscreenClass: "fullscreen"
+            }),
+            TextColorClass.configure({ types: ["textStyle"], styleDataFormat }),
+            TextHighlightClass.configure({ multicolor: true, styleDataFormat }),
+            TableBackgroundColor.configure({ resizable: true, styleDataFormat }),
+            TableRow,
+            TableHeader,
+            TableCellBackgroundColor.configure({ styleDataFormat }),
+            ImageResize.configure({
+                inline: true,
+                allowBase64: true,
+                HTMLAttributes: {
+                    class: "tiptap-image"
+                }
+            }),
+            YouTubeResize.configure({
+                inline: false,
+                width: 640,
+                height: 480,
+                HTMLAttributes: {
+                    class: "tiptap-video"
+                }
+            }),
+            GenericEmbed.configure({
+                inline: false,
+                HTMLAttributes: {
+                    class: "tiptap-embed"
+                }
+            })
+        ],
+        [styleDataFormat]
+    );
 
-            return () => {
-                ref.current = null;
-                if (container) {
-                    container.innerHTML = "";
+    const editor = useEditor(
+        {
+            extensions,
+            enableCoreExtensions: {
+                textDirection: false
+            },
+            content: defaultValue || "",
+            editable: !readOnly,
+            onUpdate: ({ editor }) => {
+                const html = editor.isEmpty ? "" : editor.getHTML();
+                onUpdate?.(html);
+            },
+            onFocus: () => {
+                executeAction(props.onFocus);
+            },
+            onBlur: () => {
+                executeAction(props.onBlur);
+                if (props.onChangeType === "onLeave") {
+                    executeAction(props.onChange);
                 }
-            };
+            },
+            onCreate: () => {
+                executeAction(props.onLoad);
+            }
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [ref, toolbarId]
+        []
     );
 
+    useImperativeHandle(ref, () => ({
+        getHTML: () => editor?.getHTML() || "",
+        getText: () => editor?.getText() || "",
+        focus: () => editor?.commands.focus(),
+        blur: () => editor?.commands.blur(),
+        getEditor: () => editor
+    }));
+
+    // update quills content on value change.
     useEffect(() => {
-        // if image source is set from entity, handle upload differently
-        if (props.imageSource && props.imageSource.status === "available") {
-            (ref.current?.getModule("uploader") as MxUploader)?.setEntityUpload?.(true);
+        // if there is an update comes from external element (default value sudden change)
+        // only do update if editor not focused, otherwise it will override the user input.
+        if (!editor.isFocused) {
+            const newContent = editor.getHTML();
+            if (newContent && newContent !== defaultValue) {
+                editor.commands.setContent(defaultValue || "");
+            }
         }
-    }, [props.imageSource, props.imageSource?.status, ref]);
+    }, [editor, defaultValue]);
+
+    if (!editor) {
+        return null;
+    }
+
+    const shouldHideToolbar = toolbarLocation === "hide";
 
     return (
-        <Fragment>
-            <div ref={containerRef} style={style} className={className}></div>
-            <div ref={modalRef}></div>
-            <Dialog
-                isOpen={showDialog}
-                onOpenChange={open => setShowDialog(open)}
-                parentNode={modalRef.current?.ownerDocument.body}
-                imageSource={props.imageSource}
-                imageSourceContent={props.imageSourceContent}
-                enableDefaultUpload={props.enableDefaultUpload}
-                {...dialogConfig}
-            ></Dialog>
-        </Fragment>
+        <EditorContextProvider editor={editor}>
+            <EditorInner showToolbar={!shouldHideToolbar} readOnly={!!readOnly} className={className} {...others} />
+        </EditorContextProvider>
     );
 });
 
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx
new file mode 100644
index 0000000000..eba4b4dbdd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx
@@ -0,0 +1,106 @@
+import { Editor } from "@tiptap/react";
+import { html as beautifyHtml } from "js-beautify";
+import { createContext, useContext, useReducer, ReactNode, ReactElement, Dispatch } from "react";
+
+// Code view state
+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"; isExiting?: boolean }
+    | { type: "CANCEL_CODE_CHANGES" }
+    | { type: "UPDATE_HTML_CODE"; html: string };
+
+// Code view reducer
+function codeViewReducer(state: CodeViewState, action: CodeViewAction): CodeViewState {
+    switch (action.type) {
+        case "ENTER_CODE_VIEW":
+            // Beautify HTML for better readability
+            const beautifiedHtml = beautifyHtml(action.html, {
+                indent_size: 2,
+                indent_char: " ",
+                max_preserve_newlines: 1,
+                preserve_newlines: true,
+                wrap_line_length: 0,
+                end_with_newline: false
+            });
+            return {
+                isCodeView: true,
+                htmlCode: beautifiedHtml,
+                lastSavedHtml: beautifiedHtml,
+                showConfirm: false
+            };
+        case "EXIT_CODE_VIEW_REQUEST":
+            const isLatestHtmlSaved = state.lastSavedHtml === state.htmlCode;
+            return {
+                ...state,
+                showConfirm: !isLatestHtmlSaved,
+                isCodeView: !isLatestHtmlSaved
+            };
+        case "SAVE_CODE_CHANGES":
+            return {
+                ...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":
+            return {
+                ...state,
+                htmlCode: action.html
+            };
+        default:
+            return state;
+    }
+}
+
+// Initial state
+const initialCodeViewState: CodeViewState = {
+    isCodeView: false,
+    htmlCode: "",
+    showConfirm: false
+};
+
+interface EditorContextValue {
+    editor: Editor | null;
+    codeViewState: CodeViewState;
+    codeViewDispatch: Dispatch<CodeViewAction>;
+}
+
+export const EditorContext = createContext<EditorContextValue | undefined>(undefined);
+
+export function EditorContextProvider({
+    editor,
+    children
+}: {
+    editor: Editor | null;
+    children: ReactNode;
+}): ReactElement {
+    const [codeViewState, codeViewDispatch] = useReducer(codeViewReducer, initialCodeViewState);
+
+    return (
+        <EditorContext.Provider value={{ editor, codeViewState, codeViewDispatch }}>{children}</EditorContext.Provider>
+    );
+}
+
+export function useCurrentEditor(): EditorContextValue {
+    const context = useContext(EditorContext);
+    if (context === undefined) {
+        throw new Error("useCurrentEditor must be used within EditorContextProvider");
+    }
+    return context;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
index 99e7174af3..06aaaea8aa 100644
--- a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
@@ -1,231 +1,151 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
+import { ReactElement, useRef, useState, useEffect } from "react";
+import { RichTextContainerProps } from "typings/RichTextProps";
 import { useDebounceWithStatus } from "@mendix/widget-plugin-hooks/useDebounceWithStatus";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
-import classNames from "classnames";
-import Quill from "quill";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import { CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { EditorContext, EditorProvider } from "../store/EditorProvider";
-import { useActionEvents } from "../store/useActionEvents";
-import MendixTheme from "../utils/themes/mxTheme";
-import { MxQuillModulesOptions } from "../utils/MxQuill";
-import { createPreset } from "./CustomToolbars/presets";
-import Editor from "./Editor";
-import { StickySentinel } from "./StickySentinel";
-import Toolbar from "./Toolbar";
+import Editor, { EditorHandle } from "./Editor";
+import { StatusBar, StatusBarMetricType } from "./StatusBar";
 
 export interface EditorWrapperProps extends RichTextContainerProps {
-    editorHeight?: string | number;
-    editorWidth?: string | number;
-    style?: CSSProperties;
     className?: string;
-    toolbarOptions?: Array<string | string[] | { [k: string]: any }>;
 }
 
-function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
+function EditorWrapper(props: EditorWrapperProps): ReactElement {
     const {
-        id,
         stringAttribute,
-        style,
         className,
+        styleDataFormat,
+        imageSourceContent,
         preset,
+        toolbarConfig,
+        history,
+        fontStyle,
+        fontScript,
+        list,
+        indent,
+        embed,
+        align,
+        code,
+        fontColor,
+        header,
+        view,
+        remove,
+        tableBetter,
+        advancedConfig,
+        enableStatusBar,
+        statusBarContent,
+        customFonts,
         toolbarLocation,
-        onChange,
-        onChangeType,
-        onBlur,
+        readOnlyStyle,
         onFocus,
+        onBlur,
         onLoad,
-        readOnlyStyle,
-        toolbarOptions,
-        enableStatusBar,
-        statusBarContent,
-        tabIndex,
-        imageSource,
-        imageSourceContent,
-        enableDefaultUpload,
-        formOrientation,
-        defaultFontFamily,
-        defaultFontSize
+        onChangeType,
+        onChange
     } = props;
+    const editorRef = useRef<EditorHandle>(null);
+    const [editorText, setEditorText] = useState<string>("");
 
-    const globalState = useContext(EditorContext);
-    const isFirstLoad = useRef<boolean>(false);
-    const quillRef = useRef<Quill>(null);
-    const actionEvents = useActionEvents({ onBlur, onFocus, onChange, onChangeType, quill: quillRef?.current });
-    const toolbarRef = useRef<HTMLDivElement>(null);
-    const [wordCount, setWordCount] = useState(0);
-
-    const { isFullscreen } = globalState;
+    const normalizeEmpty = (value?: string): string => {
+        if (!value || value === "<p></p>") return "";
+        return value;
+    };
 
     const [setAttributeValueDebounce] = useDebounceWithStatus(
-        (string?: string) => {
-            if (stringAttribute.value !== string) {
-                stringAttribute.setValue(string);
+        (html?: string) => {
+            const current = normalizeEmpty(stringAttribute.value);
+            const incoming = normalizeEmpty(html);
+
+            if (current !== incoming) {
+                stringAttribute.setValue(incoming);
+
                 if (onChangeType === "onDataChange") {
                     executeAction(onChange);
                 }
             }
         },
         200,
-        onChange?.isExecuting ?? false
+        false
     );
 
-    const calculateCounts = useCallback(
-        (quill: Quill | null): void => {
-            if (enableStatusBar && quill) {
-                if (statusBarContent === "wordCount") {
-                    const text = quill?.getText().trim();
-                    setWordCount(text && text.length > 0 ? text.split(/\s+/).length : 0);
-                } else if (statusBarContent === "characterCount") {
-                    const text = quill?.getText().trimEnd() || "";
-                    setWordCount(text.length);
-                } else if (statusBarContent === "characterCountHtml") {
-                    const html = quill?.getSemanticHTML() || "";
-                    setWordCount(html.length);
-                }
-            }
-        },
-        [enableStatusBar, statusBarContent]
-    );
-
-    useEffect(() => {
-        if (quillRef.current) {
-            calculateCounts(quillRef.current);
+    const handleUpdate = (html: string): void => {
+        if (stringAttribute.value !== html) {
+            setAttributeValueDebounce(html);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stringAttribute.value]);
+    };
 
+    // Update editor text for status bar when editor content changes
     useEffect(() => {
-        if (quillRef.current) {
-            (quillRef.current?.theme as MendixTheme).updateDefaultFontFamily(defaultFontFamily?.value);
-            (quillRef.current?.theme as MendixTheme).updateDefaultFontSize(defaultFontSize?.value);
+        if (editorRef.current && enableStatusBar) {
+            const text = editorRef.current.getText();
+            setEditorText(text);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultFontFamily?.value, quillRef.current, defaultFontSize?.value]);
+    }, [stringAttribute.value, enableStatusBar]);
 
-    useEffect(() => {
-        if (quillRef.current) {
-            if (!isFirstLoad.current) {
-                executeAction(onLoad);
-                isFirstLoad.current = true;
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [quillRef.current]);
+    // Determine status bar content based on metric type
+    const statusBarContentValue = (() => {
+        if (!enableStatusBar) return "";
 
-    const onTextChange = useCallback(() => {
-        const semanticHTML = quillRef.current?.getSemanticHTML() || "";
-        if (stringAttribute.value !== semanticHTML) {
-            setAttributeValueDebounce(semanticHTML);
+        switch (statusBarContent) {
+            case "wordCount":
+            case "characterCount":
+                return editorText;
+            case "characterCountHtml":
+                return stringAttribute.value || "";
+            default:
+                return editorText;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [quillRef.current, stringAttribute, calculateCounts]);
-
-    const toolbarId = `widget_${id.replaceAll(".", "_")}_toolbar`;
-    const shouldHideToolbar = (stringAttribute.readOnly && readOnlyStyle !== "text") || toolbarLocation === "hide";
-    const toolbarPreset = shouldHideToolbar ? [] : createPreset(props);
+    })();
 
     return (
-        <div
-            className={classNames(
-                className,
-                "flex-column",
-                `${stringAttribute?.readOnly ? `editor-${readOnlyStyle}` : ""}`,
-                { fullscreen: isFullscreen }
-            )}
-            style={{ width: style?.width }}
-            onClick={e => {
-                // click on other parts of editor, such as the toolbar, should also set focus
-                if (!quillRef?.current?.hasFocus()) {
-                    if (
-                        toolbarRef.current === (e.target as HTMLDivElement) ||
-                        toolbarRef.current?.contains(e.target as Node) ||
-                        e.target === quillRef?.current?.container.parentElement
-                    ) {
-                        quillRef?.current?.focus();
-                    }
-                }
-            }}
-            spellCheck={props.spellCheck}
-            tabIndex={tabIndex ?? -1}
-            {...actionEvents}
-        >
-            <If condition={toolbarLocation === "auto"}>
-                <StickySentinel />
-            </If>
-            <div
-                className={classNames(
-                    "flexcontainer",
-                    toolbarLocation === "bottom" ? "flex-column-reverse" : "flex-column",
-                    { "hide-toolbar": shouldHideToolbar }
-                )}
-            >
-                <If condition={!shouldHideToolbar && toolbarOptions === undefined}>
-                    <Toolbar
-                        ref={toolbarRef}
-                        id={toolbarId}
+        <div className={`${className} toolbar-${toolbarLocation} testing-editor-wrapper`}>
+            {stringAttribute.status === "available" && (
+                <>
+                    <Editor
+                        ref={editorRef}
+                        defaultValue={stringAttribute.value}
+                        readOnly={stringAttribute.readOnly}
+                        className="tiptap-editor"
+                        styleDataFormat={styleDataFormat}
+                        imageSourceContent={imageSourceContent}
                         preset={preset}
-                        quill={quillRef.current}
-                        toolbarContent={toolbarPreset}
-                        customFonts={props.customFonts}
+                        toolbarConfig={toolbarConfig}
+                        toolbarGroups={{
+                            history,
+                            fontStyle,
+                            fontScript,
+                            list,
+                            indent,
+                            embed,
+                            align,
+                            code,
+                            fontColor,
+                            header,
+                            view,
+                            remove,
+                            tableBetter
+                        }}
+                        advancedConfig={advancedConfig}
+                        customFonts={customFonts}
+                        toolbarLocation={
+                            stringAttribute.readOnly && readOnlyStyle !== "text" ? "hide" : toolbarLocation
+                        }
+                        onUpdate={handleUpdate}
+                        onFocus={onFocus}
+                        onBlur={onBlur}
+                        onLoad={onLoad}
+                        onChange={onChange}
+                        onChangeType={onChangeType}
                     />
-                </If>
-                <Editor
-                    theme={"snow"}
-                    ref={quillRef}
-                    defaultValue={stringAttribute.value}
-                    style={
-                        isFullscreen
-                            ? { height: "100%" }
-                            : {
-                                  height: style?.height,
-                                  minHeight: style?.minHeight,
-                                  maxHeight: style?.maxHeight,
-                                  overflowY: style?.overflowY
-                              }
-                    }
-                    toolbarId={shouldHideToolbar ? undefined : toolbarOptions ? toolbarOptions : toolbarId}
-                    onTextChange={onTextChange}
-                    className={"widget-rich-text-container"}
-                    readOnly={stringAttribute.readOnly}
-                    key={`${toolbarId}_${stringAttribute.readOnly}`}
-                    options={
-                        {
-                            fonts: props.customFonts,
-                            links: {
-                                validate: props.linkValidation
-                            }
-                        } as MxQuillModulesOptions
-                    }
-                    imageSource={imageSource}
-                    imageSourceContent={imageSourceContent}
-                    enableDefaultUpload={enableDefaultUpload}
-                    formOrientation={formOrientation}
-                />
-            </div>
-
-            <div
-                className={classNames("widget-rich-text-footer", { "hide-status-bar": !enableStatusBar })}
-                tabIndex={-1}
-            >
-                <If condition={enableStatusBar}>
-                    <span>
-                        <span>{wordCount}</span>
-                        <span>{` ${statusBarContent === "wordCount" ? "word" : "character"}`}</span>
-                        <span>{wordCount === 1 ? "" : "s"}</span>
-                    </span>
-                </If>
-            </div>
+                    {enableStatusBar && (
+                        <StatusBar
+                            content={statusBarContentValue}
+                            metricType={statusBarContent as StatusBarMetricType}
+                        />
+                    )}
+                </>
+            )}
         </div>
     );
 }
 
-export default function EditorWrapper(props: EditorWrapperProps): ReactElement {
-    return (
-        <EditorProvider>
-            <EditorWrapperInner {...props} />
-        </EditorProvider>
-    );
-}
+export default EditorWrapper;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx
new file mode 100644
index 0000000000..e9289280ea
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx
@@ -0,0 +1,106 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { useState, useRef, ReactElement, MouseEvent as ReactMouseEvent } from "react";
+
+export function EmbedResize(props: NodeViewProps): ReactElement {
+    const { node, updateAttributes } = props;
+    const [isResizing, setIsResizing] = useState(false);
+    const [size, setSize] = useState({
+        width: node.attrs.width || 640,
+        height: node.attrs.height || 480
+    });
+    const containerRef = useRef<HTMLDivElement>(null);
+    const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const currentSize = useRef({ width: size.width, height: size.height });
+
+    const handleMouseDown = (e: ReactMouseEvent, corner: string): void => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const container = containerRef.current;
+        if (!container) return;
+
+        const rect = container.getBoundingClientRect();
+        startPos.current = {
+            x: e.clientX,
+            y: e.clientY,
+            width: rect.width,
+            height: rect.height
+        };
+
+        setIsResizing(true);
+
+        const handleMouseMove = (moveEvent: MouseEvent): void => {
+            const deltaX = moveEvent.clientX - startPos.current.x;
+
+            let newWidth = startPos.current.width;
+            let newHeight = startPos.current.height;
+
+            if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+                newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+                const aspectRatio = startPos.current.height / startPos.current.width;
+                newHeight = newWidth * aspectRatio;
+            }
+
+            if (newWidth > 50) {
+                const roundedWidth = Math.round(newWidth);
+                const roundedHeight = Math.round(newHeight);
+
+                currentSize.current = {
+                    width: roundedWidth,
+                    height: roundedHeight
+                };
+
+                setSize({
+                    width: roundedWidth,
+                    height: roundedHeight
+                });
+            }
+        };
+
+        const handleMouseUp = (): void => {
+            setIsResizing(false);
+            updateAttributes({
+                width: currentSize.current.width,
+                height: currentSize.current.height
+            });
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    };
+
+    return (
+        <NodeViewWrapper className={`embed-wrapper ${isResizing ? "resizing" : ""}`}>
+            <div
+                ref={containerRef}
+                className="embed-container"
+                style={{ width: `${size.width}px`, height: `${size.height}px` }}
+            >
+                <iframe
+                    src={node.attrs.src}
+                    title={node.attrs.title || ""}
+                    width={size.width}
+                    height={size.height}
+                    frameBorder={node.attrs.frameborder || "0"}
+                    allow={node.attrs.allow || ""}
+                    allowFullScreen={node.attrs.allowfullscreen}
+                    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+                    loading="lazy"
+                    referrerPolicy="strict-origin-when-cross-origin"
+                    style={{
+                        width: `${size.width}px`,
+                        height: `${size.height}px`
+                    }}
+                />
+                <div className="resize-handles">
+                    <div className="resize-handle nw" onMouseDown={e => handleMouseDown(e, "nw")} />
+                    <div className="resize-handle ne" onMouseDown={e => handleMouseDown(e, "ne")} />
+                    <div className="resize-handle sw" onMouseDown={e => handleMouseDown(e, "sw")} />
+                    <div className="resize-handle se" onMouseDown={e => handleMouseDown(e, "se")} />
+                </div>
+            </div>
+        </NodeViewWrapper>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx
new file mode 100644
index 0000000000..cbd7cf7a75
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx
@@ -0,0 +1,60 @@
+import hljs from "highlight.js/lib/core";
+import xml from "highlight.js/lib/languages/xml";
+import { ReactElement } from "react";
+import Editor from "react-simple-code-editor";
+import "highlight.js/styles/atom-one-light.css";
+
+// Register HTML language (uses XML parser)
+hljs.registerLanguage("html", xml);
+
+export interface HighlightedCodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+    className?: string;
+}
+
+export function HighlightedCodeEditor({
+    value,
+    onChange,
+    readOnly = false,
+    className
+}: HighlightedCodeEditorProps): ReactElement {
+    const highlight = (code: string): string => {
+        try {
+            return hljs.highlight(code, {
+                language: "html",
+                ignoreIllegals: true
+            }).value;
+        } catch (error) {
+            console.warn("Syntax highlighting error:", error);
+            return code;
+        }
+    };
+
+    return (
+        <Editor
+            value={value}
+            onValueChange={onChange}
+            highlight={highlight}
+            padding={12}
+            disabled={readOnly}
+            className={className}
+            tabSize={2}
+            insertSpaces
+            ignoreTabKey={false}
+            spellCheck={false}
+            style={{
+                fontFamily: '"Courier New", Courier, monospace',
+                fontSize: 13,
+                lineHeight: 1.5,
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+                background: "#f8f8f8",
+                minHeight: "300px",
+                resize: "vertical",
+                overflow: "auto"
+            }}
+        />
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ImageResize.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ImageResize.tsx
new file mode 100644
index 0000000000..a93e9d8865
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/ImageResize.tsx
@@ -0,0 +1,95 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { useState, useRef, useEffect, ReactElement } from "react";
+
+export function ImageResize(props: NodeViewProps): ReactElement {
+    const { node, updateAttributes } = props;
+    const [isResizing, setIsResizing] = useState(false);
+    const [size, setSize] = useState({
+        width: node.attrs.width || "auto",
+        height: node.attrs.height || "auto"
+    });
+    const imgRef = useRef<HTMLImageElement>(null);
+    const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+
+    useEffect(() => {
+        if (node.attrs.width) {
+            setSize({
+                width: node.attrs.width,
+                height: node.attrs.height || "auto"
+            });
+        }
+    }, [node.attrs.width, node.attrs.height]);
+
+    const handleMouseDown = (e: globalThis.React.MouseEvent, corner: string): void => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const img = imgRef.current;
+        if (!img) return;
+
+        const rect = img.getBoundingClientRect();
+        startPos.current = {
+            x: e.clientX,
+            y: e.clientY,
+            width: rect.width,
+            height: rect.height
+        };
+
+        setIsResizing(true);
+
+        const handleMouseMove = (moveEvent: MouseEvent): void => {
+            const deltaX = moveEvent.clientX - startPos.current.x;
+
+            let newWidth = startPos.current.width;
+            let newHeight = startPos.current.height;
+
+            if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+                newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+                const aspectRatio = startPos.current.height / startPos.current.width;
+                newHeight = newWidth * aspectRatio;
+            }
+
+            if (newWidth > 50) {
+                setSize({
+                    width: `${Math.round(newWidth)}px`,
+                    height: `${Math.round(newHeight)}px`
+                });
+            }
+        };
+
+        const handleMouseUp = (): void => {
+            setIsResizing(false);
+            updateAttributes({
+                width: size.width,
+                height: size.height
+            });
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    };
+
+    return (
+        <NodeViewWrapper className={`image-wrapper ${isResizing ? "resizing" : ""}`}>
+            <div className="image-container" style={{ width: size.width, height: size.height }}>
+                <img
+                    ref={imgRef}
+                    src={node.attrs.src}
+                    alt={node.attrs.alt || ""}
+                    style={{
+                        width: size.width,
+                        height: size.height
+                    }}
+                />
+                <div className="resize-handles">
+                    <div className="resize-handle nw" onMouseDown={e => handleMouseDown(e, "nw")} />
+                    <div className="resize-handle ne" onMouseDown={e => handleMouseDown(e, "ne")} />
+                    <div className="resize-handle sw" onMouseDown={e => handleMouseDown(e, "sw")} />
+                    <div className="resize-handle se" onMouseDown={e => handleMouseDown(e, "se")} />
+                </div>
+            </div>
+        </NodeViewWrapper>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.scss b/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.scss
new file mode 100644
index 0000000000..29e8c4e69f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.scss
@@ -0,0 +1,27 @@
+.link-bubble-menu {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bg-color, #fff);
+    border: 1px solid var(--border-color-default, #ced0d3);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    .icon-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        height: 24px;
+        width: 28px;
+        padding: 3px 5px;
+
+        &:hover:not(:disabled) {
+            background-color: var(--gray-lighter, #f8f8f8);
+        }
+
+        .icons {
+            font-size: 12px;
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.tsx b/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.tsx
new file mode 100644
index 0000000000..331f18fcb2
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/LinkBubbleMenu.tsx
@@ -0,0 +1,71 @@
+import { BubbleMenu } from "@tiptap/react/menus";
+import { ReactElement, useState } from "react";
+import { useCurrentEditor } from "./EditorContext";
+import { LinkDialog } from "./toolbars/components/LinkDialog";
+import { ToolbarDefaultButton } from "./toolbars/components/ToolbarDefaultButton";
+import "./LinkBubbleMenu.scss";
+
+/**
+ * Contextual bubble menu shown on links. Offers in-place Edit (opens the link
+ * dialog prefilled) and Remove (strips the link mark across its full range).
+ */
+export function LinkBubbleMenu(): ReactElement | null {
+    const { editor } = useCurrentEditor();
+    const [isEditing, setIsEditing] = useState(false);
+    const [linkEl, setLinkEl] = useState<HTMLElement | null>(null);
+
+    if (!editor) {
+        return null;
+    }
+
+    // Resolve the anchor element for the currently active link so the dialog can
+    // stay positioned even after the bubble menu hides on focus loss.
+    const resolveLinkEl = (): HTMLElement | null => {
+        const { from, to } = editor.state.selection;
+        // Sample a position strictly inside the link so domAtPos lands on the link's
+        // text node rather than the paragraph boundary (which would walk out of the link).
+        const pos = from < to ? from + 1 : from;
+        const domAt = editor.view.domAtPos(pos);
+        // For an element node, the real child sits at childNodes[offset].
+        let node: Node | null =
+            domAt.node.nodeType === Node.ELEMENT_NODE
+                ? (domAt.node.childNodes[domAt.offset] ?? domAt.node)
+                : domAt.node;
+        if (node && node.nodeType !== Node.ELEMENT_NODE) {
+            node = node.parentElement;
+        }
+        const element = node as HTMLElement | null;
+        return element?.closest<HTMLElement>("a, .tiptap-link") ?? null;
+    };
+
+    const removeLink = (): void => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    };
+
+    const openEdit = (): void => {
+        editor.chain().focus().extendMarkRange("link").run();
+        setLinkEl(resolveLinkEl());
+        setIsEditing(true);
+    };
+
+    const closeEdit = (): void => {
+        setIsEditing(false);
+        setLinkEl(null);
+    };
+
+    return (
+        <>
+            <BubbleMenu
+                editor={editor}
+                pluginKey="linkBubbleMenu"
+                shouldShow={({ editor }) => editor.isEditable && editor.isActive("link") && !isEditing}
+            >
+                <div className="link-bubble-menu">
+                    <ToolbarDefaultButton icon="Hyperlink" onClick={openEdit} title="Edit link" />
+                    <ToolbarDefaultButton icon="Erase" onClick={removeLink} title="Remove link" />
+                </div>
+            </BubbleMenu>
+            {isEditing && <LinkDialog referenceElement={linkEl} onClose={closeEdit} />}
+        </>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss
deleted file mode 100644
index 0638acf03e..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-.widget-rich-text-modal {
-    &-overlay {
-        position: fixed;
-        inset: 0px;
-        background-color: var(--shadow-color, rgba(#ced0d3, 0.5));
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        z-index: 105;
-
-        &.mx-underlay {
-            z-index: 105;
-        }
-    }
-
-    &-body {
-        &.modal-dialog {
-            z-index: 106;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        &.view-code-dialog {
-            width: fit-content;
-            min-width: 50vw;
-
-            .code-input {
-                min-height: 50vh;
-
-                .cm-editor {
-                    width: 100%;
-                }
-            }
-        }
-
-        &.image-dialog {
-            .image-dialog-size {
-                input {
-                    min-width: 20px;
-                    &[disabled] {
-                        text-decoration: line-through;
-                    }
-                }
-
-                &-input {
-                    flex: 2;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                &-label {
-                    flex: 1;
-                    align-items: center;
-                    justify-content: flex-end;
-                    padding-right: var(--spacing-medium, 16px);
-                }
-
-                &-container {
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-
-            .image-dialog-upload {
-                max-height: var(--max-dialog-height, 70vh);
-                overflow-y: auto;
-            }
-        }
-
-        .nav-tabs {
-            li {
-                cursor: pointer;
-
-                a {
-                    pointer-events: none;
-                }
-            }
-        }
-
-        .mx-image-dialog-list {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .mx-image-dialog-item {
-            padding-right: var(--spacing-small, 8px);
-            padding-bottom: var(--spacing-small, 8px);
-            cursor: pointer;
-
-            &:hover {
-                transform: scale3d(1.05, 1.05, 1);
-                transition: transform 0.2s ease-in-out;
-            }
-        }
-
-        .mx-image-dialog-thumbnail {
-            max-height: 100px;
-
-            &-small {
-                max-height: 50px;
-            }
-
-            &-container {
-                position: relative;
-
-                .icon-container {
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    top: 0;
-                    align-items: center;
-                    justify-content: center;
-                    display: none;
-
-                    .icons {
-                        border-radius: var(--border-radius-default, 4px);
-                        background-color: var(--color-background, #fff);
-                        cursor: pointer;
-                        transition: transform 0.2s ease-in-out;
-
-                        &:hover {
-                            transform: scale3d(1.05, 1.05, 1);
-                        }
-                    }
-                }
-
-                &:hover {
-                    .icon-container {
-                        display: flex;
-                    }
-                }
-            }
-        }
-    }
-
-    &-header {
-        padding-top: 15px;
-        padding-bottom: 14px;
-        font-size: var(--font-size-large, 18px);
-    }
-
-    &-content {
-        padding: 20px;
-        flex: 1;
-    }
-
-    &-footer {
-        padding-top: 12px;
-        padding-bottom: 14px;
-        display: flex;
-        justify-content: end;
-
-        button.btn:not(:last-child) {
-            margin-right: 20px;
-        }
-    }
-
-    &-form {
-        &:not(:first-child) {
-            margin-top: 20px;
-        }
-    }
-
-    &-input {
-        display: flex;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx
deleted file mode 100644
index ff1fa0706c..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
-    FloatingFocusManager,
-    FloatingOverlay,
-    FloatingPortal,
-    useClick,
-    useDismiss,
-    useFloating,
-    useInteractions,
-    useRole
-} from "@floating-ui/react";
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { Fragment, ReactElement } from "react";
-import LinkDialog, { LinkDialogProps } from "./LinkDialog";
-import VideoDialog, { VideoDialogProps } from "./VideoDialog";
-import ViewCodeDialog, { ViewCodeDialogProps } from "./ViewCodeDialog";
-import ImageDialog, { ImageDialogProps } from "./ImageDialog";
-import "./Dialog.scss";
-import { RichTextContainerProps } from "../../../typings/RichTextProps";
-
-interface BaseDialogProps {
-    isOpen: boolean;
-    parentNode?: HTMLElement | null;
-    onOpenChange?(open: boolean): void;
-}
-
-export type ImageDialogBaseProps = {
-    dialogType?: "image";
-    config?: ImageDialogProps;
-};
-
-export type ViewCodeDialogBaseProps = {
-    dialogType?: "view-code";
-    config?: ViewCodeDialogProps;
-};
-
-export type LinkDialogBaseProps = {
-    dialogType?: "link";
-    config?: LinkDialogProps;
-};
-
-export type VideoDialogBaseProps = {
-    dialogType?: "video";
-    config?: VideoDialogProps;
-};
-
-export type ChildDialogProps =
-    | LinkDialogBaseProps
-    | VideoDialogBaseProps
-    | ViewCodeDialogBaseProps
-    | ImageDialogBaseProps;
-
-export type DialogProps = BaseDialogProps &
-    ChildDialogProps &
-    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload">;
-
-/**
- * Dialog components that will be shown on toolbar's button
- */
-export default function Dialog(props: DialogProps): ReactElement {
-    const { isOpen, onOpenChange, dialogType, config, imageSource, imageSourceContent, enableDefaultUpload } = props;
-    const { refs, context } = useFloating({
-        open: isOpen,
-        onOpenChange
-    });
-
-    const click = useClick(context);
-    const dismiss = useDismiss(context, {
-        outsidePressEvent: "mousedown"
-    });
-    const role = useRole(context);
-
-    const { getFloatingProps } = useInteractions([click, dismiss, role]);
-
-    return (
-        <FloatingPortal>
-            {isOpen && (
-                <Fragment>
-                    <FloatingOverlay
-                        lockScroll
-                        className="widget-rich-text-modal-overlay mx-underlay"
-                    ></FloatingOverlay>
-                    <FloatingFocusManager context={context}>
-                        <div
-                            className={classNames("Dialog mx-layoutgrid widget-rich-text", {
-                                "form-vertical": config?.formOrientation === "vertical"
-                            })}
-                            ref={refs.setFloating}
-                            aria-labelledby={dialogType}
-                            aria-describedby={dialogType}
-                            {...getFloatingProps()}
-                        >
-                            <If condition={dialogType === "link"}>
-                                <LinkDialog {...(config as LinkDialogProps)}></LinkDialog>
-                            </If>
-                            <If condition={dialogType === "video"}>
-                                <VideoDialog {...(config as VideoDialogProps)}></VideoDialog>
-                            </If>
-                            <If condition={dialogType === "view-code"}>
-                                <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
-                            </If>
-                            <If condition={dialogType === "image"}>
-                                <ImageDialog
-                                    imageSource={imageSource}
-                                    imageSourceContent={imageSourceContent}
-                                    enableDefaultUpload={enableDefaultUpload}
-                                    {...(config as ImageDialogProps)}
-                                ></ImageDialog>
-                            </If>
-                        </div>
-                    </FloatingFocusManager>
-                </Fragment>
-            )}
-        </FloatingPortal>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx
deleted file mode 100644
index 12d9ecfa5a..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { Fragment, PropsWithChildren, ReactElement } from "react";
-
-interface PropsWithChildrenWithClass extends PropsWithChildren {
-    className?: string;
-}
-
-export interface DialogContentProps extends PropsWithChildrenWithClass {
-    formOrientation: "horizontal" | "vertical";
-}
-
-export function DialogContent(props: DialogContentProps): ReactElement {
-    const { children, className, formOrientation } = props;
-
-    return (
-        <div
-            className={classNames(
-                "widget-rich-text-modal-body modal-dialog mx-window mx-window-active",
-                { "form-vertical": formOrientation === "vertical" },
-                className
-            )}
-        >
-            <div className="modal-content mx-window-content">{children}</div>
-        </div>
-    );
-}
-
-export interface DialogHeaderProps extends PropsWithChildrenWithClass {
-    onClose(): void;
-}
-
-export function DialogHeader(props: DialogHeaderProps): ReactElement {
-    const { children, onClose, className } = props;
-
-    return (
-        <Fragment>
-            <div className={classNames("widget-rich-text-modal-header modal-header", className)}>
-                <button type="button" className="close" title="close" aria-label="close" onClick={onClose}>
-                    ×
-                </button>
-                <h4>{children}</h4>
-            </div>
-            <div className="hide">{children}</div>
-        </Fragment>
-    );
-}
-
-export interface DialogBodyProps extends PropsWithChildrenWithClass {
-    formOrientation: "horizontal" | "vertical";
-}
-
-export function DialogBody(props: DialogBodyProps): ReactElement {
-    const { children, className, formOrientation } = props;
-
-    return (
-        <div
-            className={classNames(
-                "widget-rich-text-modal-content",
-                {
-                    "form-vertical": formOrientation === "vertical",
-                    "form-horizontal": formOrientation !== "vertical"
-                },
-                className
-            )}
-        >
-            {children}
-        </div>
-    );
-}
-
-export interface FormControlProps extends PropsWithChildrenWithClass {
-    label?: string;
-    formOrientation: "horizontal" | "vertical";
-    inputId?: string;
-}
-
-export function FormControl(props: FormControlProps): ReactElement {
-    const { children, className, label, formOrientation, inputId } = props;
-
-    return (
-        <If condition={children !== undefined && children !== null}>
-            <div className={classNames("form-group", { "no-columns": formOrientation === "vertical" }, className)}>
-                {label && (
-                    <label
-                        htmlFor={inputId}
-                        id={`${inputId}-label`}
-                        className={classNames("control-label", { "col-sm-3": formOrientation !== "vertical" })}
-                    >
-                        {label}
-                    </label>
-                )}
-                {formOrientation === "vertical" ? (
-                    children
-                ) : (
-                    <div className={`col-sm-${label ? "9" : "12"}`}>{children}</div>
-                )}
-            </div>
-        </If>
-    );
-}
-
-export interface DialogFooterProps extends PropsWithChildrenWithClass {
-    onClose(): void;
-    onSubmit(...args: any[]): void;
-}
-
-export function DialogFooter(props: DialogFooterProps): ReactElement {
-    const { onSubmit, onClose, className } = props;
-
-    return (
-        <div className={classNames("mx-dataview-controls", className)}>
-            <button type="button" className="btn mx-button btn-success" onClick={onSubmit}>
-                Save
-            </button>
-            <button type="button" className="btn mx-button btn-default" onClick={onClose}>
-                Cancel
-            </button>
-        </div>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx
deleted file mode 100644
index 199ce5bb14..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { ChangeEvent, MouseEvent, ReactElement, SyntheticEvent, useEffect, useRef, useState } from "react";
-import { RichTextContainerProps } from "../../../typings/RichTextProps";
-import { type imageConfigType } from "../../utils/formats";
-import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-
-type Image = {
-    id: string;
-    url: string;
-    thumbnailUrl?: string;
-};
-
-interface CustomEvent<T = any> extends Event {
-    /**
-     * Returns any custom data event was created with. Typically used for synthetic events.
-     */
-    readonly detail: T;
-    initCustomEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, detailArg: T): void;
-}
-
-export interface ImageDialogProps extends Pick<
-    RichTextContainerProps,
-    "imageSource" | "imageSourceContent" | "formOrientation"
-> {
-    onSubmit(value: imageConfigType): void;
-    onClose(): void;
-    defaultValue?: imageConfigType;
-    enableDefaultUpload?: boolean;
-}
-
-export default function ImageDialog(props: ImageDialogProps): ReactElement {
-    const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload, formOrientation } =
-        props;
-    const [activeTab, setActiveTab] = useState("general");
-    const [selectedImageEntity, setSelectedImageEntity] = useState<Image>();
-    const imageUploadElementRef = useRef<HTMLDivElement>(null);
-    // disable embed tab if it is about modifying current video
-    const disableEmbed =
-        (defaultValue?.src && defaultValue.src.length > 0) ||
-        imageSource === undefined ||
-        imageSource?.status !== "available";
-
-    const inputReference = useRef<HTMLInputElement>(null);
-    const isInputProcessed = useRef(false);
-    useEffect(() => {
-        setTimeout(() => inputReference?.current?.focus(), 50);
-        if (
-            !disableEmbed &&
-            imageSource &&
-            imageSource.status === "available" &&
-            defaultValue?.files &&
-            !isInputProcessed.current
-        ) {
-            // if there is a file given, and imageSource is available
-            // assume that we want to do image upload to entity
-            // and switch to embed tab
-            setActiveTab("embed");
-        }
-    }, [defaultValue?.files, disableEmbed, imageSource]);
-
-    useEffect(() => {
-        if (activeTab === "embed" && defaultValue?.files && !isInputProcessed.current) {
-            // upload image directly to entity using external file uploader widget (if available)
-            const inputFiles = imageUploadElementRef.current?.querySelector("input[type='file']") as HTMLInputElement;
-            if (inputFiles) {
-                inputFiles.files = defaultValue.files as FileList;
-                inputFiles.dispatchEvent(new Event("change", { bubbles: true }));
-            }
-            isInputProcessed.current = true;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeTab]);
-
-    const [formState, setFormState] = useState<imageConfigType>({
-        files: null,
-        alt: defaultValue?.alt ?? "",
-        width: defaultValue?.width ?? 100,
-        height: defaultValue?.height ?? 100,
-        src: defaultValue?.src ?? undefined,
-        keepAspectRatio: true
-    });
-
-    const onFileChange = (e: ChangeEvent<HTMLInputElement>): void => {
-        setFormState({ ...formState, [e.target.name]: e.target.files });
-    };
-
-    const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        setFormState({ ...formState, [e.target.name]: e.target.value });
-    };
-
-    const onInputCheckboxChange = (e: ChangeEvent<HTMLInputElement>): void => {
-        e.stopPropagation();
-        setFormState({ ...formState, keepAspectRatio: !formState.keepAspectRatio });
-    };
-
-    const onEmbedSelected = (image: Image): void => {
-        setFormState({ ...formState, entityGuid: image.id, src: undefined, files: null });
-        setSelectedImageEntity(image);
-        setActiveTab("general");
-    };
-
-    const handleImageSelected = (event: CustomEvent<Image>): void => {
-        const image = event.detail;
-        onEmbedSelected(image);
-    };
-
-    const onEmbedDeleted = (): void => {
-        setFormState({ ...formState, entityGuid: undefined, src: undefined });
-        setSelectedImageEntity(undefined);
-    };
-
-    const onImageLoaded = (e: SyntheticEvent<HTMLImageElement>): void => {
-        setFormState({ ...formState, width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight });
-    };
-
-    useEffect(() => {
-        // event listener for image selection triggered from custom widgets JS Action
-        const imgRef = imageUploadElementRef.current;
-
-        if (imgRef !== null) {
-            imgRef.addEventListener("imageSelected", handleImageSelected);
-        }
-        return () => {
-            imgRef?.removeEventListener("imageSelected", handleImageSelected);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [imageUploadElementRef.current]);
-
-    return (
-        <DialogContent className={"image-dialog"} formOrientation={formOrientation}>
-            <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
-            <DialogBody formOrientation={formOrientation}>
-                <div ref={imageUploadElementRef}>
-                    {!disableEmbed && (
-                        <div>
-                            <ul className="nav nav-tabs mx-tabcontainer-tabs" role="tablist">
-                                <li
-                                    role="presentation"
-                                    className={classNames({
-                                        active: activeTab === "general"
-                                    })}
-                                    onClick={() => setActiveTab("general")}
-                                >
-                                    <a href="#">General</a>
-                                </li>
-                                <li
-                                    role="presentation"
-                                    className={classNames({
-                                        active: activeTab === "embed"
-                                    })}
-                                    onClick={(e: MouseEvent) => {
-                                        setActiveTab("embed");
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                    }}
-                                >
-                                    <a href="#">Attachments</a>
-                                </li>
-                            </ul>
-                        </div>
-                    )}
-                    <div>
-                        <If condition={activeTab === "general"}>
-                            <FormControl
-                                label="Source"
-                                formOrientation={formOrientation}
-                                inputId="rich-text-image-file-input"
-                            >
-                                {defaultValue?.src ? (
-                                    <img
-                                        src={defaultValue.src}
-                                        alt={defaultValue.alt}
-                                        className="mx-image-dialog-thumbnail-small"
-                                    />
-                                ) : formState.entityGuid && selectedImageEntity ? (
-                                    <div className="mx-image-dialog-thumbnail-container">
-                                        <img
-                                            src={selectedImageEntity.thumbnailUrl || selectedImageEntity.url}
-                                            alt={selectedImageEntity.id}
-                                            className="mx-image-dialog-thumbnail-small"
-                                            onLoad={onImageLoaded}
-                                        />
-                                        <span className="icon-container">
-                                            <span className="icons icon-Delete" onClick={onEmbedDeleted}></span>
-                                        </span>
-                                    </div>
-                                ) : enableDefaultUpload ? (
-                                    <input
-                                        id="rich-text-image-file-input"
-                                        name="files"
-                                        className="form-control mx-textarea-input mx-textarea-noresize code-input"
-                                        type="file"
-                                        accept={IMG_MIME_TYPES.join(", ")}
-                                        onChange={onFileChange}
-                                    ></input>
-                                ) : undefined}
-                            </FormControl>
-                            <FormControl
-                                label="Alternative description"
-                                formOrientation={formOrientation}
-                                inputId="rich-text-image-alt-input"
-                            >
-                                <input
-                                    id="rich-text-image-alt-input"
-                                    className="form-control"
-                                    type="text"
-                                    name="alt"
-                                    onChange={onInputChange}
-                                    value={formState.alt}
-                                    ref={inputReference}
-                                />
-                            </FormControl>
-                            <FormControl
-                                label="Width"
-                                className="image-dialog-size"
-                                formOrientation={formOrientation}
-                                inputId="rich-text-image-width-input"
-                            >
-                                <div className="flexcontainer image-dialog-size-container">
-                                    <div className="flexcontainer image-dialog-size-input">
-                                        <input
-                                            id="rich-text-image-width-input"
-                                            className="form-control"
-                                            type="number"
-                                            name="width"
-                                            onChange={onInputChange}
-                                            value={formState.width}
-                                        />
-                                        <span>px</span>
-                                    </div>
-                                    <div className="flexcontainer image-dialog-size-label">
-                                        <label className="control-label">Height</label>
-                                    </div>
-                                    <div className="flexcontainer image-dialog-size-input">
-                                        <input
-                                            id="rich-text-image-height-input"
-                                            className="form-control"
-                                            type="number"
-                                            name="height"
-                                            onChange={onInputChange}
-                                            value={formState.height}
-                                            disabled={formState.keepAspectRatio}
-                                        />
-                                        <span>px</span>
-                                    </div>
-                                </div>
-                            </FormControl>
-                            <FormControl
-                                label="Keep ratio"
-                                formOrientation={formOrientation}
-                                inputId="rich-text-image-keep-ratio-input"
-                            >
-                                <input
-                                    id="rich-text-image-keep-ratio-input"
-                                    type="checkbox"
-                                    name="keepAspectRatio"
-                                    checked={formState.keepAspectRatio}
-                                    onChange={onInputCheckboxChange}
-                                />
-                            </FormControl>
-                            <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
-                        </If>
-                        <If condition={activeTab === "embed"}>
-                            <div className="image-dialog-upload">{imageSourceContent}</div>
-                        </If>
-                    </div>
-                </div>
-            </DialogBody>
-        </DialogContent>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx
deleted file mode 100644
index 93c7c47da8..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ChangeEvent, ReactElement, useState } from "react";
-import { type linkConfigType } from "../../utils/formats";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-
-export interface LinkDialogProps {
-    onSubmit(value: linkConfigType): void;
-    onClose(): void;
-    defaultValue?: linkConfigType;
-    formOrientation: "horizontal" | "vertical";
-}
-
-export default function LinkDialog(props: LinkDialogProps): ReactElement {
-    const { onSubmit, onClose, formOrientation } = props;
-    const [formState, setFormState] = useState({
-        text: props.defaultValue?.text ?? "",
-        href: props.defaultValue?.href ?? "",
-        title: props.defaultValue?.title ?? "",
-        target: props.defaultValue?.target ?? "_blank"
-    });
-
-    const onInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>): void => {
-        setFormState({ ...formState, [e.target.name]: e.target.value });
-    };
-
-    return (
-        <DialogContent className={"link-dialog"} formOrientation={formOrientation}>
-            <DialogHeader onClose={onClose}>Insert/Edit Link</DialogHeader>
-            <DialogBody formOrientation={formOrientation}>
-                <FormControl label="Text" formOrientation={formOrientation} inputId="rich-text-link-text-input">
-                    <input
-                        id="rich-text-link-text-input"
-                        type="text"
-                        className="form-control"
-                        name="text"
-                        onChange={onInputChange}
-                        value={formState.text}
-                    />
-                </FormControl>
-                <FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-link-url-input">
-                    <input
-                        id="rich-text-link-url-input"
-                        type="url"
-                        className="form-control"
-                        name="href"
-                        onChange={onInputChange}
-                        value={formState.href}
-                    />
-                </FormControl>
-                <FormControl label="Title" formOrientation={formOrientation} inputId="rich-text-link-title-input">
-                    <input
-                        id="rich-text-link-title-input"
-                        type="text"
-                        className="form-control"
-                        name="title"
-                        onChange={onInputChange}
-                        value={formState.title}
-                    />
-                </FormControl>
-                <FormControl
-                    label="Open link in..."
-                    formOrientation={formOrientation}
-                    inputId="rich-text-link-target-select"
-                >
-                    <select
-                        id="rich-text-link-target-select"
-                        value={formState.target}
-                        name="target"
-                        onChange={onInputChange}
-                        className="form-control"
-                    >
-                        <option value="_self">Current window</option>
-                        <option value="_blank">New window</option>
-                    </select>
-                </FormControl>
-                <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
-            </DialogBody>
-        </DialogContent>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx
deleted file mode 100644
index 0dbc1ecb5c..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { ChangeEvent, Fragment, MouseEvent, ReactElement, useState } from "react";
-import { type videoConfigType, type videoEmbedConfigType } from "../../utils/formats";
-import { getPatternMatch } from "../../utils/videoUrlPattern";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-import { Range } from "quill";
-
-export type VideoFormType = videoConfigType | videoEmbedConfigType;
-
-export interface VideoDialogProps {
-    onSubmit(value: VideoFormType): void;
-    onClose(): void;
-    selection?: Range | null;
-    defaultValue?: videoConfigType;
-    formOrientation: "horizontal" | "vertical";
-}
-
-export function getValueType(value: VideoFormType): VideoFormType {
-    return Object.hasOwn(value, "src") && (value as videoConfigType).src !== undefined
-        ? (value as videoConfigType)
-        : (value as videoEmbedConfigType);
-}
-
-function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
-    const { onSubmit, onClose, defaultValue, formOrientation } = props;
-    const [formState, setFormState] = useState<videoConfigType>({
-        src: defaultValue?.src ?? "",
-        width: defaultValue?.width ?? 560,
-        height: defaultValue?.height ?? 314
-    });
-
-    const onInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>): void => {
-        if (e.target.name === "src") {
-            const pattern = getPatternMatch(e.target.value);
-            setFormState({
-                ...formState,
-                ...{
-                    src: e.target.value,
-                    width: pattern?.w || 560,
-                    height: pattern?.h || 314
-                }
-            });
-        } else {
-            setFormState({ ...formState, [e.target.name]: e.target.value });
-        }
-    };
-
-    return (
-        <Fragment>
-            <FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-video-src-input">
-                {defaultValue?.src ? (
-                    <span className="mx-text-muted">{defaultValue?.src}</span>
-                ) : (
-                    <input
-                        id="rich-text-video-src-input"
-                        className="form-control"
-                        type="url"
-                        name="src"
-                        onChange={onInputChange}
-                        value={formState.src}
-                    />
-                )}
-            </FormControl>
-            <FormControl label="Width" formOrientation={formOrientation} inputId="rich-text-video-width-input">
-                <input
-                    id="rich-text-video-width-input"
-                    className="form-control"
-                    type="number"
-                    name="width"
-                    onChange={onInputChange}
-                    value={formState.width}
-                />
-            </FormControl>
-            <FormControl label="Height" formOrientation={formOrientation} inputId="rich-text-video-height-input">
-                <input
-                    id="rich-text-video-height-input"
-                    className="form-control"
-                    type="number"
-                    name="height"
-                    onChange={onInputChange}
-                    value={formState.height}
-                />
-            </FormControl>
-            <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
-        </Fragment>
-    );
-}
-
-function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
-    const { onSubmit, onClose, formOrientation } = props;
-    const [formState, setFormState] = useState<videoEmbedConfigType>({
-        embedcode: ""
-    });
-
-    const onInputChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
-        setFormState({ ...formState, [e.target.name]: e.target.value });
-    };
-
-    return (
-        <Fragment>
-            <FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-video-embed-input">
-                {" "}
-                <textarea
-                    id="rich-text-video-embed-input"
-                    className="form-control"
-                    name="embedcode"
-                    onChange={onInputChange}
-                    value={formState.embedcode}
-                />
-            </FormControl>
-
-            <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
-        </Fragment>
-    );
-}
-
-export default function VideoDialog(props: VideoDialogProps): ReactElement {
-    const { onClose, defaultValue, formOrientation } = props;
-    const [activeTab, setActiveTab] = useState("general");
-    // disable embed tab if it is about modifying current video
-    const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
-    return (
-        <DialogContent className={"video-dialog"} formOrientation={formOrientation}>
-            <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Media</DialogHeader>
-            <DialogBody formOrientation={formOrientation}>
-                <div>
-                    <ul className="nav nav-tabs mx-tabcontainer-tabs" role="tablist">
-                        <li
-                            role="presentation"
-                            className={classNames({
-                                active: activeTab === "general"
-                            })}
-                            onClick={() => setActiveTab("general")}
-                        >
-                            <a href="#">General</a>
-                        </li>
-                        {!disableEmbed && (
-                            <li
-                                role="presentation"
-                                className={classNames({
-                                    active: activeTab === "embed"
-                                })}
-                                onClick={(e: MouseEvent) => {
-                                    setActiveTab("embed");
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                }}
-                            >
-                                <a href="#">Embed</a>
-                            </li>
-                        )}
-                    </ul>
-                </div>
-                <div>
-                    <If condition={activeTab === "general"}>
-                        <GeneralVideoDialog {...props} />
-                    </If>
-                    <If condition={activeTab === "embed"}>
-                        <EmbedVideoDialog {...props} />
-                    </If>
-                </div>
-            </DialogBody>
-        </DialogContent>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx
deleted file mode 100644
index 4c64e616f0..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ReactElement, useCallback, useState } from "react";
-import { type viewCodeConfigType } from "../../utils/formats";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
-import { html } from "@codemirror/lang-html";
-import { githubLight } from "@uiw/codemirror-theme-github";
-import { EditorView } from "codemirror";
-import beautify from "js-beautify";
-
-export interface ViewCodeDialogProps {
-    currentCode?: string;
-    onSubmit(value: viewCodeConfigType): void;
-    onClose(): void;
-    formOrientation: "horizontal" | "vertical";
-}
-
-const BEAUTIFY_OPTIONS: beautify.HTMLBeautifyOptions = {
-    indent_size: 4,
-    indent_char: " ",
-    max_preserve_newlines: 5,
-    preserve_newlines: true,
-    indent_scripts: "normal",
-    end_with_newline: false,
-    wrap_line_length: 0,
-    indent_inner_html: false,
-    indent_empty_lines: false
-};
-
-export default function ViewCodeDialog(props: ViewCodeDialogProps): ReactElement {
-    const { onSubmit, onClose, currentCode, formOrientation } = props;
-    const [formState, setFormState] = useState({
-        // temporarily change tab characters to em space to avoid beautify removing them
-        src:
-            beautify.html(currentCode?.replace(/\t/g, "&emsp;") ?? "", BEAUTIFY_OPTIONS)?.replace(/&emsp;/g, "\t") || ""
-    });
-    const onCodeChange = useCallback((value: string, _viewUpdate: ViewUpdate) => {
-        setFormState({ ...formState, src: value });
-    }, []);
-
-    return (
-        <DialogContent className={"view-code-dialog"} formOrientation={formOrientation}>
-            <DialogHeader onClose={onClose}>View/Edit Code</DialogHeader>
-            <DialogBody formOrientation={props.formOrientation}>
-                <div>
-                    <label>Source Code</label>
-                </div>
-                <FormControl label="Code input" formOrientation={props.formOrientation} inputId="rich-text-code-input">
-                    <CodeMirror
-                        className="form-control mx-textarea-input mx-textarea-noresize code-input"
-                        value={formState.src}
-                        extensions={[EditorView.lineWrapping, html()]}
-                        onChange={onCodeChange}
-                        basicSetup
-                        theme={githubLight}
-                        maxHeight="70vh"
-                    />
-                </FormControl>
-                <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
-            </DialogBody>
-        </DialogContent>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx
new file mode 100644
index 0000000000..e5d06e4e3a
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx
@@ -0,0 +1,75 @@
+import { ReactElement, useMemo } from "react";
+
+export type StatusBarMetricType = "wordCount" | "characterCount" | "characterCountHtml";
+
+export interface StatusBarProps {
+    content: string;
+    metricType: StatusBarMetricType;
+}
+
+function getWordCount(text: string): number {
+    if (!text || text.trim().length === 0) {
+        return 0;
+    }
+    // Split on whitespace and filter out empty strings
+    return text
+        .trim()
+        .split(/\s+/)
+        .filter(word => word.length > 0).length;
+}
+
+function getCharCount(text: string): number {
+    if (!text) {
+        return 0;
+    }
+    return text.length;
+}
+
+function getHtmlCharCount(html: string): number {
+    if (!html) {
+        return 0;
+    }
+    return html.length;
+}
+
+export function StatusBar({ content, metricType }: StatusBarProps): ReactElement {
+    // Debounced metric calculation using useMemo
+    // The metric updates only when content changes, providing built-in debouncing
+    const metricValue = useMemo(() => {
+        switch (metricType) {
+            case "wordCount":
+                return getWordCount(content);
+            case "characterCount":
+                return getCharCount(content);
+            case "characterCountHtml":
+                return getHtmlCharCount(content);
+            default:
+                return 0;
+        }
+    }, [content, metricType]);
+
+    const displayText = useMemo(() => {
+        switch (metricType) {
+            case "wordCount":
+                return `Words: ${metricValue}`;
+            case "characterCount":
+                return `Characters: ${metricValue}`;
+            case "characterCountHtml":
+                return `Characters (HTML): ${metricValue}`;
+            default:
+                return "";
+        }
+    }, [metricType, metricValue]);
+
+    return (
+        <div
+            className="rich-text-status-bar"
+            tabIndex={0}
+            role="region"
+            aria-label="Editor status bar"
+            aria-live="polite"
+        >
+            <span className="status-bar-text">{displayText}</span>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx b/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx
deleted file mode 100644
index 11cfb79a90..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import classNames from "classnames";
-import { ReactElement, useEffect, useRef, useState } from "react";
-
-/**
- *  * duplicate with datagrid-web sticky sentinel,
- * TODO: possibly update to shared component in later stage
- *
- * StickySentinel - A small hidden element that uses "IntersectionObserver"
- * to detect the "scrolled" state of the grid. By toggling the "container-stuck" class
- * on this element, we can force "position: sticky" for column headers.
- */
-export function StickySentinel(): ReactElement {
-    const sentinelRef = useRef<HTMLDivElement>(null);
-    const [ratio, setRatio] = useState(1);
-
-    useEffect(() => {
-        const target = sentinelRef.current;
-
-        if (target === null) {
-            return;
-        }
-
-        return createObserver(target, setRatio);
-    }, []);
-
-    return (
-        <div
-            className={classNames("sticky-sentinel", {
-                "container-stuck": ratio === 0
-            })}
-            ref={sentinelRef}
-            style={{ height: 1, marginBottom: "-1px" }}
-        />
-    );
-}
-
-function createObserver(target: Element, onIntersectionChange: (ratio: number) => void): () => void {
-    const options = { threshold: [0, 1] };
-
-    const observer = new IntersectionObserver(([entry]) => {
-        if (entry.intersectionRatio === 0 || entry.intersectionRatio === 1) {
-            onIntersectionChange(entry.intersectionRatio);
-        }
-    }, options);
-
-    observer.observe(target);
-
-    return () => observer.unobserve(target);
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx
deleted file mode 100644
index 5abe80fd7d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import classNames from "classnames";
-import Quill from "quill";
-import { createElement, CSSProperties, forwardRef, KeyboardEvent, ReactElement, RefObject } from "react";
-import { CustomFontsType, PresetEnum } from "../../typings/RichTextProps";
-import { formatCustomFonts } from "../utils/formats/fonts";
-import { FormatsContainer, presetToNumberConverter, ToolbarContext } from "./CustomToolbars/ToolbarWrapper";
-import { TOOLBAR_MAPPING, toolbarContentType } from "./CustomToolbars/constants";
-
-export interface ToolbarProps {
-    customFonts?: CustomFontsType[];
-    id: string;
-    preset: PresetEnum;
-    quill?: Quill | null;
-    style?: CSSProperties;
-    toolbarContent: toolbarContentType[];
-}
-
-const ToolbarKeyDownHandler = (e: KeyboardEvent<HTMLDivElement>): void => {
-    const activeElement = document.activeElement as HTMLElement;
-    const parentElement = activeElement?.parentElement;
-    if (!parentElement?.classList.contains("ql-formats")) {
-        return;
-    }
-    e.preventDefault();
-    if (e.key === "Tab") {
-        const nextFocusElementParent = e.shiftKey
-            ? (parentElement.previousElementSibling as HTMLElement)
-            : (parentElement.nextElementSibling as HTMLElement);
-        if (nextFocusElementParent) {
-            const nextElement = nextFocusElementParent.firstChild as HTMLElement;
-            if (nextElement) {
-                nextElement.focus();
-                e.stopPropagation();
-            }
-        }
-    } else if (e.key === "ArrowRight") {
-        const nextElementSibling = activeElement.nextElementSibling as HTMLElement;
-        if (nextElementSibling) {
-            nextElementSibling.focus();
-            e.stopPropagation();
-        }
-    } else if (e.key === "ArrowLeft") {
-        const previousElementSibling = activeElement.previousElementSibling as HTMLElement;
-        if (previousElementSibling) {
-            previousElementSibling.focus();
-            e.stopPropagation();
-        }
-    } else if (e.key === "Enter") {
-        activeElement.click();
-    }
-};
-
-const Toolbar = forwardRef((props: ToolbarProps, ref: RefObject<HTMLDivElement>): ReactElement => {
-    const { id, preset, style, quill, toolbarContent } = props;
-    const presetValue = presetToNumberConverter(preset);
-
-    return (
-        <ToolbarContext.Provider
-            value={{
-                presetValue
-            }}
-        >
-            <div id={id} style={style} ref={ref} className="widget-rich-text-toolbar" onKeyDown={ToolbarKeyDownHandler}>
-                {toolbarContent.map((toolbarGroup, index) => {
-                    return (
-                        <FormatsContainer presetValue={toolbarGroup.presetValue} key={`toolbargroup_${id}_${index}`}>
-                            {toolbarGroup.children.map((toolbar, idx) => {
-                                const currentToolbar = TOOLBAR_MAPPING[toolbar];
-                                const key = `toolbar_${id}_${index}_${idx}`;
-                                let value = currentToolbar.value;
-
-                                if (currentToolbar.title === "Font type") {
-                                    type FontListType = Array<{ value: string; description: string; style: string }>;
-                                    value = [
-                                        ...(currentToolbar.value as FontListType),
-                                        ...formatCustomFonts(props.customFonts ?? [])
-                                    ].sort((a, b) => (a.value ?? "").localeCompare(b.value ?? ""));
-                                }
-
-                                return currentToolbar.custom
-                                    ? createElement(currentToolbar.component, {
-                                          key,
-                                          quill,
-                                          title: currentToolbar.title
-                                      })
-                                    : createElement(
-                                          currentToolbar.component,
-                                          {
-                                              key,
-                                              className: classNames(currentToolbar.className),
-                                              presetValue: currentToolbar.presetValue,
-                                              value,
-                                              title: currentToolbar.title
-                                          },
-                                          currentToolbar.children && createElement(currentToolbar.children)
-                                      );
-                            })}
-                        </FormatsContainer>
-                    );
-                })}
-            </div>
-        </ToolbarContext.Provider>
-    );
-});
-
-export default Toolbar;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx b/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx
new file mode 100644
index 0000000000..d5aa28c3d9
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx
@@ -0,0 +1,100 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { useState, useRef, ReactElement, MouseEvent as ReactMouseEvent } from "react";
+
+export function YouTubeResize(props: NodeViewProps): ReactElement {
+    const { node, updateAttributes } = props;
+    const [isResizing, setIsResizing] = useState(false);
+    const [size, setSize] = useState({
+        width: node.attrs.width || 640,
+        height: node.attrs.height || 480
+    });
+    const containerRef = useRef<HTMLDivElement>(null);
+    const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const currentSize = useRef({ width: size.width, height: size.height });
+
+    const handleMouseDown = (e: ReactMouseEvent, corner: string): void => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const container = containerRef.current;
+        if (!container) return;
+
+        const rect = container.getBoundingClientRect();
+        startPos.current = {
+            x: e.clientX,
+            y: e.clientY,
+            width: rect.width,
+            height: rect.height
+        };
+
+        setIsResizing(true);
+
+        const handleMouseMove = (moveEvent: MouseEvent): void => {
+            const deltaX = moveEvent.clientX - startPos.current.x;
+
+            let newWidth = startPos.current.width;
+            let newHeight = startPos.current.height;
+
+            if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+                newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+                const aspectRatio = startPos.current.height / startPos.current.width;
+                newHeight = newWidth * aspectRatio;
+            }
+
+            if (newWidth > 50) {
+                const roundedWidth = Math.round(newWidth);
+                const roundedHeight = Math.round(newHeight);
+
+                currentSize.current = {
+                    width: roundedWidth,
+                    height: roundedHeight
+                };
+
+                setSize({
+                    width: roundedWidth,
+                    height: roundedHeight
+                });
+            }
+        };
+
+        const handleMouseUp = (): void => {
+            setIsResizing(false);
+            updateAttributes({
+                width: currentSize.current.width,
+                height: currentSize.current.height
+            });
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    };
+
+    return (
+        <NodeViewWrapper className={`youtube-wrapper ${isResizing ? "resizing" : ""}`}>
+            <div
+                ref={containerRef}
+                className="youtube-container"
+                style={{ width: `${size.width}px`, height: `${size.height}px` }}
+            >
+                <iframe
+                    src={node.attrs.src}
+                    width={size.width}
+                    height={size.height}
+                    allowFullScreen
+                    style={{
+                        width: `${size.width}px`,
+                        height: `${size.height}px`
+                    }}
+                />
+                <div className="resize-handles">
+                    <div className="resize-handle nw" onMouseDown={e => handleMouseDown(e, "nw")} />
+                    <div className="resize-handle ne" onMouseDown={e => handleMouseDown(e, "ne")} />
+                    <div className="resize-handle sw" onMouseDown={e => handleMouseDown(e, "sw")} />
+                    <div className="resize-handle se" onMouseDown={e => handleMouseDown(e, "se")} />
+                </div>
+            </div>
+        </NodeViewWrapper>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss
new file mode 100644
index 0000000000..b53f7f374f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss
@@ -0,0 +1,344 @@
+$rte-border-color-default: #ced0d3 !default;
+$rte-gray-ligher: #f8f8f8 !default;
+$rte-brand-primary: #264ae5 !default;
+$rte-shadow-color: #00000014 !default;
+
+.widget-rich-text {
+    &.toolbar-bottom {
+        .tiptap-wrapper {
+            flex-direction: column-reverse;
+        }
+    }
+
+    &.toolbar-auto {
+        &.form-control {
+            /* position sticky only works for overflow visible. this is to override form-control style */
+            overflow: visible;
+        }
+
+        .tiptap-toolbar {
+            position: sticky;
+            z-index: 50;
+            background-color: white;
+            top: 0;
+        }
+    }
+}
+
+.tiptap-toolbar {
+    display: flex;
+    flex-direction: column;
+    border: unset;
+    box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, $rte-shadow-color);
+
+    .tiptap-wrapper & {
+        .toolbar-bottom & {
+            box-shadow: 2px 0 4px 0 var(--shadow-color-border, $rte-shadow-color);
+        }
+    }
+
+    .toolbar-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        padding: 8px;
+        box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, $rte-shadow-color);
+
+        &:empty {
+            height: 0;
+            padding: 0;
+            box-shadow: none;
+        }
+
+        &.table-operations-row {
+            max-height: 0;
+            overflow: hidden;
+            opacity: 0;
+            padding: 0 8px;
+            transition: all 0.3s ease-in-out;
+            border-top: 1px solid transparent;
+
+            &.visible {
+                max-height: 60px;
+                opacity: 1;
+                padding: 8px;
+                border-top: 1px solid #e0e0e0;
+            }
+        }
+    }
+
+    .code-view-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .toolbar-group {
+        display: flex;
+        gap: 2px;
+        padding: 0 4px;
+        border-right: 1px solid #e0e0e0;
+
+        &:last-child {
+            border-right: none;
+        }
+    }
+
+    .toolbar-dropdown-button {
+        display: flex;
+        gap: 4px;
+        padding: 6px 6px 3px;
+        min-width: 120px;
+        justify-content: space-between;
+
+        .dropdown-label {
+            flex: 1;
+            text-align: left;
+            font-size: 13px;
+        }
+
+        .dropdown-arrow {
+            font-size: 12px;
+            transition: transform 0.2s;
+        }
+
+        &.fontSize {
+            + .toolbar-dropdown-menu {
+                min-width: 120px;
+            }
+        }
+    }
+
+    .toolbar-dropdown-menu {
+        // Position is managed by Floating UI (via floatingStyles)
+        background: white;
+        border: 1px solid var(--border-color-default, $rte-border-color-default);
+        border-radius: 4px;
+        box-shadow: 0 4px 12px var(--shadow-color-border, $rte-shadow-color);
+        min-width: 160px;
+        z-index: 1000;
+        max-height: 300px;
+        overflow-y: auto;
+
+        .toolbar-dropdown-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            width: 100%;
+            padding: 4px 6px;
+            text-align: left;
+            border: none;
+            background: white;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+
+            .icons {
+                font-size: 16px;
+                flex-shrink: 0;
+            }
+
+            span:not(.icons) {
+                flex: 1;
+            }
+
+            &:hover {
+                background-color: var(--gray-lighter, $rte-gray-ligher);
+            }
+
+            &.is-active {
+                background-color: var(--brand-primary, $rte-brand-primary);
+                color: white;
+            }
+
+            &:first-child {
+                border-radius: 4px 4px 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 4px 4px;
+            }
+        }
+    }
+
+    button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        height: 24px;
+        padding: 3px 5px;
+        width: 28px;
+        transition: all 0.2s;
+
+        &:hover:not(:disabled) {
+            background-color: var(--gray-lighter, $rte-gray-ligher);
+            border-color: var(--border-color-default, $rte-border-color-default);
+        }
+
+        &:active:not(:disabled) {
+            background-color: var(--gray-lighter, $rte-gray-ligher);
+        }
+
+        &:focus {
+            outline: 2px solid var(--brand-primary, $rte-brand-primary);
+            outline-offset: 2px;
+        }
+
+        &.is-active {
+            color: var(--brand-primary, $rte-brand-primary);
+        }
+
+        &:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .button-content {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            .button-label {
+                font-size: 13px;
+            }
+
+            .icons {
+                font-size: 12px;
+            }
+        }
+
+        strong,
+        em,
+        s {
+            font-style: normal;
+            font-weight: inherit;
+        }
+
+        em {
+            font-style: italic;
+        }
+
+        s {
+            text-decoration: line-through;
+        }
+    }
+
+    .list-dropdown {
+        .dropdown-list {
+            .dropdown-item {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                width: 100%;
+                padding: 10px 12px;
+                text-align: left;
+                border: none;
+                background: white;
+                font-size: 14px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                .icons {
+                    font-size: 16px;
+                    width: 20px;
+                    text-align: center;
+                }
+
+                .item-label {
+                    flex: 1;
+                }
+
+                &:hover {
+                    background-color: var(--gray-lighter, $rte-gray-ligher);
+                }
+
+                &.is-active {
+                    background-color: var(--brand-primary, $rte-brand-primary);
+                    color: white;
+                }
+
+                &:first-child {
+                    border-radius: 4px 4px 0 0;
+                }
+
+                &:last-child {
+                    border-radius: 0 0 4px 4px;
+                }
+            }
+        }
+    }
+
+    // Split button styles
+    .split-button {
+        display: inline-flex;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        overflow: hidden;
+
+        &.is-active {
+            background: rgba(38, 74, 229, 0.1);
+
+            .split-button-main,
+            .split-button-dropdown {
+                color: var(--brand-primary, $rte-brand-primary);
+            }
+        }
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        .split-button-main {
+            padding: 6px 8px;
+            border: none;
+            border-right: 1px solid rgba(0, 0, 0, 0.1);
+            background: transparent;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.05);
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--brand-primary, $rte-brand-primary);
+                outline-offset: -2px;
+                z-index: 1;
+            }
+
+            .icons {
+                font-size: 16px;
+            }
+        }
+
+        .split-button-dropdown {
+            padding: 6px 4px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.05);
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--brand-primary, $rte-brand-primary);
+                outline-offset: -2px;
+                z-index: 1;
+            }
+
+            .icons {
+                font-size: 12px;
+                transition: transform 0.2s;
+            }
+
+            &[aria-expanded="true"] .icons {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx
new file mode 100644
index 0000000000..b294d65200
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx
@@ -0,0 +1,194 @@
+import { ReactElement, ReactNode, useState, useEffect, useMemo, PropsWithChildren } from "react";
+import { useCurrentEditor } from "../EditorContext";
+import { CodeViewToolbarButton } from "./components/CodeView";
+import { ColorPickerToolbarButton } from "./components/ColorPicker";
+import { ConfigurationDropdown } from "./components/ConfigurationDropdown";
+import { DialogToolbarButton } from "./components/Dialog";
+import { TableGridToolbarButton } from "./components/TableGrid";
+import { ToolbarButton } from "./components/ToolbarButton";
+import {
+    SECONDARY_TOOLBAR_GROUP,
+    ToolbarContext,
+    DropdownCommand,
+    ToolbarGroupConfig,
+    ToolbarButtonConfig,
+    getFilteredToolbarGroups,
+    ToolbarGroupsConfig
+} from "./ToolbarConfig";
+import { PresetEnum, ToolbarConfigEnum, AdvancedConfigType, CustomFontsType } from "../../../typings/RichTextProps";
+import "./Toolbar.scss";
+// eslint-disable-next-line import/order
+import { ToolbarDropdown } from "./components/ToolbarDropdown";
+// eslint-disable-next-line import/order
+import { ToolbarSplitButton } from "./components/ToolbarSplitButton";
+import classNames from "classnames";
+
+interface ToolbarProps extends PropsWithChildren {
+    imageSourceContent?: ReactNode;
+    preset?: PresetEnum;
+    toolbarConfig?: ToolbarConfigEnum;
+    toolbarGroups?: ToolbarGroupsConfig;
+    advancedConfig?: AdvancedConfigType[];
+    customFonts?: CustomFontsType[];
+}
+
+interface ToolbarGroupProps extends ToolbarProps {
+    toolbar: ToolbarGroupConfig;
+}
+
+interface ToolbarRowProps extends ToolbarProps {
+    toolbars: ToolbarGroupConfig[];
+}
+
+interface ToolbarButtonFactoryProps extends ToolbarProps {
+    button: ToolbarButtonConfig;
+}
+
+function ToolbarButtonFactory(props: ToolbarButtonFactoryProps): ReactElement {
+    const { button, imageSourceContent } = props;
+    const { editor } = useCurrentEditor();
+    if (!editor) {
+        return <></>;
+    }
+    switch (button.action) {
+        case "colorPicker":
+            return <ColorPickerToolbarButton key={button.name} config={button} />;
+        case "dialog":
+            return <DialogToolbarButton key={button.name} config={button} imageSourceContent={imageSourceContent} />;
+        case "tableGrid":
+            return <TableGridToolbarButton key={button.name} config={button} />;
+        case "codeView":
+            return <CodeViewToolbarButton key={button.name} config={button} />;
+        case "splitButton":
+            return <ToolbarSplitButton key={button.name} config={button} />;
+        case "dropdown":
+            return <ToolbarDropdown key={button.name} config={button} />;
+        case "configurationDropdown": {
+            // Create configuration sections dynamically using customAction
+            const result = button.customAction ? button.customAction(editor) : [];
+            const sections = Array.isArray(result) ? result : [];
+            const configButton = { ...button, configurationSections: sections };
+            return <ConfigurationDropdown key={button.name} config={configButton} />;
+        }
+        default:
+            return <ToolbarButton key={button.name} config={button} />;
+    }
+}
+
+function ToolbarGroup(props: ToolbarGroupProps): ReactElement | null {
+    const { toolbar, ...rest } = props;
+    const { editor } = useCurrentEditor();
+    const [, setSelectionUpdate] = useState(0);
+
+    // Force re-render when editor selection changes
+    useEffect(() => {
+        if (!editor || !toolbar.showWhen) return;
+
+        const handleSelectionUpdate = (): void => {
+            setSelectionUpdate(prev => prev + 1);
+        };
+
+        editor.on("selectionUpdate", handleSelectionUpdate);
+
+        return () => {
+            editor.off("selectionUpdate", handleSelectionUpdate);
+        };
+    }, [editor, toolbar.showWhen]);
+    if (toolbar.showWhen && !toolbar.showWhen(editor)) {
+        return null;
+    }
+    return (
+        <div key={toolbar.name} className="toolbar-group">
+            {toolbar.buttons.map(button => (
+                <ToolbarButtonFactory key={button.name} button={button} {...rest} />
+            ))}
+        </div>
+    );
+}
+
+function ToolbarRow(props: ToolbarRowProps): ReactElement {
+    return (
+        <div className="toolbar-row">
+            {props.toolbars.map(group => (
+                <ToolbarGroup key={group.name} toolbar={group} {...props} />
+            ))}
+        </div>
+    );
+}
+
+function ToolbarRowCode(): ReactElement {
+    const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
+
+    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);
+        codeViewDispatch({ type: "SAVE_CODE_CHANGES" });
+    };
+
+    const handleCancelCode = (): void => {
+        codeViewDispatch({ type: "CANCEL_CODE_CHANGES" });
+    };
+    return (
+        <div className="toolbar-row code-view-actions">
+            <div className="mx-button button btn btn-default" onClick={handleCancelCode}>
+                {isDisabled ? "Close" : "Cancel"}
+            </div>
+            <div
+                {...extraProps}
+                className={classNames("mx-button", "button", "btn", "btn-success", {
+                    disabled: isDisabled
+                })}
+                onClick={handleSaveCode}
+            >
+                Save
+            </div>
+        </div>
+    );
+}
+
+export default function Toolbar(props: ToolbarProps): ReactElement | null {
+    const { preset = "basic", toolbarConfig, toolbarGroups, advancedConfig, imageSourceContent, customFonts } = props;
+    const { editor, codeViewState } = useCurrentEditor();
+    const [activeDropdown, setActiveDropdown] = useState<DropdownCommand | null>(null);
+
+    // Filter toolbar groups based on preset and custom configuration
+    const filteredGroups = useMemo(
+        () => getFilteredToolbarGroups(preset, toolbarConfig, toolbarGroups, advancedConfig, customFonts),
+        [preset, toolbarConfig, toolbarGroups, advancedConfig, customFonts]
+    );
+
+    const filteredSecondaryGroups = useMemo(
+        () =>
+            SECONDARY_TOOLBAR_GROUP.filter(group =>
+                filteredGroups.some(filteredGroup => filteredGroup.name === group.parentName)
+            ),
+        [filteredGroups]
+    );
+
+    if (!editor) {
+        return null;
+    }
+
+    const handleDropdownToggle = (dropdownType: DropdownCommand | null): void => {
+        setActiveDropdown(prev => (prev === dropdownType ? null : dropdownType));
+    };
+
+    const handleDropdownClose = (): void => {
+        setActiveDropdown(null);
+    };
+
+    return (
+        <ToolbarContext.Provider value={{ activeDropdown, handleDropdownToggle, handleDropdownClose }}>
+            <div className="tiptap-toolbar">
+                <ToolbarRow toolbars={filteredGroups} imageSourceContent={imageSourceContent} />
+                <ToolbarRow toolbars={filteredSecondaryGroups} imageSourceContent={imageSourceContent} />
+                {codeViewState.isCodeView && <ToolbarRowCode />}
+            </div>
+        </ToolbarContext.Provider>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts
new file mode 100644
index 0000000000..590c3bf2f4
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts
@@ -0,0 +1,802 @@
+import { Editor } from "@tiptap/react";
+import { createContext } from "react";
+import { createTableConfigurationSections, createCellConfigurationSections } from "./helpers/configurationHelpers";
+import { AddCustomFontsToFontFamilyDropdown, FONT_LIST, FONT_SIZE_LIST } from "./helpers/fontHelpers";
+import {
+    PresetEnum,
+    ToolbarConfigEnum,
+    CtItemTypeEnum,
+    AdvancedConfigType,
+    CustomFontsType
+} from "../../../typings/RichTextProps";
+
+export type ToolbarActionType =
+    | "toggle"
+    | "command"
+    | "custom"
+    | "heading"
+    | "dropdown"
+    | "splitButton"
+    | "tableGrid"
+    | "colorPicker"
+    | "dialog"
+    | "codeView"
+    | "configurationDropdown";
+
+export type ColorPickerCommand =
+    "textColor" | "textHighlight" | "cellBackground" | "tableBackground" | "tableBorderColor";
+
+export type DialogCommand = "insertImage" | "insertVideo" | "insertLink";
+
+export type TableGridCommand = "insertTable";
+
+export type DropdownCommand = ColorPickerCommand | DialogCommand | TableGridCommand;
+
+export interface ToolbarDropdownOption {
+    label: string;
+    value: string;
+    command: string;
+    attrs?: Record<string, any>;
+    icon?: string;
+}
+
+export interface ConfigurationSection {
+    id: string;
+    label: string;
+    type: "colorPicker" | "dropdown" | "numberInput";
+    getCurrentValue?: () => string | number | null;
+    onChange: (value: string) => void;
+    options?: Array<{ value: string; label: string }>;
+    defaultColor?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    unit?: string;
+}
+
+export interface ToolbarButtonConfig {
+    name: string;
+    title: string;
+    icon: string;
+    activeIcon?: string; // Icon to show when button is active
+    action: ToolbarActionType;
+    command?: string;
+    isActive?: (editor: Editor) => boolean;
+    canExecute?: (editor: Editor) => boolean;
+    customAction?: (editor: Editor) => void | ConfigurationSection[];
+    attrs?: Record<string, any>;
+    dropdownOptions?: ToolbarDropdownOption[];
+    getCurrentValue?: (editor: Editor) => string;
+    configurationSections?: ConfigurationSection[];
+}
+
+export interface ToolbarGroupConfig {
+    name: string;
+    presetValue?: 1 | 2 | 3;
+    buttons: ToolbarButtonConfig[];
+    parentName?: string;
+    showWhen?: (editor: Editor | null) => boolean;
+}
+
+export interface ToolbarContextType {
+    activeDropdown: DropdownCommand | null;
+    handleDropdownToggle: (dropdownType: DropdownCommand | null) => void;
+    handleDropdownClose: () => void;
+}
+
+export const ToolbarContext = createContext<ToolbarContextType>({
+    activeDropdown: null,
+    handleDropdownToggle: () => {},
+    handleDropdownClose: () => {}
+});
+
+// Toolbar configuration
+export const TOOLBAR_GROUPS: ToolbarGroupConfig[] = [
+    {
+        name: "history",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "undo",
+                title: "Undo",
+                icon: "Undo",
+                action: "command",
+                command: "undo",
+                canExecute: editor => editor.can().chain().focus().undo().run()
+            },
+            {
+                name: "redo",
+                title: "Redo",
+                icon: "Redo",
+                action: "command",
+                command: "redo",
+                canExecute: editor => editor.can().chain().focus().redo().run()
+            }
+        ]
+    },
+    {
+        name: "fontStyle",
+        presetValue: 1,
+        buttons: [
+            {
+                name: "bold",
+                title: "Bold",
+                icon: "Text-bold",
+                action: "toggle",
+                command: "toggleBold",
+                isActive: editor => editor.isActive("bold"),
+                canExecute: editor => editor.can().chain().focus().toggleBold().run()
+            },
+            {
+                name: "italic",
+                title: "Italic",
+                icon: "Text-italic",
+                action: "toggle",
+                command: "toggleItalic",
+                isActive: editor => editor.isActive("italic"),
+                canExecute: editor => editor.can().chain().focus().toggleItalic().run()
+            },
+            {
+                name: "underline",
+                title: "Underline",
+                icon: "Text-underline",
+                action: "toggle",
+                command: "toggleUnderline",
+                isActive: editor => editor.isActive("underline"),
+                canExecute: editor => editor.can().chain().focus().toggleUnderline().run()
+            },
+            {
+                name: "strike",
+                title: "Strikethrough",
+                icon: "Text-strikethrough",
+                action: "toggle",
+                command: "toggleStrike",
+                isActive: editor => editor.isActive("strike"),
+                canExecute: editor => editor.can().chain().focus().toggleStrike().run()
+            }
+        ]
+    },
+    {
+        name: "fontScript",
+        presetValue: 3,
+        buttons: [
+            {
+                name: "superscript",
+                title: "Superscript",
+                icon: "Text-superscript",
+                action: "toggle",
+                command: "toggleSuperscript",
+                isActive: editor => editor.isActive("superscript"),
+                canExecute: editor => editor.can().chain().focus().toggleSuperscript().run()
+            },
+            {
+                name: "subscript",
+                title: "Subscript",
+                icon: "Text-subscript",
+                action: "toggle",
+                command: "toggleSubscript",
+                isActive: editor => editor.isActive("subscript"),
+                canExecute: editor => editor.can().chain().focus().toggleSubscript().run()
+            }
+        ]
+    },
+    {
+        name: "list",
+        presetValue: 1,
+        buttons: [
+            {
+                name: "bulletList",
+                title: "Bullet List",
+                icon: "List-bullets",
+                action: "toggle",
+                command: "toggleBulletList",
+                isActive: editor => editor.isActive("bulletList")
+            },
+            {
+                name: "orderedList",
+                title: "Numbered List",
+                icon: "List-numbers",
+                action: "splitButton",
+                command: "toggleOrderedList",
+                isActive: editor => editor.isActive("orderedList"),
+                dropdownOptions: [
+                    {
+                        label: "1, 2, 3",
+                        value: "decimal",
+                        command: "setOrderedListStyle",
+                        attrs: { styleType: null },
+                        icon: "List-numbers"
+                    },
+                    {
+                        label: "a, b, c",
+                        value: "lower-alpha",
+                        command: "setOrderedListStyle",
+                        attrs: { styleType: "lower-alpha" },
+                        icon: "List-lower-alpha"
+                    },
+                    {
+                        label: "i, ii, iii",
+                        value: "lower-roman",
+                        command: "setOrderedListStyle",
+                        attrs: { styleType: "lower-roman" },
+                        icon: "List-roman"
+                    }
+                ],
+                getCurrentValue: editor => {
+                    if (!editor.isActive("orderedList")) return "";
+                    const attrs = editor.getAttributes("orderedList");
+                    return attrs.listStyleType || "decimal";
+                }
+            },
+            {
+                name: "taskList",
+                title: "Task List",
+                icon: "List-checklist",
+                action: "toggle",
+                command: "toggleTaskList",
+                isActive: editor => editor.isActive("taskList")
+            }
+        ]
+    },
+    {
+        name: "indent",
+        presetValue: 1,
+        buttons: [
+            {
+                name: "decreaseIndent",
+                title: "Decrease Indent",
+                icon: "Text-indent-right",
+                action: "command",
+                command: "decreaseIndent"
+            },
+            {
+                name: "increaseIndent",
+                title: "Increase Indent",
+                icon: "Text-indent-left",
+                action: "command",
+                command: "increaseIndent"
+            },
+            {
+                name: "textDirection",
+                title: "Text Direction",
+                icon: "Left-to-right",
+                activeIcon: "Right-to-left",
+                action: "custom",
+                isActive: editor => {
+                    const attrs = editor.getAttributes("paragraph");
+                    return attrs.dir === "rtl";
+                },
+                customAction: editor => {
+                    const attrs = editor.getAttributes("paragraph");
+                    const isRTL = attrs.dir === "rtl";
+                    (editor.chain().focus() as any).setTextDirection(isRTL ? "ltr" : "rtl").run();
+                }
+            }
+        ]
+    },
+    {
+        name: "align",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "leftAlign",
+                title: "Align Left",
+                icon: "Text-align-left",
+                action: "command",
+                command: "setTextAlign",
+                attrs: { textAlign: "left" },
+                isActive: editor => editor.isActive({ textAlign: "left" })
+            },
+            {
+                name: "centerAlign",
+                title: "Align Center",
+                icon: "Text-align-center",
+                action: "command",
+                command: "setTextAlign",
+                attrs: { textAlign: "center" },
+                isActive: editor => editor.isActive({ textAlign: "center" })
+            },
+            {
+                name: "rightAlign",
+                title: "Align Right",
+                icon: "Text-align-right",
+                action: "command",
+                command: "setTextAlign",
+                attrs: { textAlign: "right" },
+                isActive: editor => editor.isActive({ textAlign: "right" })
+            },
+            {
+                name: "justifyAlign",
+                title: "Align Justify",
+                icon: "Text-align-justify",
+                action: "command",
+                command: "setTextAlign",
+                attrs: { textAlign: "justify" },
+                isActive: editor => editor.isActive({ textAlign: "justify" })
+            }
+        ]
+    },
+    {
+        name: "fontColor",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "fontFamily",
+                title: "Font Family",
+                icon: "Text-font",
+                action: "dropdown",
+                dropdownOptions: FONT_LIST.map(font => ({
+                    label: font.description,
+                    value: font.value,
+                    command: "setFontFamily",
+                    attrs: {
+                        fontFamily: font.style,
+                        fontValue: font.value
+                    }
+                })),
+                getCurrentValue: editor => {
+                    const { fontValue, fontFamily } = editor.getAttributes("textStyle");
+
+                    // Use fontValue if available (new format)
+                    if (fontValue) {
+                        return fontValue;
+                    }
+
+                    // Fallback for legacy content without data-font-value
+                    if (fontFamily) {
+                        // Derive from fontFamily: "arial, helvetica, ..." → "arial"
+                        const firstFont = fontFamily.split(",")[0].trim();
+                        return firstFont.replace(/['"]/g, "").toLowerCase().replace(/\s+/g, "-");
+                    }
+
+                    return "";
+                }
+            },
+            {
+                name: "fontSize",
+                title: "Font Size",
+                icon: "Text-size",
+                action: "dropdown",
+                dropdownOptions: FONT_SIZE_LIST.map(size => ({
+                    label: size,
+                    value: size,
+                    command: "setFontSize",
+                    attrs: { fontSize: size }
+                })),
+                getCurrentValue: editor => {
+                    const { fontSize } = editor.getAttributes("textStyle");
+                    return fontSize || "14px";
+                }
+            },
+            {
+                name: "textColor",
+                title: "Text Color",
+                icon: "Text-color",
+                action: "colorPicker",
+                command: "textColor"
+            },
+            {
+                name: "backgroundColor",
+                title: "Background Color",
+                icon: "Text-background",
+                action: "colorPicker",
+                command: "textHighlight"
+            }
+        ]
+    },
+    {
+        name: "embed",
+        presetValue: 1,
+        buttons: [
+            {
+                name: "insertLink",
+                title: "Insert Link",
+                icon: "Hyperlink",
+                action: "dialog",
+                command: "insertLink"
+            },
+            {
+                name: "insertImage",
+                title: "Insert Image",
+                icon: "Image",
+                action: "dialog",
+                command: "insertImage"
+            },
+            {
+                name: "insertVideo",
+                title: "Insert YouTube Video",
+                icon: "Film",
+                action: "dialog",
+                command: "insertVideo"
+            }
+        ]
+    },
+    {
+        name: "header",
+        presetValue: 3,
+        buttons: [
+            {
+                name: "textFormat",
+                title: "Text Format",
+                icon: "Arrow-down",
+                action: "dropdown",
+                dropdownOptions: [
+                    { label: "Paragraph", value: "paragraph", command: "setParagraph" },
+                    { label: "Heading 1", value: "h1", command: "toggleHeading", attrs: { level: 1 } },
+                    { label: "Heading 2", value: "h2", command: "toggleHeading", attrs: { level: 2 } },
+                    { label: "Heading 3", value: "h3", command: "toggleHeading", attrs: { level: 3 } },
+                    { label: "Heading 4", value: "h4", command: "toggleHeading", attrs: { level: 4 } },
+                    { label: "Heading 5", value: "h5", command: "toggleHeading", attrs: { level: 5 } },
+                    { label: "Heading 6", value: "h6", command: "toggleHeading", attrs: { level: 6 } }
+                ],
+                getCurrentValue: editor => {
+                    if (editor.isActive("heading", { level: 1 })) return "h1";
+                    if (editor.isActive("heading", { level: 2 })) return "h2";
+                    if (editor.isActive("heading", { level: 3 })) return "h3";
+                    if (editor.isActive("heading", { level: 4 })) return "h4";
+                    if (editor.isActive("heading", { level: 5 })) return "h5";
+                    if (editor.isActive("heading", { level: 6 })) return "h6";
+                    return "paragraph";
+                }
+            }
+        ]
+    },
+    {
+        name: "code",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "blockquote",
+                title: "Blockquote",
+                icon: "Blockquote",
+                action: "toggle",
+                command: "toggleBlockquote",
+                isActive: editor => editor.isActive("blockquote")
+            },
+            {
+                name: "code",
+                title: "Code",
+                icon: "Inline-code",
+                action: "toggle",
+                command: "toggleCode",
+                isActive: editor => editor.isActive("code"),
+                canExecute: editor => editor.can().chain().focus().toggleCode().run()
+            },
+            {
+                name: "codeBlock",
+                title: "Code Block",
+                icon: "Code-block",
+                action: "toggle",
+                command: "toggleCodeBlock",
+                isActive: editor => editor.isActive("codeBlock")
+            },
+            {
+                name: "codeView",
+                title: "View/Edit Code",
+                icon: "View-edit-code",
+                action: "codeView"
+            }
+        ]
+    },
+    {
+        name: "remove",
+        presetValue: 1,
+        buttons: [
+            {
+                name: "clearFormatting",
+                title: "Clear Formatting",
+                icon: "Erase",
+                action: "command",
+                command: "unsetAllMarks"
+            }
+        ]
+    },
+    {
+        name: "tableBetter",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "insertTable",
+                title: "Insert Table",
+                icon: "Table",
+                action: "tableGrid"
+            }
+        ]
+    },
+    {
+        name: "view",
+        presetValue: 2,
+        buttons: [
+            {
+                name: "fullscreen",
+                title: "Fullscreen",
+                icon: "Expand",
+                action: "command",
+                command: "toggleFullscreen",
+                isActive: () => document.querySelector(".widget-rich-text")?.classList.contains("fullscreen") || false
+            }
+        ]
+    }
+];
+
+export const SECONDARY_TOOLBAR_GROUP: ToolbarGroupConfig[] = [
+    {
+        name: "table-operations",
+        parentName: "tableBetter",
+        showWhen: editor => editor?.isActive("table") ?? false,
+        buttons: [
+            {
+                name: "tableConfiguration",
+                title: "Table Configuration",
+                icon: "Table-configuration",
+                action: "configurationDropdown",
+                customAction: (editor: Editor) => {
+                    // Configuration sections are created dynamically
+                    return createTableConfigurationSections(editor);
+                }
+            },
+            {
+                name: "cellConfiguration",
+                title: "Cell Configuration",
+                icon: "Cell",
+                action: "configurationDropdown",
+                customAction: (editor: Editor) => {
+                    // Configuration sections are created dynamically
+                    return createCellConfigurationSections(editor);
+                }
+            },
+            {
+                name: "mergeCells",
+                title: "Merge Cells",
+                icon: "Merge",
+                action: "command",
+                command: "mergeCells",
+                canExecute: editor => editor.can().mergeCells()
+            },
+            {
+                name: "splitCell",
+                title: "Split Cell",
+                icon: "Split-cell",
+                action: "command",
+                command: "splitCell",
+                canExecute: editor => editor.can().splitCell()
+            },
+            {
+                name: "deleteTable",
+                title: "Delete Table",
+                icon: "Delete-table",
+                action: "command",
+                command: "deleteTable",
+                canExecute: editor => editor.can().deleteTable()
+            },
+            {
+                name: "addRowAfter",
+                title: "Add Row After",
+                icon: "Insert-row-after",
+                action: "command",
+                command: "addRowAfter",
+                canExecute: editor => editor.can().addRowAfter()
+            },
+            {
+                name: "addRowBefore",
+                title: "Add Row Before",
+                icon: "Insert-row-before",
+                action: "command",
+                command: "addRowBefore",
+                canExecute: editor => editor.can().addRowBefore()
+            },
+            {
+                name: "deleteRow",
+                title: "Delete Row",
+                icon: "Delete-row",
+                action: "command",
+                command: "deleteRow",
+                canExecute: editor => editor.can().deleteRow()
+            },
+            {
+                name: "addColumnAfter",
+                title: "Add Column After",
+                icon: "Insert-column-after",
+                action: "command",
+                command: "addColumnAfter",
+                canExecute: editor => editor.can().addColumnAfter()
+            },
+            {
+                name: "addColumnBefore",
+                title: "Add Column Before",
+                icon: "Insert-column-before",
+                action: "command",
+                command: "addColumnBefore",
+                canExecute: editor => editor.can().addColumnBefore()
+            },
+            {
+                name: "deleteColumn",
+                title: "Delete Column",
+                icon: "Delete-column",
+                action: "command",
+                command: "deleteColumn",
+                canExecute: editor => editor.can().deleteColumn()
+            }
+        ]
+    }
+];
+
+// Toolbar group custom configuration interface
+export interface ToolbarGroupsConfig {
+    history?: boolean;
+    fontStyle?: boolean;
+    fontScript?: boolean;
+    list?: boolean;
+    indent?: boolean;
+    embed?: boolean;
+    align?: boolean;
+    code?: boolean;
+    fontColor?: boolean;
+    header?: boolean;
+    view?: boolean;
+    remove?: boolean;
+    tableBetter?: boolean;
+}
+
+// Mapping from CtItemType to button names
+const CT_ITEM_TO_BUTTON_MAP: Record<CtItemTypeEnum, string | null> = {
+    separator: null, // Special case
+    undo: "undo",
+    redo: "redo",
+    bold: "bold",
+    italic: "italic",
+    underline: "underline",
+    strike: "strike",
+    superScript: "superscript",
+    subScript: "subscript",
+    orderedList: "orderedList",
+    bulletList: "bulletList",
+    lowerAlphaList: null, // Not directly supported in TipTap
+    checkList: "taskList",
+    minIndent: "decreaseIndent",
+    plusIndent: "increaseIndent",
+    direction: "textDirection",
+    link: "insertLink",
+    image: "insertImage",
+    video: "insertVideo",
+    formula: null, // Not implemented in TipTap
+    blockquote: "blockquote",
+    code: "code",
+    codeBlock: "codeBlock",
+    viewCode: "codeView",
+    leftAlign: "leftAlign",
+    centerAlign: "centerAlign",
+    rightAlign: "rightAlign",
+    justifyAlign: "justifyAlign",
+    font: "fontFamily",
+    size: "fontSize",
+    color: "textColor",
+    background: "backgroundColor",
+    header: "header",
+    fullscreen: "fullscreen",
+    clean: "clearFormatting",
+    tableBetter: "insertTable"
+};
+
+// Find button config by name across all toolbar groups
+function findButtonByName(buttonName: string): ToolbarButtonConfig | null {
+    for (const group of TOOLBAR_GROUPS) {
+        const button = group.buttons.find(b => b.name === buttonName);
+        if (button) {
+            return button;
+        }
+    }
+    return null;
+}
+
+/**
+ * Build advanced custom toolbar from CtItemType list, optionally enhanced with custom fonts
+ * @param advancedConfig - Advanced toolbar configuration
+ * @param customFonts - Optional user-provided custom fonts to add to font family dropdown
+ * @returns Built and enhanced toolbar groups
+ */
+export function buildAdvancedToolbar(advancedConfig: AdvancedConfigType[]): ToolbarGroupConfig[] {
+    const groups: ToolbarGroupConfig[] = [];
+    let currentGroup: ToolbarButtonConfig[] = [];
+
+    for (const item of advancedConfig) {
+        if (item.ctItemType === "separator") {
+            // Create a new group when separator is encountered
+            if (currentGroup.length > 0) {
+                groups.push({
+                    name: `custom-group-${groups.length}`,
+                    presetValue: 1,
+                    buttons: currentGroup
+                });
+                currentGroup = [];
+            }
+        } else {
+            // Map CtItemType to button name and find the button config
+            const buttonName = CT_ITEM_TO_BUTTON_MAP[item.ctItemType];
+            if (buttonName) {
+                const button = findButtonByName(buttonName);
+                if (button) {
+                    // Avoid duplicate buttons in the same group
+                    if (!currentGroup.find(b => b.name === button.name)) {
+                        currentGroup.push(button);
+                    }
+                }
+            }
+        }
+    }
+
+    // Add remaining buttons as final group
+    if (currentGroup.length > 0) {
+        groups.push({
+            name: `custom-group-${groups.length}`,
+            presetValue: 1,
+            buttons: currentGroup
+        });
+    }
+
+    return groups;
+}
+
+/**
+ * Enhances toolbar groups by merging custom fonts into the fontFamilySelect dropdown
+ * @param groups - Toolbar groups to enhance
+ * @param customFonts - User-provided custom fonts to add
+ * @returns Enhanced toolbar groups with merged and sorted fonts
+ */
+function enhancedToolbarGroups(groups: ToolbarGroupConfig[], customFonts?: CustomFontsType[]): ToolbarGroupConfig[] {
+    // Enhance with custom fonts if provided
+    if (!customFonts || customFonts.length === 0) {
+        return groups;
+    }
+    // Map over groups and enhance fontFamilySelect button
+    return groups.map(group => ({
+        ...group,
+        buttons: group.buttons.map(button => {
+            switch (button.name) {
+                case "fontFamily":
+                    return AddCustomFontsToFontFamilyDropdown(button, customFonts);
+                default:
+                    return button;
+            }
+        })
+    }));
+}
+
+/**
+ * Filter toolbar groups based on preset or custom configuration, and optionally enhance with custom fonts
+ * @param preset - Toolbar preset (basic, standard, full, custom)
+ * @param toolbarConfig - Toolbar configuration mode
+ * @param customConfig - Custom toolbar group configuration
+ * @param advancedConfig - Advanced toolbar configuration
+ * @param customFonts - Optional user-provided custom fonts to add to font family dropdown
+ * @returns Filtered and enhanced toolbar groups
+ */
+export function getFilteredToolbarGroups(
+    preset: PresetEnum,
+    toolbarConfig?: ToolbarConfigEnum,
+    customConfig?: ToolbarGroupsConfig,
+    advancedConfig?: AdvancedConfigType[],
+    customFonts?: CustomFontsType[]
+): ToolbarGroupConfig[] {
+    let filteredGroups: ToolbarGroupConfig[];
+
+    if (preset === "custom") {
+        // Advanced mode: build custom toolbar from advancedConfig list
+        if (toolbarConfig === "advanced" && advancedConfig && advancedConfig.length > 0) {
+            filteredGroups = buildAdvancedToolbar(advancedConfig);
+        } else {
+            // Basic mode: filter by individual boolean props
+            filteredGroups = TOOLBAR_GROUPS.filter(group => {
+                const key = group.name as keyof ToolbarGroupsConfig;
+                return customConfig?.[key] !== false;
+            });
+        }
+    } else {
+        // Filter by presetValue (groups without presetValue are always included)
+        const maxPresetValue = preset === "basic" ? 1 : preset === "standard" ? 2 : 3;
+        filteredGroups = TOOLBAR_GROUPS.filter(group => !group.presetValue || group.presetValue <= maxPresetValue);
+    }
+
+    return enhancedToolbarGroups(filteredGroups, customFonts);
+}
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
new file mode 100644
index 0000000000..0567729a06
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx
@@ -0,0 +1,31 @@
+import { ReactElement } from "react";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+
+export function CodeViewToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+    const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
+
+    const handleToggle = (): void => {
+        if (!editor) return;
+
+        if (!codeViewState.isCodeView) {
+            // Switching to code view - show HTML
+            const html = editor.getHTML();
+            codeViewDispatch({ type: "ENTER_CODE_VIEW", html });
+        } else {
+            // Switching back to editor - show confirmation
+            codeViewDispatch({ type: "EXIT_CODE_VIEW_REQUEST" });
+        }
+    };
+
+    return (
+        <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/ColorPicker.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.scss
new file mode 100644
index 0000000000..862db704bd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.scss
@@ -0,0 +1,9 @@
+.color-picker-dropdown {
+    background: white;
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 8px;
+    z-index: 10000;
+    width: max-content;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx
new file mode 100644
index 0000000000..807e697763
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx
@@ -0,0 +1,70 @@
+import Compact from "@uiw/react-color-compact";
+import { ReactElement, useState, useRef, useContext } from "react";
+import "./ColorPicker.scss";
+import { useCurrentEditor } from "../../EditorContext";
+import { colorPickerHelpers } from "../helpers/colorPickerHelpers";
+import { useDropdown } from "../hooks/useDropdown";
+import { ColorPickerCommand, ToolbarButtonConfig, ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+export interface ColorPickerProps {
+    defaultColor?: string;
+    onColorChange: (color: string) => void;
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+}
+
+export function ColorPicker({
+    defaultColor = "#000000",
+    onColorChange,
+    onClose,
+    referenceElement
+}: ColorPickerProps): ReactElement {
+    const [color, setColor] = useState(defaultColor);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: true,
+        onClose,
+        referenceElement
+    });
+
+    const handleColorChange = (newColor: { hex: string }): void => {
+        setColor(newColor.hex);
+        onColorChange(newColor.hex);
+    };
+
+    return (
+        <div ref={refs.setFloating} className="color-picker-dropdown" style={floatingStyles}>
+            <Compact color={color} onChange={handleColorChange} />
+        </div>
+    );
+}
+
+export function ColorPickerToolbarButton({ config }: { config: ToolbarButtonConfig }): ReactElement {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { editor } = useCurrentEditor();
+    const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+        ToolbarContext
+    ) as ToolbarContextType;
+    const pickerType = config.command as ColorPickerCommand;
+    const isPickerOpen = activeDropdown === pickerType;
+
+    return (
+        <div style={{ position: "relative" }}>
+            <ToolbarDefaultButton
+                ref={buttonRef}
+                onClick={() => handleDropdownToggle(pickerType)}
+                icon={config.icon}
+                title={config.title}
+            />
+            {isPickerOpen && editor && (
+                <ColorPicker
+                    defaultColor={colorPickerHelpers.getDefaultColor(pickerType)}
+                    onColorChange={color => colorPickerHelpers.handleColorChange(editor, pickerType, color)}
+                    onClose={handleDropdownClose}
+                    referenceElement={buttonRef.current}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss
new file mode 100644
index 0000000000..42eae8dbc3
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss
@@ -0,0 +1,119 @@
+.configuration-dropdown {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    min-width: 240px;
+    max-width: 280px;
+    z-index: 1000;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.configuration-section {
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.configuration-label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.configuration-select {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 13px;
+    background: white;
+    cursor: pointer;
+    transition: border-color 0.2s;
+
+    &:hover {
+        border-color: #999;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: #0078d4;
+        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+    }
+}
+
+.configuration-number-input {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.configuration-input {
+    flex: 1;
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 13px;
+    background: white;
+    transition: border-color 0.2s;
+    min-width: 0;
+
+    &::placeholder {
+        color: #999;
+        font-style: italic;
+    }
+
+    &:hover {
+        border-color: #999;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: #0078d4;
+        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+    }
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    &[type="number"] {
+        -moz-appearance: textfield;
+    }
+}
+
+.configuration-unit {
+    font-size: 12px;
+    color: #666;
+    white-space: nowrap;
+}
+
+.configuration-clear-button {
+    padding: 4px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+    font-size: 16px;
+    line-height: 1;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+        background: #f5f5f5;
+        border-color: #999;
+        color: #333;
+    }
+
+    &:active {
+        background: #e5e5e5;
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx
new file mode 100644
index 0000000000..d8515c3147
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx
@@ -0,0 +1,137 @@
+import Compact from "@uiw/react-color-compact";
+import { ReactElement, useState, useRef } from "react";
+import "./ConfigurationDropdown.scss";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+export interface ConfigurationSection {
+    id: string;
+    label: string;
+    type: "colorPicker" | "dropdown" | "numberInput";
+    getCurrentValue?: () => string | number | null;
+    onChange: (value: string) => void;
+    options?: Array<{ value: string; label: string }>;
+    defaultColor?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    unit?: string;
+}
+
+export interface ConfigurationDropdownConfig {
+    sections: ConfigurationSection[];
+}
+
+export function ConfigurationDropdown({ config }: BaseToolbarButtonProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const [isOpen, setIsOpen] = useState(false);
+    const [numberInputValues, setNumberInputValues] = useState<Record<string, string>>({});
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen,
+        onClose: () => setIsOpen(false),
+        referenceElement: buttonRef.current
+    });
+
+    if (!editor || !config.configurationSections) {
+        return <></>;
+    }
+
+    const sections = config.configurationSections;
+
+    return (
+        <div style={{ position: "relative" }}>
+            <ToolbarDefaultButton
+                ref={buttonRef}
+                onClick={() => setIsOpen(!isOpen)}
+                icon={config.icon}
+                title={config.title}
+            />
+            {isOpen && (
+                <div ref={refs.setFloating} className="configuration-dropdown" style={floatingStyles}>
+                    {sections.map(section => {
+                        const currentValue = section.getCurrentValue ? section.getCurrentValue() : null;
+
+                        return (
+                            <div key={section.id} className="configuration-section">
+                                <label className="configuration-label">{section.label}</label>
+                                {section.type === "colorPicker" && (
+                                    <Compact
+                                        color={(currentValue as string) || section.defaultColor || "#000000"}
+                                        onChange={(color: { hex: string }) => {
+                                            section.onChange(color.hex);
+                                        }}
+                                    />
+                                )}
+                                {section.type === "dropdown" && section.options && (
+                                    <select
+                                        className="configuration-select"
+                                        value={(currentValue as string) || ""}
+                                        onChange={e => section.onChange(e.target.value)}
+                                    >
+                                        {section.options.map(option => (
+                                            <option key={option.value} value={option.value}>
+                                                {option.label}
+                                            </option>
+                                        ))}
+                                    </select>
+                                )}
+                                {section.type === "numberInput" && (
+                                    <div className="configuration-number-input">
+                                        <input
+                                            type="number"
+                                            className="configuration-input"
+                                            min={section.min}
+                                            max={section.max}
+                                            step={section.step || 1}
+                                            placeholder={section.placeholder || ""}
+                                            value={
+                                                numberInputValues[section.id] !== undefined
+                                                    ? numberInputValues[section.id]
+                                                    : (currentValue ?? "")
+                                            }
+                                            onChange={e => {
+                                                const value = e.target.value;
+                                                setNumberInputValues(prev => ({ ...prev, [section.id]: value }));
+                                                section.onChange(value);
+                                            }}
+                                            onBlur={() => {
+                                                setNumberInputValues(prev => {
+                                                    const next = { ...prev };
+                                                    delete next[section.id];
+                                                    return next;
+                                                });
+                                            }}
+                                        />
+                                        {section.unit && <span className="configuration-unit">{section.unit}</span>}
+                                        {currentValue !== null && currentValue !== "" && (
+                                            <button
+                                                type="button"
+                                                className="configuration-clear-button"
+                                                onClick={() => {
+                                                    setNumberInputValues(prev => {
+                                                        const next = { ...prev };
+                                                        delete next[section.id];
+                                                        return next;
+                                                    });
+                                                    section.onChange("");
+                                                }}
+                                                title="Clear (auto width)"
+                                            >
+                                                ×
+                                            </button>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}
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
new file mode 100644
index 0000000000..b55845af5d
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx
@@ -0,0 +1,42 @@
+import { ReactElement, useRef, useEffect } from "react";
+import { ConfirmDialogProps } from "../helpers/toolbarTypes";
+import "./Dialog.scss";
+
+export function ConfirmDialog({
+    title,
+    message,
+    confirmLabel = "Save",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel
+}: ConfirmDialogProps): ReactElement {
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent): void => {
+            if (dialogRef.current && !dialogRef.current.contains(event.target as Node)) {
+                onCancel();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [onCancel]);
+
+    return (
+        <div className="confirm-dialog-overlay">
+            <div ref={dialogRef} className="toolbar-dialog confirm-dialog">
+                {title && <h3>{title}</h3>}
+                {message && <p className="confirm-message">{message}</p>}
+                <div className="dialog-actions">
+                    <button type="button" onClick={onCancel}>
+                        {cancelLabel}
+                    </button>
+                    <button type="button" className="btn-primary" onClick={onConfirm}>
+                        {confirmLabel}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
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
new file mode 100644
index 0000000000..8c7dad5419
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss
@@ -0,0 +1,462 @@
+.toolbar-dialog,
+.link-dialog {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 320px;
+    max-width: 400px;
+
+    h3 {
+        padding: 8px 16px;
+        font-size: 16px;
+        font-weight: 600;
+        border-bottom: 1px solid black;
+    }
+
+    .dialog-mode-selector {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #eee;
+
+        .mode-option {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            input[type="radio"] {
+                margin-right: 6px;
+                cursor: pointer;
+            }
+
+            label {
+                cursor: pointer;
+                font-size: 13px;
+                font-weight: 500;
+                margin-bottom: 0;
+                user-select: none;
+                color: #333;
+            }
+        }
+    }
+
+    .dialog-dropzone {
+        border: 1.5px dashed #ddd;
+        border-radius: 4px;
+        padding: 24px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        background: #fafafa;
+        margin-bottom: 12px;
+
+        &:hover {
+            border-color: #0078d4;
+            background: #f5f9ff;
+        }
+
+        &.drag-active {
+            border-color: #0078d4;
+            background-color: #e6f2ff;
+            border-style: solid;
+        }
+
+        &.drag-reject {
+            border-color: #d13438;
+            background-color: #fff5f5;
+        }
+
+        .dropzone-icon {
+            font-size: 32px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        .dropzone-text {
+            font-size: 13px;
+            color: #666;
+        }
+
+        .dropzone-error {
+            margin-top: 8px;
+            font-size: 12px;
+            color: #d13438;
+        }
+    }
+
+    .dialog-preview {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        margin-bottom: 12px;
+
+        .preview-thumbnail {
+            width: 56px;
+            height: 56px;
+            object-fit: cover;
+            border-radius: 3px;
+            flex-shrink: 0;
+        }
+
+        .preview-info {
+            flex: 1;
+            min-width: 0;
+
+            .preview-name {
+                font-size: 13px;
+                font-weight: 500;
+                color: #333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-bottom: 2px;
+            }
+
+            .preview-size {
+                font-size: 11px;
+                color: #999;
+            }
+        }
+
+        .preview-clear {
+            width: 24px;
+            height: 24px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            font-size: 20px;
+            color: #999;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 3px;
+
+            &:hover {
+                color: #d13438;
+                background: #f5f5f5;
+            }
+        }
+    }
+
+    .image-dialog-entity {
+        margin-bottom: 12px;
+        padding: 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: #fafafa;
+        min-height: 100px;
+    }
+
+    .dialog-field {
+        padding: 8px 16px;
+
+        label {
+            display: block;
+            margin-bottom: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #333;
+
+            span {
+                font-weight: normal;
+            }
+        }
+
+        input[type="text"],
+        input[type="number"],
+        input[type="url"] {
+            width: 100%;
+            padding: 6px 8px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            font-size: 13px;
+            box-sizing: border-box;
+
+            &:focus {
+                outline: none;
+                border-color: #0078d4;
+            }
+        }
+
+        input[type="file"] {
+            font-size: 13px;
+        }
+    }
+
+    .dialog-field-row {
+        display: flex;
+        gap: 12px;
+
+        .dialog-field {
+            flex: 1;
+        }
+    }
+
+    .dialog-tabs,
+    .dialog-actions {
+        button {
+            width: fit-content;
+            height: 32px;
+        }
+    }
+
+    .dialog-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 8px 16px;
+        border-top: 1px solid black;
+
+        button {
+            padding: 6px 16px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            font-size: 13px;
+            cursor: pointer;
+            background: white;
+
+            &[type="submit"] {
+                background: #0078d4;
+                color: white;
+                border-color: #0078d4;
+
+                &:hover:not(:disabled) {
+                    background: #106ebe;
+                }
+
+                &:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
+            }
+
+            &[type="button"] {
+                &:hover {
+                    background: #f3f3f3;
+                }
+            }
+        }
+    }
+
+    .dialog-radio-group {
+        label {
+            display: flex;
+            gap: 4px;
+        }
+    }
+
+    .confirm-message {
+        padding: 16px;
+        font-size: 14px;
+        color: #666;
+        line-height: 1.5;
+    }
+
+    .btn-primary {
+        background: #0078d4 !important;
+        color: white !important;
+        border-color: #0078d4 !important;
+
+        &:hover {
+            background: #106ebe !important;
+        }
+    }
+
+    // Form styles for link dialog
+    .form-group {
+        margin-bottom: 16px;
+
+        .form-label {
+            display: block;
+            font-size: 13px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: #333;
+
+            .required {
+                color: #d13438;
+                margin-left: 2px;
+            }
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 8px 10px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            font-size: 13px;
+            box-sizing: border-box;
+
+            &:focus {
+                outline: none;
+                border-color: #0078d4;
+                box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
+            }
+        }
+
+        .form-hint {
+            display: block;
+            font-size: 11px;
+            color: #666;
+            margin-top: 4px;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 16px;
+
+            .radio-label {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                font-size: 13px;
+                color: #333;
+
+                input[type="radio"] {
+                    margin-right: 6px;
+                    cursor: pointer;
+                }
+
+                span {
+                    user-select: none;
+                }
+            }
+        }
+    }
+}
+
+.confirm-dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+
+    .confirm-dialog {
+        max-width: 400px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+}
+
+// Video dialog and Image dialog enhancements
+.video-dialog,
+.image-dialog {
+    min-width: 500px;
+
+    .dialog-tabs {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 16px;
+        border-bottom: 1px solid #ddd;
+
+        button {
+            padding: 8px 16px;
+            background: none;
+            border: none;
+            border-bottom: 2px solid transparent;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            color: #666;
+            transition: all 0.2s;
+
+            &:hover {
+                background: #f5f5f5;
+                color: #333;
+            }
+
+            &.active {
+                border-bottom-color: #0078d4;
+                color: #0078d4;
+                font-weight: 600;
+            }
+        }
+    }
+
+    .tab-content {
+        textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            font-family: "Courier New", monospace;
+            font-size: 12px;
+            resize: vertical;
+            box-sizing: border-box;
+
+            &:focus {
+                outline: none;
+                border-color: #0078d4;
+            }
+        }
+    }
+
+    .detection-status {
+        padding: 8px 12px;
+        margin: 12px 0;
+        border-radius: 4px;
+        font-size: 13px;
+
+        &.success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+
+        &.error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+
+        small {
+            opacity: 0.8;
+            font-size: 11px;
+        }
+    }
+
+    .dialog-info {
+        padding: 8px 12px;
+        margin: 12px 0;
+        background: #d1ecf1;
+        color: #0c5460;
+        border: 1px solid #bee5eb;
+        border-radius: 4px;
+        font-size: 12px;
+
+        &.warning {
+            background: #fff3cd;
+            color: #856404;
+            border-color: #ffeeba;
+        }
+    }
+}
+
+// Generic embed wrapper styling
+.generic-embed-wrapper {
+    position: relative;
+    width: fit-content;
+
+    iframe {
+        display: block;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+
+    &.ProseMirror-selectednode {
+        outline: 2px solid var(--brand-primary, #0078d4);
+        outline-offset: 2px;
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx
new file mode 100644
index 0000000000..e426705a7f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx
@@ -0,0 +1,46 @@
+import { ReactElement, useContext, useRef } from "react";
+import { DialogToolbarButtonProps } from "../helpers/toolbarTypes";
+import { DialogCommand, ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { ImageDialog } from "./ImageDialog";
+import { LinkDialog } from "./LinkDialog";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+import { VideoDialog } from "./VideoDialog";
+
+export function DialogToolbarButton({ config, imageSourceContent }: DialogToolbarButtonProps): ReactElement {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+        ToolbarContext
+    ) as ToolbarContextType;
+    const dropdownType = config.command as DialogCommand;
+    const isDropdownOpen = activeDropdown === dropdownType;
+
+    return (
+        <div style={{ position: "relative" }}>
+            <ToolbarDefaultButton
+                ref={buttonRef}
+                onClick={() => handleDropdownToggle(dropdownType)}
+                icon={config.icon}
+                title={config.title}
+            />
+            {isDropdownOpen &&
+                (() => {
+                    switch (dropdownType) {
+                        case "insertImage":
+                            return (
+                                <ImageDialog
+                                    onClose={handleDropdownClose}
+                                    referenceElement={buttonRef.current}
+                                    imageSourceContent={imageSourceContent}
+                                />
+                            );
+                        case "insertVideo":
+                            return <VideoDialog onClose={handleDropdownClose} referenceElement={buttonRef.current} />;
+                        case "insertLink":
+                            return <LinkDialog onClose={handleDropdownClose} referenceElement={buttonRef.current} />;
+                        default:
+                            return null;
+                    }
+                })()}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx
new file mode 100644
index 0000000000..091ed12031
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx
@@ -0,0 +1,312 @@
+import { ReactElement, useState, useRef, useEffect, FormEvent } from "react";
+import { useDropzone } from "react-dropzone";
+import { useCurrentEditor } from "../../EditorContext";
+import { ImageDialogProps, EntityImage, ImageSourceMode, MAX_FILE_SIZE } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const validateFile = (file: File): string | null => {
+    if (file.size > MAX_FILE_SIZE) {
+        return `File must be smaller than 5MB (current: ${formatFileSize(file.size)})`;
+    }
+    if (!file.type.startsWith("image/")) {
+        return "Only image files are allowed";
+    }
+    return null;
+};
+
+export function ImageDialog({ onClose, referenceElement, imageSourceContent }: ImageDialogProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const [activeTab, setActiveTab] = useState<ImageSourceMode>("url");
+    const [src, setSrc] = useState("");
+    const [alt, setAlt] = useState("");
+    const [title, setTitle] = useState("");
+    const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+    const [selectedEntityImage, setSelectedEntityImage] = useState<EntityImage | null>(null);
+    const [dragError, setDragError] = useState<string>("");
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: true,
+        onClose,
+        referenceElement
+    });
+
+    const handleTabChange = (newTab: ImageSourceMode): void => {
+        setActiveTab(newTab);
+        setDragError("");
+
+        if (newTab === "url") {
+            // Switching to URL mode - clear upload and entity data
+            setUploadedFile(null);
+            setSelectedEntityImage(null);
+            if (src && (src.startsWith("data:") || selectedEntityImage)) {
+                setSrc("");
+            }
+        } else if (newTab === "upload") {
+            // Switching to Upload mode - clear URL and entity data
+            setSelectedEntityImage(null);
+            if (src && !src.startsWith("data:")) {
+                setSrc("");
+            }
+        } else if (newTab === "entity") {
+            // Switching to Entity mode - clear upload and URL data
+            setUploadedFile(null);
+            if (src && (src.startsWith("data:") || !selectedEntityImage)) {
+                setSrc("");
+            }
+        }
+    };
+
+    const handleFileDrop = (acceptedFiles: File[]): void => {
+        setDragError("");
+
+        if (acceptedFiles.length === 0) {
+            return;
+        }
+
+        const file = acceptedFiles[0];
+        const error = validateFile(file);
+
+        if (error) {
+            setDragError(error);
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = () => {
+            const base64 = reader.result as string;
+            setSrc(base64);
+            setUploadedFile(file);
+        };
+        reader.onerror = () => {
+            setDragError("Failed to read file");
+        };
+        reader.readAsDataURL(file);
+    };
+
+    const handleClearFile = (): void => {
+        setSrc("");
+        setUploadedFile(null);
+        setDragError("");
+    };
+
+    const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+        onDrop: handleFileDrop,
+        accept: {
+            "image/*": [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp"]
+        },
+        maxFiles: 1,
+        maxSize: MAX_FILE_SIZE,
+        disabled: activeTab !== "upload",
+        multiple: false
+    });
+
+    const handleSubmit = (e: FormEvent): void => {
+        e.preventDefault();
+        if (!editor || !src.trim()) return;
+
+        const imageAttrs: any = {
+            src: src.trim(),
+            alt: alt.trim() || undefined,
+            title: title.trim() || undefined
+        };
+
+        // Add entity attributes if this is a database image
+        if (selectedEntityImage?.id) {
+            imageAttrs.dataEntity = true;
+            imageAttrs.dataEntityId = selectedEntityImage.id;
+        }
+
+        editor.chain().focus().setImage(imageAttrs).run();
+        onClose();
+    };
+
+    const handleImageSelected = (event: CustomEvent<EntityImage>): void => {
+        const imageData = event.detail;
+
+        // Set the selected entity image
+        setSelectedEntityImage(imageData);
+
+        // Use the URL for display, but we'll pass the ID for storage
+        setSrc(imageData.url);
+
+        // Switch to entity tab if not already
+        if (activeTab !== "entity") {
+            setActiveTab("entity");
+        }
+    };
+
+    useEffect(() => {
+        // event listener for image selection triggered from custom widgets JS Action
+        const imgRef = dialogRef.current;
+
+        if (imgRef !== null) {
+            imgRef.addEventListener("imageSelected", handleImageSelected);
+        }
+        return () => {
+            imgRef?.removeEventListener("imageSelected", handleImageSelected);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dialogRef.current]);
+
+    return (
+        <div ref={refs.setFloating} style={{ ...floatingStyles, zIndex: 1000 }}>
+            <div ref={dialogRef} className="toolbar-dialog image-dialog">
+                <form onSubmit={handleSubmit}>
+                    <h3>Insert Image</h3>
+
+                    {/* Tab Navigation */}
+                    <div className="dialog-tabs">
+                        <button
+                            type="button"
+                            className={activeTab === "url" ? "active" : ""}
+                            onClick={() => handleTabChange("url")}
+                        >
+                            URL
+                        </button>
+                        <button
+                            type="button"
+                            className={activeTab === "upload" ? "active" : ""}
+                            onClick={() => handleTabChange("upload")}
+                        >
+                            Upload
+                        </button>
+                        <button
+                            type="button"
+                            className={activeTab === "entity" ? "active" : ""}
+                            onClick={() => handleTabChange("entity")}
+                        >
+                            Media Library
+                        </button>
+                    </div>
+
+                    {/* URL Tab Content */}
+                    {activeTab === "url" && (
+                        <div className="tab-content">
+                            <div className="dialog-field">
+                                <label htmlFor="image-src">Image URL</label>
+                                <input
+                                    id="image-src"
+                                    type="text"
+                                    value={src}
+                                    onChange={e => setSrc(e.target.value)}
+                                    placeholder="https://example.com/image.jpg"
+                                    autoFocus
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Upload Tab Content */}
+                    {activeTab === "upload" && (
+                        <div className="tab-content">
+                            <div
+                                {...getRootProps()}
+                                className={`dialog-dropzone ${isDragActive ? "drag-active" : ""} ${
+                                    isDragReject ? "drag-reject" : ""
+                                }`}
+                            >
+                                <input {...getInputProps()} />
+                                <div className="dropzone-icon">📁</div>
+                                <div className="dropzone-text">
+                                    {isDragActive ? "Drop image here..." : "Drag & drop image here, or click to browse"}
+                                </div>
+                                {dragError && <div className="dropzone-error">{dragError}</div>}
+                            </div>
+
+                            {/* Preview - Only when file is uploaded */}
+                            {uploadedFile && src && (
+                                <div className="dialog-preview">
+                                    <img src={src} alt="Preview" className="preview-thumbnail" />
+                                    <div className="preview-info">
+                                        <div className="preview-name">{uploadedFile.name}</div>
+                                        <div className="preview-size">{formatFileSize(uploadedFile.size)}</div>
+                                    </div>
+                                    <button type="button" className="preview-clear" onClick={handleClearFile}>
+                                        ×
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Database Tab Content */}
+                    {activeTab === "entity" && (
+                        <div className="tab-content">
+                            {/* Mendix widget for entity selection */}
+                            <div className="image-dialog-entity">{imageSourceContent}</div>
+
+                            {/* Preview - Only when entity image is selected */}
+                            {selectedEntityImage && src && (
+                                <div className="dialog-preview">
+                                    <img
+                                        src={selectedEntityImage.thumbnailUrl || src}
+                                        alt="Preview"
+                                        className="preview-thumbnail"
+                                    />
+                                    <div className="preview-info">
+                                        <div className="preview-name">Image from database</div>
+                                        <div className="preview-size">
+                                            ID: {selectedEntityImage.id.substring(0, 8)}...
+                                        </div>
+                                    </div>
+                                    <button
+                                        type="button"
+                                        className="preview-clear"
+                                        onClick={() => {
+                                            setSelectedEntityImage(null);
+                                            setSrc("");
+                                        }}
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Alt Text - Always visible */}
+                    <div className="dialog-field">
+                        <label htmlFor="image-alt">Alt text (optional)</label>
+                        <input
+                            id="image-alt"
+                            type="text"
+                            value={alt}
+                            onChange={e => setAlt(e.target.value)}
+                            placeholder="Description of the image"
+                        />
+                    </div>
+
+                    {/* Title - Always visible */}
+                    <div className="dialog-field">
+                        <label htmlFor="image-title">Title (optional)</label>
+                        <input
+                            id="image-title"
+                            type="text"
+                            value={title}
+                            onChange={e => setTitle(e.target.value)}
+                            placeholder="Image title"
+                        />
+                    </div>
+
+                    {/* Action Buttons */}
+                    <div className="dialog-actions">
+                        <button type="button" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button type="submit" disabled={!src.trim()}>
+                            Insert
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx
new file mode 100644
index 0000000000..5f002bbc3b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx
@@ -0,0 +1,162 @@
+import { ReactElement, useState, FormEvent, useRef, useEffect } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { LinkDialogProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+export function LinkDialog({ onClose, referenceElement }: LinkDialogProps): ReactElement {
+    const { editor } = useCurrentEditor();
+
+    // Get initial values from editor state
+    const existingLink = editor?.getAttributes("link") || {};
+    const { from, to } = editor?.state.selection || { from: 0, to: 0 };
+    const selectedText = editor?.state.doc.textBetween(from, to, " ") || "";
+
+    const [url, setUrl] = useState(existingLink.href || "");
+    const [text, setText] = useState(selectedText);
+    const [title, setTitle] = useState(existingLink.title || "");
+    const [target, setTarget] = useState<"_self" | "_blank">(
+        (existingLink.target === "_blank" ? "_blank" : "_self") as "_self" | "_blank"
+    );
+
+    const urlInputRef = useRef<HTMLInputElement>(null);
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: true,
+        onClose,
+        referenceElement
+    });
+
+    useEffect(() => {
+        // Focus URL input when dialog opens
+        urlInputRef.current?.focus();
+    }, []);
+
+    const handleSubmit = (e: FormEvent): void => {
+        e.preventDefault();
+        if (!editor || !url.trim()) return;
+
+        const urlValue = url.trim();
+        const textValue = text.trim();
+        const titleValue = title.trim() || undefined;
+
+        if (selectedText) {
+            // Has existing selection - apply link to it (or replace with new text if provided)
+            if (textValue && textValue !== selectedText) {
+                // Replace selection with new text and apply link
+                editor
+                    .chain()
+                    .focus()
+                    .deleteSelection()
+                    .insertContent({
+                        type: "text",
+                        text: textValue,
+                        marks: [{ type: "link", attrs: { href: urlValue, title: titleValue, target } }]
+                    })
+                    .run();
+            } else {
+                // Apply link to existing selection
+                editor.chain().focus().setLink({ href: urlValue, title: titleValue, target }).run();
+            }
+        } else {
+            // No selection - insert new text with link
+            const linkText = textValue || urlValue;
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                    type: "text",
+                    text: linkText,
+                    marks: [{ type: "link", attrs: { href: urlValue, title: titleValue, target } }]
+                })
+                .run();
+        }
+
+        onClose();
+    };
+
+    return (
+        <div ref={refs.setFloating} style={{ ...floatingStyles, zIndex: 1000 }}>
+            <div ref={dialogRef} className="toolbar-dialog">
+                <form onSubmit={handleSubmit}>
+                    <h3>{existingLink.href ? "Edit Link" : "Insert Link"}</h3>
+
+                    <div className="dialog-field">
+                        <label htmlFor="link-url">URL</label>
+                        <input
+                            ref={urlInputRef}
+                            id="link-url"
+                            type="text"
+                            value={url}
+                            onChange={e => setUrl(e.target.value)}
+                            placeholder="https://example.com"
+                            autoFocus
+                        />
+                    </div>
+
+                    <div className="dialog-field">
+                        <label htmlFor="link-text">
+                            Text <span>(optional)</span>
+                        </label>
+                        <input
+                            id="link-text"
+                            type="text"
+                            value={text}
+                            onChange={e => setText(e.target.value)}
+                            placeholder="Link text"
+                        />
+                    </div>
+
+                    <div className="dialog-field">
+                        <label htmlFor="link-title">
+                            Title <span>(optional)</span>
+                        </label>
+                        <input
+                            id="link-title"
+                            type="text"
+                            value={title}
+                            onChange={e => setTitle(e.target.value)}
+                            placeholder="Tooltip text"
+                        />
+                    </div>
+
+                    <div className="dialog-field">
+                        <label>Target</label>
+                        <div className="dialog-radio-group">
+                            <label>
+                                <input
+                                    type="radio"
+                                    name="target"
+                                    value="_self"
+                                    checked={target === "_self"}
+                                    onChange={e => setTarget(e.target.value as "_self")}
+                                />
+                                <span>Current window</span>
+                            </label>
+                            <label>
+                                <input
+                                    type="radio"
+                                    name="target"
+                                    value="_blank"
+                                    checked={target === "_blank"}
+                                    onChange={e => setTarget(e.target.value as "_blank")}
+                                />
+                                <span>New window</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="dialog-actions">
+                        <button type="button" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button type="submit" disabled={!url.trim()}>
+                            {existingLink.href ? "Update" : "Insert"}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx
new file mode 100644
index 0000000000..46e0a53ae8
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx
@@ -0,0 +1,30 @@
+import { useContext, useRef, ReactElement } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { TableGridSelector } from "./TableGridSelector";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+export function TableGridToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { editor } = useCurrentEditor();
+    const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+        ToolbarContext
+    ) as ToolbarContextType;
+    const dropdownType = "insertTable";
+    const isDropdownOpen = activeDropdown === dropdownType;
+
+    return (
+        <>
+            <ToolbarDefaultButton
+                ref={buttonRef}
+                onClick={() => handleDropdownToggle(dropdownType)}
+                icon={config.icon}
+                title={config.title}
+            />
+            {editor && isDropdownOpen && (
+                <TableGridSelector editor={editor} onClose={handleDropdownClose} referenceElement={buttonRef.current} />
+            )}
+        </>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.scss
new file mode 100644
index 0000000000..b5d836e621
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.scss
@@ -0,0 +1,49 @@
+.table-grid-selector {
+    --cell-size: 10px;
+    --grid-gap: 2px;
+    --max-cols: 10;
+    --max-rows: 10;
+
+    // Position is managed by Floating UI (via floatingStyles)
+    background: white;
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: var(--form-label-gutter, 8px);
+    z-index: 1000;
+    user-select: none;
+
+    .table-grid-label {
+        text-align: center;
+        font-size: 13px;
+        color: #333;
+        margin-top: var(--form-label-gutter, 8px);
+        font-weight: 500;
+        min-height: 18px;
+    }
+
+    .table-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--max-cols), var(--cell-size));
+        grid-template-rows: repeat(var(--max-rows), var(--cell-size));
+        gap: var(--grid-gap);
+        cursor: pointer;
+    }
+
+    .table-grid-cell {
+        width: var(--cell-size);
+        height: var(--cell-size);
+        border: 1px solid #d0d0d0;
+        background-color: white;
+        transition: all 0.1s ease;
+
+        &:hover {
+            border-color: var(--brand-primary, #264ae5);
+        }
+
+        &.selected {
+            background-color: var(--brand-primary, #264ae5);
+            border-color: var(--color-primary-dark, #1b34a0);
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.tsx
new file mode 100644
index 0000000000..bdcd6010f5
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGridSelector.tsx
@@ -0,0 +1,64 @@
+import { ReactElement, useState } from "react";
+import { TableGridSelectorProps, MAX_TABLE_ROWS, MAX_TABLE_COLS } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./TableGridSelector.scss";
+
+const MAX_ROWS = MAX_TABLE_ROWS;
+const MAX_COLS = MAX_TABLE_COLS;
+
+export function TableGridSelector({ editor, onClose, referenceElement }: TableGridSelectorProps): ReactElement {
+    const [hoveredCell, setHoveredCell] = useState({ row: 0, col: 0 });
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: true,
+        onClose,
+        referenceElement
+    });
+
+    const handleCellHover = (row: number, col: number): void => {
+        setHoveredCell({ row, col });
+    };
+
+    const handleMouseUp = (): void => {
+        if (hoveredCell.row > 0 && hoveredCell.col > 0) {
+            editor
+                .chain()
+                .focus()
+                .insertTable({
+                    rows: hoveredCell.row,
+                    cols: hoveredCell.col,
+                    withHeaderRow: true
+                })
+                .run();
+            onClose();
+        }
+    };
+
+    const renderGrid = (): ReactElement[] => {
+        const cells: ReactElement[] = [];
+
+        for (let row = 1; row <= MAX_ROWS; row++) {
+            for (let col = 1; col <= MAX_COLS; col++) {
+                const isSelected = row <= hoveredCell.row && col <= hoveredCell.col;
+                cells.push(
+                    <div
+                        key={`${row}-${col}`}
+                        className={`table-grid-cell ${isSelected ? "selected" : ""}`}
+                        onMouseEnter={() => handleCellHover(row, col)}
+                        onMouseUp={handleMouseUp}
+                    />
+                );
+            }
+        }
+
+        return cells;
+    };
+
+    const displayText = hoveredCell.row > 0 && hoveredCell.col > 0 ? `${hoveredCell.row} × ${hoveredCell.col}` : "";
+
+    return (
+        <div ref={refs.setFloating} style={floatingStyles} className="table-grid-selector">
+            <div className="table-grid">{renderGrid()}</div>
+            {displayText && <div className="table-grid-label">{displayText}</div>}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx
new file mode 100644
index 0000000000..6ff1511a68
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx
@@ -0,0 +1,109 @@
+import { ReactElement, useState, useEffect, KeyboardEvent } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+export function ToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const [, setUpdateTrigger] = useState(0);
+
+    // Force re-render when editor selection or content changes
+    useEffect(() => {
+        if (!editor) return;
+
+        const handleUpdate = (): void => {
+            setUpdateTrigger(prev => prev + 1);
+        };
+
+        editor.on("selectionUpdate", handleUpdate);
+        editor.on("transaction", handleUpdate);
+
+        return () => {
+            editor.off("selectionUpdate", handleUpdate);
+            editor.off("transaction", handleUpdate);
+        };
+    }, [editor]);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
+        if (!editor) return;
+
+        // Handle Tab on last toolbar button - return focus to editor
+        if (event.key === "Tab" && !event.shiftKey) {
+            const toolbar = event.currentTarget.closest(".tiptap-toolbar");
+            if (toolbar) {
+                const buttons = Array.from(toolbar.querySelectorAll<HTMLButtonElement>("button:not([disabled])"));
+                const currentIndex = buttons.indexOf(event.currentTarget);
+                const isLastButton = currentIndex === buttons.length - 1;
+
+                if (isLastButton) {
+                    event.preventDefault();
+                    editor.view.focus();
+                }
+            }
+        }
+    };
+
+    const handleClick = (): void => {
+        if (!editor) return;
+
+        switch (config.action) {
+            case "toggle":
+                if (config.command) {
+                    (editor.chain().focus() as any)[config.command]().run();
+                }
+                break;
+            case "command":
+                if (config.command) {
+                    if (config.attrs) {
+                        // Special handling for setFontFamily with fontValue
+                        if (config.command === "setFontFamily" && config.attrs.fontValue) {
+                            // New format: pass object with both fontFamily and fontValue
+                            (editor.chain().focus() as any)[config.command](config.attrs).run();
+                        } else {
+                            // Check if attrs has a single value to spread (e.g., setTextAlign("left"))
+                            const attrValues = Object.values(config.attrs);
+                            if (attrValues.length === 1 && typeof attrValues[0] === "string") {
+                                // Single string parameter commands (e.g., setTextAlign)
+                                (editor.chain().focus() as any)[config.command](attrValues[0]).run();
+                            } else {
+                                // Object parameter commands (e.g., toggleHeading({ level: 1 }))
+                                (editor.chain().focus() as any)[config.command](config.attrs).run();
+                            }
+                        }
+                    } else {
+                        (editor.chain().focus() as any)[config.command]().run();
+                    }
+                }
+                break;
+            case "heading":
+                if (config.command && config.attrs) {
+                    (editor.chain().focus() as any)[config.command](config.attrs).run();
+                }
+                break;
+            case "custom":
+                if (config.customAction) {
+                    config.customAction(editor);
+                }
+                break;
+        }
+    };
+
+    if (!editor) {
+        return <></>;
+    }
+
+    const isActive = config.isActive ? config.isActive(editor) : false;
+    const isDisabled = config.canExecute ? !config.canExecute(editor) : false;
+
+    return (
+        <ToolbarDefaultButton
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            disabled={isDisabled}
+            isActive={isActive}
+            icon={config.icon}
+            activeIcon={config.activeIcon}
+            title={config.title}
+        />
+    );
+}
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
new file mode 100644
index 0000000000..25f8de4283
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDefaultButton.tsx
@@ -0,0 +1,41 @@
+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;
+}
+
+/**
+ * Shared toolbar button. Renders the `<button>` element used by every rich text
+ * toolbar control. Defaults to an icon `<span>` child, composes the `icon-button`
+ * base class (overridable via `className`), and forwards its ref so floating
+ * dropdowns and pickers can anchor to it.
+ */
+export const ToolbarDefaultButton = forwardRef<HTMLButtonElement, ToolbarDefaultButtonProps>(
+    function ToolbarDefaultButton(
+        { 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}`} />}
+            </button>
+        );
+    }
+);
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
new file mode 100644
index 0000000000..cb17df7492
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx
@@ -0,0 +1,99 @@
+import { ReactElement, useState, useRef, useEffect } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import { ToolbarDropdownOption } from "../ToolbarConfig";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+export function ToolbarDropdown({ config }: BaseToolbarButtonProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const { dropdownOptions: options, title: label } = config;
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [, setUpdateTrigger] = useState(0);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen,
+        onClose: () => setIsOpen(false),
+        referenceElement: buttonRef.current
+    });
+
+    // Force re-render when editor selection or content changes
+    useEffect(() => {
+        if (!editor) return;
+
+        const handleUpdate = (): void => {
+            setUpdateTrigger(prev => prev + 1);
+        };
+
+        editor.on("selectionUpdate", handleUpdate);
+        editor.on("transaction", handleUpdate);
+
+        return () => {
+            editor.off("selectionUpdate", handleUpdate);
+            editor.off("transaction", handleUpdate);
+        };
+    }, [editor]);
+
+    const currentValue = config.getCurrentValue && editor ? config.getCurrentValue(editor) : undefined;
+
+    const handleSelect = (option: ToolbarDropdownOption): void => {
+        if (!editor) return;
+
+        if (option.attrs) {
+            // Special handling for setFontFamily with fontValue
+            if (option.command === "setFontFamily" && option.attrs.fontValue) {
+                // New format: pass object with both fontFamily and fontValue
+                (editor.chain().focus() as any)[option.command](option.attrs).run();
+            } else {
+                // Check if attrs has a single value to spread (e.g., setTextDirection("ltr"))
+                const attrValues = Object.values(option.attrs);
+                if (attrValues.length === 1 && typeof attrValues[0] === "string") {
+                    // Single string parameter commands (e.g., setTextDirection)
+                    (editor.chain().focus() as any)[option.command](attrValues[0]).run();
+                } else {
+                    // Object parameter commands (e.g., toggleHeading({ level: 1 }))
+                    (editor.chain().focus() as any)[option.command](option.attrs).run();
+                }
+            }
+        } else {
+            (editor.chain().focus() as any)[option.command]().run();
+        }
+        setIsOpen(false);
+    };
+
+    const getCurrentLabel = (): string => {
+        const current = options?.find(opt => opt.value === currentValue);
+        return current ? current.label : label || "Select...";
+    };
+
+    return (
+        <>
+            <ToolbarDefaultButton
+                ref={buttonRef}
+                onClick={() => setIsOpen(!isOpen)}
+                className={`toolbar-dropdown-button ${config.name}`}
+                title={config.title}
+            >
+                <span className="dropdown-label">{getCurrentLabel()}</span>
+                <span className="icons icon-Arrow-down dropdown-arrow" />
+            </ToolbarDefaultButton>
+            {isOpen && (
+                <div ref={refs.setFloating} style={floatingStyles} className="toolbar-dropdown-menu">
+                    {options?.map(option => (
+                        <ToolbarDefaultButton
+                            key={option.value}
+                            onClick={() => handleSelect(option)}
+                            data-value={option.value}
+                            className="toolbar-dropdown-item"
+                            isActive={currentValue === option.value}
+                        >
+                            {option.icon && <span className={`icons icon-${option.icon}`} />}
+                            <span>{option.label}</span>
+                        </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
new file mode 100644
index 0000000000..118a5ebb6f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarSplitButton.tsx
@@ -0,0 +1,191 @@
+import { ReactElement, useState, useRef, useEffect, KeyboardEvent } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { getIconForOrderedListStyle, OrderedListStyle } from "../helpers/listHelpers";
+import { useDropdown } from "../hooks/useDropdown";
+import { ToolbarButtonConfig, ToolbarDropdownOption } from "../ToolbarConfig";
+import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
+
+// Module-level sticky state for last-used ordered list style
+let lastOrderedListStyle: OrderedListStyle = "decimal";
+
+interface ToolbarSplitButtonProps {
+    config: ToolbarButtonConfig;
+}
+
+type FocusedPart = "main" | "dropdown";
+
+export function ToolbarSplitButton({ config }: ToolbarSplitButtonProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [, setUpdateTrigger] = useState(0);
+    const mainButtonRef = useRef<HTMLButtonElement>(null);
+    const dropdownButtonRef = useRef<HTMLButtonElement>(null);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: isDropdownOpen,
+        onClose: () => setIsDropdownOpen(false),
+        referenceElement: dropdownButtonRef.current
+    });
+
+    // Force re-render when editor selection or content changes
+    useEffect(() => {
+        if (!editor) return;
+
+        const handleUpdate = (): void => {
+            setUpdateTrigger(prev => prev + 1);
+        };
+
+        editor.on("selectionUpdate", handleUpdate);
+        editor.on("transaction", handleUpdate);
+
+        return () => {
+            editor.off("selectionUpdate", handleUpdate);
+            editor.off("transaction", handleUpdate);
+        };
+    }, [editor]);
+
+    if (!editor) {
+        return <></>;
+    }
+
+    const isActive = config.isActive ? config.isActive(editor) : false;
+
+    // Get current icon based on active state or sticky state
+    const getCurrentIcon = (): string => {
+        if (editor.isActive("orderedList")) {
+            const attrs = editor.getAttributes("orderedList");
+            const style = (attrs.listStyleType || "decimal") as OrderedListStyle;
+            return getIconForOrderedListStyle(style);
+        }
+        return getIconForOrderedListStyle(lastOrderedListStyle);
+    };
+
+    const currentIcon = getCurrentIcon();
+    const currentValue = config.getCurrentValue ? config.getCurrentValue(editor) : "";
+
+    // Main button click handler
+    const handleMainClick = (): void => {
+        if (!editor) return;
+
+        if (isActive) {
+            // Toggle off
+            editor.chain().focus().toggleOrderedList().run();
+        } else {
+            // Toggle on with sticky style
+            const styleType = lastOrderedListStyle === "decimal" ? null : lastOrderedListStyle;
+            editor
+                .chain()
+                .focus()
+                .toggleOrderedList()
+                .updateAttributes("orderedList", { listStyleType: styleType })
+                .run();
+        }
+    };
+
+    // Dropdown button click handler
+    const handleDropdownClick = (): void => {
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+
+    // Dropdown option selection handler
+    const handleOptionSelect = (option: ToolbarDropdownOption): void => {
+        if (!editor) return;
+
+        // Update sticky state
+        const styleValue = option.value as OrderedListStyle;
+        // eslint-disable-next-line react-hooks/globals
+        lastOrderedListStyle = styleValue;
+
+        const styleType = styleValue === "decimal" ? null : styleValue;
+
+        if (isActive) {
+            // Just change style
+            editor.chain().focus().updateAttributes("orderedList", { listStyleType: styleType }).run();
+        } else {
+            // Enable OL + apply style
+            editor
+                .chain()
+                .focus()
+                .toggleOrderedList()
+                .updateAttributes("orderedList", { listStyleType: styleType })
+                .run();
+        }
+
+        setIsDropdownOpen(false);
+    };
+
+    // Keyboard navigation handler
+    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, part: FocusedPart): void => {
+        switch (e.key) {
+            case "ArrowRight":
+                if (part === "main") {
+                    e.preventDefault();
+                    dropdownButtonRef.current?.focus();
+                }
+                break;
+            case "ArrowLeft":
+                if (part === "dropdown") {
+                    e.preventDefault();
+                    mainButtonRef.current?.focus();
+                }
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                setIsDropdownOpen(true);
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (part === "main") {
+                    handleMainClick();
+                } else {
+                    handleDropdownClick();
+                }
+                break;
+        }
+    };
+
+    return (
+        <div className={`split-button ${isActive ? "is-active" : ""}`} role="group" aria-label={config.title}>
+            <ToolbarDefaultButton
+                ref={mainButtonRef}
+                onClick={handleMainClick}
+                onKeyDown={e => handleKeyDown(e, "main")}
+                className="split-button-main"
+                aria-label={`${config.title} - Toggle`}
+                aria-pressed={isActive}
+            >
+                <span className={`icons icon-${currentIcon}`} />
+            </ToolbarDefaultButton>
+
+            <ToolbarDefaultButton
+                ref={dropdownButtonRef}
+                onClick={handleDropdownClick}
+                onKeyDown={e => handleKeyDown(e, "dropdown")}
+                className="split-button-dropdown"
+                aria-label={`${config.title} - Style options`}
+                aria-expanded={isDropdownOpen}
+                aria-haspopup="menu"
+            >
+                <span className="icons icon-Arrow-down dropdown-arrow" />
+            </ToolbarDefaultButton>
+
+            {isDropdownOpen && (
+                <div ref={refs.setFloating} style={floatingStyles} className="toolbar-dropdown-menu" role="menu">
+                    {config.dropdownOptions?.map(option => (
+                        <ToolbarDefaultButton
+                            key={option.value}
+                            onClick={() => handleOptionSelect(option)}
+                            className="toolbar-dropdown-item"
+                            isActive={currentValue === option.value}
+                            role="menuitem"
+                        >
+                            {option.icon && <span className={`icons icon-${option.icon}`} />}
+                            <span>{option.label}</span>
+                        </ToolbarDefaultButton>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx
new file mode 100644
index 0000000000..04da8de0fd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx
@@ -0,0 +1,296 @@
+import { ReactElement, useState, useRef, FormEvent, useEffect } from "react";
+import { parseEmbedCode } from "../../../utils/embedCodeParser";
+import { matchPattern } from "../../../utils/videoUrlPattern";
+import { useCurrentEditor } from "../../EditorContext";
+import { VideoDialogProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+type TabMode = "url" | "embed";
+
+export function VideoDialog({ onClose, referenceElement }: VideoDialogProps): ReactElement {
+    const { editor } = useCurrentEditor();
+    const [activeTab, setActiveTab] = useState<TabMode>("url");
+    const [urlInput, setUrlInput] = useState("");
+    const [embedCodeInput, setEmbedCodeInput] = useState("");
+    const [width, setWidth] = useState("640");
+    const [height, setHeight] = useState("480");
+    const [detectedPlatform, setDetectedPlatform] = useState<string | null>(null);
+    const [validationError, setValidationError] = useState<string | null>(null);
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    const { refs, floatingStyles } = useDropdown({
+        isOpen: true,
+        onClose,
+        referenceElement
+    });
+
+    // Handle URL input change
+    const handleUrlChange = (value: string): void => {
+        setUrlInput(value);
+
+        if (!value.trim()) {
+            setDetectedPlatform(null);
+            setValidationError(null);
+            return;
+        }
+
+        // Try to match against known patterns
+        const pattern = matchPattern(value);
+
+        if (pattern) {
+            // Determine platform name
+            let platformName = "Video";
+            if (pattern.url.includes("youtube.com")) {
+                platformName = "YouTube";
+            } else if (pattern.url.includes("vimeo.com")) {
+                platformName = "Vimeo";
+            } else if (pattern.url.includes("dailymotion.com")) {
+                platformName = "Dailymotion";
+            } else if (pattern.url.includes("maps.google.com")) {
+                platformName = "Google Maps";
+            }
+
+            setDetectedPlatform(platformName);
+            setWidth(pattern.w.toString());
+            setHeight(pattern.h.toString());
+            setValidationError(null);
+        } else {
+            setDetectedPlatform(null);
+            setValidationError("Unsupported video platform");
+        }
+    };
+
+    // Handle embed code input change
+    const handleEmbedCodeChange = (value: string): void => {
+        setEmbedCodeInput(value);
+
+        if (!value.trim()) {
+            setDetectedPlatform(null);
+            setValidationError(null);
+            return;
+        }
+
+        // Parse and validate embed code
+        const result = parseEmbedCode(value);
+
+        if (result.valid && result.src) {
+            setWidth(result.width || "640");
+            setHeight(result.height || "480");
+            setDetectedPlatform(result.domain || null);
+            setValidationError(null);
+        } else {
+            setValidationError(result.error || "Invalid embed code");
+        }
+    };
+
+    // Handle URL submission
+    const handleUrlSubmit = (w: number, h: number): void => {
+        if (!editor) return;
+
+        const pattern = matchPattern(urlInput);
+
+        if (!pattern) {
+            setValidationError("Invalid URL");
+            return;
+        }
+
+        // Check if it's a YouTube URL
+        if (pattern.url.includes("youtube.com")) {
+            editor
+                .chain()
+                .focus()
+                .setYoutubeVideo({
+                    src: urlInput.trim(),
+                    width: isNaN(w) ? undefined : w,
+                    height: isNaN(h) ? undefined : h
+                })
+                .run();
+        } else {
+            // Use GenericEmbed for other platforms
+            editor
+                .chain()
+                .focus()
+                .setGenericEmbed({
+                    src: pattern.url,
+                    width: w,
+                    height: h
+                })
+                .run();
+        }
+    };
+
+    // Handle embed code submission
+    const handleEmbedSubmit = (w: number, h: number): void => {
+        if (!editor) return;
+
+        const parsed = parseEmbedCode(embedCodeInput);
+
+        if (!parsed.valid || !parsed.src) {
+            setValidationError(parsed.error || "Invalid embed code");
+            return;
+        }
+
+        editor
+            .chain()
+            .focus()
+            .setGenericEmbed({
+                src: parsed.src,
+                width: w,
+                height: h,
+                title: parsed.title || null,
+                frameborder: parsed.frameborder,
+                allow: parsed.allow || null,
+                allowfullscreen: parsed.allowfullscreen
+            })
+            .run();
+    };
+
+    // Unified submit handler
+    const handleSubmit = (e: FormEvent): void => {
+        e.preventDefault();
+        if (!editor) return;
+
+        const w = parseInt(width, 10);
+        const h = parseInt(height, 10);
+
+        if (activeTab === "url") {
+            handleUrlSubmit(w, h);
+        } else {
+            handleEmbedSubmit(w, h);
+        }
+
+        onClose();
+    };
+
+    // Reset state when switching tabs
+    useEffect(() => {
+        setValidationError(null);
+        setDetectedPlatform(null);
+    }, [activeTab]);
+
+    const isSubmitDisabled =
+        (activeTab === "url" && (!urlInput.trim() || !!validationError)) ||
+        (activeTab === "embed" && (!embedCodeInput.trim() || !!validationError));
+
+    return (
+        <div ref={refs.setFloating} style={{ ...floatingStyles, zIndex: 1000 }}>
+            <div ref={dialogRef} className="toolbar-dialog video-dialog">
+                <form onSubmit={handleSubmit}>
+                    <h3>Insert Video</h3>
+
+                    {/* Tab Navigation */}
+                    <div className="dialog-tabs">
+                        <button
+                            type="button"
+                            className={activeTab === "url" ? "active" : ""}
+                            onClick={() => setActiveTab("url")}
+                        >
+                            URL
+                        </button>
+                        <button
+                            type="button"
+                            className={activeTab === "embed" ? "active" : ""}
+                            onClick={() => setActiveTab("embed")}
+                        >
+                            Embed Code
+                        </button>
+                    </div>
+
+                    {/* URL Tab Content */}
+                    {activeTab === "url" && (
+                        <div className="tab-content">
+                            <div className="dialog-field">
+                                <label htmlFor="video-url">Video URL</label>
+                                <input
+                                    id="video-url"
+                                    type="text"
+                                    value={urlInput}
+                                    onChange={e => handleUrlChange(e.target.value)}
+                                    placeholder="https://www.youtube.com/watch?v=... or https://vimeo.com/..."
+                                    autoFocus
+                                />
+                            </div>
+
+                            {/* Detection Status */}
+                            {detectedPlatform && (
+                                <div className="detection-status success">✓ {detectedPlatform} video detected</div>
+                            )}
+
+                            {validationError && <div className="detection-status error">⚠️ {validationError}</div>}
+
+                            {/* Size Fields */}
+                            <div className="dialog-field-row">
+                                <div className="dialog-field">
+                                    <label htmlFor="video-width">Width (px)</label>
+                                    <input
+                                        id="video-width"
+                                        type="number"
+                                        value={width}
+                                        onChange={e => setWidth(e.target.value)}
+                                        placeholder="640"
+                                    />
+                                </div>
+                                <div className="dialog-field">
+                                    <label htmlFor="video-height">Height (px)</label>
+                                    <input
+                                        id="video-height"
+                                        type="number"
+                                        value={height}
+                                        onChange={e => setHeight(e.target.value)}
+                                        placeholder="480"
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="dialog-info">ℹ️ Supported: YouTube, Vimeo, Dailymotion, Google Maps</div>
+                        </div>
+                    )}
+
+                    {/* Embed Code Tab Content */}
+                    {activeTab === "embed" && (
+                        <div className="tab-content">
+                            <div className="dialog-field">
+                                <label htmlFor="embed-code">Embed Code</label>
+                                <textarea
+                                    id="embed-code"
+                                    value={embedCodeInput}
+                                    onChange={e => handleEmbedCodeChange(e.target.value)}
+                                    placeholder='<iframe src="https://..." width="640" height="360"></iframe>'
+                                    rows={6}
+                                    autoFocus
+                                />
+                            </div>
+
+                            {/* Detection Status */}
+                            {detectedPlatform && (
+                                <div className="detection-status success">
+                                    ✓ Valid iframe detected
+                                    <br />
+                                    <small>Source: {detectedPlatform}</small>
+                                </div>
+                            )}
+
+                            {validationError && <div className="detection-status error">⚠️ {validationError}</div>}
+
+                            <div className="dialog-info warning">
+                                ⚠️ Only use embed codes from trusted platforms. Embed codes from untrusted sources may
+                                pose security risks.
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Actions */}
+                    <div className="dialog-actions">
+                        <button type="button" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button type="submit" disabled={isSubmitDisabled}>
+                            Insert
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </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
new file mode 100644
index 0000000000..a81966b677
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/__tests__/ToolbarDefaultButton.spec.tsx
@@ -0,0 +1,111 @@
+import "@testing-library/jest-dom";
+import { createRef, ReactElement, ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import { EditorContext } from "../../../EditorContext";
+import { ToolbarDefaultButton } from "../ToolbarDefaultButton";
+
+// ToolbarDefaultButton reads code view state via useCurrentEditor(), which throws
+// without a provider — so every render is wrapped in an EditorContext.
+function renderWithEditor(children: ReactNode, isCodeView = false): ReturnType<typeof render> {
+    return render(
+        <EditorContext.Provider
+            value={{
+                editor: null,
+                codeViewState: { isCodeView, htmlCode: "", showConfirm: false },
+                codeViewDispatch: () => undefined
+            }}
+        >
+            {children as ReactElement}
+        </EditorContext.Provider>
+    );
+}
+
+function renderInCodeView(children: ReactNode): ReturnType<typeof render> {
+    return renderWithEditor(children, true);
+}
+
+describe("ToolbarDefaultButton", () => {
+    it("renders the default icon span from the icon prop", () => {
+        const { container } = renderWithEditor(<ToolbarDefaultButton icon="Text-bold" title="Bold" />);
+
+        expect(container.querySelector("span.icons.icon-Text-bold")).toBeInTheDocument();
+    });
+
+    it("renders children instead of the default icon when provided", () => {
+        renderWithEditor(
+            <ToolbarDefaultButton title="Font">
+                <span className="dropdown-label">Arial</span>
+            </ToolbarDefaultButton>
+        );
+
+        expect(screen.getByText("Arial")).toBeInTheDocument();
+        expect(document.querySelector("span.icons")).not.toBeInTheDocument();
+    });
+
+    it("uses the icon-button base class by default and adds is-active when active", () => {
+        renderWithEditor(<ToolbarDefaultButton icon="Undo" isActive title="Undo" />);
+        const button = screen.getByRole("button");
+
+        expect(button).toHaveClass("icon-button");
+        expect(button).toHaveClass("is-active");
+    });
+
+    it("replaces the base class with a caller-supplied className", () => {
+        renderWithEditor(<ToolbarDefaultButton className="split-button-main" title="List" />);
+        const button = screen.getByRole("button");
+
+        expect(button).toHaveClass("split-button-main");
+        expect(button).not.toHaveClass("icon-button");
+    });
+
+    it("swaps to activeIcon when active", () => {
+        const { container } = renderWithEditor(
+            <ToolbarDefaultButton icon="Redo" activeIcon="Undo" isActive title="Redo" />
+        );
+
+        expect(container.querySelector("span.icon-Undo")).toBeInTheDocument();
+        expect(container.querySelector("span.icon-Redo")).not.toBeInTheDocument();
+    });
+
+    it("renders a native disabled attribute", () => {
+        renderWithEditor(<ToolbarDefaultButton icon="Undo" disabled title="Undo" />);
+
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("passes through aria attributes and defaults type to button", () => {
+        renderWithEditor(
+            <ToolbarDefaultButton icon="List-numbers" aria-pressed aria-haspopup="menu" title="Ordered list" />
+        );
+        const button = screen.getByRole("button");
+
+        expect(button).toHaveAttribute("type", "button");
+        expect(button).toHaveAttribute("aria-pressed", "true");
+        expect(button).toHaveAttribute("aria-haspopup", "menu");
+    });
+
+    it("forwards the ref to the underlying button element", () => {
+        const ref = createRef<HTMLButtonElement>();
+        renderWithEditor(<ToolbarDefaultButton ref={ref} icon="Undo" title="Undo" />);
+
+        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/colorPickerHelpers.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/colorPickerHelpers.ts
new file mode 100644
index 0000000000..d496f7247b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/colorPickerHelpers.ts
@@ -0,0 +1,70 @@
+import { Editor } from "@tiptap/react";
+import { ColorPickerCommand } from "../ToolbarConfig";
+
+interface ColorPickerHelpers {
+    getDefaultColor: (pickerType: ColorPickerCommand) => string;
+    handleColorChange: (editor: Editor, pickerType: ColorPickerCommand, color: string) => void;
+}
+
+export const colorPickerHelpers: ColorPickerHelpers = {
+    getDefaultColor: (pickerType: ColorPickerCommand): string => {
+        if (pickerType === "textHighlight") return "#ffff00";
+        if (pickerType === "cellBackground" || pickerType === "tableBackground") return "#ffffff";
+        if (pickerType === "tableBorderColor") return "#000000";
+        return "#000000";
+    },
+
+    handleColorChange: (editor: Editor, pickerType: ColorPickerCommand, color: string): void => {
+        if (pickerType === "textColor") {
+            (editor.chain().focus() as any).setTextColor(color).run();
+        } else if (pickerType === "textHighlight") {
+            (editor.chain().focus() as any).setTextHighlight(color).run();
+        } else if (pickerType === "cellBackground") {
+            editor.chain().focus().setCellAttribute("backgroundColor", color).run();
+        } else if (pickerType === "tableBackground") {
+            const { state } = editor;
+            const { $from } = state.selection;
+
+            for (let depth = $from.depth; depth > 0; depth--) {
+                const node = $from.node(depth);
+                if (node.type.name === "table") {
+                    const pos = $from.before(depth);
+                    editor
+                        .chain()
+                        .focus()
+                        .command(({ tr }) => {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
+                                backgroundColor: color
+                            });
+                            return true;
+                        })
+                        .run();
+                    break;
+                }
+            }
+        } else if (pickerType === "tableBorderColor") {
+            const { state } = editor;
+            const { $from } = state.selection;
+
+            for (let depth = $from.depth; depth > 0; depth--) {
+                const node = $from.node(depth);
+                if (node.type.name === "table") {
+                    const pos = $from.before(depth);
+                    editor
+                        .chain()
+                        .focus()
+                        .command(({ tr }) => {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
+                                borderColor: color
+                            });
+                            return true;
+                        })
+                        .run();
+                    break;
+                }
+            }
+        }
+    }
+};
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/configurationHelpers.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/configurationHelpers.ts
new file mode 100644
index 0000000000..470e7dc77f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/configurationHelpers.ts
@@ -0,0 +1,260 @@
+import { Editor } from "@tiptap/react";
+import { ConfigurationSection } from "../ToolbarConfig";
+
+// Helper to get table node attributes
+function getTableAttributes(editor: Editor): Record<string, any> | null {
+    const { state } = editor;
+    const { $from } = state.selection;
+
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (node.type.name === "table") {
+            return node.attrs;
+        }
+    }
+    return null;
+}
+
+// Helper to get cell attributes
+function getCellAttributes(editor: Editor): Record<string, any> | null {
+    const { state } = editor;
+    const { selection } = state;
+
+    // Try to find a cell in the current selection
+    const cellPos = selection.$from.pos;
+    const resolved = state.doc.resolve(cellPos);
+
+    for (let depth = resolved.depth; depth > 0; depth--) {
+        const node = resolved.node(depth);
+        if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+            return node.attrs;
+        }
+    }
+    return null;
+}
+
+// Table configuration sections
+export function createTableConfigurationSections(editor: Editor): ConfigurationSection[] {
+    return [
+        {
+            id: "tableBackground",
+            label: "Background Color",
+            type: "colorPicker",
+            defaultColor: "#ffffff",
+            getCurrentValue: () => {
+                const attrs = getTableAttributes(editor);
+                return attrs?.backgroundColor || null;
+            },
+            onChange: (color: string) => {
+                const { state } = editor;
+                const { $from } = state.selection;
+
+                for (let depth = $from.depth; depth > 0; depth--) {
+                    const node = $from.node(depth);
+                    if (node.type.name === "table") {
+                        const pos = $from.before(depth);
+                        editor
+                            .chain()
+                            .focus()
+                            .command(({ tr }) => {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    backgroundColor: color
+                                });
+                                return true;
+                            })
+                            .run();
+                        break;
+                    }
+                }
+            }
+        },
+        {
+            id: "tableBorderColor",
+            label: "Border Color",
+            type: "colorPicker",
+            defaultColor: "#000000",
+            getCurrentValue: () => {
+                const attrs = getTableAttributes(editor);
+                return attrs?.borderColor || null;
+            },
+            onChange: (color: string) => {
+                const { state } = editor;
+                const { $from } = state.selection;
+
+                for (let depth = $from.depth; depth > 0; depth--) {
+                    const node = $from.node(depth);
+                    if (node.type.name === "table") {
+                        const pos = $from.before(depth);
+                        editor
+                            .chain()
+                            .focus()
+                            .command(({ tr }) => {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    borderColor: color
+                                });
+                                return true;
+                            })
+                            .run();
+                        break;
+                    }
+                }
+            }
+        },
+        {
+            id: "tableBorderStyle",
+            label: "Border Style",
+            type: "dropdown",
+            options: [
+                { value: "none", label: "None" },
+                { value: "solid", label: "Solid" },
+                { value: "dashed", label: "Dashed" },
+                { value: "dotted", label: "Dotted" },
+                { value: "double", label: "Double" },
+                { value: "groove", label: "Groove" },
+                { value: "ridge", label: "Ridge" },
+                { value: "inset", label: "Inset" },
+                { value: "outset", label: "Outset" }
+            ],
+            getCurrentValue: () => {
+                const attrs = getTableAttributes(editor);
+                return attrs?.borderStyle || "none";
+            },
+            onChange: (style: string) => {
+                (editor.chain().focus() as any).setTableBorderStyle(style).run();
+            }
+        },
+        {
+            id: "tableBorderWidth",
+            label: "Border Width",
+            type: "dropdown",
+            options: [
+                { value: "0", label: "0" },
+                { value: "1px", label: "1px" },
+                { value: "2px", label: "2px" },
+                { value: "3px", label: "3px" },
+                { value: "4px", label: "4px" },
+                { value: "5px", label: "5px" }
+            ],
+            getCurrentValue: () => {
+                const attrs = getTableAttributes(editor);
+                return attrs?.borderWidth || "0";
+            },
+            onChange: (width: string) => {
+                (editor.chain().focus() as any).setTableBorderWidth(width).run();
+            }
+        }
+    ];
+}
+
+// Cell configuration sections
+export function createCellConfigurationSections(editor: Editor): ConfigurationSection[] {
+    return [
+        {
+            id: "cellBackground",
+            label: "Background Color",
+            type: "colorPicker",
+            defaultColor: "#ffffff",
+            getCurrentValue: () => {
+                const attrs = getCellAttributes(editor);
+                return attrs?.backgroundColor || null;
+            },
+            onChange: (color: string) => {
+                editor.chain().focus().setCellAttribute("backgroundColor", color).run();
+            }
+        },
+        {
+            id: "cellBorderColor",
+            label: "Border Color",
+            type: "colorPicker",
+            defaultColor: "#000000",
+            getCurrentValue: () => {
+                const attrs = getCellAttributes(editor);
+                return attrs?.borderColor || null;
+            },
+            onChange: (color: string) => {
+                editor.chain().focus().setCellAttribute("borderColor", color).run();
+            }
+        },
+        {
+            id: "cellBorderStyle",
+            label: "Border Style",
+            type: "dropdown",
+            options: [
+                { value: "none", label: "None" },
+                { value: "solid", label: "Solid" },
+                { value: "dashed", label: "Dashed" },
+                { value: "dotted", label: "Dotted" },
+                { value: "double", label: "Double" },
+                { value: "groove", label: "Groove" },
+                { value: "ridge", label: "Ridge" },
+                { value: "inset", label: "Inset" },
+                { value: "outset", label: "Outset" }
+            ],
+            getCurrentValue: () => {
+                const attrs = getCellAttributes(editor);
+                return attrs?.borderStyle || "none";
+            },
+            onChange: (style: string) => {
+                editor.chain().focus().setCellAttribute("borderStyle", style).run();
+            }
+        },
+        {
+            id: "cellBorderWidth",
+            label: "Border Width",
+            type: "dropdown",
+            options: [
+                { value: "0", label: "0" },
+                { value: "1px", label: "1px" },
+                { value: "2px", label: "2px" },
+                { value: "3px", label: "3px" },
+                { value: "4px", label: "4px" },
+                { value: "5px", label: "5px" }
+            ],
+            getCurrentValue: () => {
+                const attrs = getCellAttributes(editor);
+                return attrs?.borderWidth || "0";
+            },
+            onChange: (width: string) => {
+                editor.chain().focus().setCellAttribute("borderWidth", width).run();
+            }
+        },
+        {
+            id: "cellWidth",
+            label: "Column Width",
+            type: "numberInput",
+            min: 25,
+            max: 1000,
+            step: 1,
+            placeholder: "Auto",
+            unit: "px",
+            getCurrentValue: () => {
+                const attrs = getCellAttributes(editor);
+                const colwidth = attrs?.colwidth;
+
+                if (colwidth && Array.isArray(colwidth) && colwidth.length > 0) {
+                    return colwidth[0];
+                }
+
+                return null;
+            },
+            onChange: (value: string) => {
+                if (!value || value.trim() === "") {
+                    editor.chain().focus().setCellAttribute("colwidth", null).run();
+                    return;
+                }
+
+                const numValue = parseInt(value, 10);
+
+                if (isNaN(numValue)) {
+                    return;
+                }
+
+                const clampedValue = Math.max(25, Math.min(1000, numValue));
+
+                editor.chain().focus().setCellAttribute("colwidth", [clampedValue]).run();
+            }
+        }
+    ];
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/fontHelpers.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/fontHelpers.ts
new file mode 100644
index 0000000000..08e70b1eaa
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/fontHelpers.ts
@@ -0,0 +1,76 @@
+import { CustomFontsType } from "../../../../typings/RichTextProps";
+import { ToolbarButtonConfig } from "../ToolbarConfig";
+
+export const FONT_LIST = [
+    { value: "Default", description: "Default", style: "" },
+    { value: "andale-mono", description: "Andale Mono", style: "'andale mono', monospace" },
+    { value: "arial", description: "Arial", style: "arial, helvetica, sans-serif" },
+    { value: "arial-black", description: "Arial Black", style: "'arial black', sans-serif" },
+    { value: "book-antiqua", description: "Book Antiqua", style: "'book antiqua', palatino, serif" },
+    { value: "comic-sans", description: "Comic Sans MS", style: "'comic sans ms', sans-serif" },
+    { value: "courier-new", description: "Courier New", style: "'courier new', courier, monospace" },
+    { value: "helvetica", description: "Helvetica", style: "helvetica, arial, sans-serif" },
+    { value: "impact", description: "Impact", style: "impact, sans-serif" },
+    { value: "serif", description: "Serif", style: "serif" },
+    { value: "symbol", description: "Symbol", style: "symbol" },
+    { value: "terminal", description: "Terminal", style: "terminal, monaco, monospace" },
+    { value: "times-new-roman", description: "Times New Roman", style: "'times new roman', times, serif" },
+    { value: "trebuchet", description: "Trebuchet MS", style: "'trebuchet ms', geneva, sans-serif" }
+];
+
+export const FONT_SIZE_LIST = [
+    "8px",
+    "9px",
+    "10px",
+    "12px",
+    "14px",
+    "16px",
+    "20px",
+    "24px",
+    "32px",
+    "42px",
+    "54px",
+    "68px",
+    "84px",
+    "98px"
+];
+
+export function AddCustomFontsToFontFamilyDropdown(
+    fontFamilyButton: ToolbarButtonConfig,
+    customFonts: CustomFontsType[]
+): ToolbarButtonConfig {
+    if (!customFonts || customFonts.length === 0) {
+        return fontFamilyButton;
+    }
+
+    // Map valid custom fonts to dropdown options
+    const customFontOptions = customFonts.map(font => {
+        // Transform font name to kebab-case value
+        // "Roboto" → "roboto"
+        // "Times New Roman" → "times-new-roman"
+        const value = font.fontName.toLowerCase().replace(/\s+/g, "-");
+
+        return {
+            value,
+            label: font.fontName,
+            attrs: {
+                fontFamily: font.fontStyle,
+                fontValue: value
+            },
+            command: "setFontFamily"
+        };
+    });
+
+    const allOptions = [...(fontFamilyButton.dropdownOptions || []), ...customFontOptions];
+
+    // Sort alphabetically, keeping "Default" first
+    const defaultOpt = allOptions.find(opt => opt.value === "Default");
+    const sortedOthers = allOptions
+        .filter(opt => opt.value !== "Default")
+        .sort((a, b) => a.label.localeCompare(b.label));
+
+    return {
+        ...fontFamilyButton,
+        dropdownOptions: defaultOpt ? [defaultOpt, ...sortedOthers] : sortedOthers
+    };
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/listHelpers.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/listHelpers.ts
new file mode 100644
index 0000000000..93656bc743
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/listHelpers.ts
@@ -0,0 +1,14 @@
+export type OrderedListStyle = "decimal" | "lower-alpha" | "lower-roman";
+
+export const STYLE_ICON_MAP: Record<OrderedListStyle, string> = {
+    decimal: "List-numbers",
+    "lower-alpha": "List-lower-alpha",
+    "lower-roman": "List-roman"
+};
+
+export function getIconForOrderedListStyle(style: OrderedListStyle | null | undefined): string {
+    if (!style || style === "decimal") {
+        return STYLE_ICON_MAP.decimal;
+    }
+    return STYLE_ICON_MAP[style];
+}
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
new file mode 100644
index 0000000000..1869aef0d4
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/helpers/toolbarTypes.ts
@@ -0,0 +1,121 @@
+import { Editor } from "@tiptap/react";
+import { ReactNode } from "react";
+import { ToolbarButtonConfig } from "../ToolbarConfig";
+
+// ============================================================================
+// Toolbar Button Component Props
+// ============================================================================
+
+/**
+ * Props for toolbar button components that render a single button
+ */
+export interface BaseToolbarButtonProps {
+    config: ToolbarButtonConfig;
+}
+
+/**
+ * Props for toolbar button components that support image source content
+ * (used for dialog buttons that need to display Mendix entity selectors)
+ */
+export interface DialogToolbarButtonProps extends BaseToolbarButtonProps {
+    imageSourceContent?: ReactNode;
+}
+
+// ============================================================================
+// Dialog Component Props
+// ============================================================================
+
+/**
+ * Base props for all dialog components
+ */
+export interface BaseDialogProps {
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+}
+
+/**
+ * Props for ColorPicker component
+ */
+export interface ColorPickerProps extends BaseDialogProps {
+    defaultColor?: string;
+    onColorChange: (color: string) => void;
+}
+
+/**
+ * Props for ImageDialog component
+ */
+export interface ImageDialogProps {
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+    imageSourceContent?: ReactNode;
+}
+
+/**
+ * Props for LinkDialog component
+ */
+export interface LinkDialogProps {
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+}
+
+/**
+ * Props for VideoDialog component
+ */
+export interface VideoDialogProps {
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+}
+
+/**
+ * Props for ConfirmDialog component
+ */
+export interface ConfirmDialogProps {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+/**
+ * Props for TableGridSelector component
+ */
+export interface TableGridSelectorProps {
+    editor: Editor;
+    onClose: () => void;
+    referenceElement: HTMLElement | null;
+}
+
+// ============================================================================
+// Image-related Types
+// ============================================================================
+
+/**
+ * Entity image data from Mendix database
+ */
+export interface EntityImage {
+    id: string;
+    url: string;
+    thumbnailUrl?: string;
+}
+
+/**
+ * Image source modes for ImageDialog
+ */
+export type ImageSourceMode = "url" | "upload" | "entity";
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/**
+ * Maximum file size for image uploads (5MB)
+ */
+export const MAX_FILE_SIZE = 5 * 1024 * 1024;
+
+/**
+ * Maximum table dimensions for TableGridSelector
+ */
+export const MAX_TABLE_ROWS = 10;
+export const MAX_TABLE_COLS = 10;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/hooks/useDropdown.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/hooks/useDropdown.ts
new file mode 100644
index 0000000000..7cccda2249
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/hooks/useDropdown.ts
@@ -0,0 +1,96 @@
+import { useEffect, useRef, RefObject } from "react";
+import { useFloating, offset, flip, shift, autoUpdate, Placement } from "@floating-ui/react";
+
+export interface UseDropdownOptions {
+    isOpen: boolean;
+    onClose: () => void;
+    placement?: Placement;
+    offsetValue?: number;
+    referenceElement?: HTMLElement | null;
+}
+
+export interface UseDropdownReturn {
+    refs: {
+        reference: RefObject<HTMLElement | null>;
+        floating: RefObject<HTMLElement | null>;
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    floatingStyles: {
+        position: "fixed" | "absolute";
+        top: number;
+        left: number;
+    };
+}
+
+/**
+ * Common hook for dropdown/popover positioning and click-outside handling
+ * Uses Floating UI for positioning and handles click-outside to close
+ */
+export function useDropdown({
+    isOpen,
+    onClose,
+    placement = "bottom-start",
+    offsetValue = 4,
+    referenceElement
+}: UseDropdownOptions): UseDropdownReturn {
+    const ignoreClickRef = useRef<HTMLElement | null>(null);
+
+    const { x, y, strategy, refs } = useFloating({
+        placement,
+        strategy: "fixed",
+        middleware: [offset(offsetValue), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+        open: isOpen
+    });
+
+    // Set reference element if provided externally
+    useEffect(() => {
+        if (referenceElement && refs.reference.current !== referenceElement) {
+            refs.setReference(referenceElement);
+            ignoreClickRef.current = referenceElement;
+        }
+    }, [referenceElement, refs]);
+
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleClickOutside = (event: MouseEvent): void => {
+            const target = event.target as Node;
+            const floatingEl = refs.floating.current;
+            const referenceEl = refs.reference.current || ignoreClickRef.current;
+
+            // Close if click is outside both the dropdown and the reference element
+            if (
+                floatingEl &&
+                floatingEl instanceof HTMLElement &&
+                !floatingEl.contains(target) &&
+                referenceEl &&
+                referenceEl instanceof HTMLElement &&
+                !referenceEl.contains(target)
+            ) {
+                onClose();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, refs.floating, refs.reference]);
+
+    return {
+        refs: {
+            reference: refs.reference as RefObject<HTMLElement | null>,
+            floating: refs.floating as RefObject<HTMLElement | null>,
+            setReference: refs.setReference,
+            setFloating: refs.setFloating
+        },
+        floatingStyles: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0
+        }
+    };
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/index.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/index.ts
new file mode 100644
index 0000000000..39d901e45b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/index.ts
@@ -0,0 +1,19 @@
+export { default as Toolbar } from "./Toolbar";
+export { ColorPickerToolbarButton } from "./components/ColorPicker";
+export { DialogToolbarButton } from "./components/Dialog";
+export { TableGridToolbarButton } from "./components/TableGrid";
+export { ToolbarButton } from "./components/ToolbarButton";
+export { ColorPicker } from "./components/ColorPicker";
+export { TableGridSelector } from "./components/TableGridSelector";
+export { ToolbarDropdown } from "./components/ToolbarDropdown";
+export { ImageDialog } from "./components/ImageDialog";
+export { VideoDialog } from "./components/VideoDialog";
+export { TOOLBAR_GROUPS } from "./ToolbarConfig";
+export type {
+    ToolbarButtonConfig,
+    ToolbarGroupConfig,
+    ToolbarActionType,
+    ColorPickerCommand,
+    DialogCommand
+} from "./ToolbarConfig";
+export * from "./helpers/colorPickerHelpers";
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/FontFamilyClass.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/FontFamilyClass.ts
new file mode 100644
index 0000000000..18ed50abb5
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/FontFamilyClass.ts
@@ -0,0 +1,164 @@
+import { Extension, getStyleProperty } from "@tiptap/core";
+import { FontFamily } from "@tiptap/extension-font-family";
+
+export type FontFamilyClassOptions = {
+    types: string[];
+    styleDataFormat: "inline" | "class";
+};
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontFamilyClass: {
+            /**
+             * Set the font family
+             * @param options - String (legacy) or object with fontFamily and optional fontValue
+             */
+            setFontFamily: (options: string | { fontFamily: string; fontValue?: string }) => ReturnType;
+            /**
+             * Unset the font family
+             */
+            unsetFontFamily: () => ReturnType;
+        };
+    }
+}
+
+/**
+ * Derive fontValue from fontFamily CSS value
+ *
+ * This function extracts a simple identifier from a CSS font-family value for use
+ * in dropdown matching. The derivation ensures consistent kebab-case formatting.
+ *
+ * Algorithm:
+ * 1. Extract the first font from comma-separated list
+ * 2. Remove quotes (single or double)
+ * 3. Convert to lowercase
+ * 4. Replace spaces with hyphens (kebab-case)
+ *
+ * Examples:
+ * - "arial, helvetica, sans-serif" → "arial"
+ * - "'Roboto', sans-serif" → "roboto"
+ * - "'Times New Roman', serif" → "times-new-roman"
+ *
+ * Backward Compatibility:
+ * This derivation is used as a fallback for legacy content that lacks the
+ * data-font-value attribute. New content stores fontValue explicitly.
+ *
+ * @param fontFamily - CSS font-family value
+ * @returns Font identifier suitable for dropdown value matching
+ */
+function deriveFontValue(fontFamily: string): string {
+    if (!fontFamily) return "";
+
+    // Extract first font from CSS value
+    const firstFont = fontFamily.split(",")[0].trim();
+
+    // Remove quotes and normalize to kebab-case
+    return firstFont.replace(/['"]/g, "").toLowerCase().replace(/\s+/g, "-");
+}
+
+export const FontFamilyClass = Extension.create<FontFamilyClassOptions>({
+    name: "fontFamilyClass",
+
+    addOptions() {
+        return {
+            types: ["textStyle"],
+            styleDataFormat: "inline"
+        };
+    },
+
+    addExtensions() {
+        const styleDataFormat = this.options.styleDataFormat;
+
+        return [
+            FontFamily.extend({
+                addGlobalAttributes() {
+                    return [
+                        {
+                            types: this.options.types,
+                            attributes: {
+                                fontFamily: {
+                                    default: null,
+                                    parseHTML: element => {
+                                        if (styleDataFormat === "class") {
+                                            return (
+                                                element.getAttribute("data-font-family") ||
+                                                element.style.fontFamily ||
+                                                null
+                                            );
+                                        } else {
+                                            const value =
+                                                getStyleProperty(element, "font-family") ?? element.style.fontFamily;
+                                            return value?.replace(/['"]+/g, "") || null;
+                                        }
+                                    },
+                                    renderHTML: attributes => {
+                                        if (!attributes.fontFamily) {
+                                            return {};
+                                        }
+
+                                        if (styleDataFormat === "class") {
+                                            return {
+                                                "data-font-family": attributes.fontFamily,
+                                                class: "has-font-family"
+                                            };
+                                        } else {
+                                            return {
+                                                style: `font-family: ${attributes.fontFamily}`
+                                            };
+                                        }
+                                    }
+                                },
+                                fontValue: {
+                                    default: null,
+                                    parseHTML: element => {
+                                        // Read from data-font-value attribute (new format)
+                                        return element.getAttribute("data-font-value") || null;
+                                    },
+                                    renderHTML: attributes => {
+                                        if (!attributes.fontValue) {
+                                            return {};
+                                        }
+                                        // Render as data-font-value for identification
+                                        return {
+                                            "data-font-value": attributes.fontValue
+                                        };
+                                    }
+                                }
+                            }
+                        }
+                    ];
+                },
+
+                addCommands() {
+                    return {
+                        setFontFamily:
+                            (options: string | { fontFamily: string; fontValue?: string }) =>
+                            ({ commands }) => {
+                                let fontFamily: string;
+                                let fontValue: string;
+
+                                if (typeof options === "string") {
+                                    // Backward compatibility: string parameter (legacy code)
+                                    // Auto-derive fontValue from fontFamily CSS value
+                                    fontFamily = options;
+                                    fontValue = deriveFontValue(options);
+                                } else {
+                                    // New format: object parameter (toolbar dropdown uses this)
+                                    // fontValue can be explicit or auto-derived if missing
+                                    fontFamily = options.fontFamily;
+                                    fontValue = options.fontValue || deriveFontValue(options.fontFamily);
+                                }
+
+                                return commands.setMark("textStyle", { fontFamily, fontValue });
+                            },
+                        unsetFontFamily:
+                            () =>
+                            ({ commands }) => {
+                                return commands.unsetMark("textStyle");
+                            }
+                    };
+                }
+            })
+        ];
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/FontSize.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/FontSize.ts
new file mode 100644
index 0000000000..a41830c809
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/FontSize.ts
@@ -0,0 +1,88 @@
+import { Extension, getStyleProperty } from "@tiptap/core";
+
+export interface FontSizeOptions {
+    types: string[];
+    styleDataFormat: "inline" | "class";
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             */
+            setFontSize: (size: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+export const FontSize = Extension.create<FontSizeOptions>({
+    name: "fontSize",
+
+    addOptions() {
+        return {
+            types: ["textStyle"],
+            styleDataFormat: "inline"
+        };
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => {
+                            if (this.options.styleDataFormat === "class") {
+                                return element.getAttribute("data-font-size") || element.style.fontSize || null;
+                            } else {
+                                const value = getStyleProperty(element, "font-size") ?? element.style.fontSize;
+                                return value?.replace(/['"]+/g, "") || null;
+                            }
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.fontSize) {
+                                return {};
+                            }
+
+                            if (this.options.styleDataFormat === "class") {
+                                // Extract numeric value without unit suffix (e.g., "16px" -> "16")
+                                const match = attributes.fontSize.match(/^(\d+(?:\.\d+)?)/);
+                                const numericValue = match ? match[1] : attributes.fontSize;
+
+                                return {
+                                    "data-font-size": numericValue,
+                                    class: "has-font-size"
+                                };
+                            } else {
+                                return {
+                                    style: `font-size: ${attributes.fontSize}`
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        return {
+            setFontSize:
+                fontSize =>
+                ({ chain }) => {
+                    return chain().setMark("textStyle", { fontSize }).run();
+                },
+            unsetFontSize:
+                () =>
+                ({ chain }) => {
+                    return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/Fullscreen.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/Fullscreen.ts
new file mode 100644
index 0000000000..63ff73bcec
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/Fullscreen.ts
@@ -0,0 +1,81 @@
+import { Extension } from "@tiptap/core";
+
+export interface FullscreenOptions {
+    widgetSelector: string;
+    fullscreenClass: string;
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fullscreen: {
+            /**
+             * Toggle fullscreen mode
+             */
+            toggleFullscreen: () => ReturnType;
+            /**
+             * Enter fullscreen mode
+             */
+            enterFullscreen: () => ReturnType;
+            /**
+             * Exit fullscreen mode
+             */
+            exitFullscreen: () => ReturnType;
+        };
+    }
+}
+
+export const Fullscreen = Extension.create<FullscreenOptions>({
+    name: "fullscreen",
+
+    addOptions() {
+        return {
+            widgetSelector: ".widget-rich-text",
+            fullscreenClass: "fullscreen"
+        };
+    },
+
+    addCommands() {
+        return {
+            toggleFullscreen: () => () => {
+                const widgetEl = document.querySelector(this.options.widgetSelector);
+                if (widgetEl) {
+                    widgetEl.classList.toggle(this.options.fullscreenClass);
+                    return true;
+                }
+                return false;
+            },
+
+            enterFullscreen: () => () => {
+                const widgetEl = document.querySelector(this.options.widgetSelector);
+                if (widgetEl && !widgetEl.classList.contains(this.options.fullscreenClass)) {
+                    widgetEl.classList.add(this.options.fullscreenClass);
+                    return true;
+                }
+                return false;
+            },
+
+            exitFullscreen: () => () => {
+                const widgetEl = document.querySelector(this.options.widgetSelector);
+                if (widgetEl && widgetEl.classList.contains(this.options.fullscreenClass)) {
+                    widgetEl.classList.remove(this.options.fullscreenClass);
+                    return true;
+                }
+                return false;
+            }
+        };
+    },
+
+    addKeyboardShortcuts() {
+        return {
+            Escape: () => {
+                // Only handle ESC if fullscreen is active
+                const widgetEl = document.querySelector(this.options.widgetSelector);
+                if (widgetEl?.classList.contains(this.options.fullscreenClass)) {
+                    return this.editor.commands.exitFullscreen();
+                }
+                // Pass through to other handlers if not in fullscreen
+                return false;
+            }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/GenericEmbed.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/GenericEmbed.ts
new file mode 100644
index 0000000000..9387d3117b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/GenericEmbed.ts
@@ -0,0 +1,136 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { EmbedResize } from "../components/EmbedResize";
+
+export interface GenericEmbedOptions {
+    inline: boolean;
+    HTMLAttributes: Record<string, any>;
+}
+
+export interface GenericEmbedAttributes {
+    src: string;
+    width?: number;
+    height?: number;
+    title?: string | null;
+    frameborder?: string;
+    allow?: string | null;
+    allowfullscreen?: boolean;
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        genericEmbed: {
+            setGenericEmbed: (options: GenericEmbedAttributes) => ReturnType;
+        };
+    }
+}
+
+export const GenericEmbed = Node.create<GenericEmbedOptions>({
+    name: "genericEmbed",
+
+    group: "block",
+
+    atom: true,
+
+    addOptions() {
+        return {
+            inline: false,
+            HTMLAttributes: {}
+        };
+    },
+
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+                parseHTML: element => element.querySelector("iframe")?.getAttribute("src"),
+                renderHTML: attributes => {
+                    return { src: attributes.src };
+                }
+            },
+            width: {
+                default: 640,
+                parseHTML: element => {
+                    const iframe = element.querySelector("iframe");
+                    const widthAttr = iframe?.getAttribute("width");
+                    return widthAttr ? parseInt(widthAttr, 10) : 640;
+                }
+            },
+            height: {
+                default: 480,
+                parseHTML: element => {
+                    const iframe = element.querySelector("iframe");
+                    const heightAttr = iframe?.getAttribute("height");
+                    return heightAttr ? parseInt(heightAttr, 10) : 480;
+                }
+            },
+            title: {
+                default: null,
+                parseHTML: element => element.querySelector("iframe")?.getAttribute("title")
+            },
+            frameborder: {
+                default: "0"
+            },
+            allow: {
+                default: null
+            },
+            allowfullscreen: {
+                default: true
+            }
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: "div[data-generic-embed]"
+            }
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        // Security: Always add sandbox and other security attributes
+        const secureAttributes = {
+            src: HTMLAttributes.src,
+            width: HTMLAttributes.width,
+            height: HTMLAttributes.height,
+            title: HTMLAttributes.title,
+            frameborder: HTMLAttributes.frameborder || "0",
+            allow: HTMLAttributes.allow,
+            allowfullscreen: HTMLAttributes.allowfullscreen ? "" : undefined,
+            // Security attributes
+            sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+            loading: "lazy",
+            referrerpolicy: "strict-origin-when-cross-origin"
+        };
+
+        return [
+            "div",
+            mergeAttributes(
+                {
+                    "data-generic-embed": "",
+                    class: "generic-embed-wrapper"
+                },
+                this.options.HTMLAttributes
+            ),
+            ["iframe", secureAttributes]
+        ];
+    },
+
+    addCommands() {
+        return {
+            setGenericEmbed:
+                (options: GenericEmbedAttributes) =>
+                ({ commands }) => {
+                    return commands.insertContent({
+                        type: this.name,
+                        attrs: options
+                    });
+                }
+        };
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(EmbedResize);
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/ImageResize.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/ImageResize.ts
new file mode 100644
index 0000000000..dfb100fc5b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/ImageResize.ts
@@ -0,0 +1,81 @@
+import { Image } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ImageResize as ImageResizeComponent } from "../components/ImageResize";
+
+export type ImageResizeOptions = {
+    inline?: boolean;
+    allowBase64?: boolean;
+    HTMLAttributes?: Record<string, any>;
+};
+
+export const ImageResize = Image.extend<ImageResizeOptions>({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            inline: true,
+            allowBase64: true,
+            HTMLAttributes: {
+                class: "tiptap-image"
+            }
+        };
+    },
+
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            width: {
+                default: null,
+                parseHTML: element => element.getAttribute("width"),
+                renderHTML: attributes => {
+                    if (!attributes.width) {
+                        return {};
+                    }
+                    return { width: attributes.width };
+                }
+            },
+            height: {
+                default: null,
+                parseHTML: element => element.getAttribute("height"),
+                renderHTML: attributes => {
+                    if (!attributes.height) {
+                        return {};
+                    }
+                    return { height: attributes.height };
+                }
+            },
+            dataEntity: {
+                default: null,
+                parseHTML: element => {
+                    const value = element.dataset?.entity;
+                    return value === "true" ? true : null;
+                },
+                renderHTML: attributes => {
+                    if (!attributes.dataEntity) {
+                        return {};
+                    }
+                    return {
+                        "data-entity": "true"
+                    };
+                }
+            },
+            dataEntityId: {
+                default: null,
+                parseHTML: element => {
+                    return element.dataset?.src || null;
+                },
+                renderHTML: attributes => {
+                    if (!attributes.dataEntityId) {
+                        return {};
+                    }
+                    return {
+                        "data-src": attributes.dataEntityId
+                    };
+                }
+            }
+        };
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(ImageResizeComponent);
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts
new file mode 100644
index 0000000000..16da1250f1
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts
@@ -0,0 +1,310 @@
+import { Editor, Extension } from "@tiptap/core";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { AllSelection, Plugin, PluginKey, TextSelection, Transaction } from "@tiptap/pm/state";
+
+const LIST_TYPES = ["bulletList", "orderedList", "taskList"];
+
+export interface IndentOptions {
+    /**
+     * Node types the margin-indent walk touches (paragraph/heading/blockquote).
+     * Used by increaseIndent/decreaseIndent and, in turn, the toolbar buttons.
+     * Lists are intentionally excluded so the toolbar stays paragraph-only.
+     */
+    types: string[];
+    /**
+     * Node types that carry the `indent` global attribute (parse/render margin).
+     * Superset of `types` that also includes list types, so lists can store and
+     * render a margin without being swept by the walk. Defaults to `types` when
+     * not provided.
+     */
+    attributeTypes?: string[];
+    minIndent: number;
+    maxIndent: number;
+    indentStep: number;
+    styleDataFormat: "inline" | "class";
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        indent: {
+            /**
+             * Increase indent
+             */
+            increaseIndent: () => ReturnType;
+            /**
+             * Decrease indent
+             */
+            decreaseIndent: () => ReturnType;
+            /**
+             * Increase margin on the nearest list node (Ctrl+])
+             */
+            listIndent: () => ReturnType;
+            /**
+             * Decrease margin on the nearest list node (Ctrl+[)
+             */
+            listOutdent: () => ReturnType;
+        };
+    }
+}
+
+export const Indent = Extension.create<IndentOptions>({
+    name: "indent",
+
+    addOptions() {
+        return {
+            types: ["paragraph", "heading", "blockquote"],
+            attributeTypes: undefined,
+            minIndent: 0,
+            maxIndent: 10,
+            indentStep: 1,
+            styleDataFormat: "inline"
+        };
+    },
+
+    addGlobalAttributes() {
+        // Register the `indent` attribute on the attribute types (superset that
+        // includes lists) so lists can render a margin, while the walk (`types`)
+        // stays paragraph-only.
+        const attributeTypes = this.options.attributeTypes ?? this.options.types;
+
+        return [
+            {
+                types: attributeTypes,
+                attributes: {
+                    indent: {
+                        default: 0,
+                        parseHTML: element => {
+                            if (this.options.styleDataFormat === "class") {
+                                const indent = element.getAttribute("data-indent");
+                                return indent ? parseInt(indent, 10) : 0;
+                            } else {
+                                // Parse from inline style margin-left
+                                const marginLeft = element.style.marginLeft;
+                                if (marginLeft) {
+                                    const match = marginLeft.match(/(\d+(?:\.\d+)?)/);
+                                    if (match) {
+                                        return Math.round(parseFloat(match[1]) / 2);
+                                    }
+                                }
+                                return 0;
+                            }
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.indent || attributes.indent === 0) {
+                                return {};
+                            }
+
+                            if (this.options.styleDataFormat === "class") {
+                                return {
+                                    "data-indent": attributes.indent,
+                                    class: `indent-${attributes.indent}`
+                                };
+                            } else {
+                                return {
+                                    style: `margin-left: ${attributes.indent * 2}em`
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        return {
+            increaseIndent:
+                () =>
+                ({ tr, state, dispatch }) => {
+                    const { selection } = state;
+                    tr = tr.setSelection(selection);
+                    tr = updateIndentLevel(tr, this.options, "increase");
+
+                    if (tr.docChanged && dispatch) {
+                        dispatch(tr);
+                        return true;
+                    }
+
+                    return false;
+                },
+            decreaseIndent:
+                () =>
+                ({ tr, state, dispatch }) => {
+                    const { selection } = state;
+                    tr = tr.setSelection(selection);
+                    tr = updateIndentLevel(tr, this.options, "decrease");
+
+                    if (tr.docChanged && dispatch) {
+                        dispatch(tr);
+                        return true;
+                    }
+
+                    return false;
+                },
+            listIndent:
+                () =>
+                ({ editor, tr, dispatch }) =>
+                    setListMargin(editor, tr, this.options, dispatch, "increase"),
+            listOutdent:
+                () =>
+                ({ editor, tr, dispatch }) =>
+                    setListMargin(editor, tr, this.options, dispatch, "decrease")
+        };
+    },
+
+    addKeyboardShortcuts() {
+        const editor = this.editor;
+
+        return {
+            // Ctrl+] / Cmd+] — indent. On a list, margin the list node; otherwise
+            // fall back to the paragraph/heading/blockquote margin walk.
+            "Mod-]": () => (findListAncestor(editor) ? editor.commands.listIndent() : editor.commands.increaseIndent()),
+            // Ctrl+[ / Cmd+[ — outdent, mirror of the above.
+            "Mod-[": () => (findListAncestor(editor) ? editor.commands.listOutdent() : editor.commands.decreaseIndent())
+        };
+    },
+
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+
+        return [
+            new Plugin({
+                key: new PluginKey("indentTabHandler"),
+                props: {
+                    handleKeyDown: (view, event) => {
+                        // Only handle Tab and Shift-Tab
+                        if (event.key !== "Tab") {
+                            return false;
+                        }
+
+                        // Only capture Tab if focus is INSIDE the editor content
+                        // This allows Tab to work naturally when focus is outside (e.g., on toolbar buttons)
+                        const editorDom = view.dom;
+                        const activeElement = document.activeElement;
+
+                        if (!editorDom.contains(activeElement)) {
+                            // Focus is outside editor - let Tab work naturally
+                            return false;
+                        }
+
+                        // Check if cursor is in a list item
+                        if (editor.isActive("listItem")) {
+                            // In list item - use structural nesting commands
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            const result = event.shiftKey
+                                ? editor.commands.liftListItem("listItem")
+                                : editor.commands.sinkListItem("listItem");
+
+                            return result;
+                        }
+
+                        // Focus is inside editor - capture Tab for indentation
+                        // Prevent default Tab behavior (focus movement) to keep focus in editor
+                        event.preventDefault();
+                        event.stopPropagation();
+
+                        // Execute the appropriate indent command
+                        const result = event.shiftKey
+                            ? editor.commands.decreaseIndent()
+                            : editor.commands.increaseIndent();
+
+                        // Return true to indicate we handled the event
+                        return result;
+                    }
+                }
+            })
+        ];
+    }
+});
+
+/**
+ * Finds the nearest list ancestor (bulletList/orderedList/taskList) of the current
+ * selection, returning its node and document position, or null if none.
+ */
+function findListAncestor(editor: Editor): { node: ProseMirrorNode; pos: number } | null {
+    const { $from } = editor.state.selection;
+
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (LIST_TYPES.includes(node.type.name)) {
+            return { node, pos: $from.before(depth) };
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Applies margin indentation to the nearest list ancestor node only (Approach A).
+ * The inner paragraph is never touched, so no double indentation occurs.
+ */
+function setListMargin(
+    editor: Editor,
+    tr: Transaction,
+    options: IndentOptions,
+    dispatch: ((tr: Transaction) => void) | undefined,
+    direction: "increase" | "decrease"
+): boolean {
+    const list = findListAncestor(editor);
+    if (!list) {
+        return false;
+    }
+
+    const currentIndent = list.node.attrs.indent || 0;
+    const newIndent =
+        direction === "increase"
+            ? Math.min(currentIndent + options.indentStep, options.maxIndent)
+            : Math.max(currentIndent - options.indentStep, options.minIndent);
+
+    if (newIndent === currentIndent) {
+        return false;
+    }
+
+    if (dispatch) {
+        tr.setNodeMarkup(list.pos, undefined, {
+            ...list.node.attrs,
+            indent: newIndent
+        });
+        dispatch(tr);
+        return true;
+    }
+
+    return false;
+}
+
+function updateIndentLevel(tr: Transaction, options: IndentOptions, direction: "increase" | "decrease"): Transaction {
+    const { doc, selection } = tr;
+
+    if (!doc || !selection) return tr;
+
+    if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+        return tr;
+    }
+
+    const { from, to } = selection;
+
+    doc.nodesBetween(from, to, (node, pos) => {
+        if (options.types.includes(node.type.name)) {
+            const currentIndent = node.attrs.indent || 0;
+            let newIndent = currentIndent;
+
+            if (direction === "increase") {
+                newIndent = Math.min(currentIndent + options.indentStep, options.maxIndent);
+            } else {
+                newIndent = Math.max(currentIndent - options.indentStep, options.minIndent);
+            }
+
+            if (newIndent !== currentIndent) {
+                tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    indent: newIndent
+                });
+            }
+        }
+        return true;
+    });
+
+    return tr;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/KeyboardNavigation.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/KeyboardNavigation.ts
new file mode 100644
index 0000000000..bf8536ea38
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/KeyboardNavigation.ts
@@ -0,0 +1,111 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export interface KeyboardNavigationOptions {
+    wrapperSelector: string;
+    toolbarSelector: string;
+    statusBarSelector: string;
+    widgetSelector: string;
+}
+
+export const KeyboardNavigation = Extension.create<KeyboardNavigationOptions>({
+    name: "keyboardNavigation",
+
+    addOptions() {
+        return {
+            wrapperSelector: ".tiptap-wrapper",
+            toolbarSelector: ".tiptap-toolbar",
+            statusBarSelector: ".rich-text-status-bar",
+            widgetSelector: ".widget-rich-text"
+        };
+    },
+
+    addProseMirrorPlugins() {
+        const options = this.options;
+
+        return [
+            new Plugin({
+                key: new PluginKey("keyboardNavigation"),
+                props: {
+                    handleKeyDown: (view, event) => {
+                        // Alt+F10: Focus toolbar or wrapper
+                        if (event.altKey && event.key === "F10") {
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            // Find the widget container relative to this editor
+                            const editorDom = view.dom;
+                            const widget = editorDom.closest(options.widgetSelector);
+
+                            if (!widget) {
+                                return false;
+                            }
+
+                            // Try to find toolbar first
+                            const toolbar = widget.querySelector(options.toolbarSelector);
+
+                            if (toolbar) {
+                                // Toolbar exists - focus first enabled button
+                                const firstButton = toolbar.querySelector<HTMLButtonElement>("button:not([disabled])");
+                                if (firstButton) {
+                                    firstButton.focus();
+                                } else {
+                                    // No enabled buttons - focus toolbar container
+                                    (toolbar as HTMLElement).setAttribute("tabindex", "0");
+                                    (toolbar as HTMLElement).focus();
+                                }
+                            } else {
+                                // Toolbar hidden - focus wrapper instead
+                                const wrapper = widget.querySelector<HTMLElement>(options.wrapperSelector);
+                                if (wrapper) {
+                                    wrapper.setAttribute("tabindex", "0");
+                                    wrapper.focus();
+                                }
+                            }
+
+                            return true;
+                        }
+
+                        // Alt+F11: Focus status bar
+                        if (event.altKey && event.key === "F11") {
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            const editorDom = view.dom;
+                            const widget = editorDom.closest(options.widgetSelector);
+
+                            if (!widget) {
+                                return false;
+                            }
+
+                            const statusBar = widget.querySelector<HTMLElement>(options.statusBarSelector);
+                            if (statusBar) {
+                                statusBar.focus();
+                            }
+
+                            return true;
+                        }
+
+                        // Escape: Return to editor (if focus is outside)
+                        if (event.key === "Escape") {
+                            const editorDom = view.dom;
+                            const activeElement = document.activeElement;
+
+                            // Only handle if focus is NOT in editor
+                            if (activeElement && !editorDom.contains(activeElement)) {
+                                event.preventDefault();
+
+                                // Return focus to editor, restoring cursor position
+                                view.focus();
+
+                                return true;
+                            }
+                        }
+
+                        return false;
+                    }
+                }
+            })
+        ];
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/OrderedListStyled.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/OrderedListStyled.ts
new file mode 100644
index 0000000000..625b791769
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/OrderedListStyled.ts
@@ -0,0 +1,79 @@
+import { OrderedList } from "@tiptap/extension-ordered-list";
+
+export interface OrderedListStyledOptions {
+    styleDataFormat: "inline" | "class";
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        orderedListStyled: {
+            setOrderedListStyle: (styleType: "lower-alpha" | "lower-roman" | null) => ReturnType;
+        };
+    }
+}
+
+export const OrderedListStyled = OrderedList.extend<OrderedListStyledOptions>({
+    name: "orderedList",
+
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            styleDataFormat: "inline"
+        };
+    },
+
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            listStyleType: {
+                default: null,
+                parseHTML: element => {
+                    // Parse from inline style
+                    const inlineStyle = element.style.listStyleType;
+                    if (inlineStyle && ["decimal", "lower-alpha", "lower-roman"].includes(inlineStyle)) {
+                        return inlineStyle;
+                    }
+
+                    // Parse from data attribute
+                    const dataStyle = element.getAttribute("data-list-style");
+                    if (dataStyle && ["decimal", "lower-alpha", "lower-roman"].includes(dataStyle)) {
+                        return dataStyle;
+                    }
+
+                    return null;
+                },
+                renderHTML: attributes => {
+                    if (!attributes.listStyleType) {
+                        return {};
+                    }
+
+                    if (this.options.styleDataFormat === "class") {
+                        return {
+                            "data-list-style": attributes.listStyleType,
+                            class: `list-style-${attributes.listStyleType}`
+                        };
+                    } else {
+                        return {
+                            style: `list-style-type: ${attributes.listStyleType};`
+                        };
+                    }
+                }
+            }
+        };
+    },
+
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setOrderedListStyle:
+                (styleType: "lower-alpha" | "lower-roman" | null) =>
+                ({ commands, editor }) => {
+                    if (!editor.isActive("orderedList")) {
+                        return false;
+                    }
+
+                    return commands.updateAttributes("orderedList", { listStyleType: styleType });
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TableBackgroundColor.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TableBackgroundColor.ts
new file mode 100644
index 0000000000..a5fd64ca95
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TableBackgroundColor.ts
@@ -0,0 +1,507 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Table } from "@tiptap/extension-table";
+import { DOMOutputSpec, Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { EditorView, NodeView } from "@tiptap/pm/view";
+
+// Declare custom commands for table border styling
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        tableBackgroundColor: {
+            setTableBorderStyle: (borderStyle: string) => ReturnType;
+            setTableBorderWidth: (borderWidth: string) => ReturnType;
+        };
+    }
+}
+
+// Helper to create colgroup (copied from TipTap source)
+function createColGroup(node: any, cellMinWidth: number) {
+    let totalWidth = 0;
+    let fixedWidth = true;
+    const cols: any[] = [];
+    const row = node.firstChild;
+
+    if (!row) {
+        return { colgroup: ["colgroup"], tableWidth: "", tableMinWidth: "" };
+    }
+
+    for (let i = 0, col = 0; i < row.childCount; i += 1) {
+        const { colspan, colwidth } = row.child(i).attrs;
+        for (let j = 0; j < colspan; j += 1, col += 1) {
+            const hasWidth = colwidth && colwidth[j];
+            const cssWidth = hasWidth ? colwidth[j] + "px" : "";
+            totalWidth += hasWidth ? colwidth[j] : cellMinWidth;
+            if (!hasWidth) {
+                fixedWidth = false;
+            }
+            cols.push(["col", cssWidth ? { style: `min-width: ${cssWidth}` } : {}]);
+        }
+    }
+
+    const tableWidth = fixedWidth ? totalWidth + "px" : "";
+    const tableMinWidth = fixedWidth ? "" : totalWidth + "px";
+
+    return {
+        colgroup: ["colgroup", {}, ...cols],
+        tableWidth,
+        tableMinWidth
+    };
+}
+
+export type TableBackgroundColorOptions = {
+    HTMLAttributes?: Record<string, any>;
+    resizable?: boolean;
+    cellMinWidth?: number;
+    renderWrapper?: boolean;
+    styleDataFormat: "inline" | "class";
+};
+
+export const TableBackgroundColor = Table.extend<TableBackgroundColorOptions>({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            HTMLAttributes: {},
+            resizable: true,
+            cellMinWidth: 25,
+            renderWrapper: false,
+            styleDataFormat: "inline"
+        };
+    },
+
+    addAttributes() {
+        const styleDataFormat = this.options.styleDataFormat;
+
+        return {
+            ...this.parent?.(),
+            backgroundColor: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-background-color") || null;
+                    } else {
+                        return element.style.backgroundColor || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-background-color": attributes.backgroundColor,
+                            class: "has-background-color"
+                        };
+                    } else {
+                        // Return empty here - we'll handle it in the main renderHTML
+                        return {};
+                    }
+                }
+            },
+            // Table border color attribute - stores custom border color for the entire table
+            // Supports both inline style and class-based rendering modes
+            borderColor: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-color") || null;
+                    } else {
+                        return element.style.borderColor || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderColor) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-color": attributes.borderColor,
+                            class: "has-table-border"
+                        };
+                    } else {
+                        // Return empty here - we'll handle it in the main renderHTML
+                        return {};
+                    }
+                }
+            },
+            // Table border style attribute - supports CSS border-style values (solid, dashed, dotted, etc.)
+            borderStyle: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-style") || null;
+                    } else {
+                        return element.style.borderStyle || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderStyle) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-style": attributes.borderStyle
+                        };
+                    } else {
+                        // Return empty here - we'll handle it in the main renderHTML
+                        return {};
+                    }
+                }
+            },
+            // Table border width attribute - stores border width in pixels (e.g., "1px", "2px")
+            borderWidth: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-width") || null;
+                    } else {
+                        return element.style.borderWidth || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderWidth) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-width": attributes.borderWidth
+                        };
+                    } else {
+                        // Return empty here - we'll handle it in the main renderHTML
+                        return {};
+                    }
+                }
+            }
+        };
+    },
+
+    renderHTML({ node, HTMLAttributes }): DOMOutputSpec {
+        const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth || 25);
+
+        // Get style attributes from node
+        const backgroundColor = node.attrs.backgroundColor;
+        const borderColor = node.attrs.borderColor;
+        const borderStyle = node.attrs.borderStyle;
+        const borderWidth = node.attrs.borderWidth;
+
+        // Build the style string by merging table width, background, and border properties
+        let styleString = "";
+
+        // Add table width or min-width
+        if (tableWidth) {
+            styleString = `width: ${tableWidth}`;
+        } else if (tableMinWidth) {
+            styleString = `min-width: ${tableMinWidth}`;
+        }
+
+        // Add background color if present (inline mode)
+        if (backgroundColor && this.options.styleDataFormat === "inline") {
+            styleString += styleString
+                ? `; background-color: ${backgroundColor}`
+                : `background-color: ${backgroundColor}`;
+        }
+
+        // Add border properties if present (inline mode)
+        if (this.options.styleDataFormat === "inline") {
+            // If any border property is set, we need to ensure border-style is set for the border to be visible
+            const hasBorderProperties = borderColor || borderStyle || borderWidth;
+
+            if (hasBorderProperties) {
+                // Always set border-style first (default to 'solid' if not specified)
+                const effectiveBorderStyle = borderStyle || "solid";
+                styleString += styleString
+                    ? `; border-style: ${effectiveBorderStyle}`
+                    : `border-style: ${effectiveBorderStyle}`;
+
+                // Set border-width (default to '1px' if not specified)
+                const effectiveBorderWidth = borderWidth || "1px";
+                styleString += `; border-width: ${effectiveBorderWidth}`;
+
+                // Set border-color if specified
+                if (borderColor) {
+                    styleString += `; border-color: ${borderColor}`;
+                }
+            }
+        }
+
+        // Build class-based attributes for border properties
+        const classAttrs: Record<string, any> = {};
+        if (this.options.styleDataFormat === "class") {
+            if (backgroundColor) {
+                classAttrs["data-background-color"] = backgroundColor;
+                classAttrs.class = "has-background-color";
+            }
+            if (borderColor || borderStyle || borderWidth) {
+                if (borderColor) classAttrs["data-border-color"] = borderColor;
+                if (borderStyle) classAttrs["data-border-style"] = borderStyle;
+                if (borderWidth) classAttrs["data-border-width"] = borderWidth;
+                classAttrs.class = classAttrs.class ? `${classAttrs.class} has-table-border` : "has-table-border";
+            }
+        }
+
+        // Merge all attributes
+        const attrs = mergeAttributes(
+            this.options.HTMLAttributes || {},
+            HTMLAttributes,
+            styleString ? { style: styleString } : {},
+            this.options.styleDataFormat === "class" ? classAttrs : {}
+        );
+
+        const table: DOMOutputSpec = ["table", attrs, colgroup, ["tbody", 0]];
+
+        return this.options.renderWrapper ? ["div", { class: "tableWrapper" }, table] : table;
+    },
+
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setTableBorderStyle:
+                (borderStyle: string) =>
+                ({ state, dispatch }) => {
+                    const { selection } = state;
+                    const { $from } = selection;
+
+                    for (let depth = $from.depth; depth > 0; depth--) {
+                        const node = $from.node(depth);
+                        if (node.type.name === "table") {
+                            if (dispatch) {
+                                const pos = $from.before(depth);
+                                const tr = state.tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    borderStyle
+                                });
+                                dispatch(tr);
+                            }
+                            return true;
+                        }
+                    }
+                    return false;
+                },
+            setTableBorderWidth:
+                (borderWidth: string) =>
+                ({ state, dispatch }) => {
+                    const { selection } = state;
+                    const { $from } = selection;
+
+                    for (let depth = $from.depth; depth > 0; depth--) {
+                        const node = $from.node(depth);
+                        if (node.type.name === "table") {
+                            if (dispatch) {
+                                const pos = $from.before(depth);
+                                const tr = state.tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    borderWidth
+                                });
+                                dispatch(tr);
+                            }
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+        };
+    },
+
+    addNodeView() {
+        // Only add custom NodeView if resizable, otherwise use default rendering
+        if (!this.options.resizable || !this.editor.isEditable) {
+            return null;
+        }
+
+        return ({ node, getPos, view }) => {
+            return new TableBackgroundColorNodeView(
+                node,
+                view,
+                getPos as () => number,
+                this.options.cellMinWidth || 25,
+                this.options.styleDataFormat || "inline"
+            );
+        };
+    }
+});
+
+class TableBackgroundColorNodeView implements NodeView {
+    node: ProseMirrorNode;
+    view: EditorView;
+    getPos: () => number;
+    cellMinWidth: number;
+    styleDataFormat: "inline" | "class";
+    dom: HTMLElement;
+    table: HTMLTableElement;
+    contentDOM: HTMLElement;
+
+    constructor(
+        node: ProseMirrorNode,
+        view: EditorView,
+        getPos: () => number,
+        cellMinWidth: number,
+        styleDataFormat: "inline" | "class"
+    ) {
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.cellMinWidth = cellMinWidth;
+        this.styleDataFormat = styleDataFormat;
+
+        // Create wrapper div
+        this.dom = document.createElement("div");
+        this.dom.className = "tableWrapper";
+
+        // Create table element
+        this.table = document.createElement("table");
+        this.dom.appendChild(this.table);
+
+        // Create colgroup
+        this.updateColgroup();
+
+        // Create tbody as contentDOM
+        this.contentDOM = document.createElement("tbody");
+        this.table.appendChild(this.contentDOM);
+
+        // Apply styling (background and border)
+        this.updateTableStyles();
+    }
+
+    updateColgroup() {
+        // Remove existing colgroup if any
+        const existingColgroup = this.table.querySelector("colgroup");
+        if (existingColgroup) {
+            existingColgroup.remove();
+        }
+
+        // Create new colgroup
+        const { colgroup } = createColGroup(this.node, this.cellMinWidth);
+        const colgroupElement = this.createElementFromSpec(colgroup as unknown as DOMOutputSpec);
+        this.table.insertBefore(colgroupElement, this.contentDOM);
+    }
+
+    updateTableStyles() {
+        const backgroundColor = this.node.attrs.backgroundColor;
+        const borderColor = this.node.attrs.borderColor;
+        const borderStyle = this.node.attrs.borderStyle;
+        const borderWidth = this.node.attrs.borderWidth;
+        const { tableWidth, tableMinWidth } = createColGroup(this.node, this.cellMinWidth);
+
+        // Build style string for inline mode
+        let styleString = "";
+        if (tableWidth) {
+            styleString = `width: ${tableWidth}`;
+        } else if (tableMinWidth) {
+            styleString = `min-width: ${tableMinWidth}`;
+        }
+
+        if (this.styleDataFormat === "inline") {
+            if (backgroundColor) {
+                styleString += styleString
+                    ? `; background-color: ${backgroundColor}`
+                    : `background-color: ${backgroundColor}`;
+            }
+
+            // If any border property is set, ensure border-style is set for visibility
+            const hasBorderProperties = borderColor || borderStyle || borderWidth;
+            if (hasBorderProperties) {
+                // Always set border-style first (default to 'solid' if not specified)
+                const effectiveBorderStyle = borderStyle || "solid";
+                styleString += styleString
+                    ? `; border-style: ${effectiveBorderStyle}`
+                    : `border-style: ${effectiveBorderStyle}`;
+
+                // Set border-width (default to '1px' if not specified)
+                const effectiveBorderWidth = borderWidth || "1px";
+                styleString += `; border-width: ${effectiveBorderWidth}`;
+
+                // Set border-color if specified
+                if (borderColor) {
+                    styleString += `; border-color: ${borderColor}`;
+                }
+            }
+        }
+
+        if (styleString) {
+            this.table.style.cssText = styleString;
+        }
+
+        // Handle class-based mode
+        if (this.styleDataFormat === "class") {
+            // Background color
+            if (backgroundColor) {
+                this.table.setAttribute("data-background-color", backgroundColor);
+                this.table.classList.add("has-background-color");
+            } else {
+                this.table.removeAttribute("data-background-color");
+                this.table.classList.remove("has-background-color");
+            }
+
+            // Border properties
+            if (borderColor || borderStyle || borderWidth) {
+                if (borderColor) this.table.setAttribute("data-border-color", borderColor);
+                if (borderStyle) this.table.setAttribute("data-border-style", borderStyle);
+                if (borderWidth) this.table.setAttribute("data-border-width", borderWidth);
+                this.table.classList.add("has-table-border");
+            } else {
+                this.table.removeAttribute("data-border-color");
+                this.table.removeAttribute("data-border-style");
+                this.table.removeAttribute("data-border-width");
+                this.table.classList.remove("has-table-border");
+            }
+        }
+    }
+
+    createElementFromSpec(spec: DOMOutputSpec): HTMLElement {
+        if (typeof spec === "string") {
+            return document.createTextNode(spec) as any;
+        }
+
+        const specArray = Array.from(spec as readonly any[]);
+        const [tag, attrs, ...children] = specArray;
+        const element = document.createElement(tag);
+
+        if (attrs && typeof attrs === "object" && !Array.isArray(attrs)) {
+            Object.entries(attrs).forEach(([key, value]) => {
+                if (key === "style" && typeof value === "string") {
+                    element.style.cssText = value;
+                } else if (key === "class") {
+                    element.className = value as string;
+                } else {
+                    element.setAttribute(key, value as string);
+                }
+            });
+        }
+
+        if (children) {
+            children.forEach((child: any) => {
+                if (child !== 0 && child) {
+                    // 0 is content hole
+                    element.appendChild(this.createElementFromSpec(child));
+                }
+            });
+        }
+
+        return element;
+    }
+
+    update(node: ProseMirrorNode) {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+
+        this.node = node;
+        this.updateColgroup();
+        this.updateTableStyles();
+        return true;
+    }
+
+    ignoreMutation(mutation: MutationRecord) {
+        // Ignore attribute changes on the table (we manage them)
+        if (mutation.type === "attributes" && mutation.target === this.table) {
+            return true;
+        }
+        return false;
+    }
+
+    destroy() {
+        // Cleanup if needed
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TableCellBackgroundColor.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TableCellBackgroundColor.ts
new file mode 100644
index 0000000000..c869867fec
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TableCellBackgroundColor.ts
@@ -0,0 +1,216 @@
+import { mergeAttributes } from "@tiptap/core";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { DOMOutputSpec } from "@tiptap/pm/model";
+
+// Declare custom commands for cell border styling
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        tableCellBackgroundColor: {
+            setCellBorderColor: (borderColor: string) => ReturnType;
+            setCellBorderStyle: (borderStyle: string) => ReturnType;
+            setCellBorderWidth: (borderWidth: string) => ReturnType;
+        };
+    }
+}
+
+export type TableCellBackgroundColorOptions = {
+    styleDataFormat: "inline" | "class";
+};
+
+export const TableCellBackgroundColor = TableCell.extend<TableCellBackgroundColorOptions>({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            styleDataFormat: "inline"
+        };
+    },
+
+    addAttributes() {
+        const styleDataFormat = this.options.styleDataFormat;
+
+        return {
+            ...this.parent?.(),
+            backgroundColor: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-background-color") || null;
+                    } else {
+                        return element.style.backgroundColor || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-background-color": attributes.backgroundColor,
+                            class: "has-background-color"
+                        };
+                    } else {
+                        return {
+                            style: `background-color: ${attributes.backgroundColor}`
+                        };
+                    }
+                }
+            },
+            // Cell border color attribute - stores custom border color for individual cells
+            borderColor: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-color") || null;
+                    } else {
+                        return element.style.borderColor || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderColor) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-color": attributes.borderColor
+                        };
+                    } else {
+                        return {
+                            style: `border-color: ${attributes.borderColor}`
+                        };
+                    }
+                }
+            },
+            // Cell border style attribute - supports CSS border-style values
+            borderStyle: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-style") || null;
+                    } else {
+                        return element.style.borderStyle || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderStyle) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-style": attributes.borderStyle
+                        };
+                    } else {
+                        return {
+                            style: `border-style: ${attributes.borderStyle}`
+                        };
+                    }
+                }
+            },
+            // Cell border width attribute - stores border width in pixels
+            borderWidth: {
+                default: null,
+                parseHTML: element => {
+                    if (styleDataFormat === "class") {
+                        return element.getAttribute("data-border-width") || null;
+                    } else {
+                        return element.style.borderWidth || null;
+                    }
+                },
+                renderHTML: attributes => {
+                    if (!attributes.borderWidth) {
+                        return {};
+                    }
+
+                    if (styleDataFormat === "class") {
+                        return {
+                            "data-border-width": attributes.borderWidth
+                        };
+                    } else {
+                        return {
+                            style: `border-width: ${attributes.borderWidth}`
+                        };
+                    }
+                }
+            }
+        };
+    },
+
+    renderHTML({ HTMLAttributes }): DOMOutputSpec {
+        const backgroundColor = HTMLAttributes.backgroundColor;
+        const borderColor = HTMLAttributes.borderColor;
+        const borderStyle = HTMLAttributes.borderStyle;
+        const borderWidth = HTMLAttributes.borderWidth;
+
+        let styleString = "";
+        const classAttrs: Record<string, any> = {};
+
+        // Inline mode: build style string with border defaults
+        if (this.options.styleDataFormat === "inline") {
+            // Background color
+            if (backgroundColor) {
+                styleString = `background-color: ${backgroundColor}`;
+            }
+
+            // Border properties with defaults
+            const hasBorderProperties = borderColor || borderStyle || borderWidth;
+            if (hasBorderProperties) {
+                const effectiveBorderStyle = borderStyle || "solid";
+                const effectiveBorderWidth = borderWidth || "1px";
+
+                styleString += styleString
+                    ? `; border-style: ${effectiveBorderStyle}`
+                    : `border-style: ${effectiveBorderStyle}`;
+                styleString += `; border-width: ${effectiveBorderWidth}`;
+
+                if (borderColor) {
+                    styleString += `; border-color: ${borderColor}`;
+                }
+            }
+        }
+
+        // Class mode: use data attributes
+        if (this.options.styleDataFormat === "class") {
+            if (backgroundColor) {
+                classAttrs["data-background-color"] = backgroundColor;
+                classAttrs.class = "has-background-color";
+            }
+            if (borderColor || borderStyle || borderWidth) {
+                if (borderColor) classAttrs["data-border-color"] = borderColor;
+                if (borderStyle) classAttrs["data-border-style"] = borderStyle;
+                if (borderWidth) classAttrs["data-border-width"] = borderWidth;
+                classAttrs.class = classAttrs.class ? `${classAttrs.class} has-cell-border` : "has-cell-border";
+            }
+        }
+
+        const attrs = mergeAttributes(
+            HTMLAttributes,
+            styleString ? { style: styleString } : {},
+            this.options.styleDataFormat === "class" ? classAttrs : {}
+        );
+
+        return ["td", attrs, 0];
+    },
+
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setCellBorderColor:
+                (borderColor: string) =>
+                ({ commands }) => {
+                    return commands.setCellAttribute("borderColor", borderColor);
+                },
+            setCellBorderStyle:
+                (borderStyle: string) =>
+                ({ commands }) => {
+                    return commands.setCellAttribute("borderStyle", borderStyle);
+                },
+            setCellBorderWidth:
+                (borderWidth: string) =>
+                ({ commands }) => {
+                    return commands.setCellAttribute("borderWidth", borderWidth);
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TextAlignClass.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TextAlignClass.ts
new file mode 100644
index 0000000000..281e9bd466
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TextAlignClass.ts
@@ -0,0 +1,185 @@
+import { Extension } from "@tiptap/core";
+import "@tiptap/extension-text-align";
+
+export interface TextAlignOptions {
+    types: string[];
+    alignments: string[];
+    defaultAlignment: string;
+    styleDataFormat: "inline" | "class";
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        textAlign: {
+            /**
+             * Set the text alignment
+             */
+            setTextAlign: (alignment: string) => ReturnType;
+            /**
+             * Unset the text alignment
+             */
+            unsetTextAlign: () => ReturnType;
+            /**
+             * Toggle the text alignment
+             */
+            toggleTextAlign: (alignment: string) => ReturnType;
+        };
+    }
+}
+
+export const TextAlign = Extension.create<TextAlignOptions>({
+    name: "textAlign",
+
+    addOptions() {
+        return {
+            types: [],
+            alignments: ["left", "center", "right", "justify"],
+            defaultAlignment: "left",
+            styleDataFormat: "inline"
+        };
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textAlign: {
+                        default: null,
+                        parseHTML: element => {
+                            if (this.options.styleDataFormat === "class") {
+                                // Check for class-based alignment first
+                                if (element.classList.contains("text-align-left")) return "left";
+                                if (element.classList.contains("text-align-center")) return "center";
+                                if (element.classList.contains("text-align-right")) return "right";
+                                if (element.classList.contains("text-align-justify")) return "justify";
+                                // Check data attribute
+                                return element.getAttribute("data-text-align") || this.options.defaultAlignment;
+                            } else {
+                                // Inline mode: parse from style attribute (backwards compatible)
+                                return element.style.textAlign || this.options.defaultAlignment;
+                            }
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.textAlign) {
+                                return {};
+                            }
+
+                            if (this.options.styleDataFormat === "class") {
+                                return {
+                                    class: `text-align-${attributes.textAlign}`,
+                                    "data-text-align": attributes.textAlign
+                                };
+                            } else {
+                                return {
+                                    style: `text-align: ${attributes.textAlign}`
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        return {
+            setTextAlign:
+                (alignment: string) =>
+                ({ tr, state, dispatch }) => {
+                    const { selection } = state;
+                    const { from, to } = selection;
+
+                    if (!this.options.alignments.includes(alignment)) {
+                        return false;
+                    }
+
+                    let applicable = false;
+
+                    state.doc.nodesBetween(from, to, (node, pos) => {
+                        if (this.options.types.includes(node.type.name)) {
+                            applicable = true;
+                            if (dispatch) {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    textAlign: alignment
+                                });
+                            }
+                        }
+                    });
+
+                    if (!applicable) {
+                        return false;
+                    }
+
+                    if (dispatch) {
+                        dispatch(tr);
+                    }
+
+                    return true;
+                },
+            unsetTextAlign:
+                () =>
+                ({ tr, state, dispatch }) => {
+                    const { selection } = state;
+                    const { from, to } = selection;
+                    let applicable = false;
+
+                    state.doc.nodesBetween(from, to, (node, pos) => {
+                        if (this.options.types.includes(node.type.name)) {
+                            applicable = true;
+                            if (dispatch) {
+                                const newAttrs = { ...node.attrs };
+                                delete newAttrs.textAlign;
+                                tr.setNodeMarkup(pos, undefined, newAttrs);
+                            }
+                        }
+                    });
+
+                    if (!applicable) {
+                        return false;
+                    }
+
+                    if (dispatch) {
+                        dispatch(tr);
+                    }
+
+                    return true;
+                },
+            toggleTextAlign:
+                (alignment: string) =>
+                ({ tr, state, dispatch }) => {
+                    const { selection } = state;
+                    const { from, to } = selection;
+
+                    if (!this.options.alignments.includes(alignment)) {
+                        return false;
+                    }
+
+                    let applicable = false;
+
+                    state.doc.nodesBetween(from, to, (node, pos) => {
+                        if (this.options.types.includes(node.type.name)) {
+                            applicable = true;
+                            if (dispatch) {
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    textAlign: alignment
+                                });
+                            }
+                        }
+                    });
+
+                    if (!applicable) {
+                        return false;
+                    }
+
+                    if (dispatch) {
+                        dispatch(tr);
+                    }
+
+                    return true;
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TextColorClass.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TextColorClass.ts
new file mode 100644
index 0000000000..a3ea750e4e
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TextColorClass.ts
@@ -0,0 +1,84 @@
+import { Extension, getStyleProperty } from "@tiptap/core";
+
+export type TextColorClassOptions = {
+    types: string[];
+    styleDataFormat: "inline" | "class";
+};
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        textColorClass: {
+            /**
+             * Set the text color using class-based approach
+             */
+            setTextColor: (color: string) => ReturnType;
+            /**
+             * Unset the text color
+             */
+            unsetTextColor: () => ReturnType;
+        };
+    }
+}
+
+export const TextColorClass = Extension.create<TextColorClassOptions>({
+    name: "textColorClass",
+
+    addOptions() {
+        return {
+            types: ["textStyle"],
+            styleDataFormat: "inline"
+        };
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textColor: {
+                        default: null,
+                        parseHTML: element => {
+                            if (this.options.styleDataFormat === "class") {
+                                return element.getAttribute("data-text-color") || element.style.color || null;
+                            } else {
+                                const value = getStyleProperty(element, "color") ?? element.style.color;
+                                return value?.replace(/['"]+/g, "") || null;
+                            }
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.textColor) {
+                                return {};
+                            }
+
+                            if (this.options.styleDataFormat === "class") {
+                                return {
+                                    "data-text-color": attributes.textColor,
+                                    class: "has-text-color"
+                                };
+                            } else {
+                                return {
+                                    style: `color: ${attributes.textColor}`
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        return {
+            setTextColor:
+                (color: string) =>
+                ({ chain }) => {
+                    return chain().setMark("textStyle", { textColor: color }).run();
+                },
+            unsetTextColor:
+                () =>
+                ({ chain }) => {
+                    return chain().setMark("textStyle", { textColor: null }).unsetMark("textStyle").run();
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TextDirection.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TextDirection.ts
new file mode 100644
index 0000000000..cea39c86b1
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TextDirection.ts
@@ -0,0 +1,76 @@
+import { Extension } from "@tiptap/core";
+
+export interface TextDirectionOptions {
+    types: string[];
+    directions: string[];
+    defaultDirection: string;
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        textDirection: {
+            /**
+             * Set text direction
+             */
+            setTextDirection: (direction: string) => ReturnType;
+            /**
+             * Unset text direction
+             */
+            unsetTextDirection: () => ReturnType;
+        };
+    }
+}
+
+export const TextDirection = Extension.create<TextDirectionOptions>({
+    name: "textDirection",
+
+    addOptions() {
+        return {
+            types: ["paragraph", "heading"],
+            directions: ["ltr", "rtl"],
+            defaultDirection: "ltr"
+        };
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    dir: {
+                        default: this.options.defaultDirection,
+                        parseHTML: element => element.getAttribute("dir") || this.options.defaultDirection,
+                        renderHTML: attributes => {
+                            if (!attributes.dir || attributes.dir === this.options.defaultDirection) {
+                                return {};
+                            }
+
+                            return {
+                                dir: attributes.dir
+                            };
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        return {
+            setTextDirection:
+                direction =>
+                ({ commands }) => {
+                    if (!this.options.directions.includes(direction)) {
+                        return false;
+                    }
+
+                    return this.options.types.every(type => commands.updateAttributes(type, { dir: direction }));
+                },
+            unsetTextDirection:
+                () =>
+                ({ commands }) => {
+                    return this.options.types.every(type => commands.resetAttributes(type, "dir"));
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/TextHighlightClass.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/TextHighlightClass.ts
new file mode 100644
index 0000000000..6f402fbf8c
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/TextHighlightClass.ts
@@ -0,0 +1,109 @@
+import { Extension } from "@tiptap/core";
+import { Highlight } from "@tiptap/extension-highlight";
+
+export type TextHighlightClassOptions = {
+    multicolor: boolean;
+    styleDataFormat: "inline" | "class";
+};
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        textHighlightClass: {
+            /**
+             * Set the text highlight color using class-based approach
+             */
+            setTextHighlight: (color: string) => ReturnType;
+            /**
+             * Unset the text highlight
+             */
+            unsetTextHighlight: () => ReturnType;
+        };
+    }
+}
+
+export const TextHighlightClass = Extension.create<TextHighlightClassOptions>({
+    name: "textHighlightClass",
+
+    addOptions() {
+        return {
+            multicolor: true,
+            styleDataFormat: "inline"
+        };
+    },
+
+    addExtensions() {
+        const styleDataFormat = this.options.styleDataFormat;
+
+        return [
+            Highlight.extend({
+                addAttributes() {
+                    return {
+                        color: {
+                            default: null,
+                            parseHTML: element => {
+                                if (styleDataFormat === "class") {
+                                    return element.dataset.textHighlight || null;
+                                } else {
+                                    return element.style.backgroundColor || null;
+                                }
+                            },
+                            renderHTML: attributes => {
+                                if (!attributes.color) {
+                                    return {};
+                                }
+
+                                if (styleDataFormat === "class") {
+                                    return {
+                                        "data-text-highlight": attributes.color,
+                                        class: "has-text-highlight"
+                                    };
+                                } else {
+                                    return {
+                                        style: `background-color: ${attributes.color}`
+                                    };
+                                }
+                            }
+                        }
+                    };
+                },
+                parseHTML() {
+                    return [
+                        {
+                            tag: "mark",
+                            getAttrs: element => {
+                                const htmlElement = element as HTMLElement;
+                                const hasStyles =
+                                    htmlElement.hasAttribute("style") ||
+                                    htmlElement.hasAttribute("data-text-highlight") ||
+                                    htmlElement.style.backgroundColor;
+
+                                if (!hasStyles) {
+                                    return false;
+                                }
+
+                                return {};
+                            }
+                        }
+                    ];
+                }
+            }).configure({
+                multicolor: this.options.multicolor
+            })
+        ];
+    },
+
+    addCommands() {
+        return {
+            setTextHighlight:
+                (color: string) =>
+                ({ chain }) => {
+                    return chain().setHighlight({ color }).run();
+                },
+            unsetTextHighlight:
+                () =>
+                ({ chain }) => {
+                    return chain().unsetHighlight().run();
+                }
+        };
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/extensions/YouTubeResize.ts b/packages/pluggableWidgets/rich-text-web/src/extensions/YouTubeResize.ts
new file mode 100644
index 0000000000..bb9fa8ef02
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/extensions/YouTubeResize.ts
@@ -0,0 +1,9 @@
+import { Youtube } from "@tiptap/extension-youtube";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { YouTubeResize as YouTubeResizeComponent } from "../components/YouTubeResize";
+
+export const YouTubeResize = Youtube.extend({
+    addNodeView() {
+        return ReactNodeViewRenderer(YouTubeResizeComponent);
+    }
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/package.xml b/packages/pluggableWidgets/rich-text-web/src/package.xml
index 2b355b444a..adce29db0f 100644
--- a/packages/pluggableWidgets/rich-text-web/src/package.xml
+++ b/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.12.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="4.13.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx b/packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx
deleted file mode 100644
index 7a61e034b3..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext, Dispatch, ReactElement, ReactNode, useReducer } from "react";
-import { EditorAction, editorReducer, EditorState, initialState } from "./store";
-
-export const EditorContext = createContext<EditorState>(initialState);
-export const EditorDispatchContext = createContext<Dispatch<EditorAction> | null>(null);
-
-export function EditorProvider({ children }: { children: ReactNode }): ReactElement {
-    const [state, dispatch] = useReducer(editorReducer, initialState);
-
-    return (
-        <EditorContext.Provider value={state}>
-            <EditorDispatchContext.Provider value={dispatch}>{children}</EditorDispatchContext.Provider>
-        </EditorContext.Provider>
-    );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/store/store.ts b/packages/pluggableWidgets/rich-text-web/src/store/store.ts
deleted file mode 100644
index eb9a85b748..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/store/store.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type EditorAction = { type: string; value: boolean };
-
-export interface EditorState {
-    isFullscreen: boolean;
-}
-
-export const initialState: EditorState = {
-    isFullscreen: false
-};
-
-export const SET_FULLSCREEN_ACTION = "SET_FULLSCREEN";
-
-export function editorReducer(state: EditorState, action: EditorAction): EditorState {
-    switch (action.type) {
-        case SET_FULLSCREEN_ACTION:
-            if (action.value === undefined || action.value === null) {
-                return { ...state, isFullscreen: !state.isFullscreen };
-            } else {
-                return { ...state, isFullscreen: action.value };
-            }
-
-        default:
-            return state;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/store/useActionEvents.ts b/packages/pluggableWidgets/rich-text-web/src/store/useActionEvents.ts
deleted file mode 100644
index 0c2eab3408..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/store/useActionEvents.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
-import Quill from "quill";
-import { FocusEvent, useMemo, useRef } from "react";
-import { RichTextContainerProps } from "typings/RichTextProps";
-
-type UseActionEventsReturnValue = {
-    onFocus: (e: FocusEvent) => void;
-    onBlur: (e: FocusEvent) => void;
-};
-
-interface useActionEventsProps extends Pick<
-    RichTextContainerProps,
-    "onFocus" | "onBlur" | "onChange" | "onChangeType"
-> {
-    quill?: Quill | null;
-}
-
-function isInternalTarget(
-    currentTarget: EventTarget & Element,
-    relatedTarget: (EventTarget & Element) | null
-): boolean | undefined {
-    return (
-        currentTarget?.contains(relatedTarget) ||
-        currentTarget?.ownerDocument.querySelector(".widget-rich-text-modal-body")?.contains(relatedTarget)
-    );
-}
-
-export function useActionEvents(props: useActionEventsProps): UseActionEventsReturnValue {
-    const editorValueRef = useRef<string>("");
-    return useMemo(() => {
-        return {
-            onFocus: (e: FocusEvent): void => {
-                const { relatedTarget, currentTarget } = e;
-                if (!isInternalTarget(currentTarget, relatedTarget)) {
-                    executeAction(props.onFocus);
-                    editorValueRef.current = props.quill?.getText() || "";
-                }
-            },
-            onBlur: (e: FocusEvent): void => {
-                const { relatedTarget, currentTarget } = e;
-                if (!isInternalTarget(currentTarget, relatedTarget)) {
-                    executeAction(props.onBlur);
-                    if (props.onChangeType === "onLeave") {
-                        if (props.quill) {
-                            // validate if the text really changed
-                            const currentText = props.quill.getText();
-                            if (currentText !== editorValueRef.current) {
-                                executeAction(props.onChange);
-                                editorValueRef.current = currentText;
-                            }
-                        } else {
-                            executeAction(props.onChange);
-                        }
-                    }
-                }
-            }
-        };
-    }, [props.onFocus, props.quill, props.onBlur, props.onChangeType, props.onChange]);
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss b/packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss
index a54e9ebf74..68556f74f9 100644
--- a/packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss
+++ b/packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss
@@ -1,173 +1,611 @@
+@use "TableStyle";
 @use "RichTextIcons";
+@use "RichTextFormatStyle";
 
 $rte-border-color-default: #ced0d3;
 $rte-gray-ligher: #f8f8f8;
 $rte-brand-primary: #264ae5;
 
 .widget-rich-text {
+    // CSS Variables for consistent theming
+    :root {
+        --white: #fff;
+        --black: #2e2b29;
+        --black-contrast: #110f0e;
+        --gray-1: rgba(61, 37, 20, 0.05);
+        --gray-2: rgba(61, 37, 20, 0.08);
+        --gray-3: rgba(61, 37, 20, 0.12);
+        --gray-4: rgba(53, 38, 28, 0.3);
+        --gray-5: rgba(28, 25, 23, 0.6);
+        --green: #22c55e;
+        --purple: #6a00f5;
+        --purple-contrast: #5800cc;
+        --purple-light: rgba(88, 5, 255, 0.05);
+        --yellow-contrast: #facc15;
+        --yellow: rgba(250, 204, 21, 0.4);
+        --yellow-light: #fffae5;
+        --red: #ff5c33;
+        --red-light: #ffebe5;
+        --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
+    }
+
     position: relative;
+    font-family: Helvetica, Arial, sans-serif;
 
     &.form-control {
-        padding: unset;
-    }
-    .ql-container {
-        border: unset;
+        padding: 0;
+        border: 1px solid $rte-border-color-default;
+        border-radius: 4px;
         overflow: hidden;
+        flex-direction: column;
+    }
 
-        .ql-tooltip {
-            position: fixed;
-            width: max-content;
-            left: 0;
-            z-index: 1;
-        }
+    &.form-control-static {
+        padding: 8px;
     }
 
-    &.fullscreen {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100vw;
-        height: 100vh;
-        z-index: 104;
-        background-color: white;
-        overflow: auto;
+    .tiptap-wrapper {
         display: flex;
         flex-direction: column;
-        padding: 20px;
-        box-sizing: border-box;
-        margin: 0;
-        border: none;
-        max-width: none;
-        max-height: none;
-        transform: none;
-        outline: none;
+        width: 100%;
+    }
 
-        min-width: 100vw;
-        min-height: 100vh;
+    .tiptap-editor {
+        min-height: 200px;
+        width: 100%;
+        padding: 12px;
 
-        .flexcontainer {
-            width: 100% !important;
-            max-width: 100% !important;
-        }
-    }
+        .ProseMirror {
+            outline: none;
+            min-height: 200px;
 
-    .flex-column-reverse {
-        .widget-rich-text-toolbar.ql-toolbar {
-            box-shadow: 2px 0 4px 0 var(--shadow-color-border, #00000014);
+            &:focus {
+                outline: none;
+            }
 
-            .ql-picker-options {
-                bottom: 100%;
-                top: unset;
+            p {
+                margin: 0 0 1em;
             }
-        }
-    }
 
-    .widget-rich-text-toolbar.ql-toolbar {
-        border: unset;
-        box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, #00000014);
+            // Indentation support
+            [data-indent] {
+                transition: margin-left 0.2s ease;
+            }
 
-        .ql-picker {
-            &.ql-font,
-            &.ql-header,
-            &.ql-size {
-                margin-top: 2px;
-                background-color: var(--gray-lighter, $rte-gray-ligher);
-                border-radius: 4px;
-                margin-right: 4px;
+            // Text alignment
+            [style*="text-align: left"] {
+                text-align: left;
             }
-        }
 
-        .ql-picker-options {
-            max-height: 250px;
-            overflow-y: auto;
-        }
+            [style*="text-align: center"] {
+                text-align: center;
+            }
 
-        .ql-formats {
-            button:focus {
-                font-weight: bold;
+            [style*="text-align: right"] {
+                text-align: right;
             }
-        }
-    }
 
-    .hide-toolbar .ql-toolbar {
-        display: none;
-    }
+            [style*="text-align: justify"] {
+                text-align: justify;
+            }
 
-    &-footer {
-        align-items: center;
-        color: var(--font-color-detail);
-        display: flex;
-        flex: 0 0 auto;
-        font-size: var(--navigation-sub-font-size);
-        height: var(--spacing-large);
-        overflow: hidden;
-        padding: 0 var(--form-label-gutter, 8px);
-        position: relative;
-        text-transform: none;
-        justify-content: end;
+            // Text direction
+            [dir="ltr"] {
+                direction: ltr;
+            }
 
-        &:not(.hide-status-bar) {
-            border-top: 1px solid var(--border-color-default, $rte-border-color-default);
-        }
+            [dir="rtl"] {
+                direction: rtl;
+            }
 
-        &:focus-within {
-            border-top: 1px solid var(--form-input-border-focus-color, var(--brand-primary, $rte-brand-primary));
-        }
-    }
+            // Font size support
+            span[style*="font-size"] {
+                line-height: 1.4;
+            }
 
-    &.editor-readPanel {
-        background-color: transparent;
-        .widget-rich-text-container {
-            border: unset;
+            // Text formatting styles
+            strong {
+                font-weight: 700;
+            }
+
+            em {
+                font-style: italic;
+            }
+
+            s {
+                text-decoration: line-through;
+            }
+
+            u {
+                text-decoration: underline;
+            }
+
+            // Font family support
+            span[style*="font-family"] {
+                // Inherit font-family from inline style
+            }
+
+            a.tiptap-link {
+                color: #0066cc;
+                text-decoration: underline;
+                cursor: pointer;
+
+                &:hover {
+                    color: #0052a3;
+                }
+
+                &:visited {
+                    color: #551a8b;
+                }
+            }
+
+            mark {
+                padding: 0.1em 0.2em;
+                border-radius: 2px;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                margin-top: 0.5em;
+                margin-bottom: 0.5em;
+                font-weight: 700;
+            }
+
+            // Ordered list auto-cycling (6 levels = 2 full cycles)
+            ol {
+                padding-left: 1.5em;
+                margin: 0.5em 0;
+                list-style-type: decimal;
+
+                ol {
+                    list-style-type: lower-alpha;
+
+                    ol {
+                        list-style-type: lower-roman;
+
+                        ol {
+                            list-style-type: decimal;
+
+                            ol {
+                                list-style-type: lower-alpha;
+
+                                ol {
+                                    list-style-type: lower-roman;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Unordered list auto-cycling (6 levels = 2 full cycles)
+            ul {
+                padding-left: 1.5em;
+                margin: 0.5em 0;
+                list-style-type: disc;
+
+                ul {
+                    list-style-type: circle;
+
+                    ul {
+                        list-style-type: square;
+
+                        ul {
+                            list-style-type: disc;
+
+                            ul {
+                                list-style-type: circle;
+
+                                ul {
+                                    list-style-type: square;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Manual list style overrides (Phase 2)
+            // Lower-alpha override with cycle offset
+            ol[data-list-style="lower-alpha"] {
+                list-style-type: lower-alpha !important;
+
+                > li > ol:not([data-list-style]) {
+                    list-style-type: lower-roman;
+
+                    > li > ol:not([data-list-style]) {
+                        list-style-type: decimal;
+
+                        > li > ol:not([data-list-style]) {
+                            list-style-type: lower-alpha;
+
+                            > li > ol:not([data-list-style]) {
+                                list-style-type: lower-roman;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Lower-roman override with cycle offset
+            ol[data-list-style="lower-roman"] {
+                list-style-type: lower-roman !important;
+
+                > li > ol:not([data-list-style]) {
+                    list-style-type: decimal;
+
+                    > li > ol:not([data-list-style]) {
+                        list-style-type: lower-alpha;
+
+                        > li > ol:not([data-list-style]) {
+                            list-style-type: lower-roman;
+
+                            > li > ol:not([data-list-style]) {
+                                list-style-type: decimal;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Decimal override (explicit)
+            ol[data-list-style="decimal"] {
+                list-style-type: decimal !important;
+
+                > li > ol:not([data-list-style]) {
+                    list-style-type: lower-alpha;
+
+                    > li > ol:not([data-list-style]) {
+                        list-style-type: lower-roman;
+
+                        > li > ol:not([data-list-style]) {
+                            list-style-type: decimal;
+                        }
+                    }
+                }
+            }
+
+            // Class mode CSS classes
+            .list-style-lower-alpha {
+                list-style-type: lower-alpha !important;
+            }
+
+            .list-style-lower-roman {
+                list-style-type: lower-roman !important;
+            }
+
+            .list-style-decimal {
+                list-style-type: decimal !important;
+            }
+
+            // Task list styles
+            ul[data-type="taskList"] {
+                list-style: none;
+                padding-left: 0;
+
+                li {
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 0.5em;
+
+                    > label {
+                        flex: 0 0 auto;
+                        margin-right: 0.5rem;
+                        user-select: none;
+                        cursor: pointer;
+
+                        input[type="checkbox"] {
+                            cursor: pointer;
+                        }
+                    }
+
+                    > div {
+                        flex: 1 1 auto;
+                    }
+                }
+
+                p {
+                    margin: 0;
+                }
+
+                ul[data-type="taskList"] {
+                    margin: 0.5em 0 0.5em 1.5em;
+                }
+            }
+
+            code {
+                background-color: rgba(#616161, 0.1);
+                color: #616161;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.85em;
+                font-family: "Courier New", Courier, monospace;
+            }
+
+            pre {
+                background: #0d0d0d;
+                color: #fff;
+                font-family: "JetBrainsMono", monospace;
+                padding: 0.75rem 1rem;
+                border-radius: 0.5rem;
+
+                code {
+                    color: inherit;
+                    padding: 0;
+                    background: none;
+                    font-size: 0.8rem;
+                }
+            }
+
+            blockquote {
+                padding-left: 1rem;
+                border-left: 2px solid rgba(#0d0d0d, 0.1);
+            }
+
+            hr {
+                border: none;
+                border-top: 2px solid rgba(#0d0d0d, 0.1);
+                margin: 2rem 0;
+            }
+
+            // Table styles
+            :first-child {
+                margin-top: 0;
+            }
+
+            // Image and video styles
+            .image-wrapper {
+                display: inline-block;
+                position: relative;
+                margin: 0.5em 0;
+                line-height: 0;
+
+                &.resizing {
+                    outline: 2px solid var(--purple, #6a00f5);
+                }
+
+                .image-container {
+                    position: relative;
+                    display: inline-block;
+                    max-width: 100%;
+
+                    img {
+                        display: block;
+                        max-width: 100%;
+                        height: auto;
+                        border-radius: 4px;
+                    }
+
+                    .resize-handles {
+                        display: none;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        pointer-events: none;
+
+                        .resize-handle {
+                            position: absolute;
+                            width: 12px;
+                            height: 12px;
+                            background: var(--purple, #6a00f5);
+                            border: 2px solid white;
+                            border-radius: 50%;
+                            pointer-events: auto;
+                            cursor: pointer;
+                            z-index: 10;
+
+                            &.nw {
+                                top: -6px;
+                                left: -6px;
+                                cursor: nw-resize;
+                            }
+
+                            &.ne {
+                                top: -6px;
+                                right: -6px;
+                                cursor: ne-resize;
+                            }
+
+                            &.sw {
+                                bottom: -6px;
+                                left: -6px;
+                                cursor: sw-resize;
+                            }
+
+                            &.se {
+                                bottom: -6px;
+                                right: -6px;
+                                cursor: se-resize;
+                            }
+                        }
+                    }
+
+                    &:hover .resize-handles,
+                    .resize-handles:hover {
+                        display: block;
+                    }
+                }
+            }
+
+            // Embed and YouTube video resize styles
+            .embed-wrapper,
+            .youtube-wrapper {
+                display: inline-block;
+                position: relative;
+                margin: 0.5em 0;
+                line-height: 0;
+
+                &.resizing {
+                    outline: 2px solid var(--purple, #6a00f5);
+                }
+
+                .embed-container,
+                .youtube-container {
+                    position: relative;
+                    display: inline-block;
+                    max-width: 100%;
+
+                    iframe {
+                        display: block;
+                        border-radius: 8px;
+                    }
+
+                    .resize-handles {
+                        display: none;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        pointer-events: none;
+
+                        .resize-handle {
+                            position: absolute;
+                            width: 12px;
+                            height: 12px;
+                            background: var(--purple, #6a00f5);
+                            border: 2px solid white;
+                            border-radius: 50%;
+                            pointer-events: auto;
+                            cursor: pointer;
+                            z-index: 10;
+
+                            &.nw {
+                                top: -6px;
+                                left: -6px;
+                                cursor: nw-resize;
+                            }
+
+                            &.ne {
+                                top: -6px;
+                                right: -6px;
+                                cursor: ne-resize;
+                            }
+
+                            &.sw {
+                                bottom: -6px;
+                                left: -6px;
+                                cursor: sw-resize;
+                            }
+
+                            &.se {
+                                bottom: -6px;
+                                right: -6px;
+                                cursor: se-resize;
+                            }
+                        }
+                    }
+
+                    &:hover .resize-handles,
+                    .resize-handles:hover {
+                        display: block;
+                    }
+                }
+            }
+
+            iframe.tiptap-video {
+                max-width: 100%;
+                border-radius: 8px;
+                margin: 1em 0;
+            }
         }
-    }
 
-    &.editor-text {
-        .widget-rich-text-toolbar {
-            pointer-events: none;
-            background-color: var(--gray-lighter, $rte-gray-ligher);
+        &.resize-cursor {
+            cursor: ew-resize;
+            cursor: col-resize;
         }
     }
 
-    .ql-editor li[data-list="ordered"][data-custom-list="lower-alpha"] {
-        counter-increment: custom-list-alpha;
-        & > .ql-ui:before {
-            content: counter(custom-list-alpha, lower-alpha) ". ";
+    .rich-text-status-bar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 100%;
+        height: 24px;
+        padding: 0 12px;
+        border-top: 1px solid var(--border-color-default, #d7d7d7);
+        background-color: var(--background-color-secondary, #f8f8f8);
+        font-size: 12px;
+        color: var(--font-color-secondary, #606060);
+
+        .status-bar-text {
+            user-select: none;
         }
-    }
 
-    .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) ". ";
+        &:focus {
+            outline: 2px solid var(--brand-primary, $rte-brand-primary);
+            outline-offset: 2px;
         }
     }
 
-    .widget-rich-text-prompt {
-        position: absolute;
+    &.fullscreen {
+        position: fixed;
         top: 0;
-        bottom: 0;
         left: 0;
         right: 0;
-        align-content: center;
-        text-align: center;
+        bottom: 0;
+        z-index: 104;
+        background-color: white;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-medium, 16px);
+        box-sizing: border-box;
+        margin: var(--spacing-medium, 16px) var(--closed-sidebar-width);
+        border: none;
+        max-width: none;
+        max-height: none;
+        transform: none;
+        outline: none;
+        box-shadow: var(--shadow-medium);
+
+        .tiptap-wrapper {
+            width: 100%;
+            max-width: 100%;
+            flex: 1;
+        }
+
+        .tiptap-editor {
+            flex: 1;
+        }
     }
 
-    .sticky-sentinel.container-stuck {
-        & + .flexcontainer.flex-column {
-            overflow: visible;
-            .widget-rich-text-toolbar {
-                position: sticky;
-                z-index: 50;
-                top: 0;
-                background-color: white;
-            }
+    VIDEO,
+    IFRAME {
+        pointer-events: none;
+    }
+
+    .code-editor {
+        width: 100%;
+        min-height: 300px;
+        padding: 12px;
+        font-family: "Courier New", Courier, monospace;
+        font-size: 13px;
+        line-height: 1.5;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: #f8f8f8;
+        color: #333;
+        resize: vertical;
+
+        &:focus {
+            outline: none;
+            border-color: #0078d4;
+            background: white;
         }
     }
+}
+
+.mx-scrollcontainer-wrapper:has(.widget-rich-text.fullscreen) {
+    isolation: auto;
 
-    .flexcontainer.flex-column {
-        overflow: visible;
+    .mx-scrollcontainer-wrapper {
+        isolation: auto;
     }
 }
diff --git a/packages/pluggableWidgets/rich-text-web/src/ui/RichTextFormatStyle.scss b/packages/pluggableWidgets/rich-text-web/src/ui/RichTextFormatStyle.scss
new file mode 100644
index 0000000000..502769df27
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/ui/RichTextFormatStyle.scss
@@ -0,0 +1,75 @@
+@use "variables";
+
+.widget-rich-text {
+    @each $name, $font in variables.$fonts {
+        .font-family-#{$name} {
+            @include variables.font($font);
+        }
+
+        .tiptap-toolbar {
+            [data-value="#{$name}"] {
+                @include variables.font($font);
+            }
+        }
+    }
+
+    @for $i from 1 through 10 {
+        .indent-#{$i} {
+            padding-left: #{$i * 3}px;
+        }
+
+        // Lists indent as a block via margin, keeping their marker gutter
+        // (padding-left) intact so numbers/bullets are not collapsed. Matches the
+        // inline-mode margin step (2em per level).
+        ol.indent-#{$i},
+        ul.indent-#{$i} {
+            padding-left: 1.5em;
+            margin-left: #{$i * 2}em;
+        }
+    }
+
+    p {
+        line-height: var(--line-height-base, 1);
+    }
+
+    mark {
+        color: inherit;
+        background-color: inherit;
+    }
+
+    .has-text-color {
+        color: attr(data-text-color type(<color>));
+    }
+
+    .has-text-highlight {
+        background-color: attr(data-text-highlight type(<color>));
+    }
+
+    .has-background-color {
+        background-color: attr(data-background-color type(<color>));
+    }
+
+    .has-font-family {
+        font-family: attr(data-font-family raw-string);
+    }
+
+    .has-font-size {
+        font-size: attr(data-font-size px);
+    }
+
+    .text-align-left {
+        text-align: left;
+    }
+
+    .text-align-center {
+        text-align: center;
+    }
+
+    .text-align-right {
+        text-align: right;
+    }
+
+    .text-align-justify {
+        text-align: justify;
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/ui/RichTextIcons.scss b/packages/pluggableWidgets/rich-text-web/src/ui/RichTextIcons.scss
index b95289c1e4..e5025231a3 100644
--- a/packages/pluggableWidgets/rich-text-web/src/ui/RichTextIcons.scss
+++ b/packages/pluggableWidgets/rich-text-web/src/ui/RichTextIcons.scss
@@ -5,60 +5,69 @@
 }
 
 $icons: (
-    Undo: "\e900",
-    Redo: "\e901",
-    Text-bold: "\e902",
-    Text-italic: "\e903",
-    Text-color: "\e904",
-    Text-background: "\e905",
-    Text-align-left: "\e906",
-    Text-align-center: "\e907",
-    Text-align-right: "\e908",
-    Text-align-justify: "\e909",
-    List-bullets: "\e90a",
-    List-numbers: "\e90c",
-    Text-indent-right: "\e90d",
-    Text-indent-left: "\e90e",
-    Hyperlink: "\e90f",
-    Image: "\e910",
-    Film: "\e911",
-    Insert-edit-math: "\e912",
-    Blockquote: "\e913",
-    Left-to-right: "\e914",
-    Right-to-left: "\e915",
+    Undo: "\e91b",
+    Redo: "\e917",
+    Text-bold: "\e928",
+    Text-italic: "\e926",
+    Text-color: "\e939",
+    Text-background: "\e93a",
+    Text-align-left: "\e91f",
+    Text-align-center: "\e922",
+    Text-align-right: "\e924",
+    Text-align-justify: "\e91c",
+    List-bullets: "\e91e",
+    List-numbers: "\e919",
+    Text-indent-right: "\e909",
+    Text-indent-left: "\e912",
+    Hyperlink: "\e920",
+    Image: "\e93b",
+    Film: "\e93e",
+    Insert-edit-math: "\e911",
+    Blockquote: "\e907",
+    Left-to-right: "\e913",
+    Right-to-left: "\e914",
     Line-height: "\e916",
-    Table: "\e917",
-    Add: "\e918",
-    Substract: "\e919",
-    Source-code: "\e91a",
-    Clear-formating: "\e91b",
-    Text-underline: "\e91c",
-    Text-strikethrough: "\e91d",
-    Text-subscript: "\e91e",
-    Text-superscript: "\e91f",
-    List-lower-alpha: "\e920",
-    Arrow-down: "\e90b",
-    List-checklist: "\e922",
-    List-roman: "\e921",
-    Inline-code: "\e923",
-    View-edit-code: "\e924",
-    Code-block: "\e925",
-    Expand: "\e926",
-    Align-middle: "\e927",
-    Align-bottom: "\e928",
-    Align-top: "\e929",
-    Cell: "\e92a",
-    Check: "\e92b",
-    Close: "\e92c",
-    Erase: "\e92d",
-    Delete: "\e92e",
-    Copy: "\e92f",
-    Column: "\e930",
-    Row: "\e931",
-    Save: "\e932",
-    Merge: "\e933",
-    Wrap: "\e934",
-    Palette: "\e935"
+    Table: "\e927",
+    Add: "\e905",
+    Substract: "\e918",
+    Source-code: "\e90b",
+    Clear-formating: "\e929",
+    Text-underline: "\e90d",
+    Text-strikethrough: "\e904",
+    Text-subscript: "\e90f",
+    Text-superscript: "\e903",
+    List-lower-alpha: "\e902",
+    Arrow-down: "\e92a",
+    List-checklist: "\e908",
+    List-roman: "\e91a",
+    Inline-code: "\e90a",
+    View-edit-code: "\e91d",
+    Code-block: "\e938",
+    Expand: "\e900",
+    Align-middle: "\e901",
+    Align-bottom: "\e915",
+    Align-top: "\e906",
+    Cell: "\e92b",
+    Check: "\e925",
+    Close: "\e90e",
+    Erase: "\e90c",
+    Delete: "\e935",
+    Copy: "\e923",
+    Column: "\e934",
+    Row: "\e92c",
+    Save: "\e921",
+    Merge: "\e936",
+    Wrap: "\e910",
+    Palette: "\e937",
+    Delete-column: "\e92f",
+    Delete-row: "\e933",
+    Insert-column-after: "\e92d",
+    Insert-column-before: "\e932",
+    Insert-row-before: "\e930",
+    Insert-row-after: "\e92e",
+    Split-cell: "\e93c",
+    Delete-table: "\e931",
+    Table-configuration: "\e93d"
 );
 
 .widget-rich-text {
@@ -68,21 +77,6 @@ $icons: (
         }
     }
 
-    .ql-container {
-        .ql-resize-overlay {
-            .ql-resize-toolbar {
-                font-family: "RichTextIconFont" !important;
-                font-style: normal;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-
-                button {
-                    position: relative;
-                }
-            }
-        }
-    }
-
     .icons {
         font-family: "RichTextIconFont" !important;
         font-size: 16px;
@@ -95,61 +89,5 @@ $icons: (
                 content: $code;
             }
         }
-
-        &.ql-color {
-            .ql-picker-label {
-                &:before {
-                    content: map.get($icons, Text-color);
-                }
-                svg {
-                    display: none;
-                }
-            }
-        }
-
-        &.ql-background {
-            .ql-picker-label {
-                &:before {
-                    content: map.get($icons, Text-background);
-                }
-                svg {
-                    display: none;
-                }
-            }
-        }
-
-        &.ql-direction {
-            &:before {
-                content: map.get($icons, Left-to-right);
-            }
-            svg {
-                display: none;
-            }
-
-            &.ql-active {
-                &:before {
-                    content: map.get($icons, Right-to-left);
-                }
-
-                svg {
-                    display: none;
-                }
-            }
-        }
-
-        &.ql-align.ql-picker {
-            .ql-picker-label,
-            .ql-picker-item {
-                &[data-value="center"]:before {
-                    content: map.get($icons, Text-align-center);
-                }
-                &[data-value="justify"]:before {
-                    content: map.get($icons, Text-align-justify);
-                }
-                svg {
-                    display: none;
-                }
-            }
-        }
     }
 }
diff --git a/packages/pluggableWidgets/rich-text-web/src/ui/TableStyle.scss b/packages/pluggableWidgets/rich-text-web/src/ui/TableStyle.scss
new file mode 100644
index 0000000000..6456e08151
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/ui/TableStyle.scss
@@ -0,0 +1,56 @@
+.widget-rich-text {
+    table {
+        border-collapse: collapse;
+        margin: 0;
+        overflow: hidden;
+        table-layout: fixed;
+        width: 100%;
+
+        td,
+        th {
+            border: 1px solid var(--gray-3, rgba(61, 37, 20, 0.12));
+            box-sizing: border-box;
+            min-width: 1em;
+            padding: 6px 8px;
+            position: relative;
+            vertical-align: top;
+
+            > * {
+                margin-bottom: 0;
+            }
+        }
+
+        th {
+            background-color: var(--gray-1, rgba(61, 37, 20, 0.05));
+            font-weight: 700;
+            text-align: left;
+        }
+
+        .selectedCell:after {
+            background: var(--gray-2, rgba(61, 37, 20, 0.08));
+            content: "";
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            pointer-events: none;
+            position: absolute;
+            z-index: 2;
+        }
+
+        .column-resize-handle {
+            background-color: var(--purple, #6a00f5);
+            bottom: -2px;
+            pointer-events: none;
+            position: absolute;
+            right: -2px;
+            top: 0;
+            width: 4px;
+        }
+    }
+
+    .tableWrapper {
+        margin: 1.5rem 0;
+        overflow-x: auto;
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.scss b/packages/pluggableWidgets/rich-text-web/src/ui/variables.scss
similarity index 57%
rename from packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.scss
rename to packages/pluggableWidgets/rich-text-web/src/ui/variables.scss
index 258576b2dc..44fe1b4d61 100644
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.scss
+++ b/packages/pluggableWidgets/rich-text-web/src/ui/variables.scss
@@ -10,6 +10,7 @@ $font-symbol: symbol;
 $font-terminal: terminal, monaco, monospace;
 $font-times-new-roman: "times new roman", times, serif;
 $font-trebuchet: "trebuchet ms", geneva, sans-serif;
+$font-serif: Georgia, "times New roman", serif;
 
 $fonts: (
     andale-mono: $font-andale-mono,
@@ -26,39 +27,51 @@ $fonts: (
     trebuchet: $font-trebuchet
 );
 
+$quill-fonts: (
+    serif: $font-serif
+);
+
 @mixin font($font) {
     font-family: $font;
 }
-.widget-rich-text {
-    .ql-toolbar {
-        .ql-picker {
-            &.ql-font {
-                width: 160px;
-            }
-
-            &.size.ql-size {
-                width: 60px;
-                .ql-picker-label,
-                .ql-picker-item {
-                    &::before {
-                        content: attr(data-value);
-                    }
-                }
-            }
-        }
 
-        @each $name, $font in $fonts {
-            [data-value="#{$name}"]::before {
-                @include font($font);
-            }
-        }
-    }
+$font-sizes: (8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 42px, 54px, 68px, 84px, 98px);
 
-    .ql-font {
-        @each $name, $font in $fonts {
-            &-#{$name} {
-                @include font($font);
-            }
-        }
-    }
-}
+// https://github.com/slab/quill/blob/main/packages/quill/src/themes/base.ts
+$colors: (
+    #000000,
+    #e60000,
+    #ff9900,
+    #ffff00,
+    #008a00,
+    #0066cc,
+    #9933ff,
+    #ffffff,
+    #facccc,
+    #ffebcc,
+    #ffffcc,
+    #cce8cc,
+    #cce0f5,
+    #ebd6ff,
+    #bbbbbb,
+    #f06666,
+    #ffc266,
+    #ffff66,
+    #66b966,
+    #66a3e0,
+    #c285ff,
+    #888888,
+    #a10000,
+    #b26b00,
+    #b2b200,
+    #006100,
+    #0047b2,
+    #6b24b2,
+    #444444,
+    #5c0000,
+    #663d00,
+    #666600,
+    #003700,
+    #002966,
+    #3d1466
+);
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/MxQuill.ts b/packages/pluggableWidgets/rich-text-web/src/utils/MxQuill.ts
deleted file mode 100644
index 1d3710bd66..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/MxQuill.ts
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * https://github.com/slab/quill/
-Copyright (c) 2017-2024, Slab
-Copyright (c) 2014, Jason Chen
-Copyright (c) 2013, salesforce.com
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions
-are met:
-
-1. Redistributions of source code must retain the above copyright
-   notice, this list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright
-   notice, this list of conditions and the following disclaimer in the
-   documentation and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
-IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
-TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
-PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
- * 
- * this file overrides Quill instance.
- * allowing us to override certain function that is not easy to extend.
- */
-import { type Blot, ParentBlot } from "parchment";
-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";
-import { FontStyleAttributor, formatCustomFonts } from "./formats/fonts";
-import CustomLink, { CustomLinkNoValidation } from "./formats/link";
-import { CustomFontsType } from "../../typings/RichTextProps";
-
-interface ListItem {
-    child: Blot;
-    offset: number;
-    length: number;
-    indent: number;
-    type: string;
-}
-
-/**
- * Rich Text's extended Quill Editor
- * allowing us to override certain editor's function, such as: getHTML
- */
-class MxEditor extends Editor {
-    /**
-     * copied without modification from Quill's editor
-     * https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
-     */
-    getHTML(index: number, length: number): string {
-        if (this.isBlank()) {
-            return "";
-        }
-        const [line, lineOffset] = this.scroll.line(index);
-        if (line) {
-            const lineLength = line.length();
-            const isWithinLine = line.length() >= lineOffset + length;
-            if (isWithinLine && !(lineOffset === 0 && length === lineLength)) {
-                return convertHTML(line, lineOffset, length, true);
-            }
-            return convertHTML(this.scroll, index, length, true);
-        }
-        return "";
-    }
-}
-
-export interface MxQuillModulesOptions {
-    fonts: CustomFontsType[];
-    links: {
-        validate: boolean;
-    };
-}
-
-/**
- * Extension's of quill to allow us to replace the editor instance.
- */
-export default class MxQuill extends Quill {
-    constructor(container: HTMLElement | string, options: QuillOptions = {}) {
-        super(container, options);
-        this.editor = new MxEditor(this.scroll);
-    }
-
-    setContents(dlta: Delta | Op[], source?: EmitterSource): Delta {
-        super.setContents(new Delta(), Quill.sources.SILENT);
-        return this.updateContents(this.getContents().transform(dlta as Delta, false), source);
-    }
-
-    registerCustomModules(props: MxQuillModulesOptions): void {
-        const { fonts, links } = props;
-        const customFonts = formatCustomFonts(fonts);
-        const FontStyle = new FontStyleAttributor(customFonts);
-        Quill.register(FontStyle, true);
-        if (links.validate) {
-            Quill.register(CustomLink, true);
-        } else {
-            Quill.register(CustomLinkNoValidation, true);
-        }
-    }
-}
-
-/**
- * copied without modification from Quill's editor
- * https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
- */
-function getListType(type: string | undefined): [tag: string, attr: string] {
-    const tag = type === "ordered" || type === "lower-alpha" || type === "lower-roman" ? "ol" : "ul";
-    switch (type) {
-        case "checked":
-            return [tag, ' data-list="checked"'];
-        case "unchecked":
-            return [tag, ' data-list="unchecked"'];
-        default:
-            return [tag, ""];
-    }
-}
-
-// based on LIST_STYLE variables sequence in https://github.com/slab/quill/blob/main/packages/quill/src/assets/core.styl
-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;
-    return expectedType === "ordered" ? "decimal" : expectedType === "bullet" ? "disc" : expectedType;
-}
-
-/**
- * Copy with modification from https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
- */
-function convertListHTML(items: ListItem[], lastIndent: number, types: string[]): string {
-    if (items.length === 0) {
-        const [endTag] = getListType(types.pop());
-        if (lastIndent <= 0) {
-            return `</li></${endTag}>`;
-        }
-        return `</li></${endTag}>${convertListHTML([], lastIndent - 1, types)}`;
-    }
-    const [{ child, offset, length, indent, type }, ...rest] = items;
-    const [tag, attribute] = getListType(type);
-
-    if (indent > lastIndent) {
-        // modified by web-content: get proper list-style-type
-        const expectedType = getExpectedType(type, indent);
-        types.push(type);
-        if (indent === lastIndent + 1) {
-            return `<${tag} style="list-style-type: ${expectedType}"><li${attribute}>${convertHTML(
-                child,
-                offset,
-                length
-            )}${convertListHTML(rest, indent, types)}`;
-        }
-        return `<${tag}><li>${convertListHTML(items, lastIndent + 1, types)}`;
-    }
-    const previousType = types[types.length - 1];
-    if (indent === lastIndent && type === previousType) {
-        return `</li><li${attribute}>${convertHTML(child, offset, length)}${convertListHTML(rest, indent, types)}`;
-    }
-    const [endTag] = getListType(types.pop());
-    return `</li></${endTag}>${convertListHTML(items, lastIndent - 1, types)}`;
-}
-
-/**
- * copied without modification from Quill's editor
- * https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
- * allowing us to use our own convertListHTML function.
- */
-function convertHTML(blot: Blot, index: number, length: number, isRoot = false): string {
-    if ("html" in blot && typeof blot.html === "function") {
-        return blot.html(index, length);
-    }
-    if (blot instanceof TextBlot) {
-        const escapedText = escapeText(blot.value().slice(index, index + length));
-        return escapedText;
-    }
-    if (blot instanceof ParentBlot) {
-        // TODO fix API
-        if (blot.statics.blotName === "list-container") {
-            const items: any[] = [];
-            blot.children.forEachAt(index, length, (child, offset, childLength) => {
-                const formats = "formats" in child && typeof child.formats === "function" ? child.formats() : {};
-                items.push({
-                    child,
-                    offset,
-                    length: childLength,
-                    indent: formats.indent || 0,
-                    type: formats.list
-                });
-            });
-            return convertListHTML(items, -1, []);
-        }
-        const parts: string[] = [];
-        blot.children.forEachAt(index, length, (child, offset, childLength) => {
-            parts.push(convertHTML(child, offset, childLength));
-        });
-        if (isRoot || blot.statics.blotName === "list") {
-            return parts.join("");
-        }
-        const { outerHTML, innerHTML } = blot.domNode as Element;
-        const [start, end] = outerHTML.split(`>${innerHTML}<`);
-        // TODO cleanup
-        if (start === "<table") {
-            return `<table style="border: 1px solid #000;">${parts.join("")}<${end}`;
-        }
-        return `${start}>${parts.join("")}<${end}`;
-    }
-    return blot.domNode instanceof Element ? blot.domNode.outerHTML : "";
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts b/packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts
deleted file mode 100644
index c954bb99c5..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Attributor } from "parchment";
-import Quill from "quill";
-import QuillResize from "quill-resize-module";
-import MxBlock from "./formats/block";
-import Button from "./formats/button";
-import CustomListItem from "./formats/customList";
-import "./formats/fonts";
-import "./formats/fontsize";
-import Formula from "./formats/formula";
-import CustomImage from "./formats/image";
-import { IndentLeftStyle, IndentRightStyle } from "./formats/indent";
-import QuillTableBetter from "./formats/quill-table-better/quill-table-better";
-import SoftBreak from "./formats/softBreak";
-import CustomVideo from "./formats/video";
-import { WhiteSpaceStyle } from "./formats/whiteSpace";
-import MxUploader from "./modules/uploader";
-import MendixTheme from "./themes/mxTheme";
-import MxScroll from "./modules/scroll";
-const direction = Quill.import("attributors/style/direction") as Attributor;
-const alignment = Quill.import("attributors/style/align") as Attributor;
-
-class Empty {
-    doSomething(): string {
-        return "";
-    }
-}
-/**
- * Custom format registration for quill.
- */
-Quill.debug("error");
-Quill.register({ "themes/snow": MendixTheme }, true);
-Quill.register(CustomListItem, true);
-Quill.register(WhiteSpaceStyle, true);
-Quill.register(CustomVideo, true);
-Quill.register(CustomImage, true);
-Quill.register({ "formats/softbreak": SoftBreak }, true);
-Quill.register(direction, true);
-Quill.register(alignment, true);
-Quill.register(IndentLeftStyle, true);
-Quill.register(IndentRightStyle, true);
-Quill.register(Formula, true);
-Quill.register(Button, true);
-Quill.register(MxBlock, true);
-Quill.register({ "modules/uploader": MxUploader }, true);
-Quill.register({ "blots/scroll": MxScroll }, true);
-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);
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/embedCodeParser.ts b/packages/pluggableWidgets/rich-text-web/src/utils/embedCodeParser.ts
new file mode 100644
index 0000000000..07109a5d37
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/utils/embedCodeParser.ts
@@ -0,0 +1,129 @@
+export interface ParsedEmbed {
+    valid: boolean;
+    error?: string;
+    src?: string;
+    width?: string;
+    height?: string;
+    title?: string | null;
+    frameborder?: string;
+    allow?: string | null;
+    allowfullscreen?: boolean;
+    domain?: string;
+}
+
+// Whitelist of allowed domains for embed codes
+const ALLOWED_DOMAINS = [
+    "youtube.com",
+    "www.youtube.com",
+    "player.vimeo.com",
+    "vimeo.com",
+    "player.dailymotion.com",
+    "dailymotion.com",
+    "codepen.io",
+    "jsfiddle.net",
+    "stackblitz.com",
+    "codesandbox.io",
+    "maps.google.com",
+    "www.google.com"
+];
+
+function isDomainAllowed(hostname: string): boolean {
+    return ALLOWED_DOMAINS.some(allowed => hostname === allowed || hostname.endsWith("." + allowed));
+}
+
+export function parseEmbedCode(html: string): ParsedEmbed {
+    try {
+        // Parse HTML safely using DOMParser
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+
+        // Find iframe element
+        const iframe = doc.querySelector("iframe");
+
+        if (!iframe) {
+            return {
+                valid: false,
+                error: "No iframe found in embed code"
+            };
+        }
+
+        // Extract and validate src attribute
+        const src = iframe.getAttribute("src");
+
+        if (!src) {
+            return {
+                valid: false,
+                error: "Iframe missing src attribute"
+            };
+        }
+
+        // Security: Block javascript: URLs
+        if (src.toLowerCase().startsWith("javascript:")) {
+            return {
+                valid: false,
+                error: "JavaScript URLs are not allowed"
+            };
+        }
+
+        // Security: Block data: URLs
+        if (src.toLowerCase().startsWith("data:")) {
+            return {
+                valid: false,
+                error: "Data URLs are not allowed"
+            };
+        }
+
+        // Validate URL format
+        try {
+            const url = new URL(src);
+
+            // Security: Only allow http and https protocols
+            if (url.protocol !== "http:" && url.protocol !== "https:") {
+                return {
+                    valid: false,
+                    error: "Only HTTP/HTTPS URLs are allowed"
+                };
+            }
+
+            // Check domain whitelist
+            const domain = url.hostname;
+
+            if (!isDomainAllowed(domain)) {
+                return {
+                    valid: false,
+                    error: `Domain "${domain}" is not in the allowed list. Supported: YouTube, Vimeo, Dailymotion, CodePen, etc.`
+                };
+            }
+
+            // Extract safe attributes
+            const width = iframe.getAttribute("width") || "640";
+            const height = iframe.getAttribute("height") || "480";
+            const title = iframe.getAttribute("title") || null;
+            const frameborder = iframe.getAttribute("frameborder") || "0";
+            const allow = iframe.getAttribute("allow") || null;
+            const allowfullscreen = iframe.hasAttribute("allowfullscreen");
+
+            return {
+                valid: true,
+                src,
+                width,
+                height,
+                title,
+                frameborder,
+                allow,
+                allowfullscreen,
+                domain
+            };
+        } catch (_urlError) {
+            return {
+                valid: false,
+                error: "Invalid URL in src attribute"
+            };
+        }
+    } catch (_parseError) {
+        return {
+            valid: false,
+            error: "Failed to parse embed code"
+        };
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts
index 6058445ab1..28c292bda7 100644
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts
+++ b/packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts
@@ -28,3 +28,10 @@ export type imageConfigType = {
     entityGuid?: string;
     keepAspectRatio?: boolean;
 };
+export interface MxQuillModulesOptions {
+    styleDataFormat: "inline" | "class";
+    fonts: CustomFontsType[];
+    links: {
+        validate: boolean;
+    };
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/block.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/block.ts
deleted file mode 100644
index d1c5e55d78..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/block.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Blot } from "parchment";
-import Block from "quill/blots/block";
-
-class MxBlock extends Block {
-    isEmptyTailBlock(): boolean {
-        const hasNoValidChildren =
-            this.children.length === 0 ||
-            (this.children.length === 1 && this.children.head?.statics.tagName?.toString().toUpperCase() === "BR");
-        return hasNoValidChildren;
-    }
-
-    html(): string {
-        // quill return empty paragraph when there is no content (just empty line)
-        // to preserve the line breaks, we add empty space
-        if (this.domNode.childElementCount === 1 && this.domNode.children[0] instanceof HTMLBRElement) {
-            return this.domNode.outerHTML.replace(/<br>/g, "<br />");
-        } else if (this.domNode.childElementCount === 0 && this.domNode.textContent?.trim() === "") {
-            this.domNode.innerHTML = "<br />";
-            return this.domNode.outerHTML;
-        } else {
-            return this.domNode.outerHTML;
-        }
-    }
-
-    static IsMxBlock(blot: Blot | null): blot is MxBlock {
-        return blot?.statics.blotName === "mx-block";
-    }
-
-    static IsEmptyBlock(blot: Blot | null): boolean {
-        return blot != null && MxBlock.IsMxBlock(blot) && blot.isEmptyTailBlock();
-    }
-}
-
-MxBlock.blotName = "mx-block";
-export default MxBlock;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/button.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/button.ts
deleted file mode 100644
index e42f201da9..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/button.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-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): any {
-        return ATTRIBUTES.reduce((formats: Record<string, string | null>, attribute) => {
-            if (domNode.hasAttribute(attribute)) {
-                formats[attribute] = domNode.getAttribute(attribute);
-            }
-            return formats;
-        }, {});
-    }
-}
-
-export default Button;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.scss b/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.scss
deleted file mode 100644
index 4412b69b83..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.widget-rich-text {
-    .ql-editor {
-        ol {
-            list-style-type: none;
-        }
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.ts
deleted file mode 100644
index 19ea919c67..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/customList.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import ListItem from "quill/formats/list";
-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);
-                this.domNode.removeAttribute("data-custom-list");
-            }
-        } else {
-            super.format(name, value);
-        }
-    }
-
-    static create(value: any): any {
-        const node = super.create(value) as HTMLElement;
-        if (!STANDARD_LIST_TYPES.find(x => x === value)) {
-            node.setAttribute("data-custom-list", value);
-            node.setAttribute("data-list", "ordered");
-        } else {
-            node.setAttribute("data-list", value);
-            node.removeAttribute("data-custom-list");
-        }
-        node.setAttribute("title", this.blotName);
-        return node;
-    }
-
-    static formats(domNode: HTMLElement): string | undefined {
-        return domNode.dataset.customList || domNode.dataset.list || undefined;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts
deleted file mode 100644
index 6b3e445bc0..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Scope, StyleAttributor } from "parchment";
-import { CustomFontsType } from "../../../typings/RichTextProps";
-import "./fonts.scss";
-
-export const FONT_LIST = [
-    { value: "andale-mono", description: "Andale Mono", style: "'andale mono', monospace" },
-    { value: "arial", description: "Arial", style: "arial, helvetica, sans-serif" },
-    { value: "arial-black", description: "Arial Black", style: "'arial black', sans-serif" },
-    { value: "book-antiqua", description: "Book Antiqua", style: "'book antiqua', palatino, serif" },
-    { value: "comic-sans", description: "Comic Sans MS", style: "'comic sans ms', sans-serif" },
-    { value: "courier-new", description: "Courier New", style: "'courier new', courier, monospace" },
-    { value: "helvetica", description: "Helvetica", style: "helvetica, arial, sans-serif" },
-    { value: "impact", description: "Impact", style: "impact, sans-serif" },
-    { value: "serif", description: "Serif", style: "serif" },
-    { value: "symbol", description: "Symbol", style: "symbol" },
-    { value: "terminal", description: "Terminal", style: "terminal, monaco, monospace" },
-    { value: "times-new-roman", description: "Times New Roman", style: "'times new roman', times, serif" },
-    { value: "trebuchet", description: "Trebuchet MS", style: "'trebuchet ms', geneva, sans-serif" }
-];
-
-const config = {
-    scope: Scope.INLINE
-};
-
-export class FontStyleAttributor extends StyleAttributor {
-    private fontList: typeof FONT_LIST = [];
-
-    constructor(fontList: typeof FONT_LIST) {
-        super("font", "font-family", config);
-        this.fontList = fontList;
-    }
-
-    add(node: HTMLElement, value: any): boolean {
-        if (!this.canAdd(node, value)) {
-            return false;
-        }
-        node.dataset.value = value;
-        const allFonts = [...FONT_LIST, ...this.fontList];
-        const style = allFonts.find(x => x.value === value)?.style;
-        if (style) {
-            super.add(node, style);
-        } else {
-            return false;
-        }
-        return true;
-    }
-
-    value(node: HTMLElement): any {
-        const value = node.dataset.value;
-        if (this.canAdd(node, value) && value) {
-            return value;
-        }
-        return "";
-    }
-}
-
-export function formatCustomFonts(fonts: CustomFontsType[] = []): typeof FONT_LIST {
-    return fonts.map(font => ({
-        value: font.fontName?.toLowerCase().split(" ").join("-") ?? "",
-        description: font.fontName ?? "",
-        style: font.fontStyle ?? ""
-    }));
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fontsize.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fontsize.ts
deleted file mode 100644
index 29335852a3..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fontsize.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Attributor } from "parchment";
-import Quill from "quill";
-const Size = Quill.import("attributors/style/size") as Attributor;
-
-import "./fonts.scss";
-
-export const FONT_SIZE_LIST = [
-    "8px",
-    "9px",
-    "10px",
-    "12px",
-    "14px",
-    "16px",
-    "20px",
-    "24px",
-    "32px",
-    "42px",
-    "54px",
-    "68px",
-    "84px",
-    "98px"
-];
-
-Size.whitelist = FONT_SIZE_LIST;
-Quill.register(Size, true);
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/formula.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/formula.ts
deleted file mode 100644
index 8c3d7525ac..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/formula.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import katex from "katex";
-import Embed from "quill/blots/embed";
-
-class Formula extends Embed {
-    static blotName = "formula";
-    static className = "ql-formula";
-    static tagName = "SPAN";
-
-    html(): string {
-        const { formula } = this.value();
-        return `<span>${formula}</span>`;
-    }
-
-    static create(value: string): HTMLElement {
-        const node = super.create(value) as HTMLElement;
-        if (typeof value === "string") {
-            katex.render(value, node, {
-                throwOnError: false,
-                errorColor: "#f00"
-            });
-            node.setAttribute("data-value", value);
-        }
-        return node;
-    }
-
-    static value(domNode: Element): any {
-        return domNode.getAttribute("data-value");
-    }
-}
-
-export default Formula;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/header.scss b/packages/pluggableWidgets/rich-text-web/src/utils/formats/header.scss
deleted file mode 100644
index f9c582044e..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/header.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.widget-rich-text {
-    .widget-rich-text-toolbar {
-        .ql-header {
-            .ql-picker-item,
-            .ql-picker-label {
-                &:before {
-                    content: "Paragraph";
-                }
-            }
-        }
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/image.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/image.ts
deleted file mode 100644
index f9d3ae910e..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/image.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Image from "quill/formats/image";
-import { fetchDocumentUrl } from "../mx-data";
-
-const ATTRIBUTES = ["alt", "height", "width", "data-src"];
-
-class CustomImage extends Image {
-    format(name: string, value: string): void {
-        if (ATTRIBUTES.indexOf(name) > -1) {
-            if (name === "src" && this.domNode.hasAttribute("data-src")) {
-                return; // Do not set src directly, use data-src instead
-            }
-            if (value) {
-                this.domNode.setAttribute(name, value);
-            } else {
-                this.domNode.removeAttribute(name);
-            }
-        } else {
-            super.format(name, value);
-        }
-
-        if (name === "data-src" && !this.domNode.dataset.entity) {
-            this.domNode.setAttribute("src", fetchDocumentUrl(value, Date.now()));
-            // Mark the image as an entity to prevent further src changes
-            this.domNode.setAttribute("data-entity", "true");
-        }
-    }
-
-    static formats(domNode: Element): any {
-        return ATTRIBUTES.reduce((formats: Record<string, string | null>, attribute) => {
-            if (domNode.hasAttribute(attribute)) {
-                formats[attribute] = domNode.getAttribute(attribute);
-            }
-            return formats;
-        }, {});
-    }
-}
-
-export default CustomImage;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/indent.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/indent.ts
deleted file mode 100644
index d00f8a1ddc..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/indent.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Scope, StyleAttributor } from "parchment";
-import "./fonts.scss";
-
-const INDENT_MAGIC_NUMBER = 3;
-const indentLists = ["3em", "6em", "9em", "12em", "15em", "18em", "21em", "24em", "27em"];
-
-/**
- *  overriding current quill's indent format by using inline style instead of classname
- *  toolbar's indent button also have to be overriden using getIndentHandler
- */
-class IndentAttributor extends StyleAttributor {
-    add(node: HTMLElement, value: string | number): boolean {
-        let normalizedValue = 0;
-        if (value === "+1" || value === "-1") {
-            const indent = this.value(node) || 0;
-            normalizedValue = value === "+1" ? indent + INDENT_MAGIC_NUMBER : indent - INDENT_MAGIC_NUMBER;
-        } else if (typeof value === "number") {
-            const modValue = value % INDENT_MAGIC_NUMBER;
-            const indent = this.value(node) || 0;
-            normalizedValue =
-                indent +
-                (modValue === 1
-                    ? INDENT_MAGIC_NUMBER
-                    : modValue === 2 || modValue === -1
-                      ? -INDENT_MAGIC_NUMBER
-                      : value);
-        }
-        if (normalizedValue === 0) {
-            this.remove(node);
-            return true;
-        }
-        return super.add(node, `${normalizedValue}em`);
-    }
-
-    canAdd(node: HTMLElement, value: string): boolean {
-        return super.canAdd(node, value);
-    }
-
-    value(node: HTMLElement): number | undefined {
-        return parseInt(super.value(node).replace("em", ""), 10) || undefined; // Don't return NaN
-    }
-}
-
-export const IndentLeftStyle = new IndentAttributor("indent-left", "padding-left", {
-    scope: Scope.BLOCK,
-    whitelist: indentLists
-});
-
-export const IndentRightStyle = new IndentAttributor("indent-right", "padding-right", {
-    scope: Scope.BLOCK,
-    whitelist: indentLists
-});
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/link.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/link.ts
deleted file mode 100644
index 7279444450..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/link.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as linkify from "linkifyjs";
-import Link from "quill/formats/link";
-import { linkConfigType } from "../formats";
-
-/**
- * Custom Link handler, allowing extra config: target and default protocol.
- */
-export default class CustomLink extends Link {
-    format(name: string, value: unknown): void {
-        if (name !== this.statics.blotName || !value) {
-            super.format(name, value);
-        } else if ((value as linkConfigType)?.href !== undefined) {
-            const linkConfig = value as linkConfigType;
-            // @ts-expect-error the constructor is generic function, ts will consider sanitize not exist
-            this.domNode.setAttribute("href", this.constructor.getLink(this.constructor.sanitize(linkConfig.href)));
-            this.domNode.textContent = linkConfig.text ?? linkConfig.href;
-            if (linkConfig.target) {
-                this.domNode.setAttribute("target", linkConfig.target);
-            }
-            if (linkConfig.title) {
-                this.domNode.setAttribute("title", linkConfig.title);
-            }
-        } else {
-            // @ts-expect-error the constructor is generic function, ts will consider sanitize not exist
-            this.domNode.setAttribute("href", this.constructor.getLink(this.constructor.sanitize(value)));
-        }
-    }
-
-    static create(value: unknown): HTMLElement {
-        if ((value as linkConfigType)?.href !== undefined) {
-            const linkConfig = value as linkConfigType;
-            const node = super.create(linkConfig.href) as HTMLElement;
-            node.setAttribute("href", this.getLink(this.sanitize(linkConfig.href)));
-            node.setAttribute("rel", "noopener noreferrer");
-            node.setAttribute("title", linkConfig.title ?? linkConfig.href);
-            node.setAttribute("target", linkConfig.target || "_blank");
-            return node;
-        } else {
-            // @ts-expect-error type mismatch expected
-            return super.create(value);
-        }
-    }
-
-    static getLink(url: string): string {
-        const foundLinks = linkify.find(url, {
-            defaultProtocol: "https"
-        });
-        let results = url;
-        if (foundLinks && foundLinks.length > 0) {
-            results = foundLinks[0].href;
-        }
-
-        return results;
-    }
-}
-
-export class CustomLinkNoValidation extends CustomLink {
-    static getLink(url: string): string {
-        return url;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss
deleted file mode 100644
index 7889ae6db5..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss
+++ /dev/null
@@ -1,684 +0,0 @@
-$line-color: #0589f3;
-$focused-cell-background: rgba(158, 207, 250, 0.3);
-$focused-border-color: #3779eb;
-$tooltip-color-simple: #000000d9;
-$tooltip-color-error: #db3700;
-$hover-background: #f0f0f0;
-$border-color-simple: #00000026;
-$color-white: #fff;
-$color-ccced1: #ccced1;
-$border: 1px solid $color-ccced1;
-$focused-border: 1px solid $focused-border-color;
-
-/*mixin*/
-@mixin boxShadow($color) {
-    box-shadow: 0 1px 2px 1px $color;
-}
-
-@mixin qlTableTooltip($color) {
-    font-size: 12px;
-    min-width: 32px;
-    line-height: 20px;
-    padding: 6px;
-    white-space: nowrap;
-    color: $color-white;
-    text-align: center;
-    word-wrap: break-word;
-    background: $color;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 11;
-    left: 50%;
-    bottom: -10px;
-    transform: translate(-50%, 100%);
-
-    &::before {
-        @extend .ql-table-triangle-common;
-        border-bottom-color: $color !important;
-        top: -20px;
-    }
-
-    &:hover {
-        display: block;
-    }
-
-    &-hidden {
-        display: none !important;
-    }
-}
-
-@mixin triangle($direction1, $direction2, $color1, $color2) {
-    &:not(.ql-table-triangle-none)::before {
-        @extend .ql-table-triangle-common;
-        #{$direction1}: -20px;
-        border-#{$direction2}-color: $color1 !important;
-    }
-
-    &:not(.ql-table-triangle-none)::after {
-        @extend .ql-table-triangle-common;
-        #{$direction1}: -19px;
-        border-#{$direction2}-color: $color2 !important;
-    }
-}
-
-/*extend-style*/
-.ql-cell-selected-after {
-    content: "";
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: $focused-cell-background;
-}
-
-.ql-editor td {
-    border: none;
-}
-
-.ql-container:not(.ql-disabled) .ql-table-better.ql-table-grid {
-    td {
-        border: 1px dotted rgba(0, 0, 0, 0.1);
-    }
-}
-
-.ql-table {
-    &-border-shadow {
-        @include boxShadow($border-color-simple);
-        background: $color-white;
-        border-radius: 2px;
-        border: $border;
-    }
-
-    &-button-disabled {
-        background: #f2f2f2 !important;
-        pointer-events: none;
-
-        svg {
-            .ql-fill {
-                fill: #999 !important;
-            }
-
-            .ql-stroke {
-                stroke: #999 !important;
-            }
-        }
-    }
-
-    &-center {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    &-color-container {
-        border: $border;
-        height: 30px;
-        box-sizing: border-box;
-        display: flex;
-
-        .label-field-view-color {
-            flex: 1;
-
-            .clr-field {
-                width: 100%;
-
-                &,
-                & .property-input {
-                    height: 100%;
-                }
-
-                .property-input {
-                    @extend .ql-table-input;
-                    border: 1px solid transparent;
-                    color: fieldtext;
-                    min-width: 110px;
-                }
-
-                button {
-                    height: 24px;
-                    width: 24px;
-                    right: 3px;
-                }
-            }
-
-            label {
-                display: block;
-            }
-        }
-
-        .color-picker {
-            width: 30px;
-            border-left: $border;
-            box-sizing: border-box;
-            position: relative;
-            @extend .ql-table-center;
-
-            .color-button {
-                width: 20px;
-                height: 20px;
-                border: $border;
-                box-sizing: border-box;
-                cursor: pointer;
-                position: relative;
-            }
-
-            .color-unselected {
-                position: relative;
-
-                &::after {
-                    content: "";
-                    position: absolute;
-                    width: 1px;
-                    height: 26px;
-                    background: red;
-                    transform-origin: 50%;
-                    transform: rotate(45deg);
-                    left: 50%;
-                    top: -4px;
-                }
-            }
-
-            .color-picker-select {
-                position: absolute;
-                right: 0;
-                bottom: 0;
-                width: 156px;
-                transform: translateY(100%);
-                background: $color-white;
-                z-index: 10;
-                @include boxShadow($color-ccced1);
-
-                .erase-container {
-                    align-items: center;
-                    cursor: pointer;
-                    display: flex;
-                    height: 30px;
-                    padding: 0 12px;
-
-                    &:hover {
-                        background: #f0f0f0;
-                    }
-
-                    & > button {
-                        border: none;
-                        outline: none;
-                        background: inherit;
-                        height: 100%;
-                        cursor: pointer;
-                    }
-                }
-
-                & > .erase-container {
-                    @extend .ql-table-input-focus;
-                    margin-bottom: 4px;
-                }
-
-                .color-list {
-                    display: flex;
-                    flex-wrap: wrap;
-                    padding: 0 12px;
-                    margin: 0;
-                    justify-content: space-between;
-
-                    & > li {
-                        list-style: none;
-                        width: 24px;
-                        height: 24px;
-                        margin: 2px 0;
-                        position: relative;
-                        cursor: pointer;
-
-                        &[data-color="#ffffff"] {
-                            border: $border;
-                            box-sizing: border-box;
-                        }
-                    }
-                }
-            }
-
-            .color-picker-palette {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                left: 0;
-                top: 0;
-                z-index: 1;
-                background: $color-white;
-
-                .color-picker-wrap {
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                }
-            }
-        }
-    }
-
-    &-disabled {
-        background: #f2f2f2;
-        pointer-events: none;
-    }
-
-    &-dropdown,
-    &-dropdown-properties {
-        display: flex;
-        height: 100%;
-        align-items: center;
-        position: relative;
-        padding: 0 4px;
-
-        &:hover {
-            background: $hover-background;
-        }
-
-        &-icon {
-            display: flex;
-            flex-shrink: 0;
-        }
-
-        &-label {
-            width: 100%;
-            min-width: 100%;
-            line-height: 24px;
-            font-weight: bold;
-            margin-bottom: 6px;
-            display: block;
-        }
-
-        &-list {
-            @extend .ql-table-border-shadow;
-            margin: 0;
-            min-width: 100px;
-            padding: 0;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            transform: translateY(100%);
-            z-index: 10;
-
-            li {
-                line-height: 30px;
-                list-style: none;
-                padding-left: 10px;
-
-                &:hover {
-                    background-color: $hover-background;
-                }
-            }
-        }
-
-        &-text {
-            align-items: center;
-            display: flex;
-            flex: 1;
-            height: 100%;
-        }
-    }
-
-    &-dropdown-properties {
-        width: 80px;
-        height: 30px;
-        border: $border;
-        box-sizing: border-box;
-
-        &:hover {
-            background: none;
-        }
-    }
-
-    &-input {
-        background: inherit;
-        border: $border;
-        height: 30px;
-        outline: none;
-        padding-left: 6px;
-        width: 80px;
-
-        &:focus::placeholder {
-            color: transparent;
-        }
-
-        &:focus {
-            @extend .ql-table-input-focus;
-        }
-
-        &:focus + label {
-            display: block;
-        }
-
-        &:not(:placeholder-shown) + label {
-            display: block;
-        }
-
-        &-focus {
-            border: $focused-border;
-            box-shadow: 0 0 0 3px #cae1fc;
-        }
-    }
-
-    &-menus-container {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        height: 40px;
-        width: fit-content;
-        padding: 4px;
-        box-sizing: border-box;
-        z-index: 1;
-        @extend .ql-table-border-shadow;
-    }
-
-    &-properties-form {
-        @include boxShadow($color-ccced1);
-        background: $color-white;
-        padding-bottom: 8px;
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: 320px;
-        z-index: 1;
-
-        .properties-form-header {
-            height: 40px;
-            line-height: 40px;
-            padding: 0 12px;
-            border-bottom: $border;
-            margin: 0;
-            box-sizing: border-box;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .properties-form-row {
-            display: flex;
-            flex-wrap: wrap;
-            padding: 8px 12px;
-            justify-content: space-between;
-
-            .ql-table-check-container {
-                display: flex;
-                border: $border;
-                align-items: center;
-
-                & .ql-table-tooltip-hover {
-                    padding: 6px 10px;
-                    cursor: pointer;
-
-                    &:hover {
-                        background: $hover-background;
-                    }
-                }
-
-                .ql-table-btns-checked {
-                    background: #f0f7ff;
-
-                    & > svg path {
-                        stroke: #2977ff;
-                    }
-                }
-            }
-        }
-
-        .properties-form-row-full {
-            .ql-table-color-container {
-                width: 100%;
-
-                .property-input {
-                    width: 100%;
-                }
-            }
-        }
-
-        .property-input {
-            @extend .ql-table-input;
-        }
-
-        .properties-form-action-row {
-            display: flex;
-            justify-content: space-around;
-            padding: 0 12px;
-
-            & > button {
-                background: $color-white;
-                outline: none;
-                border: none;
-                height: 30px;
-                cursor: pointer;
-                @extend .ql-table-center;
-                flex: 1;
-
-                & > span {
-                    margin: 0 2px;
-                    display: flex;
-                }
-
-                &:hover {
-                    background: $hover-background;
-                }
-
-                &[disabled] {
-                    background-color: transparent;
-                }
-            }
-        }
-
-        .ql-table-color-selected {
-            @extend .ql-table-selected;
-            background-position: center;
-        }
-
-        .ql-table-dropdown-selected {
-            @extend .ql-table-selected;
-            background-position: calc(100% - 10px) center;
-        }
-    }
-
-    &-select-container {
-        @extend .ql-table-border-shadow;
-        @extend .ql-table-center;
-        box-sizing: border-box;
-        flex-direction: column;
-        padding: 2px;
-        position: absolute;
-        top: 24px;
-        width: 190px;
-        z-index: 10;
-
-        .ql-table-select-list {
-            @extend .ql-table-center;
-            flex-wrap: wrap;
-        }
-
-        .ql-table-select-label {
-            color: #222f3eb3;
-            line-height: 16px;
-            margin-top: 2px;
-            text-align: center;
-            width: 100%;
-        }
-
-        span {
-            border: 1px solid black;
-            box-sizing: border-box;
-            height: 16px;
-            margin: 1px;
-            width: 16px;
-        }
-    }
-
-    &-selected {
-        @extend .ql-table-input-focus;
-        background-image: url("../icon/check.png");
-        background-repeat: no-repeat;
-        background-size: 16px;
-        box-sizing: border-box;
-    }
-
-    &-temporary {
-        display: none;
-    }
-
-    &-tooltip {
-        @include qlTableTooltip($tooltip-color-simple);
-
-        &-error {
-            @include qlTableTooltip($tooltip-color-error);
-
-            & {
-                white-space: pre-wrap;
-                z-index: 9;
-            }
-        }
-    }
-
-    &-tooltip-hover {
-        display: flex;
-        position: relative;
-
-        &:hover .ql-table-tooltip,
-        &:hover + .ql-table-tooltip {
-            display: block;
-        }
-    }
-
-    &-triangle-common {
-        border: 10px solid transparent;
-        content: "";
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    &-triangle-down {
-        @include triangle("top", "bottom", $border-color-simple, $color-white);
-    }
-
-    &-triangle-up {
-        @include triangle("bottom", "top", $border-color-simple, $color-white);
-    }
-}
-
-.ql-operate {
-    &-block {
-        position: absolute;
-        z-index: 10;
-        border: 1px solid #979797;
-        cursor: nwse-resize;
-
-        &-move {
-            cursor: crosshair;
-            border: none;
-        }
-    }
-
-    &-drag-table {
-        border: 1px dashed #000;
-        position: absolute;
-    }
-
-    &-line-container {
-        position: absolute;
-        z-index: 10;
-        @extend .ql-table-center;
-
-        .ql-operate-line {
-            background-color: $line-color;
-        }
-    }
-}
-
-.ql-cell {
-    &-focused {
-        position: relative;
-
-        &::after {
-            @extend .ql-cell-selected-after;
-            border: $focused-border;
-        }
-    }
-
-    &-selected {
-        position: relative;
-
-        &::after {
-            @extend .ql-cell-selected-after;
-        }
-    }
-}
-
-.label-field-view {
-    position: relative;
-
-    &-input-wrapper {
-        position: relative;
-        height: 100%;
-    }
-
-    &-input-wrapper > label,
-    label {
-        background: $color-white;
-        color: #999;
-        display: none;
-        position: absolute;
-        left: 0;
-        top: -8px;
-        transform: scale(0.75);
-    }
-
-    &-status {
-        @extend .ql-table-tooltip-error;
-        max-width: 160px;
-        width: max-content;
-    }
-
-    &-error {
-        & > input {
-            border-color: $tooltip-color-error !important;
-            animation: ql-table-input-shake 0.3s ease both;
-
-            &:focus {
-                box-shadow: 0 0 0 3px #ff401f4d !important;
-            }
-        }
-
-        & > label {
-            color: $tooltip-color-error;
-        }
-    }
-}
-
-button.ql-table-better {
-    position: relative;
-}
-
-ol.table-list-container {
-    counter-reset: list-0; // reset counter
-}
-
-// animation
-@keyframes ql-table-input-shake {
-    20% {
-        transform: translateX(-2px);
-    }
-
-    40% {
-        transform: translateX(2px);
-    }
-
-    60% {
-        transform: translateX(-1px);
-    }
-
-    80% {
-        transform: translateX(1px);
-    }
-}
-
-.ql-table-menus-container.ql-table-grid {
-    .grid-toggle {
-        color: var(--link-color);
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/icon/check.png b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/icon/check.png
deleted file mode 100644
index 812b34da0f..0000000000
Binary files a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/icon/check.png and /dev/null differ
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/config/index.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/config/index.ts
deleted file mode 100644
index e2ef3703eb..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/config/index.ts
+++ /dev/null
@@ -1,448 +0,0 @@
-import type { Props, UseLanguageHandler } from "../types";
-import { convertUnitToInteger, isValidColor, isValidDimensions } from "../utils";
-
-interface Options {
-    type: string;
-    attribute: Props;
-}
-
-const CELL_ATTRIBUTE = ["data-row", "width", "height", "colspan", "rowspan", "style"];
-
-const CELL_DEFAULT_VALUES: Props = {
-    "border-style": "none",
-    "border-color": "",
-    "border-width": "",
-    "background-color": "",
-    width: "",
-    height: "",
-    padding: "",
-    "text-align": "left",
-    "vertical-align": "middle"
-};
-
-const CELL_DEFAULT_WIDTH = 72;
-
-const CELL_PROPERTIES = [
-    "border-style",
-    "border-color",
-    "border-width",
-    "background-color",
-    "width",
-    "height",
-    "padding",
-    "text-align",
-    "vertical-align"
-];
-
-const COLORS = [
-    "aliceblue",
-    "antiquewhite",
-    "aqua",
-    "aquamarine",
-    "azure",
-    "beige",
-    "bisque",
-    "black",
-    "blanchedalmond",
-    "blue",
-    "blueviolet",
-    "brown",
-    "burlywood",
-    "cadetblue",
-    "chartreuse",
-    "chocolate",
-    "coral",
-    "cornflowerblue",
-    "cornsilk",
-    "crimson",
-    "currentcolor",
-    "currentcolor",
-    "cyan",
-    "darkblue",
-    "darkcyan",
-    "darkgoldenrod",
-    "darkgray",
-    "darkgreen",
-    "darkgrey",
-    "darkkhaki",
-    "darkmagenta",
-    "darkolivegreen",
-    "darkorange",
-    "darkorchid",
-    "darkred",
-    "darksalmon",
-    "darkseagreen",
-    "darkslateblue",
-    "darkslategray",
-    "darkslategrey",
-    "darkturquoise",
-    "darkviolet",
-    "deeppink",
-    "deepskyblue",
-    "dimgray",
-    "dimgrey",
-    "dodgerblue",
-    "firebrick",
-    "floralwhite",
-    "forestgreen",
-    "fuchsia",
-    "gainsboro",
-    "ghostwhite",
-    "gold",
-    "goldenrod",
-    "gray",
-    "green",
-    "greenyellow",
-    "grey",
-    "honeydew",
-    "hotpink",
-    "indianred",
-    "indigo",
-    "ivory",
-    "khaki",
-    "lavender",
-    "lavenderblush",
-    "lawngreen",
-    "lemonchiffon",
-    "lightblue",
-    "lightcoral",
-    "lightcyan",
-    "lightgoldenrodyellow",
-    "lightgray",
-    "lightgreen",
-    "lightgrey",
-    "lightpink",
-    "lightsalmon",
-    "lightseagreen",
-    "lightskyblue",
-    "lightslategray",
-    "lightslategrey",
-    "lightsteelblue",
-    "lightyellow",
-    "lime",
-    "limegreen",
-    "linen",
-    "magenta",
-    "maroon",
-    "mediumaquamarine",
-    "mediumblue",
-    "mediumorchid",
-    "mediumpurple",
-    "mediumseagreen",
-    "mediumslateblue",
-    "mediumspringgreen",
-    "mediumturquoise",
-    "mediumvioletred",
-    "midnightblue",
-    "mintcream",
-    "mistyrose",
-    "moccasin",
-    "navajowhite",
-    "navy",
-    "oldlace",
-    "olive",
-    "olivedrab",
-    "orange",
-    "orangered",
-    "orchid",
-    "palegoldenrod",
-    "palegreen",
-    "paleturquoise",
-    "palevioletred",
-    "papayawhip",
-    "peachpuff",
-    "peru",
-    "pink",
-    "plum",
-    "powderblue",
-    "purple",
-    "rebeccapurple",
-    "red",
-    "rosybrown",
-    "royalblue",
-    "saddlebrown",
-    "salmon",
-    "sandybrown",
-    "seagreen",
-    "seashell",
-    "sienna",
-    "silver",
-    "skyblue",
-    "slateblue",
-    "slategray",
-    "slategrey",
-    "snow",
-    "springgreen",
-    "steelblue",
-    "tan",
-    "teal",
-    "thistle",
-    "tomato",
-    "transparent",
-    "turquoise",
-    "violet",
-    "wheat",
-    "white",
-    "whitesmoke",
-    "yellow",
-    "yellowgreen"
-];
-
-const DEVIATION = 2;
-
-const TABLE_PROPERTIES = [
-    "border-style",
-    "border-color",
-    "border-width",
-    "background-color",
-    "width",
-    "height",
-    "align"
-];
-
-function getCellProperties(attribute: Props, useLanguage: UseLanguageHandler) {
-    return {
-        title: useLanguage("cellProps"),
-        properties: [
-            {
-                content: useLanguage("border"),
-                children: [
-                    {
-                        category: "dropdown",
-                        propertyName: "border-style",
-                        value: attribute["border-style"],
-                        options: ["dashed", "dotted", "double", "groove", "inset", "none", "outset", "ridge", "solid"]
-                    },
-                    {
-                        category: "color",
-                        propertyName: "border-color",
-                        value: attribute["border-color"],
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("color")
-                        },
-                        valid: isValidColor,
-                        message: useLanguage("colorMsg")
-                    },
-                    {
-                        category: "input",
-                        propertyName: "border-width",
-                        value: convertUnitToInteger(attribute["border-width"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("width")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    }
-                ]
-            },
-            {
-                content: useLanguage("background"),
-                children: [
-                    {
-                        category: "color",
-                        propertyName: "background-color",
-                        value: attribute["background-color"],
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("color")
-                        },
-                        valid: isValidColor,
-                        message: useLanguage("colorMsg")
-                    }
-                ]
-            },
-            {
-                content: useLanguage("dims"),
-                children: [
-                    {
-                        category: "input",
-                        propertyName: "width",
-                        value: convertUnitToInteger(attribute["width"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("width")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    },
-                    {
-                        category: "input",
-                        propertyName: "height",
-                        value: convertUnitToInteger(attribute["height"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("height")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    },
-                    {
-                        category: "input",
-                        propertyName: "padding",
-                        value: convertUnitToInteger(attribute["padding"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("padding")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    }
-                ]
-            },
-            {
-                content: useLanguage("tblCellTxtAlm"),
-                children: [
-                    {
-                        category: "menus",
-                        propertyName: "text-align",
-                        value: attribute["text-align"],
-                        menus: [
-                            {
-                                icon: "icons icon-Text-align-left",
-                                describe: useLanguage("alCellTxtL"),
-                                align: "left"
-                            },
-                            {
-                                icon: "icons icon-Text-align-center",
-                                describe: useLanguage("alCellTxtC"),
-                                align: "center"
-                            },
-                            {
-                                icon: "icons icon-Text-align-right",
-                                describe: useLanguage("alCellTxtR"),
-                                align: "right"
-                            },
-                            {
-                                icon: "icons icon-Text-align-justify",
-                                describe: useLanguage("jusfCellTxt"),
-                                align: "justify"
-                            }
-                        ]
-                    },
-                    {
-                        category: "menus",
-                        propertyName: "vertical-align",
-                        value: attribute["vertical-align"],
-                        menus: [
-                            { icon: "icons icon-Align-top", describe: useLanguage("alCellTxtT"), align: "top" },
-                            { icon: "icons icon-Align-middle", describe: useLanguage("alCellTxtM"), align: "middle" },
-                            { icon: "icons icon-Align-bottom", describe: useLanguage("alCellTxtB"), align: "bottom" }
-                        ]
-                    }
-                ]
-            }
-        ]
-    };
-}
-
-function getTableProperties(attribute: Props, useLanguage: UseLanguageHandler) {
-    return {
-        title: useLanguage("tblProps"),
-        properties: [
-            {
-                content: useLanguage("border"),
-                children: [
-                    {
-                        category: "dropdown",
-                        propertyName: "border-style",
-                        value: attribute["border-style"],
-                        options: ["dashed", "dotted", "double", "groove", "inset", "none", "outset", "ridge", "solid"]
-                    },
-                    {
-                        category: "color",
-                        propertyName: "border-color",
-                        value: attribute["border-color"],
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("color")
-                        },
-                        valid: isValidColor,
-                        message: useLanguage("colorMsg")
-                    },
-                    {
-                        category: "input",
-                        propertyName: "border-width",
-                        value: convertUnitToInteger(attribute["border-width"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("width")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    }
-                ]
-            },
-            {
-                content: useLanguage("background"),
-                children: [
-                    {
-                        category: "color",
-                        propertyName: "background-color",
-                        value: attribute["background-color"],
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("color")
-                        },
-                        valid: isValidColor,
-                        message: useLanguage("colorMsg")
-                    }
-                ]
-            },
-            {
-                content: useLanguage("dimsAlm"),
-                children: [
-                    {
-                        category: "input",
-                        propertyName: "width",
-                        value: convertUnitToInteger(attribute["width"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("width")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    },
-                    {
-                        category: "input",
-                        propertyName: "height",
-                        value: convertUnitToInteger(attribute["height"]),
-                        attribute: {
-                            type: "text",
-                            placeholder: useLanguage("height")
-                        },
-                        valid: isValidDimensions,
-                        message: useLanguage("dimsMsg")
-                    },
-                    {
-                        category: "menus",
-                        propertyName: "align",
-                        value: attribute["align"],
-                        menus: [
-                            { icon: "icons icon-Text-align-left", describe: useLanguage("alTblL"), align: "left" },
-                            { icon: "icons icon-Text-align-center", describe: useLanguage("tblC"), align: "center" },
-                            { icon: "icons icon-Text-align-right", describe: useLanguage("alTblR"), align: "right" }
-                        ]
-                    }
-                ]
-            }
-        ]
-    };
-}
-
-function getProperties({ type, attribute }: Options, useLanguage: UseLanguageHandler) {
-    if (type === "table") return getTableProperties(attribute, useLanguage);
-    return getCellProperties(attribute, useLanguage);
-}
-
-export {
-    CELL_ATTRIBUTE,
-    CELL_DEFAULT_VALUES,
-    CELL_DEFAULT_WIDTH,
-    CELL_PROPERTIES,
-    COLORS,
-    DEVIATION,
-    getProperties,
-    TABLE_PROPERTIES
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/header.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/header.ts
deleted file mode 100644
index c40259ec60..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/header.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { BlockBlot } from "parchment";
-import Quill from "quill";
-import QuillHeader from "quill/formats/header";
-import type { Props, TableCellChildren } from "../types";
-import { getCellFormats, getCorrectCellBlot } from "../utils";
-import { ListContainer } from "./list";
-import { TableCell, TableCellBlock } from "./table";
-
-const Header = QuillHeader as typeof BlockBlot;
-
-class TableHeader extends Header {
-    static blotName = "table-header";
-    static className = "ql-table-header";
-
-    // @ts-ignore
-    next: this | null;
-    // @ts-ignore
-    parent: TableCell;
-
-    static create(formats: Props) {
-        const { cellId, value } = formats;
-        const node = super.create(value);
-        node.setAttribute("data-cell", cellId);
-        return node;
-    }
-
-    format(name: string, value: string | Props, isReplace?: boolean) {
-        if (name === "header") {
-            const _value = this.statics.formats(this.domNode).value;
-            const cellId = this.domNode.getAttribute("data-cell");
-            if (_value == value || !value) {
-                this.replaceWith(TableCellBlock.blotName, cellId);
-            } else {
-                super.format("table-header", { cellId, value });
-            }
-        } else if (name === "list") {
-            const [formats, cellId] = this.getCellFormats(this.parent);
-            if (isReplace) {
-                this.wrap(ListContainer.blotName, { ...formats, cellId });
-            } else {
-                this.wrap(TableCell.blotName, formats);
-            }
-            return this.replaceWith("table-list", value);
-        } else if (name === TableCell.blotName) {
-            return this.wrap(name, value);
-        } else if (name === this.statics.blotName && !value) {
-            const cellId = this.domNode.getAttribute("data-cell");
-            this.replaceWith(TableCellBlock.blotName, cellId);
-        } else {
-            super.format(name, value);
-        }
-    }
-
-    static formats(domNode: HTMLElement) {
-        const cellId = domNode.getAttribute("data-cell");
-        const value = this.tagName.indexOf(domNode.tagName) + 1;
-        return { cellId, value };
-    }
-
-    formats() {
-        const formats = this.attributes.values();
-        const format = this.statics.formats(this.domNode, this.scroll);
-        if (format != null) {
-            formats[this.statics.blotName] = format;
-        }
-        return formats;
-    }
-
-    getCellFormats(parent: TableCell | TableCellChildren) {
-        const cellBlot = getCorrectCellBlot(parent);
-        return getCellFormats(cellBlot!);
-    }
-}
-
-Quill.register(
-    {
-        "formats/table-header": TableHeader
-    },
-    true
-);
-
-export default TableHeader;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/list.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/list.ts
deleted file mode 100644
index fba43ab988..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/list.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-// @ts-nocheck
-import type { BlockBlot, ContainerBlot } from "parchment";
-import Quill from "quill";
-import QuillList from "quill/formats/list";
-import QuillContainer from "quill/blots/container";
-import { CELL_ATTRIBUTE } from "../config";
-import type { Props, TableCellChildren } from "../types";
-import { getCellFormats, getCorrectCellBlot } from "../utils";
-import { TableCell, TableCellBlock } from "./table";
-
-const List = QuillList as typeof BlockBlot;
-const Container = QuillContainer as typeof ContainerBlot;
-const DEFAULT_ATTRIBUTE = ["colspan", "rowspan"];
-
-class ListContainer extends Container {
-    next: this | null;
-    parent: TableCell;
-
-    static create(value: Props) {
-        const node = super.create() as HTMLElement;
-        for (const key of DEFAULT_ATTRIBUTE) {
-            if (value[key] == "1") delete value[key];
-        }
-        const keys = Object.keys(value);
-        for (const key of keys) {
-            if (key === "data-row") {
-                node.setAttribute(key, value[key]);
-            } else if (key === "cellId") {
-                node.setAttribute("data-cell", value[key]);
-            } else {
-                node.setAttribute(`data-${key}`, value[key]);
-            }
-        }
-        return node;
-    }
-
-    format(name: string, value: string | Props) {
-        return this.wrap(name, value);
-    }
-
-    static formats(domNode: HTMLElement) {
-        const formats = CELL_ATTRIBUTE.reduce((formats: Props, attr) => {
-            const name = attr.includes("data") ? attr : `data-${attr}`;
-            if (domNode.hasAttribute(name)) {
-                formats[attr] = domNode.getAttribute(name) ?? "";
-            }
-            return formats;
-        }, {});
-        formats["cellId"] = domNode.getAttribute("data-cell") ?? "";
-        for (const key of DEFAULT_ATTRIBUTE) {
-            if (!formats[key]) formats[key] = "1";
-        }
-        return formats;
-    }
-
-    formats() {
-        const formats = this.statics.formats(this.domNode, this.scroll);
-        return { [this.statics.blotName]: formats };
-    }
-}
-ListContainer.blotName = "table-list-container";
-ListContainer.className = "table-list-container";
-ListContainer.tagName = "OL";
-
-class TableList extends List {
-    parent: ListContainer;
-
-    format(name: string, value: string | Props, isReplace?: boolean) {
-        const list = this.formats()[this.statics.blotName];
-        if (name === "list") {
-            const [formats, cellId] = this.getCellFormats(this.parent);
-            if (!value || value === list) {
-                this.setReplace(!!isReplace, formats);
-                return this.replaceWith(TableCellBlock.blotName, cellId);
-            } else if (value !== list) {
-                return this.replaceWith(this.statics.blotName, value);
-            }
-        } else if (name === ListContainer.blotName) {
-            if (typeof value === "string") {
-                value = { cellId: value };
-            }
-            const [formats, cellId] = this.getCorrectCellFormats(value);
-            this.wrap(TableCell.blotName, formats);
-            this.wrap(name, { ...formats, cellId });
-        } else if (name === "header") {
-            const [formats, cellId] = this.getCellFormats(this.parent);
-            this.setReplace(!!isReplace, formats);
-            return this.replaceWith("table-header", { cellId, value });
-        } else if (name === TableCell.blotName) {
-            const listContainer = this.getListContainer(this.parent);
-            if (!listContainer) return;
-            const formats = listContainer.formats()[listContainer.statics.blotName];
-            this.wrap(name, value);
-            // @ts-ignore
-            this.wrap(ListContainer.blotName, { ...formats, ...value });
-        } else if (name === this.statics.blotName && !value) {
-            const [, cellId] = this.getCellFormats(this.parent);
-            this.replaceWith(TableCellBlock.blotName, cellId);
-        } else {
-            super.format(name, value);
-        }
-    }
-
-    getCellFormats(parent: TableCell | TableCellChildren) {
-        const cellBlot = getCorrectCellBlot(parent);
-        return getCellFormats(cellBlot!);
-    }
-
-    getCorrectCellFormats(value: Props): [Props, string] {
-        const cellBlot = getCorrectCellBlot(this.parent);
-        if (!cellBlot) {
-            const cellId = value["cellId"];
-            const formats = { ...value };
-            delete formats["cellId"];
-            return [formats, cellId];
-        } else {
-            const [formats, cellId] = getCellFormats(cellBlot);
-            const _formats = { ...formats, ...value };
-            const _cellId = _formats["cellId"] || cellId;
-            delete _formats["cellId"];
-            return [_formats, _cellId];
-        }
-    }
-
-    private getListContainer(blot: ListContainer) {
-        while (blot) {
-            if (blot.statics.blotName === ListContainer.blotName) {
-                return blot;
-            }
-            // @ts-ignore
-            blot = blot.parent;
-        }
-        return null;
-    }
-
-    static register() {
-        Quill.register(ListContainer);
-    }
-
-    setReplace(isReplace: boolean, formats: Props) {
-        if (isReplace) {
-            this.parent.replaceWith(TableCell.blotName, formats);
-        } else {
-            this.wrap(TableCell.blotName, formats);
-        }
-    }
-}
-TableList.blotName = "table-list";
-TableList.className = "table-list";
-
-Quill.register(
-    {
-        "formats/table-list": TableList
-    },
-    true
-);
-
-ListContainer.allowedChildren = [TableList];
-TableList.requiredContainer = ListContainer;
-
-export { ListContainer, TableList as default };
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/table.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/table.ts
deleted file mode 100644
index 4494b9b4ee..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/table.ts
+++ /dev/null
@@ -1,785 +0,0 @@
-// @ts-nocheck
-import type { BlockBlot, ContainerBlot, LinkedList } from "parchment";
-import Quill from "quill";
-import QuillBlock from "quill/blots/block";
-import QuillContainer from "quill/blots/container";
-import { CELL_ATTRIBUTE, CELL_DEFAULT_WIDTH, DEVIATION } from "../config";
-import type { Props, TableCellAllowedChildren } from "../types";
-import { filterWordStyle, getCellChildBlot, getCellFormats, getCellId, getCopyTd, getCorrectCellBlot } from "../utils";
-import TableHeader from "./header";
-import { ListContainer } from "./list";
-
-const Block = QuillBlock as typeof BlockBlot;
-const Container = QuillContainer as typeof ContainerBlot;
-const TABLE_ATTRIBUTE = ["border", "cellspacing", "style", "data-class"];
-const COL_ATTRIBUTE = ["width"];
-
-class TableCellBlock extends Block {
-    static blotName = "table-cell-block";
-    static className = "ql-table-block";
-    static tagName = "P";
-
-    next: this | null;
-    parent: TableCell;
-
-    static create(value: string) {
-        const node = super.create();
-        if (value) {
-            node.setAttribute("data-cell", value);
-        } else {
-            node.setAttribute("data-cell", cellId());
-        }
-        return node;
-    }
-
-    format(name: string, value: string | Props) {
-        const cellId = this.formats()[this.statics.blotName];
-        if (name === TableCell.blotName && value) {
-            this.wrap(TableRow.blotName);
-            return this.wrap(name, value);
-        } else if (name === TableContainer.blotName) {
-            this.wrap(name, value);
-        } else if (name === "header") {
-            return this.replaceWith("table-header", { cellId, value });
-        } else if (name === "table-header" && value) {
-            this.wrapTableCell(this.parent);
-            return this.replaceWith(name, value);
-        } else if (name === "list" || (name === "table-list" && value)) {
-            const formats = this.getCellFormats(this.parent);
-            this.wrap(ListContainer.blotName, { ...formats, cellId });
-            return this.replaceWith("table-list", value);
-        } else {
-            super.format(name, value);
-        }
-    }
-
-    formats() {
-        const formats = this.attributes.values();
-        const format = this.domNode.getAttribute("data-cell");
-        if (format != null) {
-            formats[this.statics.blotName] = format;
-        }
-        return formats;
-    }
-
-    getCellFormats(parent: TableCell) {
-        const cellBlot = getCorrectCellBlot(parent);
-        if (!cellBlot) return {};
-        const [formats] = getCellFormats(cellBlot);
-        return formats;
-    }
-
-    wrapTableCell(parent: TableCell) {
-        const cellBlot = getCorrectCellBlot(parent);
-        if (!cellBlot) return;
-        const [formats] = getCellFormats(cellBlot);
-        this.wrap(TableCell.blotName, formats);
-    }
-}
-
-class TableCell extends Container {
-    static blotName = "table-cell";
-    static tagName = "TD";
-
-    children: LinkedList<TableCellBlock | TableHeader | ListContainer>;
-    next: this | null;
-    parent: TableRow;
-    prev: this | null;
-
-    checkMerge() {
-        if (super.checkMerge() && this.next.children.head != null && this.next.children.head.formats) {
-            const thisHead = this.children.head.formats()[this.children.head.statics.blotName];
-            const thisTail = this.children.tail.formats()[this.children.tail.statics.blotName];
-            const nextHead = this.next.children.head.formats()[this.next.children.head.statics.blotName];
-            const nextTail = this.next.children.tail.formats()[this.next.children.tail.statics.blotName];
-            const _thisHead = getCellId(thisHead);
-            const _thisTail = getCellId(thisTail);
-            const _nextHead = getCellId(nextHead);
-            const _nextTail = getCellId(nextTail);
-            return _thisHead === _thisTail && _thisHead === _nextHead && _thisHead === _nextTail;
-        }
-        return false;
-    }
-
-    static create(value: Props) {
-        const node = super.create() as HTMLElement;
-        const keys = Object.keys(value);
-        for (const key of keys) {
-            value[key] && node.setAttribute(key, value[key]);
-        }
-        return node;
-    }
-
-    static formats(domNode: Element) {
-        const rowspan = this.getEmptyRowspan(domNode);
-        const formats = CELL_ATTRIBUTE.reduce((formats: Props, attr) => {
-            if (domNode.hasAttribute(attr)) {
-                if (attr === "rowspan" && rowspan) {
-                    formats[attr] = `${~~domNode.getAttribute(attr) - rowspan}`;
-                } else {
-                    formats[attr] = filterWordStyle(domNode.getAttribute(attr));
-                }
-            }
-            return formats;
-        }, {});
-        if (this.hasColgroup(domNode)) {
-            delete formats["width"];
-            if (formats["style"]) {
-                formats["style"] = formats["style"].replace(/width.*?;/g, "");
-            }
-        }
-        return formats;
-    }
-
-    formats(): { [key: string]: Props } {
-        const formats: Props = this.statics.formats(this.domNode, this.scroll);
-        const blotName: string = this.statics.blotName;
-        return { [blotName]: formats };
-    }
-
-    static getEmptyRowspan(domNode: Element) {
-        let nextNode = domNode.parentElement.nextElementSibling;
-        let rowspan = 0;
-        while (nextNode && nextNode.tagName === "TR" && !nextNode.innerHTML.replace(/\s/g, "")) {
-            rowspan++;
-            nextNode = nextNode.nextElementSibling;
-        }
-        return rowspan;
-    }
-
-    static hasColgroup(domNode: Element) {
-        while (domNode && domNode.tagName !== "TBODY") {
-            domNode = domNode.parentElement;
-        }
-        while (domNode) {
-            if (domNode.tagName === "COLGROUP") {
-                return true;
-            }
-            domNode = domNode.previousElementSibling;
-        }
-        return false;
-    }
-
-    html() {
-        const reg = /<(ol)[^>]*><li[^>]* data-list="bullet">(?:.*?)<\/li><\/(ol)>/gi;
-        return this.domNode.outerHTML.replace(reg, (match: string, $1: string, $2: string) => {
-            return match.replace($1, "ul").replace($2, "ul");
-        });
-    }
-
-    row() {
-        return this.parent;
-    }
-
-    rowOffset() {
-        if (this.row()) {
-            return this.row().rowOffset();
-        }
-        return -1;
-    }
-
-    setChildrenId(cellId: string) {
-        this.children.forEach((child: TableCellBlock | ListContainer | TableHeader) => {
-            child.domNode.setAttribute("data-cell", cellId);
-        });
-    }
-
-    table(): TableContainer {
-        let cur = this.parent;
-        while (cur != null && cur.statics.blotName !== "table-container") {
-            // @ts-expect-error
-            cur = cur.parent;
-        }
-        // @ts-expect-error
-        return cur;
-    }
-
-    optimize(context?: unknown) {
-        super.optimize(context);
-
-        this.children.forEach((child: TableCellAllowedChildren) => {
-            if (child.next == null) return;
-            const childFormats = getCellId(child.formats()[child.statics.blotName]);
-            const nextFormats = getCellId(child.next.formats()[child.next.statics.blotName]);
-            if (childFormats !== nextFormats) {
-                const next = this.splitAfter(child);
-                // @ts-expect-error
-                if (next) next.optimize();
-                // We might be able to merge with prev now
-                if (this.prev) this.prev.optimize();
-            }
-        });
-    }
-}
-
-class TableRow extends Container {
-    static blotName = "table-row";
-    static tagName = "TR";
-
-    children: LinkedList<TableCell>;
-    next: this | null;
-    parent: TableBody;
-    prev: this | null;
-
-    checkMerge() {
-        if (super.checkMerge() && this.next.children.head != null && this.next.children.head.formats) {
-            const thisHead = this.children.head.formats()[this.children.head.statics.blotName];
-            const thisTail = this.children.tail.formats()[this.children.tail.statics.blotName];
-            const nextHead = this.next.children.head.formats()[this.next.children.head.statics.blotName];
-            const nextTail = this.next.children.tail.formats()[this.next.children.tail.statics.blotName];
-            return (
-                thisHead["data-row"] === thisTail["data-row"] &&
-                thisHead["data-row"] === nextHead["data-row"] &&
-                thisHead["data-row"] === nextTail["data-row"]
-            );
-        }
-        return false;
-    }
-
-    rowOffset() {
-        if (this.parent) {
-            return this.parent.children.indexOf(this);
-        }
-        return -1;
-    }
-}
-
-class TableBody extends Container {
-    static blotName = "table-body";
-    static tagName = "TBODY";
-
-    children: LinkedList<TableRow>;
-    next: this | null;
-    parent: TableContainer;
-}
-
-class TableTemporary extends Block {
-    static blotName = "table-temporary";
-    static className = "ql-table-temporary";
-    static tagName = "temporary";
-
-    next: this | null;
-
-    static create(value: Props) {
-        const node = super.create();
-        const keys = Object.keys(value);
-        const className = TableContainer.defaultClassName;
-        for (const key of keys) {
-            if (key === "data-class" && !~value[key].indexOf(className)) {
-                node.setAttribute(key, `${className} ${value[key]}`);
-            } else {
-                node.setAttribute(key, value[key]);
-            }
-        }
-        return node;
-    }
-
-    static formats(domNode: Element) {
-        return TABLE_ATTRIBUTE.reduce((formats: Props, attr) => {
-            if (domNode.hasAttribute(attr)) {
-                formats[attr] = domNode.getAttribute(attr);
-            }
-            return formats;
-        }, {});
-    }
-
-    formats(): { [key: string]: Props } {
-        const formats: Props = this.statics.formats(this.domNode, this.scroll);
-        const blotName: string = this.statics.blotName;
-        return { [blotName]: formats };
-    }
-
-    optimize(...args: unknown[]) {
-        if (this.statics.requiredContainer && this.parent instanceof this.statics.requiredContainer) {
-            const formats = this.formats()[this.statics.blotName];
-            for (const key of TABLE_ATTRIBUTE) {
-                if (formats[key]) {
-                    if (key === "data-class") {
-                        this.parent.domNode.setAttribute("class", formats[key]);
-                    } else {
-                        this.parent.domNode.setAttribute(key, formats[key]);
-                    }
-                } else {
-                    this.parent.domNode.removeAttribute(key);
-                }
-            }
-        }
-        super.optimize(...args);
-    }
-}
-
-class TableCol extends Block {
-    static blotName = "table-col";
-    static tagName = "COL";
-
-    next: this | null;
-
-    static create(value: Props) {
-        const node = super.create();
-        const keys = Object.keys(value);
-        for (const key of keys) {
-            node.setAttribute(key, value[key]);
-        }
-        return node;
-    }
-
-    static formats(domNode: Element) {
-        return COL_ATTRIBUTE.reduce((formats: Props, attr) => {
-            if (domNode.hasAttribute(attr)) {
-                formats[attr] = domNode.getAttribute(attr);
-            }
-            return formats;
-        }, {});
-    }
-
-    formats() {
-        const formats = this.statics.formats(this.domNode, this.scroll);
-        return { [this.statics.blotName]: formats };
-    }
-
-    html() {
-        return this.domNode.outerHTML;
-    }
-}
-
-class TableColgroup extends Container {
-    static blotName = "table-colgroup";
-    static tagName = "COLGROUP";
-
-    children: LinkedList<TableCol>;
-    next: this | null;
-}
-
-class TableContainer extends Container {
-    static blotName = "table-container";
-    static defaultClassName = "ql-table-better";
-    static tagName = "TABLE";
-
-    children: LinkedList<TableBody | TableTemporary | TableColgroup>;
-
-    colgroup() {
-        // @ts-expect-error
-        const [colgroup] = this.descendant(TableColgroup);
-        return colgroup || (this.findChild("table-colgroup") as TableColgroup);
-    }
-
-    deleteColumn(changeTds: [Element, number][], delTds: Element[], deleteTable: () => void, cols: Element[] = []) {
-        const body = this.tbody();
-        const tableCells = this.descendants(TableCell);
-        if (body == null || body.children.head == null) return;
-        if (delTds.length === tableCells.length) {
-            deleteTable();
-        } else {
-            for (const [td, offset] of changeTds) {
-                this.setCellColspan(Quill.find(td) as TableCell, offset);
-            }
-            for (const td of [...delTds, ...cols]) {
-                if (td.parentElement.children.length === 1) {
-                    this.setCellRowspan(td.parentElement.previousElementSibling);
-                }
-                td.remove();
-            }
-        }
-    }
-
-    deleteRow(rows: TableRow[], deleteTable: () => void) {
-        const body = this.tbody();
-        if (body == null || body.children.head == null) return;
-        if (rows.length === body.children.length) {
-            deleteTable();
-        } else {
-            const weakMap: WeakMap<TableCell, { next: TableRow; rowspan: number }> = new WeakMap();
-            const columnCells: [TableRow, Props, TableCell | null, TableCell | null][] = [];
-            const keys: TableCell[] = [];
-            const maxColumns = this.getMaxColumns(body.children.head.children);
-            for (const row of rows) {
-                const prev = this.getCorrectRow(row, maxColumns);
-                prev &&
-                    prev.children.forEach((child: TableCell) => {
-                        const rowspan = ~~child.domNode.getAttribute("rowspan") || 1;
-                        if (rowspan > 1) {
-                            const blotName = child.statics.blotName;
-                            const [formats] = getCellFormats(child);
-                            if (rows.includes(child.parent)) {
-                                const next = child.parent?.next;
-                                if (weakMap.has(child)) {
-                                    const { rowspan } = weakMap.get(child);
-                                    weakMap.set(child, { next, rowspan: rowspan - 1 });
-                                } else {
-                                    weakMap.set(child, { next, rowspan: rowspan - 1 });
-                                    keys.push(child);
-                                }
-                            } else {
-                                child.replaceWith(blotName, { ...formats, rowspan: rowspan - 1 });
-                            }
-                        }
-                    });
-            }
-            for (const prev of keys) {
-                const [formats] = getCellFormats(prev);
-                const { right: position, width } = prev.domNode.getBoundingClientRect();
-                const { next, rowspan } = weakMap.get(prev);
-                this.setColumnCells(next, columnCells, { position, width }, formats, rowspan, prev);
-            }
-            for (const [row, formats, ref, prev] of columnCells) {
-                const cell = this.scroll.create(TableCell.blotName, formats) as TableCell;
-                prev.moveChildren(cell);
-                const _cellId = cellId();
-                cell.setChildrenId(_cellId);
-                row.insertBefore(cell, ref);
-                prev.remove();
-            }
-            for (const row of rows) {
-                row.remove();
-            }
-        }
-    }
-
-    deleteTable() {
-        this.remove();
-    }
-
-    findChild(blotName: string) {
-        let child = this.children.head;
-        while (child) {
-            if (child.statics.blotName === blotName) {
-                return child;
-            }
-            child = child.next;
-        }
-        return null;
-    }
-
-    getCopyTable() {
-        return this.domNode.outerHTML
-            .replace(/<temporary[^>]*>(.*?)<\/temporary>/gi, "")
-            .replace(/<td[^>]*>(.*?)<\/td>/gi, ($1: string) => {
-                return getCopyTd($1);
-            });
-    }
-
-    getCorrectRow(prev: TableRow, maxColumns: number) {
-        let isCorrect = false;
-        while (prev && !isCorrect) {
-            const prevMaxColumns = this.getMaxColumns(prev.children);
-            if (maxColumns === prevMaxColumns) {
-                isCorrect = true;
-                return prev;
-            }
-            prev = prev.prev;
-        }
-        return prev;
-    }
-
-    getInsertRow(prev: TableRow, ref: TableRow | null, offset: number) {
-        const body = this.tbody();
-        if (body == null || body.children.head == null) return;
-        const id = tableId();
-        const row = this.scroll.create(TableRow.blotName) as TableRow;
-        const maxColumns = this.getMaxColumns(body.children.head.children);
-        const nextMaxColumns = this.getMaxColumns(prev.children);
-        if (nextMaxColumns === maxColumns) {
-            prev.children.forEach((child: TableCell) => {
-                const formats = { height: "24", "data-row": id };
-                const colspan = ~~child.domNode.getAttribute("colspan") || 1;
-                this.insertTableCell(colspan, formats, row);
-            });
-            return row;
-        } else {
-            const correctRow = this.getCorrectRow(prev.prev, maxColumns);
-            correctRow.children.forEach((child: TableCell) => {
-                const formats = { height: "24", "data-row": id };
-                const colspan = ~~child.domNode.getAttribute("colspan") || 1;
-                const rowspan = ~~child.domNode.getAttribute("rowspan") || 1;
-                if (rowspan > 1) {
-                    if (offset > 0 && !ref) {
-                        this.insertTableCell(colspan, formats, row);
-                    } else {
-                        const [formats] = getCellFormats(child);
-                        child.replaceWith(child.statics.blotName, {
-                            ...formats,
-                            rowspan: rowspan + 1
-                        });
-                    }
-                } else {
-                    this.insertTableCell(colspan, formats, row);
-                }
-            });
-            return row;
-        }
-    }
-
-    getMaxColumns(children: LinkedList<TableCell>) {
-        return children.reduce((num: number, child: TableCell) => {
-            const colspan = ~~child.domNode.getAttribute("colspan") || 1;
-            return (num += colspan);
-        }, 0);
-    }
-
-    insertColumn(position: number, isLast: boolean, w: number, offset: number) {
-        const colgroup = this.colgroup() as TableColgroup;
-        const body = this.tbody() as TableBody;
-        if (body == null || body.children.head == null) return;
-        const columnCells: [TableRow, string, TableCell | null, null][] = [];
-        const cols: [TableColgroup, TableCol | null][] = [];
-        let row = body.children.head;
-        while (row) {
-            if (isLast && offset > 0) {
-                const id = row.children.tail.domNode.getAttribute("data-row");
-                columnCells.push([row, id, null, null]);
-            } else {
-                this.setColumnCells(row, columnCells, { position, width: w });
-            }
-            row = row.next;
-        }
-        if (colgroup) {
-            if (isLast) {
-                cols.push([colgroup, null]);
-            } else {
-                let correctLeft = 0;
-                let correctRight = 0;
-                let col = colgroup.children.head;
-                while (col) {
-                    const { left, width } = col.domNode.getBoundingClientRect();
-                    correctLeft = correctLeft ? correctLeft : left;
-                    correctRight = correctLeft + width;
-                    if (Math.abs(correctLeft - position) <= DEVIATION) {
-                        cols.push([colgroup, col]);
-                        break;
-                    } else if (Math.abs(correctRight - position) <= DEVIATION && !col.next) {
-                        cols.push([colgroup, null]);
-                        break;
-                    }
-                    correctLeft += width;
-                    col = col.next;
-                }
-            }
-        }
-        for (const [row, id, ref] of columnCells) {
-            if (!row) {
-                this.setCellColspan(ref, 1);
-            } else {
-                this.insertColumnCell(row, id, ref);
-            }
-        }
-        for (const [colgroup, ref] of cols) {
-            this.insertCol(colgroup, ref);
-        }
-    }
-
-    insertCol(colgroup: TableColgroup, ref: TableCol | null) {
-        const col = this.scroll.create(TableCol.blotName, { width: `${CELL_DEFAULT_WIDTH}` });
-        colgroup.insertBefore(col, ref);
-    }
-
-    insertColumnCell(row: TableRow | null, id: string, ref: TableCell | null) {
-        const colgroup = this.colgroup();
-        const formats = colgroup ? { "data-row": id } : { "data-row": id, width: `${CELL_DEFAULT_WIDTH}` };
-        const cell = this.scroll.create(TableCell.blotName, formats) as TableCell;
-        const cellBlock = this.scroll.create(TableCellBlock.blotName, cellId()) as TableCellBlock;
-        cell.appendChild(cellBlock);
-        if (!row) {
-            const tbody = this.tbody();
-            row = this.scroll.create(TableRow.blotName) as TableRow;
-            tbody.insertBefore(row, null);
-        }
-        row.insertBefore(cell, ref);
-        cellBlock.optimize();
-        return cell;
-    }
-
-    insertRow(index: number, offset: number) {
-        const body = this.tbody() as TableBody;
-        if (body == null || body.children.head == null) return;
-        const ref = body.children.at(index);
-        const prev = ref ? ref : body.children.at(index - 1);
-        const correctRow = this.getInsertRow(prev, ref, offset);
-        body.insertBefore(correctRow, ref);
-    }
-
-    insertTableCell(colspan: number, formats: Props, row: TableRow) {
-        if (colspan > 1) {
-            Object.assign(formats, { colspan });
-        } else {
-            delete formats["colspan"];
-        }
-        const cell = this.scroll.create(TableCell.blotName, formats) as TableCell;
-        const cellBlock = this.scroll.create(TableCellBlock.blotName, cellId()) as TableCellBlock;
-        cell.appendChild(cellBlock);
-        row.appendChild(cell);
-        cellBlock.optimize();
-    }
-
-    optimize(context: unknown) {
-        super.optimize(context);
-        const temporaries = this.descendants(TableTemporary);
-        this.setClassName(temporaries);
-        if (temporaries.length > 1) {
-            temporaries.shift();
-            for (const temporary of temporaries) {
-                temporary.remove();
-            }
-        }
-    }
-
-    setCellColspan(cell: TableCell, offset: number) {
-        const blotName = cell.statics.blotName;
-        const formats = cell.formats()[blotName];
-        const colspan = (~~formats["colspan"] || 1) + offset;
-        if (colspan > 1) {
-            Object.assign(formats, { colspan });
-        } else {
-            delete formats["colspan"];
-        }
-        cell.replaceWith(blotName, formats);
-    }
-
-    setCellRowspan(parentElement: Element) {
-        while (parentElement) {
-            const children = parentElement.querySelectorAll("td[rowspan]");
-            if (children.length) {
-                for (const child of children) {
-                    const cell = Quill.find(child) as TableCell;
-                    const blotName = cell.statics.blotName;
-                    const formats = cell.formats()[blotName];
-                    const rowspan = (~~formats["rowspan"] || 1) - 1;
-                    const childBlot = getCellChildBlot(cell);
-                    if (rowspan > 1) {
-                        Object.assign(formats, { rowspan });
-                    } else {
-                        delete formats["rowspan"];
-                    }
-                    childBlot.format(blotName, formats);
-                }
-                break;
-            }
-            parentElement = parentElement.previousElementSibling;
-        }
-    }
-
-    private setClassName(temporaries: TableTemporary[]) {
-        const defaultClassName = this.statics.defaultClassName;
-        const _temporary = temporaries[0];
-        const _className = this.domNode.getAttribute("class");
-        const getClassName = (className: string) => {
-            const classNames = (className || "").split(/\s+/);
-            if (!classNames.find(className => className === defaultClassName)) {
-                classNames.unshift(defaultClassName);
-            }
-            return classNames.join(" ").trim();
-        };
-        const setClass = (temporary: TableTemporary, _className: string) => {
-            const className = temporary.domNode.getAttribute("data-class");
-            if (className !== _className && _className != null) {
-                temporary.domNode.setAttribute("data-class", getClassName(_className));
-            }
-            if (!_className && !className) {
-                temporary.domNode.setAttribute("data-class", defaultClassName);
-            }
-        };
-        if (!_temporary) {
-            const container = this.prev;
-            if (!container) return;
-            // @ts-expect-error
-            const [cell] = container.descendant(TableCell);
-            // @ts-expect-error
-            const [temporary] = container.descendant(TableTemporary);
-            if (!cell && temporary) {
-                setClass(temporary, _className);
-            }
-        } else {
-            setClass(_temporary, _className);
-        }
-    }
-
-    private setColumnCells(
-        row: TableRow,
-        columnCells: [TableRow, Props | string, TableCell, TableCell][],
-        bounds: { position: number; width: number },
-        formats?: Props,
-        rowspan?: number,
-        prev?: TableCell
-    ) {
-        if (!row) return;
-        const { position, width } = bounds;
-        let ref = row.children.head;
-        while (ref) {
-            const { left, right } = ref.domNode.getBoundingClientRect();
-            const id: string = ref.domNode.getAttribute("data-row");
-            if (typeof formats === "object") {
-                Object.assign(formats, { rowspan, "data-row": id });
-            }
-            const props = formats || id;
-            if (Math.abs(left - position) <= DEVIATION) {
-                columnCells.push([row, props, ref, prev]);
-                break;
-            } else if (Math.abs(right - position) <= DEVIATION && !ref.next) {
-                columnCells.push([row, props, null, prev]);
-                break;
-                // rowspan > 1 (insertLeft, position + w is left)
-            } else if (Math.abs(left - position - width) <= DEVIATION) {
-                columnCells.push([row, props, ref, prev]);
-                break;
-                // rowspan > 1 (position between left and right, rowspan++)
-            } else if (position > left && position < right) {
-                columnCells.push([null, props, ref, prev]);
-                break;
-            }
-            ref = ref.next;
-        }
-    }
-
-    tbody() {
-        // @ts-expect-error
-        const [body] = this.descendant(TableBody);
-        return body || (this.findChild("table-body") as TableBody);
-    }
-
-    temporary() {
-        // @ts-expect-error
-        const [temporary] = this.descendant(TableTemporary);
-        return temporary;
-    }
-}
-
-TableContainer.allowedChildren = [TableBody, TableTemporary, TableColgroup];
-TableBody.requiredContainer = TableContainer;
-TableTemporary.requiredContainer = TableContainer;
-TableColgroup.requiredContainer = TableContainer;
-
-TableBody.allowedChildren = [TableRow];
-TableRow.requiredContainer = TableBody;
-
-TableColgroup.allowedChildren = [TableCol];
-TableCol.requiredContainer = TableColgroup;
-
-TableRow.allowedChildren = [TableCell];
-TableCell.requiredContainer = TableRow;
-
-TableCell.allowedChildren = [TableCellBlock, TableHeader, ListContainer];
-TableCellBlock.requiredContainer = TableCell;
-TableHeader.requiredContainer = TableCell;
-ListContainer.requiredContainer = TableCell;
-
-function cellId() {
-    const id = Math.random().toString(36).slice(2, 6);
-    return `cell-${id}`;
-}
-
-function tableId() {
-    const id = Math.random().toString(36).slice(2, 6);
-    return `row-${id}`;
-}
-
-export {
-    cellId,
-    TableBody,
-    TableCell,
-    TableCellBlock,
-    TableCol,
-    TableColgroup,
-    TableContainer,
-    tableId,
-    TableRow,
-    TableTemporary
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/de_DE.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/de_DE.ts
deleted file mode 100644
index 7335b4856a..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/de_DE.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Spalte",
-    insColL: "Spalte links einfügen",
-    insColR: "Spalte rechts einfügen",
-    delCol: "Spalte löschen",
-    row: "Zeile",
-    insRowAbv: "Zeile oberhalb einfügen",
-    insRowBlw: "Zeile unterhalb einfügen",
-    delRow: "Zeile löschen",
-    mCells: "Zellen verbinden",
-    sCell: "Zelle teilen",
-    tblProps: "Tabelleneingenschaften",
-    cellProps: "Zelleneigenschaften",
-    insParaOTbl: "Absatz außerhalb der Tabelle einfügen",
-    insB4: "Davor einfügen",
-    insAft: "Danach einfügen",
-    copyTable: "Tabelle kopieren",
-    delTable: "Tabelle löschen",
-    showGrid: "Raster anzeigen",
-    border: "Rahmen",
-    color: "Farbe",
-    width: "Breite",
-    background: "Schattierung",
-    dims: "Maße",
-    height: "Höhe",
-    padding: "Abstand",
-    tblCellTxtAlm: "Ausrichtung",
-    alCellTxtL: "Zellentext links ausrichten",
-    alCellTxtC: "Zellentext mittig ausrichten",
-    alCellTxtR: "Zellentext rechts ausrichten",
-    jusfCellTxt: "Zellentext Blocksatz",
-    alCellTxtT: "Zellentext oben ausrichten",
-    alCellTxtM: "Zellentext mittig ausrichten",
-    alCellTxtB: "Zellentext unten ausrichten",
-    dimsAlm: "Maße und Ausrichtung",
-    alTblL: "Tabelle links ausrichten",
-    tblC: "Tabelle mittig ausrichten",
-    alTblR: "Tabelle rechts ausrichten",
-    save: "Speichern",
-    cancel: "Abbrechen",
-    colorMsg: 'Die Farbe ist ungültig. Probiere "#FF0000", "rgb(255,0,0)" oder "red".',
-    dimsMsg: 'Der Wert ist ungültig. Probiere "10px", "2em" oder einfach "2".',
-    colorPicker: "Farbwähler",
-    removeColor: "Farbe entfernen",
-    black: "Schwarz",
-    dimGrey: "Dunkelgrau",
-    grey: "Grau",
-    lightGrey: "Hellgrau",
-    white: "Weiß",
-    red: "Rot",
-    orange: "Orange",
-    yellow: "Gelb",
-    lightGreen: "Hellgrün",
-    green: "Grün",
-    aquamarine: "Aquamarin",
-    turquoise: "Türkis",
-    lightBlue: "Hellblau",
-    blue: "Blau",
-    purple: "Lila"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/en_US.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/en_US.ts
deleted file mode 100644
index 5d14d014c1..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/en_US.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Column",
-    insColL: "Insert column left",
-    insColR: "Insert column right",
-    delCol: "Delete column",
-    row: "Row",
-    insRowAbv: "Insert row above",
-    insRowBlw: "Insert row below",
-    delRow: "Delete row",
-    mCells: "Merge cells",
-    sCell: "Split cell",
-    tblProps: "Table properties",
-    cellProps: "Cell properties",
-    insParaOTbl: "Insert paragraph outside the table",
-    insB4: "Insert before",
-    insAft: "Insert after",
-    copyTable: "Copy table",
-    delTable: "Delete table",
-    showGrid: "Show grid",
-    border: "Border",
-    color: "Color",
-    width: "Width",
-    background: "Background",
-    dims: "Dimensions",
-    height: "Height",
-    padding: "Padding",
-    tblCellTxtAlm: "Table cell text alignment",
-    alCellTxtL: "Align cell text to the left",
-    alCellTxtC: "Align cell text to the center",
-    alCellTxtR: "Align cell text to the right",
-    jusfCellTxt: "Justify cell text",
-    alCellTxtT: "Align cell text to the top",
-    alCellTxtM: "Align cell text to the middle",
-    alCellTxtB: "Align cell text to the bottom",
-    dimsAlm: "Dimensions and alignment",
-    alTblL: "Align table to the left",
-    tblC: "Center table",
-    alTblR: "Align table to the right",
-    save: "Save",
-    cancel: "Cancel",
-    colorMsg: 'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".',
-    dimsMsg: 'The value is invalid. Try "10px" or "2em" or simply "2".',
-    colorPicker: "Color picker",
-    removeColor: "Remove color",
-    black: "Black",
-    dimGrey: "Dim grey",
-    grey: "Grey",
-    lightGrey: "Light grey",
-    white: "White",
-    red: "Red",
-    orange: "Orange",
-    yellow: "Yellow",
-    lightGreen: "Light green",
-    green: "Green",
-    aquamarine: "Aquamarine",
-    turquoise: "Turquoise",
-    lightBlue: "Light blue",
-    blue: "Blue",
-    purple: "Purple"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/fr_FR.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/fr_FR.ts
deleted file mode 100644
index f9dfa5738f..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/fr_FR.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Colonne",
-    insColL: "Insérer colonne à gauche",
-    insColR: "Insérer colonne à droite",
-    delCol: "Supprimer la colonne",
-    row: "Ligne",
-    insRowAbv: "Insérer ligne au-dessus",
-    insRowBlw: "Insérer ligne en dessous",
-    delRow: "Supprimer la ligne",
-    mCells: "Fusionner les cellules",
-    sCell: "Diviser la cellule",
-    tblProps: "Propriétés du tableau",
-    cellProps: "Propriétés de la cellule",
-    insParaOTbl: "Insérer paragraphe en dehors du tableau",
-    insB4: "Insérer avant",
-    insAft: "Insérer après",
-    copyTable: "Copier le tableau",
-    delTable: "Supprimer le tableau",
-    showGrid: "Afficher la grille",
-    border: "Bordure",
-    color: "Couleur",
-    width: "Largeur",
-    background: "Arrière-plan",
-    dims: "Dimensions",
-    height: "Hauteur",
-    padding: "Marge intérieure",
-    tblCellTxtAlm: "Alignement du texte de la cellule du tableau",
-    alCellTxtL: "Aligner le texte de la cellule à gauche",
-    alCellTxtC: "Aligner le texte de la cellule au centre",
-    alCellTxtR: "Aligner le texte de la cellule à droite",
-    jusfCellTxt: "Justifier le texte de la cellule",
-    alCellTxtT: "Aligner le texte de la cellule en haut",
-    alCellTxtM: "Aligner le texte de la cellule au milieu",
-    alCellTxtB: "Aligner le texte de la cellule en bas",
-    dimsAlm: "Dimensions et alignement",
-    alTblL: "Aligner le tableau à gauche",
-    tblC: "Centrer le tableau",
-    alTblR: "Aligner le tableau à droite",
-    save: "Enregistrer",
-    cancel: "Annuler",
-    colorMsg: 'La couleur est invalide. Essayez "#FF0000" ou "rgb(255,0,0)" ou "rouge".',
-    dimsMsg: 'La valeur est invalide. Essayez "10px" ou "2em" ou simplement "2".',
-    colorPicker: "Sélecteur de couleur",
-    removeColor: "Supprimer la couleur",
-    black: "Noir",
-    dimGrey: "Gris foncé",
-    grey: "Gris",
-    lightGrey: "Gris clair",
-    white: "Blanc",
-    red: "Rouge",
-    orange: "Orange",
-    yellow: "Jaune",
-    lightGreen: "Vert clair",
-    green: "Vert",
-    aquamarine: "Aigue-marine",
-    turquoise: "Turquoise",
-    lightBlue: "Bleu clair",
-    blue: "Bleu",
-    purple: "Violet"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/index.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/index.ts
deleted file mode 100644
index 9b0aa6b702..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/index.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// @ts-nocheck
-import type { Props } from "../types";
-import de_DE from "./de_DE";
-import en_US from "./en_US";
-import fr_FR from "./fr_FR";
-import pl_PL from "./pl_PL";
-import ru_RU from "./ru_RU";
-import tr_TR from "./tr_TR";
-import zh_CN from "./zh_CN";
-
-interface Config {
-    [propName: string]: Props;
-}
-
-interface LanguageConfig {
-    name: string;
-    content: Props;
-}
-
-class Language {
-    config: Config;
-    language: string | LanguageConfig;
-    name: string;
-    constructor(language?: string | LanguageConfig) {
-        this.config = {
-            en_US,
-            zh_CN,
-            fr_FR,
-            pl_PL,
-            de_DE,
-            ru_RU,
-            tr_TR
-        };
-        this.init(language);
-    }
-
-    changeLanguage(name: string) {
-        this.name = name;
-    }
-
-    init(language: string | LanguageConfig) {
-        if (typeof language === "undefined" || typeof language === "string") {
-            this.changeLanguage(language || "en_US");
-        } else {
-            const { name, content } = language;
-            content && this.registry(name, content);
-            name && this.changeLanguage(name);
-        }
-    }
-
-    registry(name: string, content: Props) {
-        this.config = {
-            ...this.config,
-            [name]: content
-        };
-    }
-
-    useLanguage(name: string) {
-        return this.config[this.name][name];
-    }
-}
-
-export default Language;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/pl_PL.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/pl_PL.ts
deleted file mode 100644
index 2e986e5410..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/pl_PL.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Kolumna",
-    insColL: "Wstaw kolumnę z lewej",
-    insColR: "Wstaw kolumnę z prawej",
-    delCol: "Usuń kolumnę",
-    row: "Wiersz",
-    insRowAbv: "Wstaw wiersz powyżej",
-    insRowBlw: "Wstaw wiersz poniżej",
-    delRow: "Usuń wiersz",
-    mCells: "Scal komórki",
-    sCell: "Podziel komórkę",
-    tblProps: "Właściwości tabeli",
-    cellProps: "Właściwości komórki",
-    insParaOTbl: "Wstaw akapit poza tabelą",
-    insB4: "Wstaw przed",
-    insAft: "Wstaw po",
-    copyTable: "Kopiuj tabelę",
-    delTable: "Usuń tabelę",
-    showGrid: "Pokaż siatkę",
-    border: "Obramowanie",
-    color: "Kolor",
-    width: "Szerokość",
-    background: "Tło",
-    dims: "Wymiary",
-    height: "Wysokość",
-    padding: "Margines wewnętrzny",
-    tblCellTxtAlm: "Wyrównanie tekstu w komórce tabeli",
-    alCellTxtL: "Wyrównaj tekst w komórce do lewej",
-    alCellTxtC: "Wyrównaj tekst w komórce do środka",
-    alCellTxtR: "Wyrównaj tekst w komórce do prawej",
-    jusfCellTxt: "Wyjustuj tekst w komórce",
-    alCellTxtT: "Wyrównaj tekst w komórce do góry",
-    alCellTxtM: "Wyrównaj tekst w komórce do środka",
-    alCellTxtB: "Wyrównaj tekst w komórce do dołu",
-    dimsAlm: "Wymiary i wyrównanie",
-    alTblL: "Wyrównaj tabelę do lewej",
-    tblC: "Wyśrodkuj tabelę",
-    alTblR: "Wyrównaj tabelę do prawej",
-    save: "Zapisz",
-    cancel: "Anuluj",
-    colorMsg: 'Kolor jest nieprawidłowy. Spróbuj "#FF0000" lub "rgb(255,0,0)" lub "red".',
-    dimsMsg: 'Wartość jest nieprawidłowa. Spróbuj "10px" lub "2em" lub po prostu "2".',
-    colorPicker: "Wybór koloru",
-    removeColor: "Usuń kolor",
-    black: "Czarny",
-    dimGrey: "Przyciemniony szary",
-    grey: "Szary",
-    lightGrey: "Jasnoszary",
-    white: "Biały",
-    red: "Czerwony",
-    orange: "Pomarańczowy",
-    yellow: "Żółty",
-    lightGreen: "Jasnozielony",
-    green: "Zielony",
-    aquamarine: "Akwamaryna",
-    turquoise: "Turkusowy",
-    lightBlue: "Jasnoniebieski",
-    blue: "Niebieski",
-    purple: "Fioletowy"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/ru_RU.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/ru_RU.ts
deleted file mode 100644
index 9268f10b63..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/ru_RU.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Столбец",
-    insColL: "Вставить столбец слева",
-    insColR: "Вставить столбец справа",
-    delCol: "Удалить столбец",
-    row: "Строка",
-    insRowAbv: "Вставить строку сверху",
-    insRowBlw: "Вставить строку снизу",
-    delRow: "Удалить строку",
-    mCells: "Объединить ячейки",
-    sCell: "Разбить ячейку",
-    tblProps: "Свойства таблицы",
-    cellProps: "Свойства ячейки",
-    insParaOTbl: "Вставить абзац за пределами таблицы",
-    insB4: "Вставить абзац перед",
-    insAft: "Вставить абзац после",
-    copyTable: "Копировать таблицу",
-    delTable: "Удалить таблицу",
-    showGrid: "Показать сетку",
-    border: "Обводка",
-    color: "Цвет",
-    width: "Ширина",
-    background: "Фон",
-    dims: "Размеры",
-    height: "Высота",
-    padding: "Отступ",
-    tblCellTxtAlm: "Выравнивание текста в ячейке таблицы",
-    alCellTxtL: "Выровнять текст в ячейке по левому краю",
-    alCellTxtC: "Выровнять текст в ячейке по центру",
-    alCellTxtR: "Выровнять текст в ячейке по правому краю",
-    jusfCellTxt: "Выровнять текст в ячейке по ширине",
-    alCellTxtT: "Выровнять текст в ячейке по верху",
-    alCellTxtM: "Выровнять текст в ячейке по середине",
-    alCellTxtB: "Выровнять текст в ячейке по низу",
-    dimsAlm: "Размеры и выравнивание",
-    alTblL: "Выровнять таблицу по левому краю",
-    tblC: "Центрировать таблицу",
-    alTblR: "Выровнять таблицу по правому краю",
-    save: "Сохранить",
-    cancel: "Отменить",
-    colorMsg: 'Неверный цвет. Попробуйте "#FF0000", "rgb(255,0,0)" или "red".',
-    dimsMsg: 'Недопустимое значение. Попробуйте "10px", "2em" или просто "2".',
-    colorPicker: "Выбор цвета",
-    removeColor: "Удалить цвет",
-    black: "Черный",
-    dimGrey: "Темно-серый",
-    grey: "Серый",
-    lightGrey: "Светло-серый",
-    white: "Белый",
-    red: "Красный",
-    orange: "Оранжевый",
-    yellow: "Желтый",
-    lightGreen: "Светло-зеленый",
-    green: "Зеленый",
-    aquamarine: "Аквамарин",
-    turquoise: "Бирюзовый",
-    lightBlue: "Светло-голубой",
-    blue: "Синий",
-    purple: "Фиолетовый"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/tr_TR.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/tr_TR.ts
deleted file mode 100644
index c3d64fa797..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/tr_TR.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "Sütun",
-    insColL: "Sola sütun ekle",
-    insColR: "Sağa sütun ekle",
-    delCol: "Sütunu sil",
-    row: "Satır",
-    insRowAbv: "Üstüne satır ekle",
-    insRowBlw: "Altına satır ekle",
-    delRow: "Satırı sil",
-    mCells: "Hücreleri birleştir",
-    sCell: "Hücreyi böl",
-    tblProps: "Tablo özellikleri",
-    cellProps: "Hücre özellikleri",
-    insParaOTbl: "Tablo dışında paragraf ekle",
-    insB4: "Öncesine ekle",
-    insAft: "Sonrasına ekle",
-    copyTable: "Tabloyu kopyala",
-    delTable: "Tabloyu sil",
-    showGrid: "Izgarayı göster",
-    border: "Kenarlık",
-    color: "Renk",
-    width: "Genişlik",
-    background: "Arka plan",
-    dims: "Boyutlar",
-    height: "Yükseklik",
-    padding: "Dolgu",
-    tblCellTxtAlm: "Tablo hücresi metin hizalaması",
-    alCellTxtL: "Hücre metnini sola hizala",
-    alCellTxtC: "Hücre metnini ortaya hizala",
-    alCellTxtR: "Hücre metnini sağa hizala",
-    jusfCellTxt: "Hücre metnini yasla",
-    alCellTxtT: "Hücre metnini üste hizala",
-    alCellTxtM: "Hücre metnini ortaya hizala",
-    alCellTxtB: "Hücre metnini alta hizala",
-    dimsAlm: "Boyutlar ve hizalama",
-    alTblL: "Tabloyu sola hizala",
-    tblC: "Tabloyu ortala",
-    alTblR: "Tabloyu sağa hizala",
-    save: "Kaydet",
-    cancel: "İptal",
-    colorMsg: 'Renk geçersiz. "#FF0000", "rgb(255,0,0)" veya "red" deneyin.',
-    dimsMsg: 'Değer geçersiz. "10px", "2em" veya sadece "2" deneyin.',
-    colorPicker: "Renk seçici",
-    removeColor: "Rengi kaldır",
-    black: "Siyah",
-    dimGrey: "Koyu gri",
-    grey: "Gri",
-    lightGrey: "Açık gri",
-    white: "Beyaz",
-    red: "Kırmızı",
-    orange: "Turuncu",
-    yellow: "Sarı",
-    lightGreen: "Açık yeşil",
-    green: "Yeşil",
-    aquamarine: "Akuamarin",
-    turquoise: "Turkuaz",
-    lightBlue: "Açık mavi",
-    blue: "Mavi",
-    purple: "Mor"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/zh_CN.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/zh_CN.ts
deleted file mode 100644
index c47d8c89d4..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/zh_CN.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
-    col: "列",
-    insColL: "向左插入列",
-    insColR: "向右插入列",
-    delCol: "删除列",
-    row: "行",
-    insRowAbv: "在上面插入行",
-    insRowBlw: "在下面插入行",
-    delRow: "删除行",
-    mCells: "合并单元格",
-    sCell: "拆分单元格",
-    tblProps: "表格属性",
-    cellProps: "单元格属性",
-    insParaOTbl: "在表格外插入段落",
-    insB4: "在表格前面插入",
-    insAft: "在表格后面插入",
-    copyTable: "复制表格",
-    delTable: "删除表格",
-    showGrid: "显示网格",
-    border: "边框",
-    color: "颜色",
-    width: "宽度",
-    background: "背景",
-    dims: "尺寸",
-    height: "高度",
-    padding: "内边距",
-    tblCellTxtAlm: "单元格文本对齐方式",
-    alCellTxtL: "左对齐",
-    alCellTxtC: "水平居中对齐",
-    alCellTxtR: "右对齐",
-    jusfCellTxt: "两边对齐",
-    alCellTxtT: "顶端对齐",
-    alCellTxtM: "垂直居中对齐",
-    alCellTxtB: "底部对齐",
-    dimsAlm: "尺寸和对齐方式",
-    alTblL: "表格左对齐",
-    tblC: "表格居中",
-    alTblR: "表格右对齐",
-    save: "保存",
-    cancel: "取消",
-    colorMsg: '无效颜色，请使用 "#FF0000" 或者 "rgb(255,0,0)" 或者 "red"',
-    dimsMsg: '无效值， 请使用 "10px" 或者 "2em" 或者 "2"',
-    colorPicker: "颜色选择器",
-    removeColor: "删除颜色",
-    black: "黑色",
-    dimGrey: "暗灰色",
-    grey: "灰色",
-    lightGrey: "浅灰色",
-    white: "白色",
-    red: "红色",
-    orange: "橙色",
-    yellow: "黄色",
-    lightGreen: "浅绿色",
-    green: "绿色",
-    aquamarine: "海蓝色",
-    turquoise: "青绿色",
-    lightBlue: "浅蓝色",
-    blue: "蓝色",
-    purple: "紫色"
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/clipboard.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/clipboard.ts
deleted file mode 100644
index 23ca90563f..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/clipboard.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import Quill from "quill";
-import Module from "quill/core/module";
-import Delta from "quill-delta";
-import logger from "quill/core/logger.js";
-import type { Range, Props } from "../types";
-import { TableCellBlock, TableTemporary } from "../formats/table";
-import CustomClipboard from "../../../modules/clipboard";
-
-const Clipboard = CustomClipboard as typeof Module;
-const debug = logger("quill:clipboard");
-
-class TableClipboard extends Clipboard {
-    // @ts-ignore
-    convert: (
-        {
-            html,
-            text
-        }: {
-            html?: string;
-            text?: string;
-        },
-        formats?: Record<string, unknown>
-    ) => Delta;
-
-    onPaste(range: Range, { text, html }: { text?: string; html?: string }) {
-        const formats = this.quill.getFormat(range.index) as Props;
-        const pastedDelta = this.getTableDelta({ text, html }, formats);
-        debug.log("onPaste", pastedDelta, { text, html });
-        const delta = new Delta().retain(range.index).delete(range.length).concat(pastedDelta);
-        this.quill.updateContents(delta, Quill.sources.USER);
-        // range.length contributes to delta.length()
-        this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT);
-        this.quill.scrollSelectionIntoView();
-    }
-
-    private getTableDelta({ html, text }: { html?: string; text?: string }, formats: Props) {
-        const delta = this.convert({ text, html }, formats);
-        if (formats[TableCellBlock.blotName]) {
-            for (const op of delta.ops) {
-                // External copied tables or table contents copied within an editor.
-                // Subsequent version processing.
-                if (
-                    op?.attributes &&
-                    (op.attributes[TableTemporary.blotName] || op.attributes[TableCellBlock.blotName])
-                ) {
-                    return new Delta();
-                }
-                // Process externally pasted lists or headers or text.
-                if (op?.attributes?.header || op?.attributes?.list || !op?.attributes?.[TableCellBlock.blotName]) {
-                    op.attributes = { ...op.attributes, ...formats };
-                }
-            }
-        }
-        return delta;
-    }
-}
-
-export default TableClipboard;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/toolbar.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/toolbar.ts
deleted file mode 100644
index ffb159d953..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/toolbar.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-// @ts-nocheck
-import merge from "lodash.merge";
-import type { ContainerBlot } from "parchment";
-import { EmbedBlot } from "parchment";
-import type { Range } from "quill";
-import Quill from "quill";
-import Delta from "quill-delta";
-import QuillContainer from "quill/blots/container";
-import Module from "quill/core/module";
-import QuillToolbar from "quill/modules/toolbar";
-import TableHeader from "../formats/header";
-import type { CellSelection, QuillTableBetter, TableCell, TableCellAllowedChildren, TableCellChildren } from "../types";
-import { getCorrectCellBlot } from "../utils";
-
-const Container = QuillContainer as typeof ContainerBlot;
-const Toolbar = QuillToolbar as typeof Module;
-
-type Handler = (this: TableToolbar, value: any) => void;
-
-class TableToolbar extends Toolbar {
-    handlers: Record<string, Handler>;
-    controls: [string, HTMLElement][];
-    update: (range: Range | null) => void;
-    container?: HTMLElement | null;
-
-    attach(input: HTMLElement) {
-        let format = Array.from(input.classList).find(className => {
-            return className.indexOf("ql-") === 0;
-        });
-        if (!format) return;
-        format = format.slice("ql-".length);
-        if (input.tagName === "BUTTON") {
-            input.setAttribute("type", "button");
-        }
-        if (this.handlers[format] == null && this.quill.scroll.query(format) == null) {
-            console.warn("ignoring attaching to nonexistent format", format, input);
-            return;
-        }
-        const eventName = input.tagName === "SELECT" ? "change" : "click";
-        input.addEventListener(eventName, e => {
-            const { cellSelection } = this.getTableBetter();
-            if (cellSelection?.selectedTds?.length > 1) {
-                this.cellSelectionAttach(input, format, e, cellSelection);
-            } else {
-                this.toolbarAttach(input, format, e);
-            }
-        });
-        this.controls.push([format, input]);
-    }
-
-    private cellSelectionAttach(
-        input: HTMLElement,
-        format: string,
-        e: Event | MouseEvent,
-        cellSelection: CellSelection
-    ) {
-        if (input.tagName === "SELECT") {
-            // @ts-ignore
-            if (input.selectedIndex < 0) return;
-            // @ts-ignore
-            const selected = input.options[input.selectedIndex];
-            const val = typeof selected?.value === "string" ? selected?.value : true;
-            const value = cellSelection.getCorrectValue(format, val);
-            cellSelection.setSelectedTdsFormat(format, value);
-        } else {
-            // @ts-ignore
-            const val = input?.value || true;
-            const value = cellSelection.getCorrectValue(format, val);
-            cellSelection.setSelectedTdsFormat(format, value);
-            e.preventDefault();
-        }
-    }
-
-    getTableBetter() {
-        return this.quill.getModule("table-better") as QuillTableBetter;
-    }
-
-    setTableFormat(range: Range, selectedTds: Element[], value: string, name: string, lines: TableCellChildren[]) {
-        let blot = null;
-        const { cellSelection, tableMenus } = this.getTableBetter();
-        const _isReplace = isReplace(range, selectedTds, lines);
-        for (const line of lines) {
-            const isReplace = getHeaderReplace(selectedTds, name, line, _isReplace);
-            blot = line.format(name, value, isReplace) as TableCellChildren;
-        }
-        if (selectedTds.length < 2) {
-            if (_isReplace || lines.length === 1) {
-                const cell = getCorrectCellBlot(blot);
-                Promise.resolve().then(() => {
-                    if (cell && this.quill.root.contains(cell.domNode)) {
-                        cellSelection.setSelected(cell.domNode, false);
-                    } else {
-                        cellSelection.setSelected(selectedTds[0], false);
-                    }
-                });
-            } else {
-                cellSelection.setSelected(selectedTds[0], false);
-            }
-            this.quill.setSelection(range, Quill.sources.SILENT);
-        }
-        tableMenus.updateMenus();
-        return blot;
-    }
-
-    private toolbarAttach(input: HTMLElement, format: string, e: Event | MouseEvent) {
-        let value;
-        if (input.tagName === "SELECT") {
-            // @ts-expect-error
-            if (input.selectedIndex < 0) return;
-            // @ts-expect-error
-            const selected = input.options[input.selectedIndex];
-            if (selected.hasAttribute("selected")) {
-                value = false;
-            } else {
-                value = selected.value || false;
-            }
-        } else {
-            if (input.classList.contains("ql-active")) {
-                value = false;
-            } else {
-                // @ts-expect-error
-                value = input.value || !input.hasAttribute("value");
-            }
-            e.preventDefault();
-        }
-        this.quill.focus();
-        const [range] = this.quill.selection.getRange();
-        if (this.handlers[format] != null) {
-            this.handlers[format].call(this, value);
-        } else if (
-            // @ts-expect-error
-            this.quill.scroll.query(format).prototype instanceof EmbedBlot
-        ) {
-            value = prompt(`Enter ${format}`); // eslint-disable-line no-alert
-            if (!value) return;
-            this.quill.updateContents(
-                new Delta()
-                    .retain(range.index)
-                    .delete(range.length)
-                    .insert({ [format]: value }),
-                Quill.sources.USER
-            );
-        } else {
-            this.quill.format(format, value, Quill.sources.USER);
-        }
-        this.update(range);
-    }
-}
-
-function containers(blot: TableCell, index = 0, length = Number.MAX_VALUE) {
-    const getContainers = (blot: TableCell | TableCellAllowedChildren, blotIndex: number, blotLength: number) => {
-        // @ts-ignore
-        let containers: Container[] = [];
-        let lengthLeft = blotLength;
-        blot.children.forEachAt(
-            blotIndex,
-            blotLength,
-            // @ts-ignore
-            (child, childIndex, childLength) => {
-                if (child instanceof Container) {
-                    containers.push(child);
-                    containers = containers.concat(getContainers(child, childIndex, lengthLeft));
-                }
-                lengthLeft -= childLength;
-            }
-        );
-        return containers;
-    };
-    return getContainers(blot, index, length);
-}
-
-function getHeaderReplace(selectedTds: Element[], name: string, line: TableCellChildren, _isReplace: boolean) {
-    if (selectedTds.length === 1 && name === "list" && line.statics.blotName === TableHeader.blotName) {
-        return true;
-    }
-    return _isReplace;
-}
-
-function getLength(blots: TableCellChildren[]): number {
-    return blots.reduce((sum, blot) => {
-        return (sum += blot.length());
-    }, 0);
-}
-
-function isReplace(range: Range, selectedTds: Element[], lines: TableCellChildren[]) {
-    if (selectedTds.length === 1) {
-        const cellBlot = Quill.find(selectedTds[0]) as TableCell;
-        const _containers = containers(cellBlot, range.index, range.length);
-        const length = getLength(_containers);
-        const _length = getLength(lines);
-        return length === _length;
-    }
-    return !!(selectedTds.length > 1);
-}
-
-function tablehandler(value: string, selectedTds: Element[], name: string, lines?: TableCellChildren[]) {
-    const range = this.quill.getSelection();
-    if (!lines) {
-        if (!range.length && selectedTds.length === 1) {
-            const [line] = this.quill.getLine(range.index);
-            lines = [line];
-        } else {
-            lines = this.quill.getLines(range);
-        }
-    }
-    return this.setTableFormat(range, selectedTds, value, name, lines);
-}
-
-TableToolbar.DEFAULTS = merge({}, Toolbar.DEFAULTS, {
-    handlers: {
-        header(value: string, lines?: TableCellChildren[]) {
-            const { cellSelection } = this.getTableBetter();
-            const selectedTds = cellSelection?.selectedTds;
-            if (selectedTds?.length) {
-                return tablehandler.call(this, value, selectedTds, "header", lines);
-            }
-            this.quill.format("header", value, Quill.sources.USER);
-        },
-        list(value: string, lines?: TableCellChildren[]) {
-            const { cellSelection } = this.getTableBetter();
-            const selectedTds = cellSelection?.selectedTds;
-            if (selectedTds?.length) {
-                if (selectedTds.length === 1) {
-                    const range = this.quill.getSelection(true);
-                    const formats = this.quill.getFormat(range);
-                    value = cellSelection.getListCorrectValue("list", value, formats);
-                }
-                return tablehandler.call(this, value, selectedTds, "list", lines);
-            }
-
-            const range = this.quill.getSelection(true);
-            const formats = this.quill.getFormat(range);
-            if (value === "check") {
-                if (formats.list === "checked" || formats.list === "unchecked") {
-                    this.quill.format("list", false, Quill.sources.USER);
-                } else {
-                    this.quill.format("list", "unchecked", Quill.sources.USER);
-                }
-            } else {
-                this.quill.format("list", value, Quill.sources.USER);
-            }
-        },
-        "table-better"() {}
-    }
-});
-
-export default TableToolbar;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/quill-table-better.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/quill-table-better.ts
deleted file mode 100644
index d84d747c6d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/quill-table-better.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-// @ts-nocheck
-import Quill from "quill";
-import Delta from "quill-delta";
-import Module from "quill/core/module";
-import type { EmitterSource, Range } from "quill";
-import type { BindingObject, Context, Props } from "./types";
-import {
-    cellId,
-    TableCellBlock,
-    TableCell,
-    TableRow,
-    TableBody,
-    TableTemporary,
-    TableContainer,
-    tableId,
-    TableCol,
-    TableColgroup
-} from "./formats/table";
-import TableHeader from "./formats/header";
-import { ListContainer } from "./formats/list";
-import { matchTable, matchTableCell, matchTableCol, matchTableTemporary } from "./utils/clipboard-matchers";
-import Language from "./language";
-import CellSelection from "./ui/cell-selection";
-import OperateLine from "./ui/operate-line";
-import TableMenus from "./ui/table-menus";
-import { CELL_DEFAULT_WIDTH } from "./config";
-import ToolbarTable, { TableSelect } from "./ui/toolbar-table";
-import { getCellId, getCorrectCellBlot } from "./utils";
-import TableToolbar from "./modules/toolbar";
-import TableClipboard from "./modules/clipboard";
-
-interface Options {
-    language?:
-        | string
-        | {
-              name: string;
-              content: Props;
-          };
-    menus?: string[];
-    toolbarButtons?: {
-        whiteList?: string[];
-        singleWhiteList?: string[];
-    };
-    toolbarTable?: boolean;
-}
-
-type Line = TableCellBlock | TableHeader | ListContainer;
-
-class Table extends Module {
-    language: Language;
-    cellSelection: CellSelection;
-    operateLine: OperateLine;
-    tableMenus: TableMenus;
-    tableSelect: TableSelect;
-    options: Options;
-
-    static keyboardBindings: { [propName: string]: BindingObject };
-
-    static register() {
-        Quill.register(TableCellBlock, true);
-        Quill.register(TableCell, true);
-        Quill.register(TableRow, true);
-        Quill.register(TableBody, true);
-        Quill.register(TableTemporary, true);
-        Quill.register(TableContainer, true);
-        Quill.register(TableCol, true);
-        Quill.register(TableColgroup, true);
-        Quill.register(
-            {
-                "modules/toolbar": TableToolbar,
-                "modules/clipboard": TableClipboard
-            },
-            true
-        );
-    }
-
-    constructor(quill: Quill, options: Options) {
-        super(quill, options);
-        quill.clipboard.addMatcher("td, th", matchTableCell);
-        quill.clipboard.addMatcher("tr", matchTable);
-        quill.clipboard.addMatcher("col", matchTableCol);
-        quill.clipboard.addMatcher("table", matchTableTemporary);
-        this.language = new Language(options?.language);
-        this.cellSelection = new CellSelection(quill, this);
-        this.operateLine = new OperateLine(quill, this);
-        this.tableMenus = new TableMenus(quill, this);
-        this.tableSelect = new TableSelect();
-        if (!this.quill.options.readOnly) {
-            quill.root.addEventListener("keyup", this.handleKeyup.bind(this));
-            quill.root.addEventListener("mousedown", this.handleMousedown.bind(this));
-            quill.root.addEventListener("scroll", this.handleScroll.bind(this));
-            this.registerToolbarTable(options?.toolbarTable);
-        }
-    }
-
-    clearHistorySelected() {
-        const [table] = this.getTable();
-        if (!table) return;
-        const selectedTds: Element[] = Array.from(
-            table.domNode.querySelectorAll("td.ql-cell-focused, td.ql-cell-selected")
-        );
-        for (const td of selectedTds) {
-            td.classList && td.classList.remove("ql-cell-focused", "ql-cell-selected");
-        }
-    }
-
-    deleteTable() {
-        const [table] = this.getTable();
-        if (table == null) return;
-        const offset = table.offset();
-        table.remove();
-        this.hideTools();
-        this.quill.update(Quill.sources.USER);
-        this.quill.setSelection(offset, Quill.sources.SILENT);
-    }
-
-    deleteTableTemporary(source: EmitterSource = Quill.sources.API) {
-        const temporaries = this.quill.scroll.descendants(TableTemporary);
-        for (const temporary of temporaries) {
-            temporary.remove();
-        }
-        this.hideTools();
-        this.quill.update(source);
-    }
-
-    getTable(
-        range = this.quill.getSelection()
-    ): [null, null, null, -1] | [TableContainer, TableRow, TableCell, number] {
-        if (range == null) return [null, null, null, -1];
-        const [block, offset] = this.quill.getLine(range.index);
-        if (block == null || block.statics.blotName !== TableCellBlock.blotName) {
-            return [null, null, null, -1];
-        }
-        const cell = block.parent as TableCell;
-        const row = cell.parent as TableRow;
-        const table = row.parent.parent as TableContainer;
-        return [table, row, cell, offset];
-    }
-
-    handleKeyup(e: KeyboardEvent) {
-        this.cellSelection.handleKeyup(e);
-        if (e.ctrlKey && (e.key === "z" || e.key === "y")) {
-            this.hideTools();
-            this.clearHistorySelected();
-        }
-        this.updateMenus(e);
-    }
-
-    handleMousedown(e: MouseEvent) {
-        this.tableSelect?.hide(this.tableSelect.root);
-        const table = (e.target as Element).closest("table.ql-table-better");
-        if (!table) return this.hideTools();
-        this.cellSelection.handleMousedown(e);
-        this.cellSelection.setDisabled(true);
-    }
-
-    handleScroll() {
-        this.hideTools();
-        this.tableMenus?.updateScroll(true);
-    }
-
-    hideTools() {
-        this.cellSelection?.clearSelected();
-        this.cellSelection?.setDisabled(false);
-        this.operateLine?.hideDragBlock();
-        this.operateLine?.hideDragTable();
-        this.operateLine?.hideLine();
-        this.tableMenus?.hideMenus();
-        this.tableMenus?.destroyTablePropertiesForm();
-    }
-
-    insertTable(rows: number, columns: number) {
-        const range = this.quill.getSelection(true);
-        if (range == null) return;
-        if (this.isTable(range)) return;
-        const style = `width: ${CELL_DEFAULT_WIDTH * columns}px;`;
-        const formats = this.quill.getFormat(range.index - 1);
-        const [, offset] = this.quill.getLine(range.index);
-        const isExtra = !!formats[TableCellBlock.blotName] || offset !== 0;
-        const _offset = isExtra ? 2 : 1;
-        const extraDelta = isExtra ? new Delta().insert("\n") : new Delta();
-        const base = new Delta()
-            .retain(range.index)
-            .delete(range.length)
-            .concat(extraDelta)
-            .insert("\n", { [TableTemporary.blotName]: { style } });
-        const delta = new Array(rows).fill(0).reduce(memo => {
-            const id = tableId();
-            return new Array(columns).fill("\n").reduce((memo, text) => {
-                return memo.insert(text, {
-                    [TableCellBlock.blotName]: cellId(),
-                    [TableCell.blotName]: { "data-row": id, width: `${CELL_DEFAULT_WIDTH}` }
-                });
-            }, memo);
-        }, base);
-        this.quill.updateContents(delta, Quill.sources.USER);
-        this.quill.setSelection(range.index + _offset, Quill.sources.SILENT);
-        this.showTools();
-        this.tableMenus.showGrid(true);
-    }
-
-    // Inserting tables within tables is currently not supported
-    private isTable(range: Range) {
-        const formats = this.quill.getFormat(range.index);
-        return !!formats[TableCellBlock.blotName];
-    }
-
-    private registerToolbarTable(toolbarTable: boolean) {
-        if (!toolbarTable) return;
-        Quill.register({ "formats/table-better": ToolbarTable }, true);
-        const toolbar = this.quill.getModule("toolbar") as TableToolbar;
-        const button = toolbar.container.querySelector("button.ql-table-better");
-        if (!button || !this.tableSelect.root) return;
-        button.appendChild(this.tableSelect.root);
-        button.addEventListener("click", (e: MouseEvent) => {
-            this.tableSelect.handleClick(e, this.insertTable.bind(this));
-        });
-        this.quill.root.addEventListener("click", (e: MouseEvent) => {
-            const visible = e.composedPath().includes(button);
-            if (visible) return;
-            if (!this.tableSelect.root.classList.contains("ql-hidden")) {
-                this.tableSelect.hide(this.tableSelect.root);
-            }
-        });
-    }
-
-    showTools(force?: boolean) {
-        const [table, , cell] = this.getTable();
-        if (!table || !cell) return;
-        this.cellSelection.setDisabled(true);
-        this.cellSelection.setSelected(cell.domNode, force);
-        this.tableMenus.showMenus();
-        this.tableMenus.updateMenus(table.domNode);
-        this.tableMenus.updateTable(table.domNode);
-    }
-
-    private updateMenus(e: KeyboardEvent) {
-        if (!this.cellSelection.selectedTds.length) return;
-        if (e.key === "Enter" || (e.ctrlKey && e.key === "v")) {
-            this.tableMenus.updateMenus();
-        }
-    }
-}
-
-const keyboardBindings = {
-    "table-cell down": makeTableArrowHandler(false),
-    "table-cell up": makeTableArrowHandler(true),
-    "table-cell-block backspace": makeCellBlockHandler("Backspace"),
-    "table-cell-block delete": makeCellBlockHandler("Delete"),
-    "table-header backspace": makeTableHeaderHandler("Backspace"),
-    "table-header delete": makeTableHeaderHandler("Delete"),
-    "table-header enter": {
-        key: "Enter",
-        collapsed: true,
-        format: ["table-header"],
-        suffix: /^$/,
-        handler(range: Range, context: Context) {
-            const [line, offset] = this.quill.getLine(range.index);
-            const delta = new Delta()
-                .retain(range.index)
-                .insert("\n", context.format)
-                .retain(line.length() - offset - 1)
-                .retain(1, { header: null });
-            this.quill.updateContents(delta, Quill.sources.USER);
-            this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-            this.quill.scrollSelectionIntoView();
-        }
-    },
-    "table-list backspace": makeTableListHandler("Backspace"),
-    "table-list delete": makeTableListHandler("Delete"),
-    "table-list empty enter": {
-        key: "Enter",
-        collapsed: true,
-        format: ["table-list"],
-        empty: true,
-        handler(_range: Range, context: Context) {
-            const { line } = context;
-            const { cellId } = line.parent.formats()[line.parent.statics.blotName];
-            const blot = line.replaceWith(TableCellBlock.blotName, cellId) as TableCellBlock;
-            const tableModule = this.quill.getModule("table-better");
-            const cell = getCorrectCellBlot(blot);
-            cell && tableModule.cellSelection.setSelected(cell.domNode, false);
-        }
-    }
-};
-
-function makeCellBlockHandler(key: string) {
-    return {
-        key,
-        format: ["table-cell-block"],
-        collapsed: true,
-        handler(range: Range, context: Context) {
-            const [line] = this.quill.getLine(range.index);
-            const { offset, suffix } = context;
-            if (offset === 0 && !line.prev) return false;
-            const blotName = line.prev?.statics.blotName;
-            if (
-                offset === 0 &&
-                (blotName === ListContainer.blotName ||
-                    blotName === TableCellBlock.blotName ||
-                    blotName === TableHeader.blotName)
-            ) {
-                return removeLine.call(this, line, range);
-            }
-            // Delete isn't from the end
-            if (offset !== 0 && !suffix && key === "Delete") {
-                return false;
-            }
-            return true;
-        }
-    };
-}
-
-// Prevent table default up and down keyboard events.
-// Implemented by the makeTableArrowVerticalHandler function.
-function makeTableArrowHandler(up: boolean) {
-    return {
-        key: up ? "ArrowUp" : "ArrowDown",
-        collapsed: true,
-        format: ["table-cell"],
-        handler() {
-            return false;
-        }
-    };
-}
-
-function makeTableHeaderHandler(key: string) {
-    return {
-        key,
-        format: ["table-header"],
-        collapsed: true,
-        empty: true,
-        handler(range: Range, _context: Context) {
-            const [line] = this.quill.getLine(range.index);
-            if (line.prev) {
-                return removeLine.call(this, line, range);
-            } else {
-                const cellId = getCellId(line.formats()[line.statics.blotName]);
-                line.replaceWith(TableCellBlock.blotName, cellId);
-            }
-        }
-    };
-}
-
-function makeTableListHandler(key: string) {
-    return {
-        key,
-        format: ["table-list"],
-        collapsed: true,
-        empty: true,
-        handler(range: Range, _context: Context) {
-            const [line] = this.quill.getLine(range.index);
-            const cellId = getCellId(line.parent.formats()[line.parent.statics.blotName]);
-            line.replaceWith(TableCellBlock.blotName, cellId);
-        }
-    };
-}
-
-function removeLine(line: Line, range: Range) {
-    const tableModule = this.quill.getModule("table-better");
-    line.remove();
-    tableModule?.tableMenus.updateMenus();
-    this.quill.setSelection(range.index - 1, Quill.sources.SILENT);
-    return false;
-}
-
-Table.keyboardBindings = keyboardBindings;
-
-export default Table;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/types.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/types.ts
deleted file mode 100644
index 715219c1b6..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/types.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import Quill from "quill";
-import TableHeader from "./formats/header";
-import TableList, { ListContainer } from "./formats/list";
-import { TableBody, TableCell, TableCellBlock, TableColgroup, TableContainer, TableRow } from "./formats/table";
-import QuillTableBetter from "./quill-table-better";
-import CellSelection from "./ui/cell-selection";
-import TableMenus from "./ui/table-menus";
-
-export interface CorrectBound {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-    width?: number;
-    height?: number;
-}
-
-export interface Props {
-    [propName: string]: string;
-}
-
-export interface Range {
-    index: number;
-    length: number;
-}
-
-export type InsertTableHandler = (rows: number, columns: number) => void;
-
-export type TableCellAllowedChildren = TableCellBlock | TableHeader | ListContainer;
-export type TableCellChildren = TableCellAllowedChildren | TableList;
-export type TableCellMap = Map<string, HTMLElement[]>;
-
-export type UseLanguageHandler = (name: string) => string;
-
-interface BindingObject extends Partial<Omit<Context, "prefix" | "suffix" | "format">> {
-    key: number | string | string[];
-    shortKey?: boolean | null;
-    shiftKey?: boolean | null;
-    altKey?: boolean | null;
-    metaKey?: boolean | null;
-    ctrlKey?: boolean | null;
-    prefix?: RegExp;
-    suffix?: RegExp;
-    format?: Record<string, unknown> | string[];
-    handler?: (
-        this: { quill: Quill },
-        range: Range,
-        // eslint-disable-next-line no-use-before-define
-        curContext: Context,
-        // eslint-disable-next-line no-use-before-define
-        binding: NormalizedBinding
-    ) => boolean | void;
-}
-
-interface Context {
-    collapsed: boolean;
-    empty: boolean;
-    offset: number;
-    prefix: string;
-    suffix: string;
-    format: Record<string, unknown>;
-    event: KeyboardEvent;
-    line: TableCellChildren;
-}
-
-interface NormalizedBinding extends Omit<BindingObject, "key" | "shortKey"> {
-    key: string | number;
-}
-
-export type {
-    BindingObject,
-    CellSelection,
-    Context,
-    ListContainer,
-    QuillTableBetter,
-    TableBody,
-    TableCell,
-    TableCellBlock,
-    TableColgroup,
-    TableContainer,
-    TableHeader,
-    TableList,
-    TableMenus,
-    TableRow
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/cell-selection.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/cell-selection.ts
deleted file mode 100644
index a2c9399a7e..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/cell-selection.ts
+++ /dev/null
@@ -1,718 +0,0 @@
-// @ts-nocheck
-import { BlockBlot, ContainerBlot, EmbedBlot } from "parchment";
-import Quill from "quill";
-import type { AttributeMap, Op } from "quill-delta";
-import Delta from "quill-delta";
-import { DEVIATION } from "../config";
-import { TableCell, TableCellBlock } from "../formats/table";
-import type {
-    Props,
-    QuillTableBetter,
-    TableBody,
-    TableCellAllowedChildren,
-    TableCellChildren,
-    TableContainer,
-    TableRow
-} from "../types";
-import { getComputeBounds, getComputeSelectedTds, getCopyTd, getCorrectBounds, getCorrectCellBlot } from "../utils";
-import { applyFormat } from "../utils/clipboard-matchers";
-
-const WHITE_LIST = [
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "size",
-    "color",
-    "background",
-    "font",
-    "list",
-    "header",
-    "align",
-    "link",
-    "image"
-];
-
-// Only supports formatting for a single cell.
-const SINGLE_WHITE_LIST = ["link", "image"];
-
-function isLine(blot: unknown): blot is BlockBlot | EmbedBlot {
-    return blot instanceof BlockBlot || blot instanceof EmbedBlot;
-}
-
-class CellSelection {
-    quill: Quill;
-    selectedTds: Element[];
-    startTd: Element;
-    endTd: Element;
-    disabledList: Array<HTMLElement | Element>;
-    singleList: Array<HTMLElement | Element>;
-    tableBetter: QuillTableBetter;
-    constructor(quill: Quill, tableBetter: QuillTableBetter) {
-        this.quill = quill;
-        this.selectedTds = [];
-        this.startTd = null;
-        this.endTd = null;
-        this.disabledList = [];
-        this.singleList = [];
-        this.tableBetter = tableBetter;
-        if (!this.quill.options.readOnly) {
-            this.quill.root.addEventListener("click", this.handleClick.bind(this));
-        }
-        this.initDocumentListener();
-        this.initWhiteList();
-    }
-
-    attach(input: HTMLElement) {
-        let format = Array.from(input.classList).find(className => {
-            return className.indexOf("ql-") === 0;
-        });
-        if (!format) return;
-        const [whiteList, singleWhiteList] = this.getButtonsWhiteList();
-        const correctDisabled = this.getCorrectDisabled(input, format);
-        format = format.slice("ql-".length);
-        if (!whiteList.includes(format)) {
-            this.disabledList.push(...correctDisabled);
-        }
-        if (singleWhiteList.includes(format)) {
-            this.singleList.push(...correctDisabled);
-        }
-    }
-
-    clearSelected() {
-        for (const td of this.selectedTds) {
-            td.classList && td.classList.remove("ql-cell-focused", "ql-cell-selected");
-        }
-        this.selectedTds = [];
-        this.startTd = null;
-        this.endTd = null;
-    }
-
-    exitTableFocus(block: TableCellChildren, up: boolean) {
-        const cell = getCorrectCellBlot(block);
-        const table = cell.table();
-        const offset = up ? -1 : table.length();
-        const index = table.offset(this.quill.scroll) + offset;
-        this.tableBetter.hideTools();
-        this.quill.setSelection(index, 0, Quill.sources.USER);
-    }
-
-    getButtonsWhiteList(): [string[], string[]] {
-        const { options = {} } = this.tableBetter;
-        const { toolbarButtons = {} } = options;
-        const { whiteList = WHITE_LIST, singleWhiteList = SINGLE_WHITE_LIST } = toolbarButtons;
-        return [whiteList, singleWhiteList];
-    }
-
-    getCopyColumns(container: Element) {
-        const tr = container.querySelector("tr");
-        const children = Array.from(tr.querySelectorAll("td"));
-        return children.reduce((sum: number, td: HTMLTableCellElement) => {
-            const colspan = ~~td.getAttribute("colspan") || 1;
-            return (sum += colspan);
-        }, 0);
-    }
-
-    getCopyData() {
-        const tableBlot = (Quill.find(this.selectedTds[0]) as TableCell).table();
-        const tableCells = tableBlot.descendants(TableCell);
-        if (tableCells.length === this.selectedTds.length) {
-            const html = tableBlot.getCopyTable();
-            const text = this.getText(html);
-            return { html, text };
-        }
-        let html = "";
-        const map: { [propName: string]: Element[] } = {};
-        for (const td of this.selectedTds) {
-            const rowId = td.getAttribute("data-row");
-            if (!map[rowId]) {
-                map[rowId] = [];
-            }
-            map[rowId].push(td);
-        }
-        for (const tds of Object.values(map)) {
-            let res = "";
-            for (const td of tds) {
-                res += getCopyTd(td.outerHTML);
-            }
-            res = `<tr>${res}</tr>`;
-            html += res;
-        }
-        html = `<table><tbody>${html}</tbody></table>`;
-        const text = this.getText(html);
-        return { html, text };
-    }
-
-    getCorrectDisabled(input: HTMLElement, format: string) {
-        if (input.tagName !== "SELECT") return [input];
-        const parentElement = input.closest("span.ql-formats");
-        if (!parentElement) return [input];
-        const child = parentElement.querySelectorAll(`span.${format}.ql-picker`);
-        return [...child, input];
-    }
-
-    getCorrectRow(td: Element, key: string) {
-        const offset = key === "next" ? 0 : -1;
-        let rowspan = (~~td.getAttribute("rowspan") || 1) + offset || 1;
-        const cell = Quill.find(td) as TableCell;
-        let row = cell.parent;
-        while (row && rowspan) {
-            // @ts-expect-error
-            row = row[key];
-            rowspan--;
-        }
-        return row?.domNode;
-    }
-
-    getCorrectValue(format: string, value: boolean | string) {
-        for (const td of this.selectedTds) {
-            const blot = Quill.find(td) as TableCell;
-            const html = blot.html() || td.outerHTML;
-            const delta = this.quill.clipboard.convert({
-                html,
-                text: "\n"
-            });
-            for (const op of delta.ops) {
-                if (this.isContinue(op)) continue;
-                value = this.getListCorrectValue(format, value, op?.attributes);
-                const val = (op?.attributes && op?.attributes[format]) || false;
-                if (value != val) return value;
-            }
-        }
-        return !value;
-    }
-
-    getListCorrectValue(format: string, value: boolean | string, formats: AttributeMap = {}) {
-        if (format !== "list") return value;
-        if (value === "check") {
-            if (formats[format] === "checked" || formats[format] === "unchecked") {
-                return false;
-            } else {
-                return "unchecked";
-            }
-        }
-        return value;
-    }
-
-    getPasteComputeBounds(startTd: Element, rightTd: Element, row: TableRow) {
-        const startTdBounds = startTd.getBoundingClientRect();
-        const rightTdBounds = rightTd.getBoundingClientRect();
-        const rowBounds = row.domNode.getBoundingClientRect();
-        const containerBounds = this.quill.container.getBoundingClientRect();
-        const scrollLeft = this.quill.container.scrollLeft;
-        const scrollTop = this.quill.container.scrollTop;
-        const left = startTdBounds.left - containerBounds.left - scrollLeft;
-        const right = rightTdBounds.right - containerBounds.left - scrollLeft;
-        const top = startTdBounds.top - containerBounds.top - scrollTop;
-        const bottom = rowBounds.bottom - containerBounds.top - scrollTop;
-        return {
-            left,
-            right,
-            top,
-            bottom
-        };
-    }
-
-    getPasteInfo(td: Element, copyColumns: number, rowspan: number) {
-        let clospan = 0;
-        let cloTd = null;
-        let rowTd = null;
-        let row: Element = td.parentElement;
-        while (td) {
-            const colspan = ~~td.getAttribute("colspan") || 1;
-            clospan += colspan;
-            if (clospan >= copyColumns) {
-                clospan = copyColumns;
-                cloTd = td;
-                break;
-            }
-            td = td.nextElementSibling;
-        }
-        while (--rowspan) {
-            if (!row.nextElementSibling) {
-                rowTd = row.firstElementChild;
-                break;
-            }
-            row = row.nextElementSibling;
-        }
-        return [
-            { clospan: Math.abs(copyColumns - clospan), cloTd },
-            { rowspan, rowTd }
-        ];
-    }
-
-    getPasteLastRow(row: TableRow, len: number) {
-        while (--len && row) {
-            row = row.next;
-        }
-        return row;
-    }
-
-    getPasteTds(computeSelectedTds: Element[]) {
-        const map: { [propName: string]: Element[] } = {};
-        for (const td of computeSelectedTds) {
-            const id = td.getAttribute("data-row");
-            if (!map[id]) map[id] = [];
-            map[id].push(td);
-        }
-        return Object.values(map);
-    }
-
-    getText(html: string): string {
-        const delta: Delta = this.quill.clipboard.convert({ html });
-        return delta
-            .filter(op => typeof op.insert === "string")
-            .map(op => op.insert)
-            .join("");
-    }
-
-    handleClick(e: MouseEvent) {
-        if (e.detail < 3 || !this.selectedTds.length) return;
-        // Multiple clicks result in cell being selected
-        // Cell are deleted when deleting
-        const { index, length } = this.quill.getSelection(true);
-        this.quill.setSelection(index, length - 1, Quill.sources.SILENT);
-        this.quill.scrollSelectionIntoView();
-    }
-
-    handleDeleteKeyup(e: KeyboardEvent) {
-        if (this.selectedTds?.length < 2) return;
-        if (e.key === "Backspace" || e.key === "Delete") {
-            if (e.ctrlKey) {
-                this.tableBetter.tableMenus.deleteColumn(true);
-                this.tableBetter.tableMenus.deleteRow(true);
-            } else {
-                this.removeSelectedTdsContent();
-            }
-        }
-    }
-
-    handleKeyup(e: KeyboardEvent) {
-        switch (e.key) {
-            case "ArrowLeft":
-            case "ArrowRight":
-                this.makeTableArrowLevelHandler(e.key);
-                break;
-            case "ArrowUp":
-            case "ArrowDown":
-                this.makeTableArrowVerticalHandler(e.key);
-                break;
-            default:
-                break;
-        }
-    }
-
-    handleMousedown(e: MouseEvent) {
-        this.clearSelected();
-        const table = (e.target as Element).closest("table.ql-table-better");
-        if (!table) return;
-        this.tableBetter.tableMenus.destroyTablePropertiesForm();
-        const startTd = (e.target as Element).closest("td");
-        this.startTd = startTd;
-        this.endTd = startTd;
-        this.selectedTds = [startTd];
-        startTd.classList.add("ql-cell-focused");
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const endTd = (e.target as Element).closest("td");
-            if (!endTd) return;
-            const isEqualNode = startTd.isEqualNode(endTd);
-            if (isEqualNode) return;
-            this.clearSelected();
-            this.startTd = startTd;
-            this.endTd = endTd;
-            const startCorrectBounds = getCorrectBounds(startTd, this.quill.container);
-            const endCorrectBounds = getCorrectBounds(endTd, this.quill.container);
-            const computeBounds = getComputeBounds(startCorrectBounds, endCorrectBounds);
-            this.selectedTds = getComputeSelectedTds(computeBounds, table, this.quill.container);
-            for (const td of this.selectedTds) {
-                td.classList && td.classList.add("ql-cell-selected");
-            }
-            if (!isEqualNode) this.quill.blur();
-        };
-
-        const handleMouseup = (e: MouseEvent) => {
-            this.setSingleDisabled();
-            this.setCorrectPositionTds(this.startTd, this.endTd, this.selectedTds);
-            this.quill.root.removeEventListener("mousemove", handleMouseMove);
-            this.quill.root.removeEventListener("mouseup", handleMouseup);
-        };
-
-        this.quill.root.addEventListener("mousemove", handleMouseMove);
-        this.quill.root.addEventListener("mouseup", handleMouseup);
-    }
-
-    initDocumentListener() {
-        this.quill.root.addEventListener("copy", (e: ClipboardEvent) => this.onCaptureCopy(e, false));
-        this.quill.root.addEventListener("cut", (e: ClipboardEvent) => this.onCaptureCopy(e, true));
-        this.quill.root.addEventListener("keyup", this.handleDeleteKeyup.bind(this));
-        this.quill.root.addEventListener("paste", this.onCapturePaste.bind(this));
-    }
-
-    initWhiteList() {
-        const toolbar = this.quill.getModule("toolbar");
-        // @ts-expect-error
-        Array.from(toolbar.container.querySelectorAll("button, select")).forEach(input => {
-            // @ts-ignore
-            this.attach(input);
-        });
-    }
-
-    insertColumnCell(table: TableContainer, offset: number) {
-        const tbody = table.tbody() as TableBody;
-        if (!tbody) return;
-        tbody.children.forEach((row: TableRow) => {
-            const id = row.children.tail.domNode.getAttribute("data-row");
-            for (let i = 0; i < offset; i++) {
-                table.insertColumnCell(row, id, null);
-            }
-        });
-    }
-
-    insertRow(table: TableContainer, offset: number, td: Element) {
-        const index = (Quill.find(td) as TableCell).rowOffset();
-        while (offset--) {
-            table.insertRow(index + 1, 1);
-        }
-    }
-
-    insertWith(insert: string | Record<string, unknown>) {
-        if (typeof insert !== "string") return false;
-        return insert.startsWith("\n") && insert.endsWith("\n");
-    }
-
-    isContinue(op: Op) {
-        if (
-            this.insertWith(op.insert) &&
-            (!op.attributes || op.attributes["table-list"] || op.attributes["table-header"])
-        ) {
-            return true;
-        }
-        return false;
-    }
-
-    lines(blot: TableCell) {
-        const getLines = (blot: TableCell | TableCellAllowedChildren) => {
-            let lines: (BlockBlot | EmbedBlot)[] = [];
-            blot.children.forEach((child: TableCellAllowedChildren) => {
-                if (child instanceof ContainerBlot) {
-                    lines = lines.concat(getLines(child));
-                } else if (isLine(child)) {
-                    lines.push(child);
-                }
-            });
-            return lines;
-        };
-        return getLines(blot);
-    }
-
-    makeTableArrowLevelHandler(key: string) {
-        const td = key === "ArrowLeft" ? this.startTd : this.endTd;
-        const range = this.quill.getSelection();
-        if (!range) return;
-        const [block] = this.quill.getLine(range.index);
-        // @ts-expect-error
-        const cell = getCorrectCellBlot(block);
-        if (!cell) return this.tableBetter.hideTools();
-        if (cell && (!td || !td.isEqualNode(cell.domNode))) {
-            this.setSelected(cell.domNode, false);
-            this.tableBetter.showTools(false);
-        }
-    }
-
-    makeTableArrowVerticalHandler(key: string) {
-        const up = key === "ArrowUp" ? true : false;
-        const range = this.quill.getSelection();
-        if (!range) return;
-        const [block, offset] = this.quill.getLine(range.index);
-        const _key = up ? "prev" : "next";
-        if (block[_key] && this.selectedTds.length) {
-            const index = block[_key].offset(this.quill.scroll) + Math.min(offset, block[_key].length() - 1);
-            this.quill.setSelection(index, 0, Quill.sources.USER);
-        } else {
-            if (!this.selectedTds.length) {
-                // @ts-expect-error
-                const cellBlot = getCorrectCellBlot(block);
-                if (!cellBlot) return;
-                this.tableArrowSelection(up, cellBlot);
-                this.tableBetter.showTools(false);
-                return;
-            }
-            const td = up ? this.startTd : this.endTd;
-            const cell = Quill.find(td) as TableCell;
-            const targetRow = cell.parent[_key];
-            const { left: _left, right: _right } = td.getBoundingClientRect();
-            if (targetRow) {
-                let cellBlot = null;
-                let row = targetRow;
-                while (row && !cellBlot) {
-                    let ref = row.children.head;
-                    while (ref) {
-                        const { left, right } = ref.domNode.getBoundingClientRect();
-                        if (Math.abs(left - _left) <= DEVIATION) {
-                            cellBlot = ref;
-                            break;
-                        } else if (Math.abs(right - _right) <= DEVIATION) {
-                            cellBlot = ref;
-                            break;
-                        }
-                        ref = ref.next;
-                    }
-                    row = row[_key];
-                }
-                if (!cellBlot) {
-                    // @ts-expect-error
-                    this.exitTableFocus(block, up);
-                } else {
-                    this.tableArrowSelection(up, cellBlot);
-                }
-            } else {
-                // @ts-expect-error
-                this.exitTableFocus(block, up);
-            }
-        }
-    }
-
-    onCaptureCopy(e: ClipboardEvent, isCut = false) {
-        if (this.selectedTds?.length < 2) return;
-        if (e.defaultPrevented) return;
-        e.preventDefault();
-        const { html, text } = this.getCopyData();
-        e.clipboardData?.setData("text/plain", text);
-        e.clipboardData?.setData("text/html", html);
-        if (isCut) this.removeSelectedTdsContent();
-    }
-
-    onCapturePaste(e: ClipboardEvent) {
-        if (!this.selectedTds?.length) return;
-        e.preventDefault();
-        const html = e.clipboardData?.getData("text/html");
-        const text = e.clipboardData?.getData("text/plain");
-        const container = this.quill.root.ownerDocument.createElement("div");
-        container.innerHTML = html;
-        const copyRows = Array.from(container.querySelectorAll("tr"));
-        if (!copyRows.length) return;
-        const cell = Quill.find(this.startTd) as TableCell;
-        const row = cell.row();
-        const table = cell.table();
-        this.quill.history.cutoff();
-        const copyColumns = this.getCopyColumns(container);
-        const [cloInfo, rowInfo] = this.getPasteInfo(this.startTd, copyColumns, copyRows.length);
-        const { clospan, cloTd } = cloInfo;
-        const { rowspan, rowTd } = rowInfo;
-        if (clospan) this.insertColumnCell(table, clospan);
-        if (rowspan) this.insertRow(table, rowspan, rowTd);
-        const rightTd = clospan ? row.children.tail.domNode : cloTd;
-        const pasteLastRow = this.getPasteLastRow(row, copyRows.length);
-        const computeBounds = this.getPasteComputeBounds(this.startTd, rightTd, pasteLastRow);
-        const pasteTds = this.getPasteTds(getComputeSelectedTds(computeBounds, table.domNode, this.quill.container));
-        const copyTds = copyRows.reduce((copyTds: HTMLElement[][], row: HTMLTableRowElement) => {
-            copyTds.push(Array.from(row.querySelectorAll("td")));
-            return copyTds;
-        }, []);
-        const selectedTds: HTMLElement[] = [];
-        while (copyTds.length) {
-            const copyTs = copyTds.shift();
-            const pasteTs = pasteTds.shift();
-            let prevPasteTd = null;
-            let cell: TableCell = null;
-            while (copyTs.length) {
-                const copyTd = copyTs.shift();
-                const pasteTd = pasteTs.shift();
-                if (!pasteTd) {
-                    const id = prevPasteTd.getAttribute("data-row");
-                    const ref = Quill.find(prevPasteTd) as TableCell;
-                    cell = table.insertColumnCell(ref.parent, id, ref.next);
-                    cell = this.pasteSelectedTd(cell.domNode, copyTd);
-                    prevPasteTd = cell.domNode;
-                } else {
-                    prevPasteTd = pasteTd;
-                    cell = this.pasteSelectedTd(pasteTd, copyTd);
-                }
-                cell && selectedTds.push(cell.domNode);
-            }
-            while (pasteTs.length) {
-                const pasteTd = pasteTs.shift();
-                pasteTd.remove();
-            }
-        }
-        this.quill.blur();
-        this.setSelectedTds(selectedTds);
-        this.tableBetter.tableMenus.updateMenus();
-        this.quill.scrollSelectionIntoView();
-    }
-
-    pasteSelectedTd(selectedTd: Element, copyTd: Element) {
-        const id = selectedTd.getAttribute("data-row");
-        const copyFormats = TableCell.formats(copyTd);
-        Object.assign(copyFormats, { "data-row": id });
-        const cell = Quill.find(selectedTd) as TableCell;
-        const _cell = cell.replaceWith(cell.statics.blotName, copyFormats) as TableCell;
-        this.quill.setSelection(_cell.offset(this.quill.scroll) + _cell.length() - 1, 0, Quill.sources.USER);
-        const range = this.quill.getSelection(true);
-        const formats = this.quill.getFormat(range.index) as Props;
-        const html = copyTd.innerHTML;
-        const text = this.getText(html);
-        const pastedDelta = this.quill.clipboard.convert({ text, html });
-        const delta = new Delta().retain(range.index).delete(range.length).concat(applyFormat(pastedDelta, formats));
-        this.quill.updateContents(delta, Quill.sources.USER);
-        return _cell;
-    }
-
-    removeCursor() {
-        const range = this.quill.getSelection(true);
-        if (range && range.length === 0) {
-            // The attach function of the toolbar module generated extra cursor
-            // when clicked, which needs to be removed.
-            this.quill.selection.cursor.remove();
-            this.quill.blur();
-        }
-    }
-
-    removeSelectedTdContent(td: Element) {
-        const tdBlot = Quill.find(td) as TableCell;
-        let head = tdBlot.children.head as TableCellBlock;
-        const cellId = head.formats()[TableCellBlock.blotName];
-        const cellBlock = this.quill.scroll.create(TableCellBlock.blotName, cellId);
-        tdBlot.insertBefore(cellBlock, head);
-        while (head) {
-            head.remove();
-            head = head.next;
-        }
-    }
-
-    removeSelectedTdsContent() {
-        if (this.selectedTds.length < 2) return;
-        for (const td of this.selectedTds) {
-            this.removeSelectedTdContent(td);
-        }
-        this.tableBetter.tableMenus.updateMenus();
-    }
-
-    setCorrectPositionTds(startTd: Element, endTd: Element, selectedTds: Element[]) {
-        if (!startTd || !endTd || selectedTds.length < 2) return;
-        const firstTd = selectedTds[0];
-        const lastTd = selectedTds[selectedTds.length - 1];
-        const tds = [...new Set([startTd, endTd, firstTd, lastTd])];
-        tds.sort((prev: Element, next: Element) => {
-            const prevBounds = prev.getBoundingClientRect();
-            const nextBounds = next.getBoundingClientRect();
-            if (
-                (prevBounds.top <= nextBounds.top || prevBounds.bottom <= nextBounds.bottom) &&
-                (prevBounds.left <= nextBounds.left || prevBounds.right <= nextBounds.right)
-            ) {
-                return -1;
-            }
-            return 1;
-        });
-        this.startTd = tds[0];
-        this.endTd = tds[tds.length - 1];
-    }
-
-    setDisabled(disabled: boolean) {
-        for (const input of this.disabledList) {
-            if (disabled) {
-                input.classList.add("ql-table-button-disabled");
-            } else {
-                input.classList.remove("ql-table-button-disabled");
-            }
-        }
-        this.setSingleDisabled();
-    }
-
-    setSelected(target: Element, force: boolean = true) {
-        const cell = Quill.find(target) as TableCell;
-        this.clearSelected();
-        this.startTd = target;
-        this.endTd = target;
-        this.selectedTds = [target];
-        target.classList.add("ql-cell-focused");
-        force && this.quill.setSelection(cell.offset(this.quill.scroll) + cell.length() - 1, 0, Quill.sources.USER);
-    }
-
-    setSelectedTds(selectedTds: Element[]) {
-        this.clearSelected();
-        this.startTd = selectedTds[0];
-        this.endTd = selectedTds[selectedTds.length - 1];
-        this.selectedTds = selectedTds;
-        for (const td of this.selectedTds) {
-            td.classList && td.classList.add("ql-cell-selected");
-        }
-    }
-
-    setSelectedTdsFormat(format: string, value: boolean | string) {
-        const selectedTds = [];
-        const toolbar = this.quill.getModule("toolbar");
-        for (const td of this.selectedTds) {
-            // @ts-expect-error
-            if (toolbar.handlers[format] != null) {
-                const cellBlot = Quill.find(td) as TableCell;
-                const lines = this.lines(cellBlot);
-                // @ts-expect-error
-                const blot = toolbar.handlers[format].call(toolbar, value, lines);
-                blot && selectedTds.push(getCorrectCellBlot(blot).domNode);
-            } else {
-                const selection = window.getSelection();
-                selection.selectAllChildren(td);
-                this.quill.format(format, value, Quill.sources.USER);
-                selection.removeAllRanges();
-            }
-        }
-        this.quill.blur();
-        selectedTds.length && this.setSelectedTds(selectedTds);
-    }
-
-    setSingleDisabled() {
-        for (const input of this.singleList) {
-            if (this.selectedTds.length > 1) {
-                input.classList.add("ql-table-button-disabled");
-            } else {
-                input.classList.remove("ql-table-button-disabled");
-            }
-        }
-    }
-
-    tableArrowSelection(up: boolean, cellBlot: TableCell) {
-        const key = up ? "tail" : "head";
-        const offset = up ? cellBlot.children[key].length() - 1 : 0;
-        this.setSelected(cellBlot.domNode, false);
-        const index = cellBlot.children[key].offset(this.quill.scroll) + offset;
-        this.quill.setSelection(index, 0, Quill.sources.USER);
-    }
-
-    updateSelected(type: string) {
-        switch (type) {
-            case "column":
-                {
-                    const target = this.endTd.nextElementSibling || this.startTd.previousElementSibling;
-                    if (!target) return;
-                    this.setSelected(target);
-                }
-                break;
-            case "row":
-                {
-                    const row = this.getCorrectRow(this.endTd, "next") || this.getCorrectRow(this.startTd, "prev");
-                    if (!row) return;
-                    const startCorrectBounds = getCorrectBounds(this.startTd, this.quill.container);
-                    let child = row.firstElementChild;
-                    while (child) {
-                        const childCorrectBounds = getCorrectBounds(child, this.quill.container);
-                        if (
-                            childCorrectBounds.left + DEVIATION >= startCorrectBounds.left ||
-                            childCorrectBounds.right - DEVIATION >= startCorrectBounds.left
-                        ) {
-                            this.setSelected(child);
-                            return;
-                        }
-                        child = child.nextElementSibling;
-                    }
-                    this.setSelected(row.firstElementChild);
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}
-
-export default CellSelection;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/operate-line.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/operate-line.ts
deleted file mode 100644
index 925334d5d1..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/operate-line.ts
+++ /dev/null
@@ -1,446 +0,0 @@
-// @ts-nocheck
-import Quill from "quill";
-import type { QuillTableBetter, TableCell, TableColgroup } from "../types";
-import { setElementAttribute, setElementProperty, updateTableWidth } from "../utils";
-
-interface Options {
-    tableNode: HTMLElement;
-    cellNode: HTMLElement;
-    mousePosition: {
-        clientX: number;
-        clientY: number;
-    };
-}
-
-const DRAG_BLOCK_HEIGHT = 8;
-const DRAG_BLOCK_WIDTH = 8;
-const LINE_CONTAINER_HEIGHT = 5;
-const LINE_CONTAINER_WIDTH = 5;
-
-class OperateLine {
-    quill: Quill;
-    options: Options | null;
-    drag: boolean;
-    line: HTMLElement | null;
-    dragBlock: HTMLElement | null;
-    dragTable: HTMLElement | null;
-    direction: string | null;
-    tableBetter: QuillTableBetter;
-    constructor(quill: Quill, tableBetter?: QuillTableBetter) {
-        this.quill = quill;
-        this.options = null;
-        this.drag = false;
-        this.line = null;
-        this.dragBlock = null;
-        this.dragTable = null;
-        this.direction = null; // 1.level 2.vertical
-        this.tableBetter = tableBetter;
-        if (!this.quill.options.readOnly) {
-            this.quill.root.addEventListener("mousemove", this.handleMouseMove.bind(this));
-        }
-    }
-
-    createDragBlock() {
-        const dragBlock = this.quill.root.ownerDocument.createElement("div");
-        dragBlock.classList.add("ql-operate-block");
-        const { dragBlockProps } = this.getProperty(this.options);
-        setElementProperty(dragBlock, dragBlockProps);
-        this.dragBlock = dragBlock;
-        this.quill.container.appendChild(dragBlock);
-        this.updateCell(dragBlock);
-    }
-
-    createDragTable(table: Element) {
-        const dragTable = this.quill.root.ownerDocument.createElement("div");
-        const properties = this.getDragTableProperty(table);
-        dragTable.classList.add("ql-operate-drag-table");
-        setElementProperty(dragTable, properties);
-        this.dragTable = dragTable;
-        this.quill.container.appendChild(dragTable);
-    }
-
-    createOperateLine() {
-        const container = this.quill.root.ownerDocument.createElement("div");
-        const line = this.quill.root.ownerDocument.createElement("div");
-        container.classList.add("ql-operate-line-container");
-        const { containerProps, lineProps } = this.getProperty(this.options);
-        setElementProperty(container, containerProps);
-        setElementProperty(line, lineProps);
-        container.appendChild(line);
-        this.quill.container.appendChild(container);
-        this.line = container;
-        this.updateCell(container);
-    }
-
-    getCorrectCol(colgroup: TableColgroup, sum: number) {
-        let child = colgroup.children.head;
-        while (child && --sum) {
-            child = child.next;
-        }
-        return child;
-    }
-
-    getDragTableProperty(table: Element) {
-        const { left, top, width, height } = table.getBoundingClientRect();
-        const containerRect = this.quill.container.getBoundingClientRect();
-        return {
-            left: `${left - containerRect.left}px`,
-            top: `${top - containerRect.top}px`,
-            width: `${width}px`,
-            height: `${height}px`,
-            display: "block"
-        };
-    }
-
-    getLevelColSum(cell: Element) {
-        let previousNode = cell;
-        let sum = 0;
-        while (previousNode) {
-            const colspan = ~~previousNode.getAttribute("colspan") || 1;
-            sum += colspan;
-            // @ts-ignore
-            previousNode = previousNode.previousSibling;
-        }
-        return sum;
-    }
-
-    getMaxColNum(cell: Element) {
-        const cells = cell.parentElement.children;
-        let nums = 0;
-        for (const cell of cells) {
-            const colspan = ~~cell.getAttribute("colspan") || 1;
-            nums += colspan;
-        }
-        return nums;
-    }
-
-    getProperty(options: Options) {
-        const containerRect = this.quill.container.getBoundingClientRect();
-        const { tableNode, cellNode, mousePosition } = options;
-        const { clientX, clientY } = mousePosition;
-        const tableRect = tableNode.getBoundingClientRect();
-        const cellRect = cellNode.getBoundingClientRect();
-        const x = cellRect.left + cellRect.width;
-        const y = cellRect.top + cellRect.height;
-        const dragBlockProps = {
-            width: `${DRAG_BLOCK_WIDTH}px`,
-            height: `${DRAG_BLOCK_HEIGHT}px`,
-            top: `${tableRect.bottom - containerRect.top}px`,
-            left: `${tableRect.right - containerRect.left}px`,
-            display: tableRect.bottom > containerRect.bottom ? "none" : "block"
-        };
-        if (Math.abs(x - clientX) <= 5) {
-            this.direction = "level";
-            return {
-                dragBlockProps,
-                containerProps: {
-                    width: `${LINE_CONTAINER_WIDTH}px`,
-                    height: `${containerRect.height}px`,
-                    top: "0",
-                    left: `${x - containerRect.left - LINE_CONTAINER_WIDTH / 2}px`,
-                    display: "flex",
-                    cursor: "col-resize"
-                },
-                lineProps: {
-                    width: "1px",
-                    height: "100%"
-                }
-            };
-        } else if (Math.abs(y - clientY) <= 5) {
-            this.direction = "vertical";
-            return {
-                dragBlockProps,
-                containerProps: {
-                    width: `${containerRect.width}px`,
-                    height: `${LINE_CONTAINER_HEIGHT}px`,
-                    top: `${y - containerRect.top - LINE_CONTAINER_HEIGHT / 2}px`,
-                    left: "0",
-                    display: "flex",
-                    cursor: "row-resize"
-                },
-                lineProps: {
-                    width: "100%",
-                    height: "1px"
-                }
-            };
-        } else {
-            this.hideLine();
-        }
-        return { dragBlockProps };
-    }
-
-    getVerticalCells(cell: Element, rowspan: number) {
-        let row = cell.parentElement;
-        while (rowspan > 1 && row) {
-            // @ts-ignore
-            row = row.nextSibling;
-            rowspan--;
-        }
-        return row.children;
-    }
-
-    handleMouseMove(e: MouseEvent) {
-        const tableNode = (e.target as Element).closest("table.ql-table-better");
-        if (!tableNode) return;
-        const cellNode = (e.target as Element).closest("td");
-        const mousePosition = {
-            clientX: e.clientX,
-            clientY: e.clientY
-        };
-        if (!tableNode || !cellNode) {
-            if (this.line && !this.drag) {
-                this.hideLine();
-                this.hideDragBlock();
-            }
-            return;
-        }
-        const options = { tableNode, cellNode, mousePosition };
-        if (!this.line) {
-            this.options = options;
-            this.createOperateLine();
-            this.createDragBlock();
-        } else {
-            if (this.drag || !cellNode) return;
-            this.updateProperty(options);
-        }
-    }
-
-    hideDragBlock() {
-        this.dragBlock && setElementProperty(this.dragBlock, { display: "none" });
-    }
-
-    hideDragTable() {
-        this.dragTable && setElementProperty(this.dragTable, { display: "none" });
-    }
-
-    hideLine() {
-        this.line && setElementProperty(this.line, { display: "none" });
-    }
-
-    isLine(node: Element) {
-        return node.classList.contains("ql-operate-line-container");
-    }
-
-    setCellLevelRect(cell: Element, clientX: number) {
-        const { right } = cell.getBoundingClientRect();
-        const change = ~~(clientX - right);
-        const colSum = this.getLevelColSum(cell);
-        const quillCell = Quill.find(cell) as TableCell;
-        const tableBlot = quillCell?.table();
-        const colgroup = tableBlot.colgroup() as TableColgroup;
-        const bounds = tableBlot.domNode.getBoundingClientRect();
-        if (colgroup) {
-            const col = this.getCorrectCol(colgroup, colSum);
-            const nextCol = col.next;
-            const formats = col.formats()[col.statics.blotName];
-            col.domNode.setAttribute("width", `${parseFloat(formats["width"]) + change}`);
-            if (nextCol) {
-                const nextFormats = nextCol.formats()[nextCol.statics.blotName];
-                nextCol.domNode.setAttribute("width", `${parseFloat(nextFormats["width"]) - change}`);
-            }
-        } else {
-            const isLastCell = cell.nextElementSibling == null;
-            const rows = cell.parentElement.parentElement.children;
-            const preNodes: [Element, string][] = [];
-            for (const row of rows) {
-                const cells = row.children;
-                if (isLastCell) {
-                    const cell = cells[cells.length - 1];
-                    const { width } = cell.getBoundingClientRect();
-                    preNodes.push([cell, `${~~(width + change)}`]);
-                    continue;
-                }
-                let sum = 0;
-                for (const cell of cells) {
-                    const colspan = ~~cell.getAttribute("colspan") || 1;
-                    sum += colspan;
-                    if (sum > colSum) break;
-                    if (sum === colSum) {
-                        const { width } = cell.getBoundingClientRect();
-                        const nextCell = cell.nextElementSibling;
-                        if (!nextCell) continue;
-                        const { width: nextWidth } = nextCell.getBoundingClientRect();
-                        preNodes.push([cell, `${~~(width + change)}`], [nextCell, `${~~(nextWidth - change)}`]);
-                    }
-                }
-            }
-            for (const [node, width] of preNodes) {
-                setElementAttribute(node, { width });
-                setElementProperty(node as HTMLElement, { width: `${width}px` });
-            }
-        }
-        if (cell.nextElementSibling == null) {
-            updateTableWidth(tableBlot.domNode, bounds, change);
-        }
-    }
-
-    setCellRect(cell: Element, clientX: number, clientY: number) {
-        if (this.direction === "level") {
-            this.setCellLevelRect(cell, clientX);
-        } else if (this.direction === "vertical") {
-            this.setCellVerticalRect(cell, clientY);
-        }
-    }
-
-    setCellsRect(cell: Element, changeX: number, changeY: number) {
-        const rows = cell.parentElement.parentElement.children;
-        const maxColNum = this.getMaxColNum(cell);
-        const averageX = changeX / maxColNum;
-        const averageY = changeY / rows.length;
-        const preNodes: [Element, string, string][] = [];
-        const tableBlot = (Quill.find(cell) as TableCell).table();
-        const colgroup = tableBlot.colgroup() as TableColgroup;
-        const bounds = tableBlot.domNode.getBoundingClientRect();
-        for (const row of rows) {
-            const cells = row.children;
-            for (const cell of cells) {
-                const colspan = ~~cell.getAttribute("colspan") || 1;
-                const { width, height } = cell.getBoundingClientRect();
-                preNodes.push([cell, `${Math.ceil(width + averageX * colspan)}`, `${Math.ceil(height + averageY)}`]);
-            }
-        }
-        if (colgroup) {
-            let col = colgroup.children.head;
-            for (const [node, , height] of preNodes) {
-                setElementAttribute(node, { height });
-                setElementProperty(node as HTMLElement, { height: `${height}px` });
-            }
-            while (col) {
-                const { width } = col.domNode.getBoundingClientRect();
-                setElementAttribute(col.domNode, { width: `${Math.ceil(width + averageX)}` });
-                col = col.next;
-            }
-        } else {
-            for (const [node, width, height] of preNodes) {
-                setElementAttribute(node, { width, height });
-                setElementProperty(node as HTMLElement, {
-                    width: `${width}px`,
-                    height: `${height}px`
-                });
-            }
-        }
-        updateTableWidth(tableBlot.domNode, bounds, changeX);
-    }
-
-    setCellVerticalRect(cell: Element, clientY: number) {
-        const rowspan = ~~cell.getAttribute("rowspan") || 1;
-        const cells = rowspan > 1 ? this.getVerticalCells(cell, rowspan) : cell.parentElement.children;
-        for (const cell of cells) {
-            const { top } = cell.getBoundingClientRect();
-            const height = `${~~(clientY - top)}`;
-            setElementAttribute(cell, { height });
-            setElementProperty(cell as HTMLElement, { height: `${height}px` });
-        }
-    }
-
-    toggleLineChildClass(isAdd: boolean) {
-        const node = this.line.firstElementChild;
-        if (isAdd) {
-            node.classList.add("ql-operate-line");
-        } else {
-            node.classList.remove("ql-operate-line");
-        }
-    }
-
-    updateCell(node: Element) {
-        if (!node) return;
-        const isLine = this.isLine(node);
-        const handleDrag = (e: MouseEvent) => {
-            e.preventDefault();
-            if (this.drag) {
-                if (isLine) {
-                    this.updateDragLine(e.clientX, e.clientY);
-                    this.hideDragBlock();
-                } else {
-                    this.updateDragBlock(e.clientX, e.clientY);
-                    this.hideLine();
-                }
-            }
-        };
-
-        const handleMouseup = (e: MouseEvent) => {
-            e.preventDefault();
-            const { cellNode, tableNode } = this.options;
-            if (isLine) {
-                this.setCellRect(cellNode, e.clientX, e.clientY);
-                this.toggleLineChildClass(false);
-            } else {
-                const { right, bottom } = tableNode.getBoundingClientRect();
-                const changeX = e.clientX - right;
-                const changeY = e.clientY - bottom;
-                this.setCellsRect(cellNode, changeX, changeY);
-                this.dragBlock.classList.remove("ql-operate-block-move");
-                this.hideDragBlock();
-                this.hideDragTable();
-            }
-            this.drag = false;
-            window.document.removeEventListener("mousemove", handleDrag, false);
-            window.document.removeEventListener("mouseup", handleMouseup, false);
-            this.tableBetter.tableMenus.updateMenus(tableNode);
-        };
-
-        const handleMousedown = (e: MouseEvent) => {
-            e.preventDefault();
-            const { tableNode } = this.options;
-            if (isLine) {
-                this.toggleLineChildClass(true);
-            } else {
-                if (this.dragTable) {
-                    const properties = this.getDragTableProperty(tableNode);
-                    setElementProperty(this.dragTable, properties);
-                } else {
-                    this.createDragTable(tableNode);
-                }
-            }
-            this.drag = true;
-            window.document.addEventListener("mousemove", handleDrag);
-            window.document.addEventListener("mouseup", handleMouseup);
-        };
-        node.addEventListener("mousedown", handleMousedown);
-    }
-
-    updateDragBlock(clientX: number, clientY: number) {
-        const containerRect = this.quill.container.getBoundingClientRect();
-        this.dragBlock.classList.add("ql-operate-block-move");
-        setElementProperty(this.dragBlock, {
-            top: `${~~(clientY - containerRect.top - DRAG_BLOCK_HEIGHT / 2)}px`,
-            left: `${~~(clientX - containerRect.left - DRAG_BLOCK_WIDTH / 2)}px`
-        });
-        this.updateDragTable(clientX, clientY);
-    }
-
-    updateDragLine(clientX: number, clientY: number) {
-        const containerRect = this.quill.container.getBoundingClientRect();
-        if (this.direction === "level") {
-            setElementProperty(this.line, {
-                left: `${~~(clientX - containerRect.left - LINE_CONTAINER_WIDTH / 2)}px`
-            });
-        } else if (this.direction === "vertical") {
-            setElementProperty(this.line, {
-                top: `${~~clientY - containerRect.top - LINE_CONTAINER_HEIGHT / 2}px`
-            });
-        }
-    }
-
-    updateDragTable(clientX: number, clientY: number) {
-        const { top, left } = this.dragTable.getBoundingClientRect();
-        const width = clientX - left;
-        const height = clientY - top;
-        setElementProperty(this.dragTable, {
-            width: `${width}px`,
-            height: `${height}px`,
-            display: "block"
-        });
-    }
-
-    updateProperty(options: Options) {
-        const { containerProps, lineProps, dragBlockProps } = this.getProperty(options);
-        if (!containerProps || !lineProps) return;
-        this.options = options;
-        setElementProperty(this.line, containerProps);
-        setElementProperty(this.line.firstChild as HTMLElement, lineProps);
-        setElementProperty(this.dragBlock, dragBlockProps);
-    }
-}
-
-export default OperateLine;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-menus.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-menus.ts
deleted file mode 100644
index 1d20679621..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-menus.ts
+++ /dev/null
@@ -1,854 +0,0 @@
-// @ts-nocheck
-import type { LinkedList } from "parchment";
-import Quill from "quill";
-import Delta from "quill-delta";
-import { CELL_DEFAULT_VALUES, CELL_DEFAULT_WIDTH, CELL_PROPERTIES, DEVIATION, TABLE_PROPERTIES } from "../config";
-import { TableCell, tableId } from "../formats/table";
-import type {
-    CorrectBound,
-    Props,
-    QuillTableBetter,
-    TableCellMap,
-    TableColgroup,
-    TableContainer,
-    TableRow,
-    UseLanguageHandler
-} from "../types";
-import {
-    createTooltip,
-    getAlign,
-    getCellFormats,
-    getComputeBounds,
-    getComputeSelectedCols,
-    getComputeSelectedTds,
-    getCorrectBounds,
-    getElementStyle,
-    setElementProperty,
-    updateTableWidth
-} from "../utils";
-import TablePropertiesForm from "./table-properties-form";
-
-interface Children {
-    [propName: string]: {
-        content: string;
-        handler: () => void;
-    };
-}
-
-interface MenusDefaults {
-    [propName: string]: {
-        content: string;
-        icon: string;
-        handler: (list: HTMLUListElement, tooltip: HTMLDivElement) => void;
-        children?: Children;
-    };
-}
-
-enum Alignment {
-    left = "margin-left",
-    right = "margin-right"
-}
-
-function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): MenusDefaults {
-    const DEFAULT: MenusDefaults = {
-        column: {
-            content: useLanguage("col"),
-            icon: "icons icon-Column",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                this.toggleAttribute(list, tooltip);
-            },
-            children: {
-                left: {
-                    content: useLanguage("insColL"),
-                    handler() {
-                        const { leftTd } = this.getSelectedTdsInfo();
-                        const bounds = this.table.getBoundingClientRect();
-                        this.insertColumn(leftTd, 0);
-                        updateTableWidth(this.table, bounds, CELL_DEFAULT_WIDTH);
-                        this.updateMenus();
-                    }
-                },
-                right: {
-                    content: useLanguage("insColR"),
-                    handler() {
-                        const { rightTd } = this.getSelectedTdsInfo();
-                        const bounds = this.table.getBoundingClientRect();
-                        this.insertColumn(rightTd, 1);
-                        updateTableWidth(this.table, bounds, CELL_DEFAULT_WIDTH);
-                        this.updateMenus();
-                    }
-                },
-                delete: {
-                    content: useLanguage("delCol"),
-                    handler() {
-                        this.deleteColumn();
-                    }
-                }
-            }
-        },
-        row: {
-            content: useLanguage("row"),
-            icon: "icons icon-Row",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                this.toggleAttribute(list, tooltip);
-            },
-            children: {
-                above: {
-                    content: useLanguage("insRowAbv"),
-                    handler() {
-                        const { leftTd } = this.getSelectedTdsInfo();
-                        this.insertRow(leftTd, 0);
-                        this.updateMenus();
-                    }
-                },
-                below: {
-                    content: useLanguage("insRowBlw"),
-                    handler() {
-                        const { rightTd } = this.getSelectedTdsInfo();
-                        this.insertRow(rightTd, 1);
-                        this.updateMenus();
-                    }
-                },
-                delete: {
-                    content: useLanguage("delRow"),
-                    handler() {
-                        this.deleteRow();
-                    }
-                }
-            }
-        },
-        merge: {
-            content: useLanguage("mCells"),
-            icon: "icons icon-Merge",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                this.toggleAttribute(list, tooltip);
-            },
-            children: {
-                merge: {
-                    content: useLanguage("mCells"),
-                    handler() {
-                        this.mergeCells();
-                        this.updateMenus();
-                    }
-                },
-                split: {
-                    content: useLanguage("sCell"),
-                    handler() {
-                        this.splitCell();
-                        this.updateMenus();
-                    }
-                }
-            }
-        },
-        table: {
-            content: useLanguage("tblProps"),
-            icon: "icons icon-Table",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                const attribute = {
-                    ...getElementStyle(this.table, TABLE_PROPERTIES),
-                    align: this.getTableAlignment(this.table)
-                };
-                this.toggleAttribute(list, tooltip);
-                this.tablePropertiesForm = new TablePropertiesForm(this, { attribute, type: "table" });
-                this.hideMenus();
-            }
-        },
-        cell: {
-            content: useLanguage("cellProps"),
-            icon: "icons icon-Cell",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                const { selectedTds } = this.tableBetter.cellSelection;
-                const isGridShown = this.isGridShown();
-                if (isGridShown) {
-                    this.showGrid(false);
-                }
-                const attribute =
-                    selectedTds.length > 1
-                        ? this.getSelectedTdsAttrs(selectedTds)
-                        : this.getSelectedTdAttrs(selectedTds[0]);
-                this.toggleAttribute(list, tooltip);
-                this.tablePropertiesForm = new TablePropertiesForm(this, { attribute, type: "cell" });
-                this.hideMenus();
-                if (isGridShown) {
-                    this.showGrid(true);
-                }
-            }
-        },
-        wrap: {
-            content: useLanguage("insParaOTbl"),
-            icon: "icons icon-Wrap",
-            handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
-                this.toggleAttribute(list, tooltip);
-            },
-            children: {
-                before: {
-                    content: useLanguage("insB4"),
-                    handler() {
-                        this.insertParagraph(-1);
-                    }
-                },
-                after: {
-                    content: useLanguage("insAft"),
-                    handler() {
-                        this.insertParagraph(1);
-                    }
-                }
-            }
-        },
-        delete: {
-            content: useLanguage("delTable"),
-            icon: "icons icon-Delete",
-            handler() {
-                this.deleteTable();
-            }
-        }
-    };
-    const EXTRA: MenusDefaults = {
-        copy: {
-            content: useLanguage("copyTable"),
-            icon: "icons icon-Copy",
-            handler() {
-                this.copyTable();
-            }
-        },
-        grid: {
-            content: useLanguage("showGrid"),
-            icon: "icons icon-Table grid-toggle",
-            handler() {
-                this.showGrid();
-            }
-        }
-    };
-    if (menus?.length) {
-        return Object.values(menus).reduce((config: MenusDefaults, key: string) => {
-            config[key] = Object.assign({}, DEFAULT, EXTRA)[key];
-            return config;
-        }, {});
-    }
-    return DEFAULT;
-}
-
-class TableMenus {
-    quill: Quill;
-    table: HTMLElement | null;
-    root: HTMLElement;
-    prevList: HTMLUListElement | null;
-    prevTooltip: HTMLDivElement | null;
-    scroll: boolean;
-    tableBetter: QuillTableBetter;
-    tablePropertiesForm: TablePropertiesForm;
-    constructor(quill: Quill, tableBetter?: QuillTableBetter) {
-        this.quill = quill;
-        this.table = null;
-        this.prevList = null;
-        this.prevTooltip = null;
-        this.scroll = false;
-        this.tableBetter = tableBetter;
-        this.tablePropertiesForm = null;
-        if (!this.quill.options.readOnly) {
-            this.quill.root.addEventListener("click", this.handleClick.bind(this));
-        }
-        this.root = this.createMenus();
-    }
-
-    async copyTable() {
-        if (!this.table) return;
-        const tableBlot = Quill.find(this.table) as TableContainer;
-        if (!tableBlot) return;
-        const html = "<p><br></p>" + tableBlot.getCopyTable();
-        const text = this.tableBetter.cellSelection.getText(html);
-        const clipboardItem = new ClipboardItem({
-            "text/html": new Blob([html], { type: "text/html" }),
-            "text/plain": new Blob([text], { type: "text/plain" })
-        });
-        try {
-            await navigator.clipboard.write([clipboardItem]);
-            const index = this.quill.getIndex(tableBlot);
-            const length = tableBlot.length();
-            this.quill.setSelection(index + length, Quill.sources.SILENT);
-            this.tableBetter.hideTools();
-            this.quill.scrollSelectionIntoView();
-        } catch (error) {
-            console.error("Failed to copy table:", error);
-        }
-    }
-
-    isGridShown() {
-        return this.table?.classList.contains("ql-table-grid");
-    }
-
-    showGrid(isShow?: boolean) {
-        const tableGridHelperClass = "ql-table-grid";
-        if (isShow === undefined) {
-            this.table?.classList.toggle(tableGridHelperClass);
-            this.root.classList.toggle(tableGridHelperClass);
-        } else if (isShow) {
-            this.table?.classList.add(tableGridHelperClass);
-            this.root.classList.add(tableGridHelperClass);
-        } else {
-            this.table?.classList.remove(tableGridHelperClass);
-            this.root.classList.remove(tableGridHelperClass);
-        }
-    }
-
-    createList(children: Children) {
-        if (!children) return null;
-        const container = this.quill.root.ownerDocument.createElement("ul");
-        for (const [, child] of Object.entries(children)) {
-            const { content, handler } = child;
-            const list = this.quill.root.ownerDocument.createElement("li");
-            list.innerText = content;
-            list.addEventListener("click", handler.bind(this));
-            container.appendChild(list);
-        }
-        container.classList.add("ql-table-dropdown-list", "ql-hidden");
-        return container;
-    }
-
-    createMenu(left: string, right: string, isDropDown: boolean) {
-        const container = this.quill.root.ownerDocument.createElement("div");
-        container.classList.add("ql-table-dropdown");
-        const dropDown = this.quill.root.ownerDocument.createElement("span");
-        dropDown.classList.add("ql-table-tooltip-hover");
-        const classes = left.split(" ");
-        const icon = this.quill.root.ownerDocument.createElement("span");
-        icon.classList.add(...classes);
-        dropDown.appendChild(icon);
-        if (isDropDown) {
-            const classes = right.split(" ");
-            const dropDownIcon = this.quill.root.ownerDocument.createElement("span");
-            dropDownIcon.classList.add(...classes);
-            dropDown.appendChild(dropDownIcon);
-        }
-        container.appendChild(dropDown);
-        return container;
-    }
-
-    createMenus() {
-        const { language, options = {} } = this.tableBetter;
-        const { menus } = options;
-        const useLanguage = language.useLanguage.bind(language);
-        const container = this.quill.root.ownerDocument.createElement("div");
-        container.classList.add("ql-table-menus-container", "ql-hidden");
-        for (const [, val] of Object.entries(getMenusConfig(useLanguage, menus))) {
-            const { content, icon, children, handler } = val;
-            const list = this.createList(children);
-            const tooltip = createTooltip(content);
-            const menu = this.createMenu(icon, "icons icon-Arrow-down", !!children);
-            menu.appendChild(tooltip);
-            list && menu.appendChild(list);
-            container.appendChild(menu);
-            menu.addEventListener("click", handler.bind(this, list, tooltip));
-        }
-        this.quill.container.appendChild(container);
-        return container;
-    }
-
-    deleteColumn(isKeyboard: boolean = false) {
-        const { computeBounds, leftTd, rightTd } = this.getSelectedTdsInfo();
-        const bounds = this.table.getBoundingClientRect();
-        const deleteTds = getComputeSelectedTds(computeBounds, this.table, this.quill.container, "column");
-        const deleteCols = getComputeSelectedCols(computeBounds, this.table, this.quill.container);
-        const tableBlot = (Quill.find(leftTd) as TableCell).table();
-        const { changeTds, delTds } = this.getCorrectTds(deleteTds, computeBounds, leftTd, rightTd);
-        if (isKeyboard && delTds.length !== this.tableBetter.cellSelection.selectedTds.length) return;
-        this.tableBetter.cellSelection.updateSelected("column");
-        tableBlot.deleteColumn(changeTds, delTds, this.deleteTable.bind(this), deleteCols);
-        updateTableWidth(this.table, bounds, computeBounds.left - computeBounds.right);
-        this.updateMenus();
-    }
-
-    deleteRow(isKeyboard: boolean = false) {
-        const selectedTds = this.tableBetter.cellSelection.selectedTds;
-        const map: { [propName: string]: TableRow } = {};
-        for (const td of selectedTds) {
-            let rowspan = ~~td.getAttribute("rowspan") || 1;
-            let row = Quill.find(td.parentElement) as TableRow;
-            if (rowspan > 1) {
-                while (row && rowspan) {
-                    const id = row.children.head.domNode.getAttribute("data-row");
-                    if (!map[id]) map[id] = row;
-                    row = row.next;
-                    rowspan--;
-                }
-            } else {
-                const id = td.getAttribute("data-row");
-                if (!map[id]) map[id] = row;
-            }
-        }
-        const rows: TableRow[] = Object.values(map);
-        if (isKeyboard) {
-            const sum = rows.reduce((sum: number, row: TableRow) => {
-                return (sum += row.children.length);
-            }, 0);
-            if (sum !== selectedTds.length) return;
-        }
-        this.tableBetter.cellSelection.updateSelected("row");
-        const tableBlot = (Quill.find(selectedTds[0]) as TableCell).table();
-        tableBlot.deleteRow(rows, this.deleteTable.bind(this));
-        this.updateMenus();
-    }
-
-    deleteTable() {
-        const tableBlot = Quill.find(this.table) as TableContainer;
-        if (!tableBlot) return;
-        const offset = tableBlot.offset(this.quill.scroll);
-        tableBlot.remove();
-        this.tableBetter.hideTools();
-        this.quill.setSelection(offset - 1, 0, Quill.sources.USER);
-    }
-
-    destroyTablePropertiesForm() {
-        if (!this.tablePropertiesForm) return;
-        this.tablePropertiesForm.removePropertiesForm();
-        this.tablePropertiesForm = null;
-    }
-
-    getCellsOffset(computeBounds: CorrectBound, bounds: CorrectBound, leftColspan: number, rightColspan: number) {
-        const tableBlot = Quill.find(this.table) as TableContainer;
-        const cells = tableBlot.descendants(TableCell);
-        const _left = Math.max(bounds.left, computeBounds.left);
-        const _right = Math.min(bounds.right, computeBounds.right);
-        const map: TableCellMap = new Map();
-        const leftMap: TableCellMap = new Map();
-        const rightMap: TableCellMap = new Map();
-        for (const cell of cells) {
-            const { left, right } = getCorrectBounds(cell.domNode, this.quill.container);
-            if (left + DEVIATION >= _left && right <= _right + DEVIATION) {
-                this.setCellsMap(cell, map);
-            } else if (left + DEVIATION >= computeBounds.left && right <= bounds.left + DEVIATION) {
-                this.setCellsMap(cell, leftMap);
-            } else if (left + DEVIATION >= bounds.right && right <= computeBounds.right + DEVIATION) {
-                this.setCellsMap(cell, rightMap);
-            }
-        }
-        return (
-            this.getDiffOffset(map) ||
-            this.getDiffOffset(leftMap, leftColspan) + this.getDiffOffset(rightMap, rightColspan)
-        );
-    }
-
-    getColsOffset(colgroup: TableColgroup, computeBounds: CorrectBound, bounds: CorrectBound) {
-        let col = colgroup.children.head;
-        const _left = Math.max(bounds.left, computeBounds.left);
-        const _right = Math.min(bounds.right, computeBounds.right);
-        let colLeft = null;
-        let colRight = null;
-        let offset = 0;
-        while (col) {
-            const { width } = col.domNode.getBoundingClientRect();
-            if (!colLeft && !colRight) {
-                const colBounds = getCorrectBounds(col.domNode, this.quill.container);
-                colLeft = colBounds.left;
-                colRight = colLeft + width;
-            } else {
-                colLeft = colRight;
-                colRight += width;
-            }
-            if (colLeft > _right) break;
-            if (colLeft >= _left && colRight <= _right) {
-                offset--;
-            }
-            col = col.next;
-        }
-        return offset;
-    }
-
-    getCorrectBounds(table: HTMLElement): CorrectBound[] {
-        const bounds = this.quill.container.getBoundingClientRect();
-        const tableBounds = getCorrectBounds(table, this.quill.container);
-        return tableBounds.width >= bounds.width
-            ? [{ ...tableBounds, left: 0, right: bounds.width }, bounds]
-            : [tableBounds, bounds];
-    }
-
-    getCorrectTds(deleteTds: Element[], computeBounds: CorrectBound, leftTd: Element, rightTd: Element) {
-        const changeTds: [Element, number][] = [];
-        const delTds = [];
-        const colgroup = (Quill.find(leftTd) as TableCell).table().colgroup() as TableColgroup;
-        const leftColspan = ~~leftTd.getAttribute("colspan") || 1;
-        const rightColspan = ~~rightTd.getAttribute("colspan") || 1;
-        if (colgroup) {
-            for (const td of deleteTds) {
-                const bounds = getCorrectBounds(td, this.quill.container);
-                if (bounds.left + DEVIATION >= computeBounds.left && bounds.right <= computeBounds.right + DEVIATION) {
-                    delTds.push(td);
-                } else {
-                    const offset = this.getColsOffset(colgroup, computeBounds, bounds);
-                    changeTds.push([td, offset]);
-                }
-            }
-        } else {
-            for (const td of deleteTds) {
-                const bounds = getCorrectBounds(td, this.quill.container);
-                if (bounds.left + DEVIATION >= computeBounds.left && bounds.right <= computeBounds.right + DEVIATION) {
-                    delTds.push(td);
-                } else {
-                    const offset = this.getCellsOffset(computeBounds, bounds, leftColspan, rightColspan);
-                    changeTds.push([td, offset]);
-                }
-            }
-        }
-        return { changeTds, delTds };
-    }
-
-    getDiffOffset(map: TableCellMap, colspan?: number) {
-        let offset = 0;
-        const tds = this.getTdsFromMap(map);
-        if (tds.length) {
-            if (colspan) {
-                for (const td of tds) {
-                    offset += ~~td.getAttribute("colspan") || 1;
-                }
-                offset -= colspan;
-            } else {
-                for (const td of tds) {
-                    offset -= ~~td.getAttribute("colspan") || 1;
-                }
-            }
-        }
-        return offset;
-    }
-
-    getRefInfo(row: TableRow, right: number) {
-        let ref = null;
-        if (!row) return { id: tableId(), ref };
-        let td = row.children.head;
-        const id = td.domNode.getAttribute("data-row");
-        while (td) {
-            const { left } = td.domNode.getBoundingClientRect();
-            if (Math.abs(left - right) <= DEVIATION) {
-                return { id, ref: td };
-                // The nearest cell of a multi-row cell
-            } else if (Math.abs(left - right) >= DEVIATION && !ref) {
-                ref = td;
-            }
-            td = td.next;
-        }
-        return { id, ref };
-    }
-
-    getSelectedTdAttrs(td: HTMLElement) {
-        const cellBlot = Quill.find(td) as TableCell;
-        const align = getAlign(cellBlot);
-
-        const attr: Props = align
-            ? { ...getElementStyle(td, CELL_PROPERTIES), "text-align": align }
-            : getElementStyle(td, CELL_PROPERTIES);
-        return attr;
-    }
-
-    getSelectedTdsAttrs(selectedTds: HTMLElement[]) {
-        const map = new Map();
-        let attribute = null;
-        for (const td of selectedTds) {
-            const attr = this.getSelectedTdAttrs(td);
-            if (!attribute) {
-                attribute = attr;
-                continue;
-            }
-            for (const key of Object.keys(attribute)) {
-                if (map.has(key)) continue;
-                if (attr[key] !== attribute[key]) {
-                    map.set(key, false);
-                }
-            }
-        }
-        for (const key of Object.keys(attribute)) {
-            if (map.has(key)) {
-                attribute[key] = CELL_DEFAULT_VALUES[key];
-            }
-        }
-        return attribute;
-    }
-
-    getSelectedTdsInfo() {
-        const { startTd, endTd } = this.tableBetter.cellSelection;
-        const startCorrectBounds = getCorrectBounds(startTd, this.quill.container);
-        const endCorrectBounds = getCorrectBounds(endTd, this.quill.container);
-        const computeBounds = getComputeBounds(startCorrectBounds, endCorrectBounds);
-        if (startCorrectBounds.left <= endCorrectBounds.left && startCorrectBounds.top <= endCorrectBounds.top) {
-            return {
-                computeBounds,
-                leftTd: startTd,
-                rightTd: endTd
-            };
-        }
-        return {
-            computeBounds,
-            leftTd: endTd,
-            rightTd: startTd
-        };
-    }
-
-    getTableAlignment(table: HTMLTableElement) {
-        const align = table.getAttribute("align");
-        if (!align) {
-            const { [Alignment.left]: left, [Alignment.right]: right } = getElementStyle(table, [
-                Alignment.left,
-                Alignment.right
-            ]);
-            if (left === "auto") {
-                if (right === "auto") return "center";
-                return "right";
-            }
-            return "left";
-        }
-        return align || "center";
-    }
-
-    getTdsFromMap(map: TableCellMap) {
-        return Object.values(Object.fromEntries(map)).reduce(
-            (tds: HTMLTableCellElement[], item: HTMLTableCellElement[]) => {
-                return tds.length > item.length ? tds : item;
-            },
-            []
-        );
-    }
-
-    handleClick(e: MouseEvent) {
-        const table = (e.target as Element).closest("table.ql-table-better");
-        if (!table) return;
-        this.prevList && this.prevList.classList.add("ql-hidden");
-        this.prevTooltip && this.prevTooltip.classList.remove("ql-table-tooltip-hidden");
-        this.prevList = null;
-        this.prevTooltip = null;
-        if (!table && !this.tableBetter.cellSelection.selectedTds.length) {
-            this.hideMenus();
-            this.destroyTablePropertiesForm();
-            return;
-        } else {
-            if (this.tablePropertiesForm) return;
-            this.showMenus();
-            this.updateMenus(table);
-            if ((table && !table.isEqualNode(this.table)) || this.scroll) {
-                this.updateScroll(false);
-            }
-            this.table = table;
-        }
-    }
-
-    hideMenus() {
-        this.root.classList.add("ql-hidden");
-    }
-
-    insertColumn(td: HTMLTableColElement, offset: number) {
-        const { left, right, width } = td.getBoundingClientRect();
-        const tdBlot = Quill.find(td) as TableCell;
-        const tableBlot = tdBlot.table();
-        const isLast = td.parentElement.lastChild.isEqualNode(td);
-        const position = offset > 0 ? right : left;
-        tableBlot.insertColumn(position, isLast, width, offset);
-        this.quill.scrollSelectionIntoView();
-    }
-
-    insertParagraph(offset: number) {
-        const blot = Quill.find(this.table) as TableContainer;
-        const index = this.quill.getIndex(blot);
-        const length = offset > 0 ? blot.length() : 0;
-        const delta = new Delta().retain(index + length).insert("\n");
-        this.quill.updateContents(delta, Quill.sources.USER);
-        this.quill.setSelection(index + length, Quill.sources.SILENT);
-        this.tableBetter.hideTools();
-        this.quill.scrollSelectionIntoView();
-    }
-
-    insertRow(td: HTMLTableColElement, offset: number) {
-        const tdBlot = Quill.find(td) as TableCell;
-        const index = tdBlot.rowOffset();
-        const tableBlot = tdBlot.table();
-        if (offset > 0) {
-            const rowspan = ~~td.getAttribute("rowspan") || 1;
-            tableBlot.insertRow(index + offset + rowspan - 1, offset);
-        } else {
-            tableBlot.insertRow(index + offset, offset);
-        }
-        this.quill.scrollSelectionIntoView();
-    }
-
-    mergeCells() {
-        const { selectedTds } = this.tableBetter.cellSelection;
-        const { computeBounds, leftTd } = this.getSelectedTdsInfo();
-        const leftTdBlot = Quill.find(leftTd) as TableCell;
-        const [formats, cellId] = getCellFormats(leftTdBlot);
-        const head = leftTdBlot.children.head;
-        const tableBlot = leftTdBlot.table();
-        const rows = tableBlot.tbody().children as LinkedList<TableRow>;
-        const row = leftTdBlot.row();
-        const colspan = row.children.reduce((colspan: number, td: TableCell) => {
-            const tdCorrectBounds = getCorrectBounds(td.domNode, this.quill.container);
-            if (tdCorrectBounds.left >= computeBounds.left && tdCorrectBounds.right <= computeBounds.right) {
-                colspan += ~~td.domNode.getAttribute("colspan") || 1;
-            }
-            return colspan;
-        }, 0);
-        const rowspan = rows.reduce((rowspan: number, row: TableRow) => {
-            const rowCorrectBounds = getCorrectBounds(row.domNode, this.quill.container);
-            if (rowCorrectBounds.top >= computeBounds.top && rowCorrectBounds.bottom <= computeBounds.bottom) {
-                let minRowspan = Number.MAX_VALUE;
-                row.children.forEach((td: TableCell) => {
-                    const rowspan = ~~td.domNode.getAttribute("rowspan") || 1;
-                    minRowspan = Math.min(minRowspan, rowspan);
-                });
-                rowspan += minRowspan;
-            }
-            return rowspan;
-        }, 0);
-        let offset = 0;
-        for (const td of selectedTds) {
-            if (leftTd.isEqualNode(td)) continue;
-            const blot = Quill.find(td) as TableCell;
-            blot.moveChildren(leftTdBlot);
-            blot.remove();
-            if (!blot.parent?.children?.length) offset++;
-        }
-        if (offset) {
-            // Subtract the number of rows deleted by the merge
-            row.children.forEach((child: TableCell) => {
-                if (child.domNode.isEqualNode(leftTd)) return;
-                const rowspan = child.domNode.getAttribute("rowspan");
-                const [formats] = getCellFormats(child);
-                // @ts-expect-error
-                child.replaceWith(child.statics.blotName, { ...formats, rowspan: rowspan - offset });
-            });
-        }
-        leftTdBlot.setChildrenId(cellId);
-        // @ts-expect-error
-        head.format(leftTdBlot.statics.blotName, { ...formats, colspan, rowspan: rowspan - offset });
-        this.tableBetter.cellSelection.setSelected(head.parent.domNode);
-        this.quill.scrollSelectionIntoView();
-    }
-
-    setCellsMap(cell: TableCell, map: TableCellMap) {
-        const key: string = cell.domNode.getAttribute("data-row");
-        if (map.has(key)) {
-            map.set(key, [...map.get(key), cell.domNode]);
-        } else {
-            map.set(key, [cell.domNode]);
-        }
-    }
-
-    showMenus() {
-        if (this.table?.classList.contains("ql-table-grid")) {
-            this.root.classList.add("ql-table-grid");
-        } else {
-            this.root.classList.remove("ql-table-grid");
-        }
-        this.root.classList.remove("ql-hidden");
-    }
-
-    splitCell() {
-        const { selectedTds } = this.tableBetter.cellSelection;
-        const { leftTd } = this.getSelectedTdsInfo();
-        const leftTdBlot = Quill.find(leftTd) as TableCell;
-        const head = leftTdBlot.children.head;
-        for (const td of selectedTds) {
-            const colspan = ~~td.getAttribute("colspan") || 1;
-            const rowspan = ~~td.getAttribute("rowspan") || 1;
-            if (colspan === 1 && rowspan === 1) continue;
-            const columnCells: [TableRow, string, TableCell | null][] = [];
-            const { width, right } = td.getBoundingClientRect();
-            const blot = Quill.find(td) as TableCell;
-            const tableBlot = blot.table();
-            const nextBlot = blot.next;
-            const rowBlot = blot.row();
-            if (rowspan > 1) {
-                if (colspan > 1) {
-                    let nextRowBlot = rowBlot.next;
-                    for (let i = 1; i < rowspan; i++) {
-                        const { ref, id } = this.getRefInfo(nextRowBlot, right);
-                        for (let j = 0; j < colspan; j++) {
-                            columnCells.push([nextRowBlot, id, ref]);
-                        }
-                        nextRowBlot && (nextRowBlot = nextRowBlot.next);
-                    }
-                } else {
-                    let nextRowBlot = rowBlot.next;
-                    for (let i = 1; i < rowspan; i++) {
-                        const { ref, id } = this.getRefInfo(nextRowBlot, right);
-                        columnCells.push([nextRowBlot, id, ref]);
-                        nextRowBlot && (nextRowBlot = nextRowBlot.next);
-                    }
-                }
-            }
-            if (colspan > 1) {
-                const id = td.getAttribute("data-row");
-                for (let i = 1; i < colspan; i++) {
-                    columnCells.push([rowBlot, id, nextBlot]);
-                }
-            }
-            for (const [row, id, ref] of columnCells) {
-                tableBlot.insertColumnCell(row, id, ref);
-            }
-            const [formats] = getCellFormats(blot);
-            blot.replaceWith(blot.statics.blotName, {
-                ...formats,
-                width: ~~(width / colspan),
-                colspan: null,
-                rowspan: null
-            });
-        }
-        this.tableBetter.cellSelection.setSelected(head.parent.domNode);
-        this.quill.scrollSelectionIntoView();
-    }
-
-    toggleAttribute(list: HTMLUListElement, tooltip: HTMLDivElement) {
-        if (this.prevList && !this.prevList.isEqualNode(list)) {
-            this.prevList.classList.add("ql-hidden");
-            this.prevTooltip.classList.remove("ql-table-tooltip-hidden");
-        }
-        if (!list) return;
-        list.classList.toggle("ql-hidden");
-        tooltip.classList.toggle("ql-table-tooltip-hidden");
-        this.prevList = list;
-        this.prevTooltip = tooltip;
-    }
-
-    updateMenus(table: HTMLElement = this.table) {
-        if (!table) return;
-        requestAnimationFrame(() => {
-            this.root.classList.remove("ql-table-triangle-none");
-            const [tableBounds, containerBounds] = this.getCorrectBounds(table);
-            const { left, right, top, bottom } = tableBounds;
-            const { height, width } = this.root.getBoundingClientRect();
-            const toolbar = this.quill.getModule("toolbar");
-            // @ts-expect-error
-            const computedStyle = getComputedStyle(toolbar.container);
-            let correctTop = top - height - 10;
-            let correctLeft = (left + right - width) >> 1;
-            if (correctTop > -parseInt(computedStyle.paddingBottom)) {
-                this.root.classList.add("ql-table-triangle-up");
-                this.root.classList.remove("ql-table-triangle-down");
-            } else {
-                if (bottom > containerBounds.height) {
-                    correctTop = containerBounds.height + 10;
-                } else {
-                    correctTop = bottom + 10;
-                }
-                this.root.classList.add("ql-table-triangle-down");
-                this.root.classList.remove("ql-table-triangle-up");
-            }
-            if (correctLeft < containerBounds.left) {
-                correctLeft = 0;
-                this.root.classList.add("ql-table-triangle-none");
-            } else if (correctLeft + width > containerBounds.right) {
-                correctLeft = containerBounds.right - width;
-                this.root.classList.add("ql-table-triangle-none");
-            }
-            setElementProperty(this.root, {
-                left: `${correctLeft}px`,
-                top: `${correctTop}px`
-            });
-        });
-    }
-
-    updateScroll(scroll: boolean) {
-        this.scroll = scroll;
-    }
-
-    updateTable(table: HTMLElement) {
-        this.table = table;
-    }
-}
-
-export default TableMenus;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts
deleted file mode 100644
index 7e92cbfdef..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts
+++ /dev/null
@@ -1,606 +0,0 @@
-import { computePosition, flip, offset, shift } from "@floating-ui/react";
-import Coloris from "@melloware/coloris";
-import "@melloware/coloris/dist/coloris.css";
-import Quill from "quill";
-import { getProperties } from "../config";
-import { ListContainer } from "../formats/list";
-import type { Props, TableCell, TableCellBlock, TableContainer, TableHeader, TableList, TableMenus } from "../types";
-import {
-    addDimensionsUnit,
-    createTooltip,
-    getClosestElement,
-    getComputeSelectedCols,
-    isDimensions,
-    setElementAttribute,
-    setElementProperty
-} from "../utils";
-
-interface Child {
-    category: string;
-    propertyName: string;
-    value?: string;
-    attribute?: Props;
-    options?: string[];
-    tooltip?: string;
-    menus?: Menus[];
-    valid?: (value?: string) => boolean;
-    message?: string;
-}
-
-interface Menus {
-    icon: string;
-    describe: string;
-    align: string;
-}
-
-interface Properties {
-    content: string;
-    children: Child[];
-}
-
-interface Options {
-    type: "table" | "cell";
-    attribute: Props;
-}
-
-interface ColorList {
-    value: string;
-    describe: string;
-}
-
-const ACTION_LIST = [
-    { icon: "icons icon-Save", label: "save" },
-    { icon: "icons icon-Close", label: "cancel" }
-];
-
-const COLOR_LIST: ColorList[] = [
-    { value: "#000000", describe: "black" },
-    { value: "#4d4d4d", describe: "dimGrey" },
-    { value: "#808080", describe: "grey" },
-    { value: "#e6e6e6", describe: "lightGrey" },
-    { value: "#ffffff", describe: "white" },
-    { value: "#ff0000", describe: "red" },
-    { value: "#ffa500", describe: "orange" },
-    { value: "#ffff00", describe: "yellow" },
-    { value: "#99e64d", describe: "lightGreen" },
-    { value: "#008000", describe: "green" },
-    { value: "#7fffd4", describe: "aquamarine" },
-    { value: "#40e0d0", describe: "turquoise" },
-    { value: "#4d99e6", describe: "lightBlue" },
-    { value: "#0000ff", describe: "blue" },
-    { value: "#800080", describe: "purple" }
-];
-
-class TablePropertiesForm {
-    tableMenus: TableMenus;
-    options: Options;
-    attrs: Props;
-    borderForm: HTMLElement[];
-    saveButton: HTMLButtonElement | null;
-    form: HTMLDivElement;
-    constructor(tableMenus: TableMenus, options: Options) {
-        this.tableMenus = tableMenus;
-        this.options = options;
-        this.attrs = { ...options.attribute };
-        this.borderForm = [];
-        this.saveButton = null;
-        this.form = this.createPropertiesForm(options);
-    }
-
-    checkBtnsAction(status: string) {
-        if (status === "save") {
-            this.saveAction(this.options.type);
-        }
-        this.removePropertiesForm();
-        this.tableMenus.showMenus();
-        this.tableMenus.updateMenus();
-    }
-
-    createActionBtns(listener: EventListener, showLabel: boolean) {
-        const useLanguage = this.getUseLanguage();
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const container = ownerDocument.createElement("div");
-        const fragment = ownerDocument.createDocumentFragment();
-        container.classList.add("properties-form-action-row");
-        for (const { icon, label } of ACTION_LIST) {
-            const button = ownerDocument.createElement("button");
-            const iconContainer = ownerDocument.createElement("span");
-            const iconClasses = icon.split(" ");
-            iconContainer.classList.add(...iconClasses);
-            button.appendChild(iconContainer);
-            button.setAttribute("label", label);
-            if (showLabel) {
-                const labelContainer = ownerDocument.createElement("span");
-                labelContainer.innerText = useLanguage(label);
-                button.appendChild(labelContainer);
-            }
-            fragment.appendChild(button);
-        }
-        container.addEventListener("click", e => listener(e));
-        container.appendChild(fragment);
-        return container;
-    }
-
-    createCheckBtns(child: Child) {
-        const { menus, propertyName } = child;
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const container = ownerDocument.createElement("div");
-        const fragment = ownerDocument.createDocumentFragment();
-        for (const { icon, describe, align } of menus ?? []) {
-            const container = ownerDocument.createElement("span");
-            const iconContainer = ownerDocument.createElement("span");
-            const iconClasses = icon.split(" ");
-            iconContainer.classList.add(...iconClasses);
-            container.appendChild(iconContainer);
-            container.setAttribute("data-align", align);
-            container.classList.add("ql-table-tooltip-hover");
-            if (this.options.attribute[propertyName] === align) {
-                container.classList.add("ql-table-btns-checked");
-            }
-            const tooltip = createTooltip(describe);
-            container.appendChild(tooltip);
-            fragment.appendChild(container);
-        }
-        container.classList.add("ql-table-check-container");
-        container.appendChild(fragment);
-        container.addEventListener("click", e => {
-            const target: HTMLSpanElement | null = (e.target as HTMLElement).closest("span.ql-table-tooltip-hover");
-            const value = target?.getAttribute("data-align");
-            this.switchButton(container, target!);
-            this.setAttribute(propertyName, value ?? "");
-        });
-        return container;
-    }
-
-    createColorContainer(child: Child) {
-        const container = this.tableMenus.quill.root.ownerDocument.createElement("div");
-        container.classList.add("ql-table-color-container");
-        const input = this.createColorInput(child);
-        const inputEl = input.querySelector("input");
-        if (inputEl) {
-            this.createColorPicker(inputEl);
-        }
-        container.appendChild(input);
-        return container;
-    }
-
-    createColorInput(child: Child) {
-        const { attribute = {}, propertyName, value } = child;
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const placeholder = attribute?.placeholder ?? "";
-        const container = ownerDocument.createElement("div");
-        container.classList.add("label-field-view", "label-field-view-color");
-        const label = ownerDocument.createElement("label");
-        label.innerText = placeholder;
-        const input = ownerDocument.createElement("input");
-        const attributes = {
-            ...attribute,
-            class: "property-input",
-            value: value ?? "",
-            "data-property": propertyName
-        };
-        setElementAttribute(input, attributes);
-
-        container.appendChild(input);
-        container.appendChild(label);
-        return container;
-    }
-
-    createColorPicker(input: HTMLInputElement) {
-        Coloris.init();
-        Coloris({
-            el: input,
-            clearButton: true,
-            closeButton: true,
-            onChange: (color: string, input: HTMLElement): void => {
-                const propertyName = input.getAttribute("data-property") ?? "";
-                this.setAttribute(propertyName, color, input);
-            },
-            swatches: COLOR_LIST.map(({ value }) => value),
-            theme: "polaroid"
-        });
-    }
-
-    createDropdown(value: string) {
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const dropdown = ownerDocument.createElement("div");
-        const dropIcon = ownerDocument.createElement("span");
-        const dropText = ownerDocument.createElement("span");
-        dropIcon.classList.add("icons", "icon-Arrow-down", "ql-table-dropdown-icon");
-        value && (dropText.innerText = value);
-        dropText.classList.add("ql-table-dropdown-text");
-        dropdown.classList.add("ql-table-dropdown-properties");
-        dropdown.appendChild(dropText);
-        dropdown.appendChild(dropIcon);
-        return { dropdown, dropText };
-    }
-
-    createInput(child: Child) {
-        const { attribute = {}, message, propertyName, valid, value } = child;
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const placeholder = attribute?.placeholder ?? "";
-        const container = ownerDocument.createElement("div");
-        const wrapper = ownerDocument.createElement("div");
-        const label = ownerDocument.createElement("label");
-        const input = ownerDocument.createElement("input");
-        const status = ownerDocument.createElement("div");
-        container.classList.add("label-field-view");
-        wrapper.classList.add("label-field-view-input-wrapper");
-        label.innerText = placeholder;
-        const attributes = {
-            ...attribute,
-            class: "property-input",
-            value: value ?? ""
-        };
-        setElementAttribute(input, attributes);
-        input.addEventListener("input", e => {
-            const value = (e.target as HTMLInputElement).value;
-            valid && this.switchHidden(status, valid(value));
-            this.updateInputStatus(wrapper, !valid?.(value));
-            this.setAttribute(propertyName, value, container);
-        });
-        status.classList.add("label-field-view-status", "ql-hidden");
-        message && (status.innerText = message);
-        wrapper.appendChild(input);
-        wrapper.appendChild(label);
-        container.appendChild(wrapper);
-        valid && container.appendChild(status);
-        return container;
-    }
-
-    createList(child: Child, dropText?: HTMLSpanElement) {
-        const { options, propertyName } = child;
-        if (!options?.length) return null;
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const container = ownerDocument.createElement("ul");
-        for (const option of options) {
-            const list = ownerDocument.createElement("li");
-            list.innerText = option;
-            container.appendChild(list);
-        }
-        container.classList.add("ql-table-dropdown-list", "ql-hidden");
-        container.addEventListener("click", e => {
-            const value = (e.target as HTMLLIElement).innerText;
-            if (dropText) {
-                dropText.innerText = value;
-            }
-            this.toggleBorderDisabled(value);
-            this.setAttribute(propertyName, value);
-        });
-        return container;
-    }
-
-    createProperty(property: Properties) {
-        const { content, children } = property;
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const useLanguage = this.getUseLanguage();
-        const container = ownerDocument.createElement("div");
-        const label = ownerDocument.createElement("label");
-        label.innerText = content;
-        label.classList.add("ql-table-dropdown-label");
-        container.classList.add("properties-form-row");
-        if (children.length === 1) {
-            container.classList.add("properties-form-row-full");
-        }
-        container.appendChild(label);
-        for (const child of children) {
-            const node = this.createPropertyChild(child);
-            node && container.appendChild(node);
-            if (node && content === useLanguage("border")) {
-                this.borderForm.push(node);
-            }
-        }
-        return container;
-    }
-
-    createPropertyChild(child: Child) {
-        const { category, value } = child;
-        switch (category) {
-            case "dropdown":
-                const { dropdown, dropText } = this.createDropdown(value!);
-                const list = this.createList(child, dropText);
-                dropdown.appendChild(list!);
-                dropdown.addEventListener("click", () => {
-                    this.toggleHidden(list!);
-                    this.updateSelectedStatus(dropdown, dropText.innerText, "dropdown");
-                });
-                return dropdown;
-            case "color":
-                return this.createColorContainer(child);
-            case "menus":
-                return this.createCheckBtns(child);
-            case "input":
-                return this.createInput(child);
-            default:
-                break;
-        }
-    }
-
-    createPropertiesForm(options: Options) {
-        const useLanguage = this.getUseLanguage();
-        const { title, properties } = getProperties(options, useLanguage);
-        const ownerDocument = this.tableMenus.quill.root.ownerDocument;
-        const container = ownerDocument.createElement("div");
-        container.classList.add("ql-table-properties-form");
-        const header = ownerDocument.createElement("h2");
-        const actions = this.createActionBtns((e: MouseEvent) => {
-            const target = (e.target as HTMLElement).closest("button");
-            const label = target?.getAttribute("label") ?? "";
-            target && this.checkBtnsAction(label);
-        }, true);
-        header.innerText = title;
-        header.classList.add("properties-form-header");
-        container.appendChild(header);
-        for (const property of properties) {
-            const node = this.createProperty(property);
-            container.appendChild(node);
-        }
-        container.appendChild(actions);
-        this.setBorderDisabled();
-        this.tableMenus.quill.container.appendChild(container);
-        this.updatePropertiesForm(container, options.type);
-        this.setSaveButton(actions);
-        container.addEventListener("click", (e: MouseEvent) => {
-            const target = e.target as HTMLElement;
-            this.hiddenSelectList(target);
-        });
-        return container;
-    }
-
-    getCellStyle(td: Element, attrs: Props) {
-        const style = (td.getAttribute("style") || "")
-            .split(";")
-            .filter((value: string) => value.trim())
-            .reduce((style: Props, value: string) => {
-                const arr = value.split(":");
-                return { ...style, [arr[0].trim()]: arr[1].trim() };
-            }, {});
-        Object.assign(style, attrs);
-        return Object.keys(style).reduce((value: string, key: string) => {
-            return (value += `${key}: ${style[key]}; `);
-        }, "");
-    }
-
-    getColorClosest(container: HTMLElement) {
-        return getClosestElement(container, ".ql-table-color-container");
-    }
-
-    getDiffProperties() {
-        const change = this.attrs;
-        const old = this.options.attribute;
-        return Object.keys(change).reduce((attrs: Props, key) => {
-            if (change[key] !== old[key] || key.startsWith("border")) {
-                attrs[key] = isDimensions(key) ? addDimensionsUnit(change[key]) : change[key];
-            }
-            return attrs;
-        }, {});
-    }
-
-    getUseLanguage() {
-        const { language } = this.tableMenus.tableBetter;
-        const useLanguage = language.useLanguage.bind(language);
-        return useLanguage;
-    }
-
-    hiddenSelectList(element: HTMLElement) {
-        const listClassName = ".ql-table-dropdown-properties";
-        const colorClassName = ".color-picker";
-        const list = this.form.querySelectorAll(".ql-table-dropdown-list");
-        const colorPicker = this.form.querySelectorAll(".color-picker-select");
-        for (const node of [...Array.from(list), ...Array.from(colorPicker)]) {
-            if (
-                node.closest(listClassName)?.isEqualNode(element.closest(listClassName)) ||
-                node.closest(colorClassName)?.isEqualNode(element.closest(colorClassName))
-            ) {
-                continue;
-            }
-            node.classList.add("ql-hidden");
-        }
-    }
-
-    removePropertiesForm() {
-        this.form.remove();
-        this.borderForm = [];
-    }
-
-    saveAction(type: string) {
-        switch (type) {
-            case "table":
-                this.saveTableAction();
-                break;
-            default:
-                this.saveCellAction();
-                break;
-        }
-    }
-
-    saveCellAction() {
-        const { selectedTds } = this.tableMenus.tableBetter.cellSelection;
-        const { quill, table } = this.tableMenus;
-        const colgroup = (Quill.find(table as Node) as TableContainer)?.colgroup();
-        const attrs = this.getDiffProperties();
-        const width = parseFloat(attrs["width"]);
-        const align = attrs["text-align"];
-        align && delete attrs["text-align"];
-        const newSelectedTds = [];
-        if (colgroup && width) {
-            delete attrs["width"];
-            const { computeBounds } = this.tableMenus.getSelectedTdsInfo();
-            const cols = getComputeSelectedCols(computeBounds, table as Element, quill.container);
-            for (const col of cols) {
-                col.setAttribute("width", `${width}`);
-            }
-        }
-        for (const td of selectedTds) {
-            const tdBlot = Quill.find(td) as TableCell;
-            const blotName = tdBlot.statics.blotName;
-            const formats = tdBlot.formats()[blotName];
-            const style = this.getCellStyle(td, attrs);
-            if (align) {
-                const _align = align === "left" ? "" : align;
-                tdBlot.children.forEach((child: TableCellBlock | ListContainer | TableHeader) => {
-                    if (child.statics.blotName === ListContainer.blotName) {
-                        child.children.forEach((ch: TableList) => {
-                            ch.format && ch.format("align", _align);
-                        });
-                    } else {
-                        child.format("align", _align);
-                    }
-                });
-            }
-            const parent = tdBlot.replaceWith(blotName, { ...formats, style }) as TableCell;
-            newSelectedTds.push(parent.domNode);
-        }
-        this.tableMenus.tableBetter.cellSelection.setSelectedTds(newSelectedTds);
-    }
-
-    saveTableAction() {
-        const { table, tableBetter } = this.tableMenus;
-        const temporary = (Quill.find(table as Node) as TableContainer).temporary()?.domNode;
-        const td = table?.querySelector("td");
-        const attrs = this.getDiffProperties();
-        const align = attrs["align"];
-        delete attrs["align"];
-        switch (align) {
-            case "center":
-                Object.assign(attrs, { margin: "0 auto" });
-                break;
-            case "left":
-                Object.assign(attrs, { margin: "" });
-                break;
-            case "right":
-                Object.assign(attrs, { "margin-left": "auto", "margin-right": "" });
-                break;
-            default:
-                break;
-        }
-        const element = temporary || table;
-        setElementProperty(element!, attrs);
-        tableBetter.cellSelection.setSelected(td as Element);
-    }
-
-    setAttribute(propertyName: string, value: string, container?: HTMLElement) {
-        this.attrs[propertyName] = value;
-        if (propertyName.includes("-color") && container) {
-            this.updateSelectColor(this.getColorClosest(container)!, value);
-        }
-    }
-
-    setBorderDisabled() {
-        const [borderContainer] = this.borderForm;
-        // @ts-ignore
-        const borderStyle = borderContainer.querySelector(".ql-table-dropdown-text").innerText;
-        this.toggleBorderDisabled(borderStyle);
-    }
-
-    setSaveButton(container: HTMLDivElement) {
-        const saveButton: HTMLButtonElement | null = container.querySelector('button[label="save"]');
-        this.saveButton = saveButton;
-    }
-
-    setSaveButtonDisabled(disabled: boolean) {
-        if (!this.saveButton) return;
-        if (disabled) {
-            this.saveButton.setAttribute("disabled", "true");
-        } else {
-            this.saveButton.removeAttribute("disabled");
-        }
-    }
-
-    switchButton(container: HTMLDivElement, target: HTMLSpanElement) {
-        const children = container.querySelectorAll("span.ql-table-tooltip-hover");
-        for (const child of Array.from(children)) {
-            child.classList.remove("ql-table-btns-checked");
-        }
-        target.classList.add("ql-table-btns-checked");
-    }
-
-    switchHidden(container: HTMLElement, valid: boolean) {
-        if (!valid) {
-            container.classList.remove("ql-hidden");
-        } else {
-            container.classList.add("ql-hidden");
-        }
-    }
-
-    toggleBorderDisabled(value: string) {
-        const [, colorContainer, widthContainer] = this.borderForm;
-        if (value === "none" || !value) {
-            this.attrs["border-color"] = "";
-            this.attrs["border-width"] = "";
-            this.updateSelectColor(colorContainer, "");
-            this.updateInputValue(widthContainer, "");
-            colorContainer.classList.add("ql-table-disabled");
-            widthContainer.classList.add("ql-table-disabled");
-        } else {
-            colorContainer.classList.remove("ql-table-disabled");
-            widthContainer.classList.remove("ql-table-disabled");
-        }
-    }
-
-    toggleHidden(container: HTMLElement) {
-        container.classList.toggle("ql-hidden");
-    }
-
-    updateInputValue(element: Element, value: string) {
-        const input: HTMLInputElement | null = element.querySelector(".property-input");
-        if (input) {
-            input.value = value;
-        }
-    }
-
-    updateInputStatus(container: HTMLElement, status: boolean, isColor?: boolean) {
-        const closestContainer = isColor
-            ? this.getColorClosest(container)
-            : getClosestElement(container, ".label-field-view");
-        const wrapper = closestContainer?.querySelector(".label-field-view-input-wrapper");
-        if (status) {
-            wrapper?.classList.add("label-field-view-error");
-            this.setSaveButtonDisabled(true);
-        } else {
-            wrapper?.classList.remove("label-field-view-error");
-            const wrappers = this.form.querySelectorAll(".label-field-view-error");
-            if (!wrappers.length) this.setSaveButtonDisabled(false);
-        }
-    }
-
-    updatePropertiesForm(container: HTMLElement, type: string) {
-        const target = type === "table" ? this.tableMenus.table! : this.tableMenus.getSelectedTdsInfo().leftTd;
-
-        computePosition(target, container, {
-            middleware: [offset(4), flip(), shift({ padding: 10 })],
-            placement: "bottom",
-            strategy: "fixed"
-        }).then(({ x, y }) => {
-            setElementProperty(container, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
-        });
-    }
-
-    updateSelectColor(element: Element, value: string) {
-        const input: HTMLInputElement | null = element.querySelector(".property-input");
-
-        if (input) {
-            input.value = value;
-        }
-    }
-
-    updateSelectedStatus(container: HTMLDivElement, value: string, type: string) {
-        const selectors = type === "color" ? ".color-list" : ".ql-table-dropdown-list";
-        const list = container.querySelector(selectors);
-        if (!list) return;
-        const lists = Array.from(list.querySelectorAll("li"));
-        for (const list of lists) {
-            list.classList.remove(`ql-table-${type}-selected`);
-        }
-        const selected = lists.find(li => {
-            const data = type === "color" ? li.getAttribute("data-color") : li.innerText;
-            return data === value;
-        });
-        selected && selected.classList.add(`ql-table-${type}-selected`);
-    }
-}
-
-export default TablePropertiesForm;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/toolbar-table.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/toolbar-table.ts
deleted file mode 100644
index 2993dbf743..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/toolbar-table.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-// @ts-nocheck
-import type { InlineBlot } from "parchment";
-import QuillInline from "quill/blots/inline";
-import type { InsertTableHandler } from "../types";
-
-const Inline = QuillInline as typeof InlineBlot;
-const SUM = 10;
-
-class ToolbarTable extends Inline {}
-
-class TableSelect {
-    computeChildren: Element[];
-    root: HTMLDivElement;
-    constructor() {
-        this.computeChildren = [];
-        this.root = this.createContainer();
-    }
-
-    clearSelected(children: NodeListOf<Element> | Element[]) {
-        for (const child of children) {
-            child.classList && child.classList.remove("ql-cell-selected");
-        }
-        this.computeChildren = [];
-        this.root && this.setLabelContent(this.root.lastElementChild, null);
-    }
-
-    createContainer() {
-        const container = document.createElement("div");
-        const list = document.createElement("div");
-        const label = document.createElement("div");
-        const fragment = document.createDocumentFragment();
-        for (let row = 1; row <= SUM; row++) {
-            for (let column = 1; column <= SUM; column++) {
-                const child = document.createElement("span");
-                child.setAttribute("row", `${row}`);
-                child.setAttribute("column", `${column}`);
-                fragment.appendChild(child);
-            }
-        }
-        label.innerHTML = "0 × 0";
-        container.classList.add("ql-table-select-container", "ql-hidden");
-        list.classList.add("ql-table-select-list");
-        label.classList.add("ql-table-select-label");
-        list.appendChild(fragment);
-        container.appendChild(list);
-        container.appendChild(label);
-        container.addEventListener("mousemove", e => this.handleMouseMove(e, container));
-        return container;
-    }
-
-    getComputeChildren(children: HTMLCollection, e: MouseEvent): Element[] {
-        const computeChildren = [];
-        const { clientX, clientY } = e;
-        for (const child of children) {
-            const { left, top } = child.getBoundingClientRect();
-            if (clientX >= left && clientY >= top) {
-                computeChildren.push(child);
-            }
-        }
-        return computeChildren;
-    }
-
-    getSelectAttrs(element: Element) {
-        const row = ~~element.getAttribute("row");
-        const column = ~~element.getAttribute("column");
-        return [row, column];
-    }
-
-    handleClick(e: MouseEvent, insertTable: InsertTableHandler) {
-        this.toggle(this.root);
-        const span = (e.target as Element).closest("span[row]");
-        if (!span) {
-            // Click between two spans
-            const child = this.computeChildren[this.computeChildren.length - 1];
-            if (child) this.insertTable(child, insertTable);
-            return;
-        }
-        this.insertTable(span, insertTable);
-    }
-
-    handleMouseMove(e: MouseEvent, container: Element) {
-        const children = container.firstElementChild.children;
-        this.clearSelected(this.computeChildren);
-        const computeChildren = this.getComputeChildren(children, e);
-        for (const child of computeChildren) {
-            child.classList && child.classList.add("ql-cell-selected");
-        }
-        this.computeChildren = computeChildren;
-        this.setLabelContent(container.lastElementChild, computeChildren[computeChildren.length - 1]);
-    }
-
-    hide(element: Element) {
-        this.clearSelected(this.computeChildren);
-        element && element.classList.add("ql-hidden");
-    }
-
-    insertTable(child: Element, insertTable: InsertTableHandler) {
-        const [row, column] = this.getSelectAttrs(child);
-        insertTable(row, column);
-        this.hide(this.root);
-    }
-
-    setLabelContent(label: Element, child: Element) {
-        if (!child) {
-            label.innerHTML = "0 × 0";
-        } else {
-            const [row, column] = this.getSelectAttrs(child);
-            label.innerHTML = `${row} × ${column}`;
-        }
-    }
-
-    show(element: Element) {
-        this.clearSelected(this.computeChildren);
-        element && element.classList.remove("ql-hidden");
-    }
-
-    toggle(element: Element) {
-        this.clearSelected(this.computeChildren);
-        element && element.classList.toggle("ql-hidden");
-    }
-}
-
-export { ToolbarTable as default, TableSelect };
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/clipboard-matchers.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/clipboard-matchers.ts
deleted file mode 100644
index eb850f4049..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/clipboard-matchers.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-// @ts-nocheck
-import merge from "lodash.merge";
-import Delta from "quill-delta";
-import { TableCell } from "../formats/table";
-import type { Props } from "../types";
-import { filterWordStyle } from "./";
-
-const TABLE_ATTRIBUTE = ["border", "cellspacing", "style", "class"];
-
-function applyFormat(delta: Delta, format: Props | string, value?: any): Delta {
-    if (typeof format === "object") {
-        return Object.keys(format).reduce((newDelta, key) => {
-            return applyFormat(newDelta, key, format[key]);
-        }, delta);
-    }
-    return delta.reduce((newDelta, op) => {
-        if (op.attributes && op.attributes[format]) {
-            return newDelta.push(op);
-        }
-        return newDelta.insert(op.insert, merge({}, { [format]: value }, op.attributes));
-    }, new Delta());
-}
-
-function matchTable(node: HTMLTableRowElement, delta: Delta) {
-    const table = (node.parentNode as HTMLElement).tagName === "TABLE" ? node.parentNode : node.parentNode.parentNode;
-    const rows = Array.from(table.querySelectorAll("tr"));
-    const row = rows.indexOf(node) + 1;
-    if (!node.innerHTML.replace(/\s/g, "")) return new Delta();
-    return applyFormat(delta, "table-cell", row);
-}
-
-function matchTableCell(node: HTMLTableCellElement, delta: Delta) {
-    const table =
-        (node.parentNode.parentNode as HTMLElement).tagName === "TABLE"
-            ? node.parentNode.parentNode
-            : node.parentNode.parentNode.parentNode;
-    const rows = Array.from(table.querySelectorAll("tr"));
-    const tagName = node.tagName;
-    const cells = Array.from(node.parentNode.querySelectorAll(tagName));
-    const row = node.getAttribute("data-row") || rows.indexOf(node.parentNode as HTMLTableRowElement) + 1;
-    const cellId = node?.firstElementChild?.getAttribute("data-cell") || cells.indexOf(node) + 1;
-    if (!delta.length()) delta.insert("\n", { "table-cell": { "data-row": row } });
-    delta.ops.forEach(op => {
-        if (op.attributes && op.attributes["table-cell"]) {
-            // @ts-ignore
-            op.attributes["table-cell"] = { ...op.attributes["table-cell"], "data-row": row };
-        }
-    });
-    return applyFormat(matchTableTh(node, delta, row), "table-cell-block", cellId);
-}
-
-function matchTableCol(node: HTMLElement, delta: Delta) {
-    let span = ~~node.getAttribute("span") || 1;
-    const width = node.getAttribute("width");
-    const newDelta = new Delta();
-    while (span > 1) {
-        newDelta.insert("\n", { "table-col": { width } });
-        span--;
-    }
-    return newDelta.concat(delta);
-}
-
-function matchTableTemporary(node: HTMLElement, delta: Delta) {
-    const formats = TABLE_ATTRIBUTE.reduce((formats: Props, attr) => {
-        if (node.hasAttribute(attr)) {
-            if (attr === "class") {
-                formats["data-class"] = node.getAttribute(attr);
-            } else {
-                formats[attr] = filterWordStyle(node.getAttribute(attr));
-            }
-        }
-        return formats;
-    }, {});
-    return new Delta().insert("\n", { "table-temporary": formats }).concat(delta);
-}
-
-function matchTableTh(node: HTMLTableCellElement, delta: Delta, row: string | number) {
-    const formats = TableCell.formats(node);
-    if (node.tagName === "TH") {
-        delta.ops.forEach(op => {
-            if (typeof op.insert === "string" && !op.insert.endsWith("\n")) {
-                op.insert += "\n";
-            }
-        });
-        return applyFormat(delta, "table-cell", { ...formats, "data-row": row });
-    }
-    return delta;
-}
-
-export { applyFormat, matchTable, matchTableCell, matchTableCol, matchTableTemporary };
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/index.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/index.ts
deleted file mode 100644
index e8010713ff..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/index.ts
+++ /dev/null
@@ -1,383 +0,0 @@
-// @ts-nocheck
-import Quill from "quill";
-import { COLORS, DEVIATION } from "../config";
-import TableHeader from "../formats/header";
-import TableList, { ListContainer } from "../formats/list";
-import { TableCell, TableCellBlock, TableCol } from "../formats/table";
-import type { CorrectBound, Props, TableCellChildren, TableContainer } from "../types";
-
-function addDimensionsUnit(value: string) {
-    if (!value) return value;
-    const unit = value.slice(-2); // 'px' or 'em'
-    if (unit !== "px" && unit !== "em") {
-        return value + "px";
-    }
-    return value;
-}
-
-function convertUnitToInteger(withUnit: string) {
-    if (typeof withUnit !== "string" || !withUnit) return withUnit;
-    const unit = withUnit.slice(-2); // 'px' or 'em'
-    const numberPart = withUnit.slice(0, -2);
-    const integerPart = Math.round(parseFloat(numberPart));
-    return `${integerPart}${unit}`;
-}
-
-function createTooltip(content: string) {
-    const element = document.createElement("div");
-    element.innerText = content;
-    element.classList.add("ql-table-tooltip", "ql-hidden");
-    return element;
-}
-
-function debounce(cb: Function, delay: number) {
-    let timer: NodeJS.Timeout = null;
-    return function () {
-        let context = this;
-        let args = arguments;
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(function () {
-            cb.apply(context, args);
-        }, delay);
-    };
-}
-
-function filterWordStyle(s: string) {
-    return s.replace(/mso.*?;/g, "");
-}
-
-function getAlign(cellBlot: TableCell) {
-    const DEFAULT = "left";
-    let align = null;
-    const blocks = cellBlot.descendants(TableCellBlock);
-    const lists = cellBlot.descendants(TableList);
-    const headers = cellBlot.descendants(TableHeader);
-    function getChildAlign(child: TableCellChildren): string {
-        for (const name of child.domNode.classList) {
-            if (/ql-align-/.test(name)) {
-                return name.split("ql-align-")[1];
-            }
-        }
-        return DEFAULT;
-    }
-    function isSameValue(prev: string | null, cur: string) {
-        if (prev == null) return true;
-        return prev === cur;
-    }
-    for (const child of [...blocks, ...lists, ...headers]) {
-        const _align = getChildAlign(child);
-        if (isSameValue(align, _align)) {
-            align = _align;
-        } else {
-            return DEFAULT;
-        }
-    }
-    return align != null ? align : DEFAULT;
-}
-
-function getCellChildBlot(cellBlot: TableCell) {
-    // @ts-expect-error
-    const [block] = cellBlot.descendant(TableCellBlock);
-    // @ts-expect-error
-    const [list] = cellBlot.descendant(ListContainer);
-    // @ts-expect-error
-    const [header] = cellBlot.descendant(TableHeader);
-    return block || list || header;
-}
-
-function getCellFormats(cellBlot: TableCell): [Props, string] {
-    const formats = TableCell.formats(cellBlot.domNode);
-    const childBlot = getCellChildBlot(cellBlot);
-    if (!childBlot) {
-        const row = formats["data-row"].split("-")[1];
-        return [formats, `cell-${row}`];
-    } else {
-        const _formats = childBlot.formats()[childBlot.statics.blotName];
-        const cellId = getCellId(_formats);
-        return [formats, cellId];
-    }
-}
-
-function getCellId(formats: string | Props) {
-    return formats instanceof Object ? formats["cellId"] : formats;
-}
-
-function getClosestElement(element: HTMLElement, selector: string) {
-    return element.closest(selector);
-}
-
-function getComputeBounds(startCorrectBounds: CorrectBound, endCorrectBounds: CorrectBound) {
-    const left = Math.min(startCorrectBounds.left, endCorrectBounds.left);
-    const right = Math.max(startCorrectBounds.right, endCorrectBounds.right);
-    const top = Math.min(startCorrectBounds.top, endCorrectBounds.top);
-    const bottom = Math.max(startCorrectBounds.bottom, endCorrectBounds.bottom);
-    return { left, right, top, bottom };
-}
-
-function getComputeSelectedCols(computeBounds: CorrectBound, table: Element, container: Element) {
-    const tableParchment = Quill.find(table) as TableContainer;
-    const cols = tableParchment.descendants(TableCol);
-    let correctLeft = 0;
-    return cols.reduce((selectedCols: Element[], col: TableCol) => {
-        const { left, width } = getCorrectBounds(col.domNode, container);
-        correctLeft = correctLeft ? correctLeft : left;
-        if (correctLeft + DEVIATION >= computeBounds.left && correctLeft - DEVIATION + width <= computeBounds.right) {
-            selectedCols.push(col.domNode);
-        }
-        correctLeft += width;
-        return selectedCols;
-    }, []);
-}
-
-function getComputeSelectedTds(
-    computeBounds: CorrectBound,
-    table: Element,
-    container: Element,
-    type?: string
-): Element[] {
-    const tableParchment = Quill.find(table) as TableContainer;
-    const tableCells = tableParchment.descendants(TableCell);
-    return tableCells.reduce((selectedTds: Element[], tableCell: TableCell) => {
-        const { left, top, width, height } = getCorrectBounds(tableCell.domNode, container);
-        switch (type) {
-            case "column":
-                if (left + DEVIATION >= computeBounds.left && left - DEVIATION + width <= computeBounds.right) {
-                    selectedTds.push(tableCell.domNode);
-                } else if (left + DEVIATION < computeBounds.right && computeBounds.right < left - DEVIATION + width) {
-                    selectedTds.push(tableCell.domNode);
-                } else if (computeBounds.left > left + DEVIATION && computeBounds.left < left - DEVIATION + width) {
-                    selectedTds.push(tableCell.domNode);
-                }
-                break;
-            case "row":
-                break;
-            default:
-                if (
-                    left + DEVIATION >= computeBounds.left &&
-                    left - DEVIATION + width <= computeBounds.right &&
-                    top + DEVIATION >= computeBounds.top &&
-                    top - DEVIATION + height <= computeBounds.bottom
-                ) {
-                    selectedTds.push(tableCell.domNode);
-                }
-                break;
-        }
-        return selectedTds;
-    }, []);
-}
-
-function getCopyTd(html: string) {
-    return html
-        .replace(/data-[a-z]+="[^"]*"/g, "")
-        .replace(/class="[^"]*"/g, collapse => {
-            return collapse
-                .replace("ql-cell-selected", "")
-                .replace("ql-cell-focused", "")
-                .replace("ql-table-block", "");
-        })
-        .replace(/class="\s*"/g, "");
-}
-
-function getCorrectBounds(target: Element, container: Element) {
-    const targetBounds = target.getBoundingClientRect();
-    const containerBounds = container.getBoundingClientRect();
-    const left = targetBounds.left - containerBounds.left - container.scrollLeft;
-    const top = targetBounds.top - containerBounds.top - container.scrollTop;
-    const width = targetBounds.width;
-    const height = targetBounds.height;
-    return {
-        left,
-        top,
-        width,
-        height,
-        right: left + width,
-        bottom: top + height
-    };
-}
-
-function getCorrectCellBlot(blot: TableCell | TableCellChildren): TableCell | null {
-    while (blot) {
-        if (blot.statics.blotName === TableCell.blotName) {
-            // @ts-ignore
-            return blot;
-        }
-        // @ts-expect-error
-        blot = blot.parent;
-    }
-    return null;
-}
-
-function getElementStyle(node: HTMLElement, rules: string[]) {
-    const computedStyle = getComputedStyle(node);
-    const style = node.style;
-    return rules.reduce((styles: Props, rule: string) => {
-        styles[rule] = rgbToHex(style.getPropertyValue(rule) || computedStyle.getPropertyValue(rule));
-        return styles;
-    }, {});
-}
-
-function isDimensions(key: string) {
-    if (key.endsWith("width") || key.endsWith("height")) return true;
-    return false;
-}
-
-function isSimpleColor(color: string) {
-    for (const col of COLORS) {
-        if (col === color) return true;
-    }
-    return false;
-}
-
-function isValidColor(color: string) {
-    if (!color) return true;
-    const hexRegex = /^#([A-Fa-f0-9]{3,6})$/;
-    const rgbRegex = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
-    // const rgbaRegex = /^rgba\((\d{1,3}), (\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
-    if (hexRegex.test(color)) {
-        return true;
-    } else if (rgbRegex.test(color)) {
-        return true;
-    }
-    return isSimpleColor(color);
-}
-
-function isValidDimensions(value: string) {
-    if (!value) return true;
-    const unit = value.slice(-2); // 'px' or 'em'
-    if (unit !== "px" && unit !== "em") {
-        return !/[a-z]/.test(unit) && !isNaN(parseFloat(unit));
-    }
-    return true;
-}
-
-function removeElementProperty(node: HTMLElement, properties: string[]) {
-    for (const property of properties) {
-        node.style.removeProperty(property);
-    }
-}
-
-function rgbToHex(value: string) {
-    if (value.startsWith("rgba(")) return rgbaToHex(value);
-    if (!value.startsWith("rgb(")) return value;
-    value = value.replace(/^[^\d]+/, "").replace(/[^\d]+$/, "");
-    const hex = value
-        .split(",")
-        .map(component => `00${parseInt(component, 10).toString(16)}`.slice(-2))
-        .join("");
-    return `#${hex}`;
-}
-
-function rgbaToHex(value: string) {
-    value = value.replace(/^[^\d]+/, "").replace(/[^\d]+$/, "");
-    const r = Math.round(+value[0]);
-    const g = Math.round(+value[1]);
-    const b = Math.round(+value[2]);
-    const a = Math.round(+value[3] * 255)
-        .toString(16)
-        .toUpperCase()
-        .padStart(2, "0");
-    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + a;
-}
-
-function setElementAttribute(node: Element, attributes: Props) {
-    for (const attribute in attributes) {
-        node.setAttribute(attribute, attributes[attribute]);
-    }
-}
-
-function setElementProperty(node: HTMLElement, properties: Props) {
-    const style = node.style;
-    if (!style) {
-        node.setAttribute("style", properties.toString());
-        return;
-    }
-    for (const propertyName in properties) {
-        style.setProperty(propertyName, properties[propertyName]);
-    }
-}
-
-function throttle(cb: Function, delay: number) {
-    let last = 0;
-    return function () {
-        let context = this;
-        let args = arguments;
-        let now = +new Date();
-        if (now - last >= delay) {
-            last = now;
-            cb.apply(context, args);
-        }
-    };
-}
-
-function throttleStrong(cb: Function, delay: number) {
-    let last = 0,
-        timer: NodeJS.Timeout = null;
-    return function () {
-        let context = this;
-        let args = arguments;
-        let now = +new Date();
-        if (now - last < delay) {
-            clearTimeout(timer);
-            timer = setTimeout(function () {
-                last = now;
-                cb.apply(context, args);
-            }, delay);
-        } else {
-            last = now;
-            cb.apply(context, args);
-        }
-    };
-}
-
-function updateTableWidth(table: HTMLElement, tableBounds: CorrectBound, change: number) {
-    const tableBlot = Quill.find(table) as TableContainer;
-    if (!tableBlot) return;
-    const colgroup = tableBlot.colgroup();
-    const temporary = tableBlot.temporary();
-    if (colgroup) {
-        let _width = 0;
-        const cols = colgroup.domNode.querySelectorAll("col");
-        for (const col of cols) {
-            const width = ~~col.getAttribute("width");
-            _width += width;
-        }
-        setElementProperty(temporary.domNode, {
-            width: `${_width}px`
-        });
-    } else {
-        setElementProperty(temporary.domNode, {
-            width: `${~~(tableBounds.width + change)}px`
-        });
-    }
-}
-
-export {
-    addDimensionsUnit,
-    convertUnitToInteger,
-    createTooltip,
-    debounce,
-    filterWordStyle,
-    getAlign,
-    getCellChildBlot,
-    getCellFormats,
-    getCellId,
-    getClosestElement,
-    getComputeBounds,
-    getComputeSelectedCols,
-    getComputeSelectedTds,
-    getCopyTd,
-    getCorrectBounds,
-    getCorrectCellBlot,
-    getElementStyle,
-    isDimensions,
-    isValidColor,
-    isValidDimensions,
-    removeElementProperty,
-    rgbaToHex,
-    rgbToHex,
-    setElementAttribute,
-    setElementProperty,
-    throttle,
-    throttleStrong,
-    updateTableWidth
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts
deleted file mode 100644
index c6a8bf24f7..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import Quill from "quill";
-import QuillResize from "quill-resize-module";
-import { ACTION_DISPATCHER } from "../helpers";
-import MxResizeToolbar from "../modules/resizeToolbar";
-import MxResize from "../modules/resize";
-
-export const RESIZE_MODULE_CONFIG = {
-    modules: ["DisplaySize", MxResizeToolbar, MxResize, "Keyboard"],
-    tools: [
-        {
-            text: "Edit Image",
-            className: "icons icon-Image",
-            verify(activeEle: HTMLElement) {
-                return activeEle && activeEle.tagName === "IMG";
-            },
-            handler(
-                this: { quill: Quill; resizer: typeof QuillResize },
-                _evt: MouseEvent,
-                _button: HTMLElement,
-                activeEle: HTMLImageElement
-            ) {
-                const imageInfo = {
-                    alt: activeEle.alt || "",
-                    src: activeEle.src,
-                    width: activeEle.width,
-                    height: activeEle.height,
-                    type: "image"
-                };
-                this.resizer.handleEdit();
-                this.quill.emitter.emit(ACTION_DISPATCHER, imageInfo);
-            }
-        },
-        {
-            text: "Edit Video",
-            className: "icons icon-Film",
-            verify(activeEle: HTMLElement) {
-                return activeEle && activeEle.tagName === "IFRAME" && activeEle.classList.contains("ql-video");
-            },
-            handler(
-                this: typeof QuillResize.Modules.Base,
-                _evt: MouseEvent,
-                _button: HTMLElement,
-                activeEle: HTMLIFrameElement
-            ) {
-                const videoInfo = {
-                    src: activeEle.src,
-                    width: activeEle.width,
-                    height: activeEle.height,
-                    type: "video"
-                };
-                this.resizer.handleEdit();
-                this.quill.emitter.emit(ACTION_DISPATCHER, videoInfo);
-            }
-        }
-    ],
-    parchment: {
-        image: {
-            attribute: ["width", "height"]
-        },
-        video: {
-            attribute: ["width", "height"]
-        }
-    }
-};
-
-export function getResizeModuleConfig(isReadOnly?: boolean): Record<string, unknown> | undefined {
-    if (isReadOnly) {
-        return {};
-    }
-    return { resize: RESIZE_MODULE_CONFIG };
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/softBreak.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/softBreak.ts
deleted file mode 100644
index c37942ef43..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/softBreak.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// import { BlockEmbed } from "quill/blots/block";
-import { EmbedBlot } from "parchment";
-/**
- * custom video link handler, allowing width and height config
- */
-class SoftBreak extends EmbedBlot {
-    static create(_value: unknown): Element {
-        const node = super.create() as HTMLElement;
-        return node;
-    }
-}
-
-// SoftBreak.scope = Scope.INLINE_BLOT;
-SoftBreak.blotName = "softbreak";
-SoftBreak.tagName = "BR";
-
-export default SoftBreak;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.scss b/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.scss
deleted file mode 100644
index 1f7e0a8e3d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.widget-rich-text {
-    .ql-editor .ql-video {
-        display: inline-block;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.ts
deleted file mode 100644
index db83a39b1f..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/video.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Scope } from "parchment";
-import Video from "quill/formats/video";
-import { videoConfigType } from "../formats";
-import { matchPattern } from "../videoUrlPattern";
-import "./video.scss";
-
-/**
- * custom video link handler, allowing width and height config
- */
-class CustomVideo extends Video {
-    html(): string {
-        return this.domNode.outerHTML;
-    }
-
-    length(): number {
-        // asume that video has child to be able to delete embedded video
-        return 2;
-    }
-
-    static create(value: unknown): Element {
-        if ((value as videoConfigType)?.src !== undefined) {
-            const videoConfig = value as videoConfigType;
-            const urlPatterns = matchPattern(videoConfig.src);
-            const node = super.create(urlPatterns?.url || videoConfig.src) as HTMLElement;
-            return node;
-        } else {
-            // @ts-expect-error type mismatch expected
-            return super.create(value);
-        }
-    }
-}
-
-CustomVideo.scope = Scope.INLINE_BLOT;
-
-export default CustomVideo;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/whiteSpace.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/whiteSpace.ts
deleted file mode 100644
index 5726c3ebeb..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/whiteSpace.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Scope, StyleAttributor } from "parchment";
-
-const config = {
-    scope: Scope.INLINE,
-    whitelist: [
-        "normal",
-        "pre",
-        "pre-wrap",
-        "pre-line",
-        "nowrap",
-        "wrap",
-        "break-spaces",
-        "collapse",
-        "inherit",
-        "initial",
-        "revert",
-        "unset"
-    ]
-};
-
-export class WhiteSpaceStyleAttributor extends StyleAttributor {}
-export const WhiteSpaceStyle = new WhiteSpaceStyleAttributor("whitespace", "white-space", config);
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts b/packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts
index 7f60084c39..c7ed30f02d 100644
--- a/packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts
+++ b/packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts
@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { RichTextContainerProps } from "typings/RichTextProps";
 
+export const INDENT_MAGIC_NUMBER = 3;
 export const ACTION_DISPATCHER = "ACTION_DISPATCHER";
 
 function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
@@ -32,3 +33,44 @@ export function constructWrapperStyle(props: RichTextContainerProps): CSSPropert
 
     return wrapperStyle;
 }
+
+export function normalizeStyleAndClassAttribute(doc: Document, styleDataFormat: "inline" | "class"): void {
+    if (styleDataFormat === "class") {
+        const allIndentLeftElements = doc.querySelectorAll("[style*=padding-left]");
+        const allIndentRightElements = doc.querySelectorAll("[style*=padding-right]");
+        allIndentLeftElements.forEach(element => {
+            const paddingLeft = (element as HTMLElement).style.paddingLeft || "0em";
+            const indentValue = parseInt(paddingLeft.replace("px", "").replace("em", ""), 10);
+            if (indentValue) {
+                const indentClassValue = Math.round(indentValue / INDENT_MAGIC_NUMBER);
+                element.classList.add(`ql-indent-${indentClassValue}`);
+                (element as HTMLElement).style.removeProperty("padding-left");
+            }
+        });
+        allIndentRightElements.forEach(element => {
+            const paddingRight = (element as HTMLElement).style.paddingRight || "0em";
+            const indentValue = parseInt(paddingRight.replace("px", "").replace("em", ""), 10);
+            if (indentValue) {
+                const indentClassValue = Math.round(indentValue / INDENT_MAGIC_NUMBER);
+                element.classList.add(`ql-indent-${indentClassValue}`);
+                (element as HTMLElement).style.removeProperty("padding-right");
+            }
+        });
+    } else if (styleDataFormat === "inline") {
+        const allIndentsElements = doc.querySelectorAll("[class*=ql-indent-]");
+        allIndentsElements.forEach(element => {
+            const indentClass = Array.from(element.classList).find(className => className.startsWith("ql-indent-"));
+            if (indentClass) {
+                const indentValue = parseInt(indentClass.replace("ql-indent-", ""), 10);
+                if (indentValue) {
+                    if (element.classList.contains("ql-direction-rtl")) {
+                        (element as HTMLElement).style.paddingRight = `${indentValue * INDENT_MAGIC_NUMBER}em`;
+                    } else {
+                        (element as HTMLElement).style.paddingLeft = `${indentValue * INDENT_MAGIC_NUMBER}em`;
+                    }
+                }
+                element.classList.remove(indentClass);
+            }
+        });
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/clipboard.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/clipboard.ts
deleted file mode 100644
index 0b98faa349..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/clipboard.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
- * Custom Clipboard module to override Quill's default clipboard behavior
- * to better handle pasting from various sources.
- * https://github.com/slab/quill/blob/main/packages/quill/src/modules/clipboard.ts
- */
-
-import { EmbedBlot, type ScrollBlot } from "parchment";
-import Quill, { Delta } from "quill";
-import Clipboard, { matchNewline } from "quill/modules/clipboard";
-
-export default class CustomClipboard extends Clipboard {
-    constructor(quill: Quill, options: any) {
-        super(quill, options);
-        // remove default CLIPBOARD_CONFIG list matchers for ol and ul
-        // https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/clipboard.ts#L32
-        this.matchers = this.matchers.filter(
-            matcher => matcher[0] !== "ol, ul" && matcher[0] !== Node.TEXT_NODE && matcher[0] !== "br"
-        );
-        // adding back, we do not actually want to remove newline matching
-        this.matchers.unshift([Node.TEXT_NODE, matchNewline]);
-        // add custom text matcher to better handle spaces and newlines
-        this.matchers.unshift([Node.TEXT_NODE, customMatchText]);
-        // add custom list matchers for ol and ul to allow custom list types (lower-alpha, lower-roman, etc.)
-        this.addMatcher("ol, ul", matchList);
-        this.addMatcher("a", matchLink);
-    }
-}
-
-function isLine(node: Node, scroll: ScrollBlot): any {
-    if (!(node instanceof Element)) return false;
-    const match = scroll.query(node);
-    // @ts-expect-error prototype not exist on match
-    if (match && match.prototype instanceof EmbedBlot) return false;
-
-    return [
-        "address",
-        "article",
-        "blockquote",
-        "canvas",
-        "dd",
-        "div",
-        "dl",
-        "dt",
-        "fieldset",
-        "figcaption",
-        "figure",
-        "footer",
-        "form",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "header",
-        "iframe",
-        "li",
-        "main",
-        "nav",
-        "ol",
-        "output",
-        "p",
-        "pre",
-        "section",
-        "table",
-        "td",
-        "tr",
-        "ul",
-        "video"
-    ].includes(node.tagName.toLowerCase());
-}
-
-function isBetweenInlineElements(node: HTMLElement, scroll: ScrollBlot): boolean | null {
-    return (
-        node.previousElementSibling &&
-        node.nextElementSibling &&
-        !isLine(node.previousElementSibling, scroll) &&
-        !isLine(node.nextElementSibling, scroll)
-    );
-}
-
-const preNodes = new WeakMap();
-function isPre(node: Node | null): boolean {
-    if (node == null) return false;
-    if (!preNodes.has(node)) {
-        // @ts-expect-error tagName not exist on Node
-        if (node.tagName === "PRE") {
-            preNodes.set(node, true);
-        } else {
-            preNodes.set(node, isPre(node.parentNode));
-        }
-    }
-    return preNodes.get(node);
-}
-
-function customMatchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot): Delta {
-    // @ts-expect-error data not exist on node
-    let text = node.data as string;
-    // Word represents empty line with <o:p>&nbsp;</o:p>
-    if (node.parentElement?.tagName === "O:P") {
-        return delta.insert(text.trim());
-    }
-    if (!isPre(node)) {
-        if (text.trim().length === 0 && text.includes("\n") && !isBetweenInlineElements(node, scroll)) {
-            return delta;
-        }
-        // collapse consecutive spaces into one
-        text = text.replace(/ {2,}/g, " ");
-        if (
-            (node.nextSibling == null && node.parentElement != null && isLine(node.parentElement, scroll)) ||
-            (node.nextSibling instanceof Element && isLine(node.nextSibling, scroll))
-        ) {
-            // block structure means we don't need trailing space
-            text = text.replace(/ $/, "");
-        }
-    }
-    return delta.insert(text);
-}
-
-function matchLink(node: HTMLElement, _delta: Delta): Delta {
-    const href = node.getAttribute("href");
-    const text = node.textContent || href || "";
-    const title = node.getAttribute("title");
-    const target = node.getAttribute("target");
-    const value = { href, text, title, target };
-    return new Delta().insert(text, { link: value });
-}
-
-function matchList(node: HTMLElement, delta: Delta): 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());
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/keyboard.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/keyboard.ts
deleted file mode 100644
index cb5706e02d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/keyboard.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-    addIndentText,
-    enterKeyKeyboardHandler,
-    exitFullscreenKeyboardHandler,
-    gotoStatusBarKeyboardHandler,
-    gotoToolbarKeyboardHandler,
-    moveIndent,
-    moveOutdent,
-    movePrevFocus,
-    shiftEnterKeyKeyboardHandler
-} from "./toolbarHandlers";
-import QuillTableBetter from "../formats/quill-table-better/quill-table-better";
-
-export function getKeyboardBindings(): Record<string, unknown> {
-    const defaultBindings: Record<string, unknown> = {
-        enter: {
-            key: "Enter",
-            handler: enterKeyKeyboardHandler
-        },
-        shiftEnter: {
-            key: "Enter",
-            shiftKey: true,
-            collapsed: true,
-            handler: shiftEnterKeyKeyboardHandler
-        },
-        focusTab: {
-            key: "F10",
-            altKey: true,
-            collapsed: true,
-            handler: gotoToolbarKeyboardHandler
-        },
-        shiftTab: {
-            key: "Tab",
-            shiftKey: true,
-            handler: movePrevFocus
-        },
-        outdent: {
-            key: "Tab",
-            shiftKey: true,
-            format: ["blockquote", "indent", "list"],
-            // highlight tab or tab at beginning of list, indent or blockquote
-            handler: moveOutdent
-        },
-        indent: {
-            // highlight tab or tab at beginning of list, indent or blockquote
-            key: "Tab",
-            format: ["blockquote", "indent", "list"],
-            handler: moveIndent
-        },
-        nextFocusTab: {
-            key: "F11",
-            altKey: true,
-            collapsed: true,
-            handler: gotoStatusBarKeyboardHandler
-        },
-        escape: {
-            key: "Escape",
-            handler: exitFullscreenKeyboardHandler
-        },
-        tab: {
-            key: "Tab",
-            handler: addIndentText
-        },
-        ...QuillTableBetter.keyboardBindings
-    };
-    return defaultBindings;
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/resize.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/resize.ts
deleted file mode 100644
index 8c88b4ee8d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/resize.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import QuillResize from "quill-resize-module";
-
-type ImageSize = {
-    width?: number;
-    height?: number;
-};
-
-type ImageSizeWithUnit = {
-    width?: string;
-    height?: string;
-};
-
-type ImageSizes = ImageSize | ImageSizeWithUnit;
-
-type LimitConfig = {
-    ratio?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    unit?: string;
-};
-
-type CalculateSizeEvent = { clientX: number; clientY: number };
-
-export default class MxResize extends QuillResize.Modules.Resize {
-    // modified from https://github.com/mudoo/quill-resize-module/blob/master/src/modules/Resize.js
-    calcSize(evt: CalculateSizeEvent, limit: LimitConfig = {}): ImageSizes {
-        // update size
-        const deltaX = evt.clientX - this.dragStartX;
-        const deltaY = evt.clientY - this.dragStartY;
-
-        const size: ImageSize = {};
-        let direction = 1;
-
-        (this.blotOptions.attribute || ["width"]).forEach((key: "width" | "height") => {
-            size[key] = this.preDragSize[key];
-        });
-
-        // modification to check if height attribute is exist from current image
-        // this is to maintain ratio by resizing width only
-        const allowHeight =
-            this.activeEle.getAttribute("height") !== undefined && this.activeEle.getAttribute("height") !== null;
-        if (!allowHeight) {
-            delete size.height;
-        }
-
-        // left-side
-        if (this.dragBox === this.boxes[0] || this.dragBox === this.boxes[3]) {
-            direction = -1;
-        }
-
-        if (size.width) {
-            size.width = Math.round(this.preDragSize.width + deltaX * direction);
-        }
-        if (size.height) {
-            size.height = Math.round(this.preDragSize.height + deltaY * direction);
-        }
-
-        let { width, height } = size;
-
-        // keep ratio
-        if (limit.ratio) {
-            let limitHeight;
-            if (limit.minWidth) width = Math.max(limit.minWidth, width!);
-            if (limit.maxWidth) width = Math.min(limit.maxWidth, width!);
-
-            height = width! * limit.ratio;
-
-            if (limit.minHeight && height < limit.minHeight) {
-                limitHeight = true;
-                height = limit.minHeight;
-            }
-            if (limit.maxHeight && height > limit.maxHeight) {
-                limitHeight = true;
-                height = limit.maxHeight;
-            }
-
-            if (limitHeight) {
-                width = height / limit.ratio;
-            }
-        } else {
-            if (size.width) {
-                if (limit.minWidth) width = Math.max(limit.minWidth, width!);
-                if (limit.maxWidth) width = Math.min(limit.maxWidth, width!);
-            }
-            if (size.height) {
-                if (limit.minHeight) height = Math.max(limit.minHeight, height!);
-                if (limit.maxHeight) height = Math.min(limit.maxHeight, height!);
-            }
-        }
-        const res: ImageSizes = {};
-
-        if (limit.unit) {
-            if (width) res.width = width + "px";
-            if (height) res.height = height + "px";
-        } else {
-            if (width) res.width = width;
-            if (height) res.height = height;
-        }
-        return res;
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/resizeToolbar.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/resizeToolbar.ts
deleted file mode 100644
index 54311977a8..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/resizeToolbar.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import QuillResize from "quill-resize-module";
-
-type ToolbarTool = {
-    text: string;
-    className: string;
-    verify: (activeEle: HTMLElement) => boolean;
-    handler: (
-        this: typeof QuillResize.Modules.Base,
-        _evt: MouseEvent,
-        _button: HTMLElement,
-        activeEle: HTMLIFrameElement
-    ) => void;
-};
-
-// eslint-disable-next-line no-unsafe-optional-chaining
-export default class MxResizeToolbar extends QuillResize.Modules?.Toolbar {
-    _addToolbarButtons(): void {
-        const buttons: HTMLButtonElement[] = [];
-        this.options.tools.forEach((tool: ToolbarTool) => {
-            if (tool.verify && tool.verify.call(this, this.activeEle) === false) {
-                return;
-            }
-
-            const button = document.createElement("button");
-            button.className = tool.className;
-            buttons.push(button);
-            button.setAttribute("aria-label", tool.text);
-            button.setAttribute("type", "button");
-
-            button.addEventListener("click", evt => {
-                tool.handler.call(this, evt, button, this.activeEle);
-                // image may change position; redraw drag handles
-                this.requestUpdate();
-            });
-            this.toolbar.appendChild(button);
-        });
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/scroll.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/scroll.ts
deleted file mode 100644
index 475b6e5121..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/scroll.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Scroll from "quill/blots/scroll";
-import MxBlock from "../formats/block";
-
-export default class MxScroll extends Scroll {
-    trimEnd(): void {
-        // remove multiple empty line placed in the end
-        // this is usually occurs with multi level ListContainer
-        if (
-            this.children.tail &&
-            MxBlock.IsEmptyBlock(this.children.tail) &&
-            MxBlock.IsEmptyBlock(this.children.tail.prev)
-        ) {
-            this.children.tail.parent.removeChild(this.children.tail);
-        }
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/toolbarHandlers.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/toolbarHandlers.ts
deleted file mode 100644
index 98565d9007..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/toolbarHandlers.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import Quill from "quill";
-import Delta from "quill-delta";
-import { MutableRefObject } from "react";
-import { Range } from "quill/core/selection";
-import Keyboard, { Context } from "quill/modules/keyboard";
-import { Scope } from "parchment";
-import { ACTION_DISPATCHER } from "../helpers";
-import { SET_FULLSCREEN_ACTION } from "../../store/store";
-
-function returnWithStopPropagation(context: Context): boolean {
-    context.event.stopPropagation();
-    context.event.preventDefault();
-    return true;
-}
-
-/**
- * give custom indent handler to use our custom "indent-left" and "indent-right" formats (formats/indent.ts)
- */
-export function getIndentHandler(ref: MutableRefObject<Quill | null>): (value: any) => void {
-    const customIndentHandler = (value: any): void => {
-        const range = ref.current?.getSelection();
-        // @ts-expect-error type error expected
-        const formats = ref.current?.getFormat(range);
-        if (formats) {
-            const indent = parseInt((formats.indent as string) || "0", 10);
-            if (value === "+1" || value === "-1") {
-                let modifier = value === "+1" ? 1 : -1;
-                const formatHandler = formats.list
-                    ? "indent"
-                    : formats.direction === "rtl"
-                      ? "indent-right"
-                      : "indent-left";
-                if (formats.direction === "rtl") {
-                    modifier *= -1;
-                }
-                ref.current?.format(formatHandler, indent + modifier, Quill.sources.USER);
-            }
-        }
-    };
-
-    return customIndentHandler;
-}
-
-/**
- * copied with modification from "handleEnter" function in :
- * https://github.com/slab/quill/blob/main/packages/quill/src/modules/keyboard.ts
- */
-export function enterKeyKeyboardHandler(this: Keyboard, range: Range, context: Context): any {
-    const lineFormats = Object.keys(context.format).reduce((formats: Record<string, unknown>, format) => {
-        if (this.quill.scroll.query(format, Scope.BLOCK) && !Array.isArray(context.format[format])) {
-            formats[format] = context.format[format];
-        }
-        return formats;
-    }, {});
-
-    const delta = new Delta().retain(range.index).delete(range.length).insert("\n", lineFormats);
-    this.quill.updateContents(delta, Quill.sources.USER);
-    this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-
-    /**
-     * NOTE: Modified from default handler to maintain format on new line
-     * Applies previous formats on the new line. This was dropped in
-     * https://github.com/slab/quill/commit/ba5461634caa8e24641b687f2d1a8768abfec640
-     */
-    Object.keys(context.format).forEach(name => {
-        if (lineFormats[name] != null) {
-            return;
-        }
-        if (Array.isArray(context.format[name])) {
-            return;
-        }
-        if (name === "code" || name === "link") {
-            return;
-        }
-        this.quill.format(name, context.format[name], Quill.sources.USER);
-    });
-}
-
-export function shiftEnterKeyKeyboardHandler(this: Keyboard, range: Range, context: Context): any {
-    if (context.format.table) {
-        return true;
-    }
-
-    if (context.suffix === "") {
-        // if it is on the end of block
-        // we need to insert two soft breaks to create a new line within the same block
-        // this is to override /n behavior
-        this.quill.insertEmbed(range.index, "softbreak", true, Quill.sources.USER);
-    }
-    this.quill.insertEmbed(range.index, "softbreak", true, Quill.sources.USER);
-    this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-    return false;
-}
-
-export function movePrevFocus(this: Keyboard, range: Range, context: Context): any {
-    if (context.format.table) {
-        return returnWithStopPropagation(context);
-    } else if (context.collapsed) {
-        if (context.format.indent || context.format.list || context.format.blockquote) {
-            return returnWithStopPropagation(context);
-        }
-    }
-
-    gotoToolbarKeyboardHandler.call(this, range, context);
-    return returnWithStopPropagation(context);
-}
-
-// Copied from https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L372
-// with added stopPropagation and preventDefault
-export function moveOutdent(this: Keyboard, _range: Range, context: Context): any {
-    if (context.collapsed && context.offset !== 0) {
-        return returnWithStopPropagation(context);
-    }
-    this.quill.format("indent", "-1", Quill.sources.USER);
-    return !returnWithStopPropagation(context);
-}
-
-// Copied from https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L372
-// with added stopPropagation and preventDefault
-export function moveIndent(this: Keyboard, _range: Range, context: Context): any {
-    if (context.collapsed && context.offset !== 0) {
-        return returnWithStopPropagation(context);
-    }
-    this.quill.format("indent", "+1", Quill.sources.USER);
-    return !returnWithStopPropagation(context);
-}
-
-// focus to first toolbar button
-export function gotoToolbarKeyboardHandler(this: Keyboard, _range: Range, context: Context): any {
-    if (context.format.table) {
-        return true;
-    }
-
-    const toolbar = this.quill.container.parentElement?.parentElement?.querySelector(".widget-rich-text-toolbar");
-    if (toolbar) {
-        (toolbar?.querySelector(".ql-formats button") as HTMLElement)?.focus();
-    } else {
-        // "widget-rich-text form-control"
-        this.quill.container.parentElement?.parentElement?.parentElement?.focus();
-    }
-}
-
-// move to next element focus : status bar button (exit editor)
-export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, context: Context): boolean | void {
-    if (context.format.table) {
-        return true;
-    }
-
-    const statusBar = this.quill.container.parentElement?.parentElement?.nextElementSibling;
-    if (statusBar) {
-        (statusBar as HTMLElement)?.focus();
-    } else {
-        // "widget-rich-text form-control"
-        this.quill.container.parentElement?.parentElement?.parentElement?.focus();
-    }
-}
-
-// default quill tab handler
-// https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L412
-// but modified to add stopPropagation and preventDefault
-export function addIndentText(this: Keyboard, range: Range, context: Context): boolean | void {
-    if (context.format.table) {
-        return true;
-    }
-    if (context.collapsed && context.offset === 0) {
-        return moveIndent.call(this, range, context);
-    } else {
-        this.quill.history.cutoff();
-        const delta = new Delta().retain(range.index).delete(range.length).insert("\t");
-        this.quill.updateContents(delta, Quill.sources.USER);
-        this.quill.history.cutoff();
-        this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-        return returnWithStopPropagation(context);
-    }
-}
-
-/**
- * Keyboard handler for exiting fullscreen mode when the Escape key is pressed
- */
-export function exitFullscreenKeyboardHandler(this: Keyboard, _range: Range, _context: Context): boolean | void {
-    this.quill.emitter.emit(ACTION_DISPATCHER, { type: SET_FULLSCREEN_ACTION, value: false });
-    return true;
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/modules/uploader.ts b/packages/pluggableWidgets/rich-text-web/src/utils/modules/uploader.ts
deleted file mode 100644
index 2ff058eb8c..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/modules/uploader.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Range } from "quill/core/selection";
-import Uploader from "quill/modules/uploader";
-import { ACTION_DISPATCHER } from "../helpers";
-
-class MxUploader extends Uploader {
-    protected useEntityUpload: boolean = false;
-
-    setEntityUpload(useEntityUpload: boolean): void {
-        this.useEntityUpload = useEntityUpload;
-    }
-
-    upload(range: Range, files: FileList | File[]): void {
-        if (!this.quill.scroll.query("image")) {
-            return;
-        }
-        if (this.useEntityUpload) {
-            // If entity upload is enabled, the file will be handled by external widget's upload handler.
-            const dataTransfer = new DataTransfer();
-            Array.from(files).forEach(file => {
-                if (file && this.options.mimetypes?.includes(file.type)) {
-                    dataTransfer.items.add(file);
-                }
-            });
-            const imageInfo = {
-                type: "image",
-                files: dataTransfer.files
-            };
-            this.quill.emitter.emit(ACTION_DISPATCHER, imageInfo);
-        } else {
-            super.upload.call(this, range, files);
-        }
-    }
-}
-
-export default MxUploader;
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTheme.ts b/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTheme.ts
deleted file mode 100644
index 8eab0c31ed..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTheme.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import SnowTheme from "quill/themes/snow";
-import MxTooltip from "./mxTooltip";
-import icons from "quill/ui/icons";
-import Toolbar from "quill/modules/toolbar";
-import { Context } from "quill/modules/keyboard";
-import Picker from "quill/ui/picker";
-import { Range } from "quill";
-
-/**
- * Override quill's current theme.
- */
-export default class MendixTheme extends SnowTheme {
-    fontPicker?: Picker = undefined;
-    fontSizePicker?: Picker = undefined;
-    headerPicker?: Picker = undefined;
-    defaultFontFamily = "helvetica";
-    defaultFontSize = "14px";
-    buildPickers(selects: NodeListOf<HTMLSelectElement>, icons: Record<string, string | Record<string, string>>): void {
-        super.buildPickers(selects, icons);
-
-        this.pickers.forEach(picker => {
-            const pickerLabel = picker.container.querySelector(".ql-picker-label");
-            if (picker.container.classList.contains("ql-size")) {
-                picker.selectItem(
-                    picker.container.querySelector(`[data-value="${this.defaultFontSize}"]`) as HTMLElement,
-                    false
-                );
-                this.fontSizePicker = picker;
-            }
-            if (picker.container.classList.contains("ql-font")) {
-                picker.selectItem(
-                    picker.container.querySelector(`[data-value=${this.defaultFontFamily}]`) as HTMLElement,
-                    false
-                );
-                this.fontPicker = picker;
-            }
-
-            if (picker.container.classList.contains("ql-header")) {
-                picker.selectItem(
-                    picker.container.querySelector(`.ql-picker-item:not([data-value])`) as HTMLElement,
-                    false
-                );
-                this.headerPicker = picker;
-            }
-            if (pickerLabel) {
-                pickerLabel.setAttribute("tabindex", "-1");
-            }
-        });
-    }
-
-    /**
-     * copied from https://github.com/slab/quill/blob/main/packages/quill/src/themes/snow.ts
-     * with modification to replace tooltip with MxTooltip
-     * @param toolbar
-     */
-    extendToolbar(toolbar: Toolbar): void {
-        if (toolbar.container != null) {
-            toolbar.container.classList.add("ql-snow");
-            this.buildButtons(toolbar.container.querySelectorAll("button"), icons);
-            this.buildPickers(toolbar.container.querySelectorAll("select"), icons);
-            // @ts-expect-error unknown type
-            this.tooltip = new MxTooltip(this.quill, this.options.bounds);
-            if (toolbar.container.querySelector(".ql-link")) {
-                this.quill.keyboard.addBinding({ key: "k", shortKey: true }, (_range: Range, context: Context) => {
-                    toolbar.handlers.link.call(toolbar, !context.format.link);
-                });
-            }
-        }
-    }
-
-    /** updating font picker selected item based on current's selection font */
-    updatePicker(range: Range): void {
-        if (this.pickers) {
-            const currentRange = range || { index: 0, length: 0 };
-
-            const format = this.quill.getFormat(currentRange.index, currentRange.length);
-            const font = format ? (format.font as string) : undefined;
-            this.updateFontPicker(font || this.defaultFontFamily);
-            const fontSize = format ? (format.size as string) : undefined;
-            this.updateFontSizePicker(fontSize || this.defaultFontSize);
-            const header = format ? (format.header as string) : undefined;
-            this.updateHeaderPicker(header);
-        }
-    }
-
-    updateFontPicker(font: string): void {
-        if (this.pickers) {
-            if (!this.fontPicker) {
-                this.fontPicker = this.pickers.find(picker => picker.container.classList.contains("ql-font"));
-            }
-
-            const currentOption = this.fontPicker?.container.querySelector(`[data-value=${font}]`);
-            if (currentOption) {
-                this.fontPicker?.selectItem(currentOption as HTMLElement, false);
-            }
-        }
-    }
-
-    updateFontSizePicker(fontSize: string): void {
-        if (this.pickers) {
-            if (!this.fontSizePicker) {
-                this.fontSizePicker = this.pickers.find(picker => picker.container.classList.contains("ql-size"));
-            }
-
-            const currentOption = this.fontSizePicker?.container.querySelector(`[data-value="${fontSize}"]`);
-            if (currentOption) {
-                this.fontSizePicker?.selectItem(currentOption as HTMLElement, false);
-            }
-        }
-    }
-
-    updateHeaderPicker(header?: string): void {
-        if (this.pickers) {
-            if (!this.headerPicker) {
-                this.headerPicker = this.pickers.find(picker => picker.container.classList.contains("ql-header"));
-            }
-            if (!header) {
-                const currentOption = this.headerPicker?.container.querySelector(`.ql-picker-item:not([data-value])`);
-                this.headerPicker?.selectItem(currentOption as HTMLElement, false);
-            }
-        }
-    }
-
-    updateDefaultFontFamily(fontFamily?: string): void {
-        if (fontFamily && fontFamily.trim().length > 0) {
-            this.defaultFontFamily = fontFamily;
-        } else {
-            this.defaultFontFamily = "helvetica";
-        }
-
-        this.updateFontPicker(this.defaultFontFamily);
-    }
-
-    updateDefaultFontSize(fontSize?: string): void {
-        if (fontSize) {
-            this.defaultFontSize = fontSize;
-        } else {
-            this.defaultFontSize = "14px";
-        }
-
-        this.updateFontSizePicker(this.defaultFontSize);
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTooltip.ts b/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTooltip.ts
deleted file mode 100644
index 53bd314c9b..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTooltip.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Range } from "quill/core";
-import Emitter from "quill/core/emitter";
-import LinkBlot from "quill/formats/link";
-import { BaseTooltip } from "quill/themes/base";
-import { linkConfigType } from "../formats";
-import { ACTION_DISPATCHER } from "../helpers";
-import { computePosition, flip, shift } from "@floating-ui/dom";
-
-export default class MxTooltip extends BaseTooltip {
-    static TEMPLATE = [
-        '<a class="ql-preview" rel="noopener noreferrer" target="_blank" href="about:blank" aria-label="preview"></a>',
-        '<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">',
-        '<a class="ql-action" aria-label="edit"></a>',
-        '<a class="ql-remove" aria-label="remove"></a>'
-    ].join("");
-
-    preview = this.root.querySelector("a.ql-preview");
-    linkDOMNode = this.root.querySelector("a.ql-preview");
-
-    listen(): void {
-        super.listen();
-        // @ts-expect-error Fix me later
-        this.root.querySelector("a.ql-action").addEventListener("click", event => {
-            if (this.root.classList.contains("ql-editing")) {
-                this.save();
-            } else {
-                // @ts-expect-error Fix me later
-                this.edit("link", this.preview.textContent);
-            }
-            event.preventDefault();
-        });
-        // @ts-expect-error Fix me later
-        this.root.querySelector("a.ql-remove").addEventListener("click", event => {
-            if (this.linkRange != null) {
-                const range = this.linkRange;
-                this.restoreFocus();
-                this.quill.formatText(range, "link", false, Emitter.sources.USER);
-                delete this.linkRange;
-            }
-            event.preventDefault();
-            this.hide();
-        });
-        this.quill.on(Emitter.events.SELECTION_CHANGE, (range, _oldRange, source) => {
-            if (range == null) {
-                return;
-            }
-            if (range.length === 0 && source === Emitter.sources.USER) {
-                const [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index);
-                if (link != null) {
-                    this.linkRange = new Range(range.index - offset, link.length());
-                    if (link.domNode && link.domNode instanceof HTMLAnchorElement) {
-                        this.linkDOMNode = link.domNode;
-                    }
-                    const preview = LinkBlot.formats(link.domNode);
-                    // @ts-expect-error Fix me later
-                    this.preview.textContent = preview;
-                    // @ts-expect-error Fix me later
-                    this.preview.setAttribute("href", preview);
-                    this.show();
-                    this.setPosition(link.domNode);
-                    return;
-                }
-            } else {
-                delete this.linkRange;
-            }
-            this.hide();
-        });
-    }
-
-    edit(mode = "link", preview: string | null = null): void {
-        if (mode === "link") {
-            if (this.linkRange) {
-                this.quill.setSelection(this.linkRange);
-                const linkConfig: linkConfigType = {
-                    text: this.linkDOMNode?.textContent ?? undefined,
-                    href: this.linkDOMNode?.getAttribute("href") ?? "",
-                    title: this.linkDOMNode?.getAttribute("title") ?? undefined,
-                    target: this.linkDOMNode?.getAttribute("target") ?? undefined
-                };
-                this.quill.emitter.emit(ACTION_DISPATCHER, linkConfig);
-            }
-        } else {
-            super.edit(mode, preview);
-        }
-    }
-
-    setPosition(domNode: HTMLElement): void {
-        computePosition(domNode, this.root, {
-            placement: "bottom-end",
-            middleware: [flip(), shift({ padding: 5 })]
-        }).then(({ x, y }) => {
-            Object.assign(this.root.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
-        });
-    }
-
-    show(): void {
-        super.show();
-        this.root.removeAttribute("data-mode");
-    }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts b/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts
index c3242f3c72..632f73900c 100644
--- a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts
+++ b/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts
@@ -33,9 +33,11 @@ export interface CustomFontsType {
 
 export type StatusBarContentEnum = "wordCount" | "characterCount" | "characterCountHtml";
 
+export type StyleDataFormatEnum = "inline" | "class";
+
 export type ToolbarConfigEnum = "basic" | "advanced";
 
-export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "align" | "centerAlign" | "rightAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter";
+export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "leftAlign" | "centerAlign" | "rightAlign" | "justifyAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter";
 
 export interface AdvancedConfigType {
     ctItemType: CtItemTypeEnum;
@@ -83,6 +85,7 @@ export interface RichTextContainerProps {
     imageSourceContent?: ReactNode;
     enableDefaultUpload: boolean;
     statusBarContent: StatusBarContentEnum;
+    styleDataFormat: StyleDataFormatEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
@@ -133,6 +136,7 @@ export interface RichTextPreviewProps {
     imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     enableDefaultUpload: boolean;
     statusBarContent: StatusBarContentEnum;
+    styleDataFormat: StyleDataFormatEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
diff --git a/packages/pluggableWidgets/rich-text-web/typings/modules.d.ts b/packages/pluggableWidgets/rich-text-web/typings/modules.d.ts
deleted file mode 100644
index 5411798145..0000000000
--- a/packages/pluggableWidgets/rich-text-web/typings/modules.d.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-declare module "*.css";
-declare module "*.scss";
-
-// Add quill-resize-module declaration
-declare module "quill-resize-module" {
-    import Quill from "quill";
-
-    interface ResizeModuleOptions {
-        modules?: string[];
-        handleStyles?: {
-            backgroundColor?: string;
-            border?: string;
-            boxSizing?: string;
-        };
-        displayStyles?: {
-            backgroundColor?: string;
-            border?: string;
-            color?: string;
-        };
-        toolbarStyles?: {
-            backgroundColor?: string;
-            border?: string;
-            color?: string;
-            boxShadow?: string;
-        };
-        overlayStyles?: {
-            border?: string;
-            boxSizing?: string;
-        };
-        embedTags?: string[];
-        tools?: Array<
-            | string
-            | {
-                  text: string;
-                  verify: (activeEle: HTMLElement) => boolean;
-                  handler: (evt: MouseEvent, button: HTMLElement, activeEle: HTMLElement) => void;
-              }
-        >;
-        locale?: {
-            altTip?: string;
-            inputTip?: string;
-            floatLeft?: string;
-            floatRight?: string;
-            center?: string;
-            restore?: string;
-        };
-    }
-
-    interface ResizeModuleConstructor {
-        new (quill: Quill, options: ResizeModuleOptions): any;
-        Modules?: any;
-        handleEdit(): void;
-    }
-
-    const ResizeModule: ResizeModuleConstructor;
-    export default ResizeModule;
-}
-
-// Add the dist/resize module declaration
-declare module "quill-resize-module/dist/resize" {
-    export * from "quill-resize-module";
-    export { default } from "quill-resize-module";
-}
diff --git a/packages/pluggableWidgets/rich-text-web/typings/tiptap-menus.d.ts b/packages/pluggableWidgets/rich-text-web/typings/tiptap-menus.d.ts
new file mode 100644
index 0000000000..ce3c467621
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/typings/tiptap-menus.d.ts
@@ -0,0 +1,6 @@
+// The classic "node" moduleResolution used by this package does not read the
+// `exports` subpath map in @tiptap/react's package.json, so the "/menus" entry
+// point cannot be resolved by type. Re-export its types from the dist path.
+declare module "@tiptap/react/menus" {
+    export * from "@tiptap/react/dist/menus";
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c87e25d1e..6703f6abbd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
         version: 8.0.3
       turbo:
         specifier: ^2.5.4
-        version: 2.9.18
+        version: 2.10.2
 
   automation/e2e-mcp:
     dependencies:
@@ -121,7 +121,7 @@ importers:
     devDependencies:
       '@axe-core/playwright':
         specifier: ^4.11.1
-        version: 4.11.3(playwright-core@1.61.0)
+        version: 4.12.1(playwright-core@1.61.1)
       '@eslint/js':
         specifier: ^9.39.4
         version: 9.39.4
@@ -130,7 +130,7 @@ importers:
         version: link:../../packages/shared/prettier-config-web-widgets
       '@playwright/test':
         specifier: ^1.60.0
-        version: 1.61.0
+        version: 1.61.1
       '@types/node':
         specifier: ~24.12.0
         version: 24.12.4
@@ -139,7 +139,7 @@ importers:
         version: 2.10.4(eslint@9.39.4(jiti@2.6.1))
       globals:
         specifier: ^17.4.0
-        version: 17.6.0
+        version: 17.7.0
       playwright-ctrf-json-reporter:
         specifier: ^0.0.27
         version: 0.0.27
@@ -148,7 +148,7 @@ importers:
     dependencies:
       '@commitlint/cli':
         specifier: ^19.8.1
-        version: 19.8.1(@types/node@24.12.4)(typescript@6.0.3)
+        version: 19.8.1(@types/node@24.12.4)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: ^19.8.1
         version: 19.8.1
@@ -157,7 +157,7 @@ importers:
         version: link:../../packages/shared/prettier-config-web-widgets
       pretty-quick:
         specifier: ^4.1.1
-        version: 4.2.2(prettier@3.8.4)
+        version: 4.2.2(prettier@3.9.4)
 
   automation/snapshot-generator:
     dependencies:
@@ -173,7 +173,7 @@ importers:
         version: link:../../packages/shared/prettier-config-web-widgets
       globals:
         specifier: ^17.3.0
-        version: 17.6.0
+        version: 17.7.0
 
   automation/utils:
     devDependencies:
@@ -221,7 +221,7 @@ importers:
         version: 0.8.5
       ts-node:
         specifier: ^10.9.1
-        version: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)
+        version: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
       zod:
         specifier: ^3.25.76
         version: 3.25.76
@@ -283,10 +283,10 @@ importers:
         version: link:../../shared/prettier-config-web-widgets
       '@rollup/plugin-node-resolve':
         specifier: ^16.0.0
-        version: 16.0.3(rollup@4.62.0)
+        version: 16.0.3(rollup@4.62.2)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@4.62.0)
+        version: 0.4.4(rollup@4.62.2)
       concurrently:
         specifier: ^6.5.1
         version: 6.5.1
@@ -295,7 +295,7 @@ importers:
         version: 0.1.8
       rollup:
         specifier: '*'
-        version: 4.62.0
+        version: 4.62.2
       xlsx:
         specifier: https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
         version: https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
@@ -358,7 +358,7 @@ importers:
         version: link:../../shared/prettier-config-web-widgets
       globals:
         specifier: ^17.3.0
-        version: 17.6.0
+        version: 17.7.0
 
   packages/pluggableWidgets/accessibility-helper-web:
     dependencies:
@@ -374,7 +374,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -399,7 +399,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -439,7 +439,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -467,7 +467,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -498,7 +498,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -538,7 +538,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -569,7 +569,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -606,7 +606,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -624,7 +624,7 @@ importers:
         version: link:../../shared/widget-plugin-platform
       '@rollup/plugin-replace':
         specifier: ^6.0.2
-        version: 6.0.3(rollup@4.62.0)
+        version: 6.0.3(rollup@4.62.2)
 
   packages/pluggableWidgets/bubble-chart-web:
     dependencies:
@@ -652,7 +652,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -686,7 +686,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -732,7 +732,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -769,7 +769,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -840,7 +840,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -886,7 +886,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -932,7 +932,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -966,7 +966,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1027,7 +1027,7 @@ importers:
         version: 18.0.1
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1064,7 +1064,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1110,7 +1110,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1150,7 +1150,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1208,7 +1208,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1247,7 +1247,7 @@ importers:
         version: link:../../shared/widget-plugin-platform
       '@radix-ui/react-progress':
         specifier: ^1.1.7
-        version: 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       brandi:
         specifier: ^5.0.0
         version: 5.1.0
@@ -1275,7 +1275,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1309,7 +1309,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1358,13 +1358,13 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/rollup-web-widgets':
         specifier: workspace:*
         version: link:../../shared/rollup-web-widgets
       '@rollup/plugin-replace':
         specifier: ^6.0.2
-        version: 6.0.3(rollup@4.62.0)
+        version: 6.0.3(rollup@4.62.2)
 
   packages/pluggableWidgets/dropdown-sort-web:
     dependencies:
@@ -1380,7 +1380,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1410,7 +1410,7 @@ importers:
         version: 2.5.1
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+        version: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
 
   packages/pluggableWidgets/events-web:
     dependencies:
@@ -1426,7 +1426,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1463,7 +1463,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1506,7 +1506,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1518,7 +1518,7 @@ importers:
         version: link:../../shared/widget-plugin-test-utils
       '@rollup/plugin-json':
         specifier: ^6.1.0
-        version: 6.1.0(rollup@4.62.0)
+        version: 6.1.0(rollup@4.62.2)
       '@types/big.js':
         specifier: ^6.2.2
         version: 6.2.2
@@ -1570,7 +1570,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1607,7 +1607,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1641,7 +1641,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1672,7 +1672,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1687,7 +1687,7 @@ importers:
         version: 2.5.1
       react-image-crop:
         specifier: ^11.0.10
-        version: 11.0.10(react@18.3.1)
+        version: 11.1.2(react@18.3.1)
     devDependencies:
       '@mendix/automation-utils':
         specifier: workspace:*
@@ -1697,7 +1697,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1734,7 +1734,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1774,7 +1774,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1829,7 +1829,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1878,7 +1878,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1930,7 +1930,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1961,7 +1961,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -1995,7 +1995,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2029,7 +2029,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2063,7 +2063,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2112,7 +2112,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2146,7 +2146,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2168,12 +2168,6 @@ importers:
 
   packages/pluggableWidgets/rich-text-web:
     dependencies:
-      '@codemirror/lang-html':
-        specifier: ^6.4.9
-        version: 6.4.11
-      '@codemirror/state':
-        specifier: ^6.5.2
-        version: 6.6.0
       '@floating-ui/dom':
         specifier: ^1.7.4
         version: 1.7.6
@@ -2183,15 +2177,87 @@ importers:
       '@melloware/coloris':
         specifier: ^0.25.0
         version: 0.25.0
-      '@uiw/codemirror-theme-github':
-        specifier: ^4.23.13
-        version: 4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)
-      '@uiw/react-codemirror':
-        specifier: ^4.23.13
-        version: 4.25.10(@babel/runtime@7.29.7)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.1)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tiptap/core':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/extension-color':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/extension-text-style@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1)))
+      '@tiptap/extension-font-family':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/extension-text-style@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1)))
+      '@tiptap/extension-highlight':
+        specifier: ^3.23.5
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-image':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-link':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-list':
+        specifier: ^3.23.5
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-list-item':
+        specifier: ^3.23.5
+        version: 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-subscript':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-superscript':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-table':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-table-cell':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-table-header':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-table-row':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-task-item':
+        specifier: ^3.23.5
+        version: 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-task-list':
+        specifier: ^3.23.5
+        version: 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-text-align':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-text-style':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-underline':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-youtube':
+        specifier: ^3.23.4
+        version: 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/pm':
+        specifier: ^3.23.4
+        version: 3.27.1
+      '@tiptap/react':
+        specifier: ^3.23.4
+        version: 3.27.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tiptap/starter-kit':
+        specifier: ^3.23.4
+        version: 3.27.1
+      '@uiw/react-color-compact':
+        specifier: ^2.10.1
+        version: 2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       js-beautify:
         specifier: ^2.0.3
         version: 2.0.3
@@ -2204,15 +2270,15 @@ importers:
       lodash.merge:
         specifier: ^4.6.2
         version: 4.6.2
-      parchment:
-        specifier: ^3.0.0
-        version: 3.0.0
-      quill:
-        specifier: ^2.0.3
-        version: 2.0.3
-      quill-resize-module:
-        specifier: ^2.0.4
-        version: 2.1.3
+      react-dropzone:
+        specifier: ^14.3.8
+        version: 14.4.1(patch_hash=d30fd95f2a3d58218fd5d657104b52cad6924893c0ac0e173f51c8c2d8e179b6)(react@18.3.1)
+      react-scroll-sync:
+        specifier: ^1.0.2
+        version: 1.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-simple-code-editor:
+        specifier: ^0.14.1
+        version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@mendix/automation-utils':
         specifier: workspace:*
@@ -2222,7 +2288,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2246,16 +2312,16 @@ importers:
         version: link:../../shared/widget-plugin-test-utils
       '@rollup/plugin-alias':
         specifier: ^5.1.1
-        version: 5.1.1(rollup@4.62.0)
+        version: 5.1.1(rollup@4.62.2)
       '@rollup/plugin-image':
         specifier: ^3.0.3
-        version: 3.0.3(rollup@4.62.0)
+        version: 3.0.3(rollup@4.62.2)
       '@rollup/plugin-json':
         specifier: ^6.1.0
-        version: 6.1.0(rollup@4.62.0)
+        version: 6.1.0(rollup@4.62.2)
       '@rollup/plugin-replace':
         specifier: ^6.0.2
-        version: 6.0.3(rollup@4.62.0)
+        version: 6.0.3(rollup@4.62.2)
       '@types/js-beautify':
         specifier: ^1.14.3
         version: 1.14.3
@@ -2270,19 +2336,19 @@ importers:
         version: 7.0.3
       postcss:
         specifier: ^8.5.6
-        version: 8.5.15
+        version: 8.5.16
       postcss-import:
         specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.15)
+        version: 16.1.1(postcss@8.5.16)
       postcss-url:
         specifier: ^10.1.3
-        version: 10.1.4(postcss@8.5.15)
+        version: 10.1.4(postcss@8.5.16)
       rollup-plugin-postcss:
         specifier: ^4.0.2
-        version: 4.0.2(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+        version: 4.0.2(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       rollup-preserve-directives:
         specifier: ^1.1.3
-        version: 1.1.3(rollup@4.62.0)
+        version: 1.1.3(rollup@4.62.2)
 
   packages/pluggableWidgets/selection-helper-web:
     dependencies:
@@ -2298,7 +2364,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2332,7 +2398,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2372,7 +2438,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2415,7 +2481,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2443,7 +2509,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2489,7 +2555,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2520,7 +2586,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2554,7 +2620,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2585,7 +2651,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2613,7 +2679,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2671,16 +2737,16 @@ importers:
         version: link:../widget-plugin-test-utils
       '@rollup/plugin-commonjs':
         specifier: ^28.0.3
-        version: 28.0.9(rollup@4.62.0)
+        version: 28.0.9(rollup@4.62.2)
       '@rollup/plugin-node-resolve':
         specifier: ^16.0.0
-        version: 16.0.3(rollup@4.62.0)
+        version: 16.0.3(rollup@4.62.2)
       '@rollup/plugin-replace':
         specifier: ^6.0.2
-        version: 6.0.3(rollup@4.62.0)
+        version: 6.0.3(rollup@4.62.2)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@4.62.0)
+        version: 0.4.4(rollup@4.62.2)
       '@types/plotly.js-dist-min':
         specifier: ^2.3.4
         version: 2.3.4
@@ -2695,13 +2761,13 @@ importers:
         version: 4.4.1
       rollup:
         specifier: '*'
-        version: 4.62.0
+        version: 4.62.2
       rollup-plugin-copy:
         specifier: ^3.5.0
         version: 3.5.0
       rollup-plugin-license:
         specifier: ^3.6.0
-        version: 3.7.1(picomatch@4.0.4)(rollup@4.62.0)
+        version: 3.7.1(picomatch@4.0.4)(rollup@4.62.2)
 
   packages/shared/eslint-config-web-widgets:
     dependencies:
@@ -2722,16 +2788,16 @@ importers:
         version: 5.4.0(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-import:
         specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))
+        version: 2.32.0(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-jest:
         specifier: ^29.15.0
-        version: 29.15.2(@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(jest@30.3.0(@types/node@24.12.4))(typescript@6.0.3)
+        version: 29.15.4(@typescript-eslint/eslint-plugin@8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(jest@30.3.0(@types/node@24.12.4))(typescript@5.9.3)
       eslint-plugin-package-json:
         specifier: ^0.89.1
         version: 0.89.4(@types/estree@1.0.9)(eslint@9.39.4(jiti@2.6.1))(jsonc-eslint-parser@3.1.0)
       eslint-plugin-prettier:
         specifier: ^5.5.5
-        version: 5.5.6(eslint-config-prettier@9.1.2(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))(prettier@3.8.4)
+        version: 5.5.6(eslint-config-prettier@9.1.2(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))(prettier@3.9.4)
       eslint-plugin-promise:
         specifier: ^7.2.1
         version: 7.3.0(eslint@9.39.4(jiti@2.6.1))
@@ -2743,13 +2809,13 @@ importers:
         version: 7.0.1(eslint@9.39.4(jiti@2.6.1))
       globals:
         specifier: ^17.3.0
-        version: 17.6.0
+        version: 17.7.0
       prettier:
         specifier: ^3.8.1
-        version: 3.8.4
+        version: 3.9.4
       typescript-eslint:
         specifier: ^8.57.0
-        version: 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+        version: 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
 
   packages/shared/filter-commons:
     dependencies:
@@ -2777,7 +2843,7 @@ importers:
         version: link:../widget-plugin-test-utils
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
 
   packages/shared/prettier-config-web-widgets:
     dependencies:
@@ -2786,25 +2852,25 @@ importers:
         version: 9.39.4
       '@prettier/plugin-xml':
         specifier: '>=3.4.1'
-        version: 3.4.2(prettier@3.8.4)
+        version: 3.4.2(prettier@3.9.4)
       eslint:
         specifier: ^9.39.3
         version: 9.39.4(jiti@2.6.1)
       globals:
         specifier: ^17.3.0
-        version: 17.6.0
+        version: 17.7.0
       prettier:
         specifier: ^3.8.1
-        version: 3.8.4
+        version: 3.9.4
       prettier-plugin-packagejson:
         specifier: ^2.5.19
-        version: 2.5.22(prettier@3.8.4)
+        version: 2.5.22(prettier@3.9.4)
 
   packages/shared/rollup-web-widgets:
     devDependencies:
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       rollup-plugin-copy:
         specifier: ^3.5.0
         version: 3.5.0
@@ -2824,10 +2890,10 @@ importers:
         version: link:../tsconfig-web-widgets
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -2854,7 +2920,7 @@ importers:
         version: link:../widget-plugin-mobx-kit
       downshift:
         specifier: ^9.0.9
-        version: 9.3.6(react@18.3.1)
+        version: 9.4.0(react@18.3.1)
       mendix:
         specifier: ^10.24.75382
         version: 10.24.75382
@@ -2892,10 +2958,10 @@ importers:
         version: link:../tsconfig-web-widgets
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       jest-environment-jsdom:
         specifier: ^29.7.0
         version: 29.7.0
@@ -2928,7 +2994,7 @@ importers:
         version: link:../widget-plugin-platform
       downshift:
         specifier: ^9.0.8
-        version: 9.3.6(react@18.3.1)
+        version: 9.4.0(react@18.3.1)
       mendix:
         specifier: 10.24.75382
         version: 10.24.75382
@@ -2953,10 +3019,10 @@ importers:
         version: link:../widget-plugin-test-utils
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -2990,10 +3056,10 @@ importers:
         version: link:../widget-plugin-test-utils
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -3017,10 +3083,10 @@ importers:
         version: link:../widget-plugin-platform
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -3051,10 +3117,10 @@ importers:
         version: link:../tsconfig-web-widgets
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
     optionalDependencies:
       react:
         specifier: '>=18.0.0 <19.0.0'
@@ -3073,10 +3139,10 @@ importers:
         version: link:../tsconfig-web-widgets
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       big.js:
         specifier: ^6.2.1
         version: 6.2.2
@@ -3138,10 +3204,10 @@ importers:
         version: link:../tsconfig-web-widgets
       '@swc/core':
         specifier: ^1.7.26
-        version: 1.15.41
+        version: 1.15.43
       '@swc/jest':
         specifier: ^0.2.36
-        version: 0.2.39(@swc/core@1.15.41)
+        version: 0.2.39(@swc/core@1.15.43)
       big.js:
         specifier: ^6.2.2
         version: 6.2.2
@@ -3157,8 +3223,8 @@ packages:
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
-  '@axe-core/playwright@4.11.3':
-    resolution: {integrity: sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==}
+  '@axe-core/playwright@4.12.1':
+    resolution: {integrity: sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==}
     peerDependencies:
       playwright-core: '>= 1.0.0'
 
@@ -3863,39 +3929,6 @@ packages:
     resolution: {integrity: sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==}
     hasBin: true
 
-  '@codemirror/autocomplete@6.20.3':
-    resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
-
-  '@codemirror/commands@6.10.3':
-    resolution: {integrity: sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==}
-
-  '@codemirror/lang-css@6.3.1':
-    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
-
-  '@codemirror/lang-html@6.4.11':
-    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
-
-  '@codemirror/lang-javascript@6.2.5':
-    resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
-
-  '@codemirror/language@6.12.3':
-    resolution: {integrity: sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==}
-
-  '@codemirror/lint@6.9.7':
-    resolution: {integrity: sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==}
-
-  '@codemirror/search@6.7.0':
-    resolution: {integrity: sha512-ZvGm99wc/s2cITtMT15LFdn8aH/aS+V+DqyGq/N5ZlV5vWtH+nILvC2nw0zX7ByNoHHDZ2IxxdW38O0tc5nVHg==}
-
-  '@codemirror/state@6.6.0':
-    resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
-
-  '@codemirror/theme-one-dark@6.1.3':
-    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
-
-  '@codemirror/view@6.43.1':
-    resolution: {integrity: sha512-+BIjw/AG3tDQ4pJgTLPYdAW25eDE66YsvM4LKyVPgGzVgZ4a9Wj1SRX8kPVKgBDdPt8oHtZ15F0qx7p0oOHdHw==}
-
   '@commitlint/cli@19.8.1':
     resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
     engines: {node: '>=v18'}
@@ -4333,24 +4366,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@lezer/common@1.5.2':
-    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
-
-  '@lezer/css@1.3.3':
-    resolution: {integrity: sha512-RzBo8r+/6QJeow7aPHIpGVIH59xTcJXp399820gZoMo9noQDRVpJLheIBUicYwKcsbOYoBRoLZlf2720dG/4Tg==}
-
-  '@lezer/highlight@1.2.3':
-    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
-
-  '@lezer/html@1.3.13':
-    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
-
-  '@lezer/javascript@1.5.4':
-    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
-
-  '@lezer/lr@1.4.10':
-    resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
-
   '@mapbox/geojson-rewind@0.5.2':
     resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
     hasBin: true
@@ -4358,9 +4373,9 @@ packages:
   '@mapbox/geojson-types@1.0.2':
     resolution: {integrity: sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==}
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2':
-    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
-    engines: {node: '>= 0.6'}
+  '@mapbox/jsonlint-lines-primitives@2.0.3':
+    resolution: {integrity: sha512-0SElaV0uMxEnxzBhhX9WTuPyUeMsAN/SS0i16tjuba4/mio63MG9khjC1a0JAiPGXAwvwm4UfHJURCN7nyudQg==}
+    engines: {node: '>= 22'}
 
   '@mapbox/mapbox-gl-supported@1.5.0':
     resolution: {integrity: sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==}
@@ -4393,9 +4408,6 @@ packages:
     resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==}
     hasBin: true
 
-  '@marijn/find-cluster-break@1.0.2':
-    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
-
   '@melloware/coloris@0.25.0':
     resolution: {integrity: sha512-RBWVFLjWbup7GRkOXb9g3+ZtR9AevFtJinrRz2cYPLjZ3TCkNRGMWuNbmQWbZ5cF3VU7aQDZwUsYgIY/bGrh2g==}
 
@@ -4414,8 +4426,8 @@ packages:
       '@cfworker/json-schema':
         optional: true
 
-  '@napi-rs/wasm-runtime@1.1.5':
-    resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
@@ -4538,8 +4550,8 @@ packages:
     resolution: {integrity: sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.61.0':
-    resolution: {integrity: sha512-cKA5B6lpFEMyMGjxF54QihfYpB4FkEGH+qZhtArDEG+wezQAJY8Pq6C7T1SjWz+FFzt3TbyoXBQYk/0292TdJA==}
+  '@playwright/test@1.61.1':
+    resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -4570,6 +4582,35 @@ packages:
     peerDependencies:
       prettier: ^3.0.0
 
+  '@radix-ui/primitive@1.1.4':
+    resolution: {integrity: sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==}
+
+  '@radix-ui/react-arrow@1.1.11':
+    resolution: {integrity: sha512-Kdil9BB1rIFC/khmf4hC35bn8701AJcizTU7G7cUbEbk5XqqbjDuHW60uUfKqO5WojjZcbAW51Q7P0hRmMLw8A==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.11':
+    resolution: {integrity: sha512-djW9+zeg137KQdlPtmE8xnaD+K2rcXXMWFrSg0hsmYZ6HRbdTA7tDHFgpaW9+huWVEu0RCabL+985T4TA0BE7g==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.3':
     resolution: {integrity: sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==}
     peerDependencies:
@@ -4588,8 +4629,139 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.6':
-    resolution: {integrity: sha512-wetd0QI77DbvrPpTAvH1SqOxsYF2wZe5TNxqwOd5Ty4XDpV3dpV0s8K/1MGMJBeY5o7lg8ub5VIt1Ub+yVen6g==}
+  '@radix-ui/react-direction@1.1.2':
+    resolution: {integrity: sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.14':
+    resolution: {integrity: sha512-4lUhWTWAjbDIqFrAPWJ3WqBOpO5YchVZ88X3nh6H9Lu5AFi5nCUeTPj3D8FSDmabmFeRe9ME0BDA4MwKTha5GQ==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.19':
+    resolution: {integrity: sha512-HZccBkbK0LOi8nYKIp5jll/zIRW0cCOmG6WWyqsSpmXCU+ZlcBbTqIwlBvPCu886C5RVu6c/kHV7xSP8IgYNHw==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.4':
+    resolution: {integrity: sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.11':
+    resolution: {integrity: sha512-Mn88Vg2whaRocGJNOH+DKFqYm6ySFPQaiwHNxZPyjn99B52KAEJWWY9NP83+nWdk2HM3rdov+STu9AG471Rt9w==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.2':
+    resolution: {integrity: sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.19':
+    resolution: {integrity: sha512-Mht9BVd1AIsNFVQr4KG3bIK7XQn5IXF0TL/2ObsrzOdc1loaly/+kBDL5roSCYn8j8XZkvpOD0WYLz2FQtH1Eg==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.3.2':
+    resolution: {integrity: sha512-3QXNeMkdshed1MR3LNoiCirBywRFPkD8ETJa/HlPuLwSajaQixf2ro+isoDNJlGABg9ug41XuZpINZJIle4XWg==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.13':
+    resolution: {integrity: sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.6':
+    resolution: {integrity: sha512-zdTk4PlUO0E18HnZ3wYbW0KkJJxWCdiNYp6g6X1PtONFhxVkg01vliTJAmwIszU6mHiyBOoW9P0rAugl5/hULQ==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.7':
+    resolution: {integrity: sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': '*'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.11':
+    resolution: {integrity: sha512-KqiGJcFaZDc+BvveAgU3ZhACg2MvSUDrCBx4lRR/ZVRNal0bvt8lBpvnSkep9heeOuF8Qfw3fszLDX4OpQ2NVw==}
     peerDependencies:
       '@types/react': '>=18.2.36'
       '@types/react-dom': '*'
@@ -4601,8 +4773,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-progress@1.1.10':
-    resolution: {integrity: sha512-JYzEg60lk79PwKM27WZyKd7PW8O4OM5jOaFfRPfOyeXmMw7tLJh5kSj+CEjVTehszuwml/AdCzPGMXBTGf4BBw==}
+  '@radix-ui/react-roving-focus@1.1.14':
+    resolution: {integrity: sha512-8Qcnx9447tx/aCBgw6Jenfqg4Skq+vqab9mCBmuGNipIS5YXvL275wbKEu7+ICYHIlAPgCduUMJH1XOYewKF6Q==}
     peerDependencies:
       '@types/react': '>=18.2.36'
       '@types/react-dom': '*'
@@ -4623,6 +4795,63 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.2':
+    resolution: {integrity: sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.3':
+    resolution: {integrity: sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.3':
+    resolution: {integrity: sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.2':
+    resolution: {integrity: sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.2':
+    resolution: {integrity: sha512-d8a+bBY/FxikNPlgJJoaBHZX+zKVbWHYJGTLnLvveQgFSTntkGdEKv3JDtHrMS0DNYpllz2nRsTLGLKYttbpmw==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.2':
+    resolution: {integrity: sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/rect@1.1.2':
+    resolution: {integrity: sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==}
+
   '@rc-component/motion@1.3.3':
     resolution: {integrity: sha512-Xh3IszxvlSv3/PLYFyC2UZi9LNB83yOnkB/LNmRzaypZLvkhqUIPS7MQpGZcCMWrNsXV2p6YTSWbSGvFpEle9A==}
     peerDependencies:
@@ -4879,141 +5108,141 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.62.0':
-    resolution: {integrity: sha512-IPIQ55ythEHkfEd9jMEi32OQ7SxURsGA43JI22lj01OLZNt2NUbJX8YUHxkVWyQ6daHPNn0truF5nSj3DQp6YQ==}
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.62.0':
-    resolution: {integrity: sha512-M6s9cr10MibETyo8JsOkq+Lo1+lU6hcvb1MApnUql5qte/5hMEgzlN8/ReIKNfRV8rrqX50W1BX9zoUhC192RA==}
+  '@rollup/rollup-android-arm64@4.62.2':
+    resolution: {integrity: sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.62.0':
-    resolution: {integrity: sha512-BqCoMoIbn0keKys+dEAdBa70EtOwV1bEsQCUgU9FdiZmmMge/Zk7LlkYGqbrdHR+Frnt0E1FOanly+rlwvvQzw==}
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    resolution: {integrity: sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.62.0':
-    resolution: {integrity: sha512-SIMzST3VFNXDAbeIWDWiFCNM5qncUBDWaEV7NfE7oZbDt2mgfW4MvbKdbYiGOLoM32gbTv608UMd0XktEYSD7w==}
+  '@rollup/rollup-darwin-x64@4.62.2':
+    resolution: {integrity: sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.62.0':
-    resolution: {integrity: sha512-ezjfSQMP7ArdUsbBwbQIfwAlhE84I2iVnzQNCFSveqV42q+BmKlzVpf7mxv5EchLcoWU4y6/heFzVg1F+hodUQ==}
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    resolution: {integrity: sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.62.0':
-    resolution: {integrity: sha512-9+qTWGW9AZRhnUgwtTwzNwcPlL87ngkeN0LA+q1bADvmY9aNvWaF2TFW8BZgnQPYxpDI7+rMVLivcd4V737TAQ==}
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    resolution: {integrity: sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.62.0':
-    resolution: {integrity: sha512-T1dMEQhXA/jkJ/jyMIw9IovK8bSUq7A8kLIlvZTb/6YIVsp2zLavr4F3oyllHWo7eIVJRyE5n3tUjQJEbE1IuQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    resolution: {integrity: sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.62.0':
-    resolution: {integrity: sha512-2as0LgT7qQpyceQq6VUJYnumUMUrgGQCWIiDIN9DE0/tglsk6o66uCB4f3djRawAltvfCNLyZZrsqbPA6inCsA==}
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    resolution: {integrity: sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.62.0':
-    resolution: {integrity: sha512-bVURMg+6eNN9C/yc0aVjooZcwTTtYF4YW3xta5pP0//r3o1V8gXEHXWCndj47w/HhwsFroZrFhR+6uQP5T0n0g==}
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    resolution: {integrity: sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.62.0':
-    resolution: {integrity: sha512-Ful8pM/2yYI83PViWdFdpZhdI8HJ5qsXANe5atypbHDf+KIBBDsZsbyy8hbXnULVvW9NsTh5DHwbcBftyLTfiw==}
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    resolution: {integrity: sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.62.0':
-    resolution: {integrity: sha512-9Gp/DgrkzfUBmNPVTyPTvay+4xEP7M/clXpj3efXBcm6uTIVIgDg4rqUpqKXvLEuFRVuEpSAOkhgNeecvaZ4Cg==}
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    resolution: {integrity: sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-loong64-musl@4.62.0':
-    resolution: {integrity: sha512-m9tsJz54LUXkSYM8+8PG81B9IKK5r+2T0clMq4QrS16xFosufU7firBDAZEsDheDs7wTlP7h3++S7lMsU955HA==}
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    resolution: {integrity: sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==}
     cpu: [loong64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.62.0':
-    resolution: {integrity: sha512-3UvJ5PNVU16aJf6M3tFI24pWzAl2/ynfbyRN3ICyQajK1lSkrnVYNnLz3v04J32qKa0FczJc22zeToc0lr2A3w==}
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    resolution: {integrity: sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-musl@4.62.0':
-    resolution: {integrity: sha512-vRWUAbYLGHBZS6Q8Msb2sfnf1fvJf+47t8l/TwOerM2qArzy+IeNMTHrYLHXh95h8MoatPHI5hhSZNs+mGXKPg==}
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    resolution: {integrity: sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==}
     cpu: [ppc64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.62.0':
-    resolution: {integrity: sha512-c00T5SYENHAt86cfW47URaP3Us5vLC/4QO7GYud1G5VNRffCwwCuBspwqYrriuJB+5m0WFzClCn9wed0FBjKvg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    resolution: {integrity: sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.62.0':
-    resolution: {integrity: sha512-krrCDilhXOwFkSkO3Wm9I/f9H0L92XHHwy2fwxjukxIbh0dem8gZqOW5Y8BsHrpJv5qwlRBV+Wl4ZFyRWhUpwg==}
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    resolution: {integrity: sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.62.0':
-    resolution: {integrity: sha512-7pfYFSTc4/rUC/FtAI0Qp6QthDBCIi6/AuP1xYqFk5vanI6KnL5dWKP60OM/05LOsbwTmIcvr6eXC4CJuJ75IA==}
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    resolution: {integrity: sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.62.0':
-    resolution: {integrity: sha512-7SDIalKeIpG0Ifogbbdn58HmSotYMlf23K3dCJEmiVd9Fg36Vmni82iPQec27N3wY4Bvbxftkxz6vSx9OcouTg==}
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.62.0':
-    resolution: {integrity: sha512-eRZevouTH2i1HeAVLqJuLnt256krQkGY0TN6WsTmsIhuzbh457HuWDMakKwmi0Cjadux983CoSr8Lim2QhUIFw==}
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    resolution: {integrity: sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openbsd-x64@4.62.0':
-    resolution: {integrity: sha512-3oVS7FLGa4U1qcvao9ylGxrjXZyUQqR8UwxEcnUEyPX53O/C/mKDZegNXTdHCP+h3e6ta/f1EN38Yif1mmZHYg==}
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    resolution: {integrity: sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==}
     cpu: [x64]
     os: [openbsd]
 
-  '@rollup/rollup-openharmony-arm64@4.62.0':
-    resolution: {integrity: sha512-yTB9TgfWj5wHe5QgktAgXTLLot1gvEjl1NiPPAUiCs4oPrIWFl5V4nC3GrkNdj9LaAU4s94nVrGbGOCqUpyWsg==}
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    resolution: {integrity: sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.62.0':
-    resolution: {integrity: sha512-5LOhoaesY3doG1c+ac/2JtgREpKoJr5bUHH8tKY0V8di7+uSV6BwLs2PlR0/yzefGOkR+wE7ZolZphHCsyG5Rw==}
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    resolution: {integrity: sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.62.0':
-    resolution: {integrity: sha512-yYkWHhmbhRTWTnWos5HC4GcPQfjlzzCNbM9e/+GXrLuaBXYA3qSDR9f0Vgufd5S8yX81U8jPKp7ZnAjZFMtRnw==}
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    resolution: {integrity: sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.62.0':
-    resolution: {integrity: sha512-SoTb6lPg25xZlA2ibwQ++ahCCnH+FP0qmEuafMJ4gznZKOlXioKEAeJLgCrqjM98ACziXM9V1amFjICVL4IFoA==}
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.62.0':
-    resolution: {integrity: sha512-5L+T1fMX4RIEBoZzT0+sQ0PhTS36NULFmMXtl1TZo44TMAROIMHbZufSOjVWt/Y622BtxgxtaNOokbTDvfsrZA==}
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    resolution: {integrity: sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==}
     cpu: [x64]
     os: [win32]
 
@@ -5035,86 +5264,86 @@ packages:
   '@sinonjs/fake-timers@15.4.0':
     resolution: {integrity: sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==}
 
-  '@swc/core-darwin-arm64@1.15.41':
-    resolution: {integrity: sha512-kREh6J5paQFvP3i7f/4FbqRNOJREutVFVOkder4GVyCBQ39YmER55cW/y1NNjwrchzFqgYswFn0mMDCqbqKzrw==}
+  '@swc/core-darwin-arm64@1.15.43':
+    resolution: {integrity: sha512-v1aVuvXdo/BHxJzco9V2xpHrvwWmhfS8t6gziY5wJxd+Z2h8AeJRnAwPD8itCDaGXVBwJ/CaKfxEzTkG0Va0OA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.15.41':
-    resolution: {integrity: sha512-N8B56ESFazZAWZyIkecADSPCwlLEinW7QLMEeotCpv4J7VXwfH+OLkmRL8o96UZ+1355fwHxDTS6/wK7yucvkA==}
+  '@swc/core-darwin-x64@1.15.43':
+    resolution: {integrity: sha512-lp3d4Lamc8dt5huYdGLSR+9hLxmfr1jb0l+4XXG2zPqZwYWRN9R0U2qYoTrggiU2RWW0oV9VbWM3kBnqIc2kdQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.15.41':
-    resolution: {integrity: sha512-6XrId2fyle0mS5xxON8rU84mPd2Cq1kDJRj+4BnQKTd7u+2kSA6Ww+JkOP0iTNqOqt9OXhPOEAjBHAuonWcdCg==}
+  '@swc/core-linux-arm-gnueabihf@1.15.43':
+    resolution: {integrity: sha512-JWTQQELtsG5GgphDrr/XqqmM2pDN3cZqbMS0Mrg+iTiXL3F74sn/S2IyYE/5u4h2KLkTf9qQ7dXyxsbx7YzkeA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.15.41':
-    resolution: {integrity: sha512-ynLIarxlkVnqHn1D0fKOVht6mNU5ks6lrH+MY3kkS+XFaGGgDxFZVjWKJlkYTKm3RCvBTfA8Ng5fLufXheMRKQ==}
+  '@swc/core-linux-arm64-gnu@1.15.43':
+    resolution: {integrity: sha512-B4otJRdPWIsmiSBf0uG7Z/+vMWmkufjz5MmYxubwKuZazDW14Zd3symga1N62QR4RT+kEFeHEgsXfZGyn/w0hw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-arm64-musl@1.15.41':
-    resolution: {integrity: sha512-dXu/5vd4gh8symyhRF+4G7gOPkjmb4pONhh7sl+6GSiW0LOKZlfu5kXmyFbTz9smOT7jgr002qY9b1nujjXt2A==}
+  '@swc/core-linux-arm64-musl@1.15.43':
+    resolution: {integrity: sha512-6zB6OnpViBxYy4tgY3v2i6AZY9fwkcHZ032UOwtwUuW1d19sdT07qF0kZe6/3UR1tUaK6jjg2rmVcUIBCEYVjQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-linux-ppc64-gnu@1.15.41':
-    resolution: {integrity: sha512-XGO6zVPXoPE0gf/XnI4jBbafNT13AYgoh6ns0JCSdOetI/kqVf0vhpz7NuNgAzZrMVCsmieqjPoTwViDgh4mOQ==}
+  '@swc/core-linux-ppc64-gnu@1.15.43':
+    resolution: {integrity: sha512-coxE1ZWdB3uSDVNoEtYNrRi/1epvckZx9cTJ8ICUxTMTxGk+yvQ/Twacp3ruZSaMPGCriUjP86C37VhaT6nyRg==}
     engines: {node: '>=10'}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-s390x-gnu@1.15.41':
-    resolution: {integrity: sha512-0WUglRwyZtW+iMi7J3iFdrCxreZZIKf4egTwEQfIYRsqFax69A0OrFj+NIoFSE03xBT/IFRrg+S8K6f9Ky+4hA==}
+  '@swc/core-linux-s390x-gnu@1.15.43':
+    resolution: {integrity: sha512-lXfLhs+LpBsD5inuYx+YDH5WsPPBQ95KPUiy8P5wq9ob9xKDZFqwNfU2QW6bGO8NqRO/H9JQomTSt5Yyh+FGfA==}
     engines: {node: '>=10'}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-gnu@1.15.41':
-    resolution: {integrity: sha512-VxkuQK59c0tHm6uJZCUrS3cyA2JhGGfdU6e41SZz0x/JS+4Sm7C1mIc97In14vkZJopEt7yXA2TouCqZDSygEA==}
+  '@swc/core-linux-x64-gnu@1.15.43':
+    resolution: {integrity: sha512-07XnKwTmKy8TGOZG3D9fRnLWGynxPjwQnZLVmBFbo6F+7vHYzBIOuwXEhemrChBWb6yDNZsVCcMWCPX6FDD2xg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-musl@1.15.41':
-    resolution: {integrity: sha512-/0qXIu1ZxggLuovLb22vFfKHq2AA4n6Whw5UwmVCHk4pkw7KWnPIQpMCEqUMPsNkFJig7PPp/TSYFu8ZEb2rtQ==}
+  '@swc/core-linux-x64-musl@1.15.43':
+    resolution: {integrity: sha512-TJc+bsSIaBh+hZvZ5GRtW/K1bw66TJ9vsUwvVIsZdiWxU5ObLwZvfcnZ3UpgVfMnFibRes9uriJrQNBHEEogRQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-win32-arm64-msvc@1.15.41':
-    resolution: {integrity: sha512-Y481sMNZM6rECh9VO4+y26N1lWEDAyxnBZskUf37fl90uHE946VHfmiVQWT0uMFOhyJJFovGTRuF4W82dwewUg==}
+  '@swc/core-win32-arm64-msvc@1.15.43':
+    resolution: {integrity: sha512-jfd7s2/bUQYkOHLs+LWQNKZdmDa8+sufKLllhpWAhVQ2GDCwsHe3vR/j+OSiItZNtkzFuaawa3+SAKz9y5gYfw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.15.41':
-    resolution: {integrity: sha512-BAchBD5qeUzy3hiPSLJtaaoSm4blCLyYffOF1bGE4ETcV+OisqjUAwDQMJj++4bTpvMCDzwC+Bj3PmQyBCtscw==}
+  '@swc/core-win32-ia32-msvc@1.15.43':
+    resolution: {integrity: sha512-rLAE8JvucqEW1ZGohxPQrQWPBQeJG4+ypKbWfdlU/qmKScvCkxf9/Jxnzki1dkUQCQ7P5Enp13RlvqOlvx/32g==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.15.41':
-    resolution: {integrity: sha512-WOkA+fJ/ViVBQDsSV9JC52NACTe5PhlurA6viASDZGb7HR3KS01ZG7RZ+Bg6SVQFIoq3gSbTsskQVe6EbHFAYw==}
+  '@swc/core-win32-x64-msvc@1.15.43':
+    resolution: {integrity: sha512-h8MLDHZcfIukwQWj03rIJZx1I0E81AYj2X7J/nGErG4nz+QAv6G1Z+peotvinL3lqpbo32tLYSMFo32/ySzxKg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.15.41':
-    resolution: {integrity: sha512-03nQq/082QRJJiOvp3FGbgxTGyyxMxohPTjhk/W9bD2J0tk4ukITI7goOhOO2WbaHn/lsPmo/zf8+DIXhwpgYQ==}
+  '@swc/core@1.15.43':
+    resolution: {integrity: sha512-1CuKjFkPxIgGdeHVuNbkxmBxkcbdc08u0aiI43pFq6yY1tTVKmXT9hFEooyyKs/sJ3xf1GPHyEwTtk9Xl8dvQw==}
     engines: {node: '>=10'}
     peerDependencies:
       '@swc/helpers': '>=0.5.17'
@@ -5175,77 +5404,304 @@ packages:
     peerDependencies:
       '@testing-library/dom': ^10.4.1
 
-  '@tootallnate/once@2.0.1':
-    resolution: {integrity: sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==}
-    engines: {node: '>= 10'}
+  '@tiptap/core@3.27.1':
+    resolution: {integrity: sha512-rV6Qn4wmC6BxfF+4mu6bqGWj9vA4oXXhsrpXaJL2uhjxeHAGofjwcHof2X84VYzeyXgdlsGmqKie4TAppVXZUQ==}
+    peerDependencies:
+      '@tiptap/pm': 3.27.1
 
-  '@tsconfig/node10@1.0.12':
-    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
+  '@tiptap/extension-blockquote@3.27.1':
+    resolution: {integrity: sha512-VMF7xJx6qEGiX6DTKNiL31NLqypOcd/4sNjFSe8rb41PwejBJh/nOqVIbBvWkiT6NMGFLxMhj7zJ8/zPo1hXeg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@tsconfig/node12@1.0.11':
-    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+  '@tiptap/extension-bold@3.27.1':
+    resolution: {integrity: sha512-TlC5bsS+pqETTrlz4CZz9RO/cKBYtELGIxwtKeivUn3eNfnOxQbbu4WDsiwIfzRFyd0OMnKl6BPM2KnYEehoEQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@tsconfig/node14@1.0.3':
-    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+  '@tiptap/extension-bubble-menu@3.27.1':
+    resolution: {integrity: sha512-j/j8Qp9Z5nViade2m7zjrO/CYH/Ca80Qj7aqo0eUaei6FZQ5izlF9o4XQU5EFMAutV6mwynsPUp8FVo5sCuYfw==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
 
-  '@tsconfig/node16@1.0.4':
-    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+  '@tiptap/extension-bullet-list@3.27.1':
+    resolution: {integrity: sha512-faCUHnRP47o9Zh9VZZX6EX/569udw9Vopm2PgEKPWuKLE2qaS5WBuUVU0iItdJmKUqaWiOZkpoW4jvnDmj0dfg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
 
-  '@turbo/darwin-64@2.9.18':
-    resolution: {integrity: sha512-9f27peFu16ur8c0v9nUFUEyBnbKuuFsUTjHFWfmwGfzySBXbHwzU44QhZon6Mznz0cHsIr3984NQj/bVrnGSRw==}
-    cpu: [x64]
-    os: [darwin]
+  '@tiptap/extension-code-block@3.27.1':
+    resolution: {integrity: sha512-pHlzmZx2OlHfyQ0yRlT5UL4mGokz947DthZuYefN1OleVqOkHpWBG+2JQwqoNq6bmzMne92zbH32rhcJUEYSjA==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
 
-  '@turbo/darwin-arm64@2.9.18':
-    resolution: {integrity: sha512-9A6TMRq/Ib+QnbhLlgkhOm+624wO4pzSQ/yQviQfWHOlFvaYxdnIAYmu2H6TS6y7kSVL0DvzNe04NbESTOzFVQ==}
-    cpu: [arm64]
-    os: [darwin]
+  '@tiptap/extension-code@3.27.1':
+    resolution: {integrity: sha512-epOUpFfEmBzjvnqvjv2qHX7NAuLo5dlOGV690lWu+sAYMjibuJBeVvAiKPyFCfRCCTUxdbDB3jbaOA1yEcEJ7w==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@turbo/linux-64@2.9.18':
-    resolution: {integrity: sha512-zCdIDtz69AnbYh913elJRRoF3QY5aa2HNnf+4rAkc7bQ+tWujiDkCNV7stazOUPggaDvhKIf2Z87qHftTeXSkw==}
-    cpu: [x64]
-    os: [linux]
+  '@tiptap/extension-color@3.27.1':
+    resolution: {integrity: sha512-9R/vW4dDTce0E0HU+AyfSkKhz08Hlrx7noRRj3CKrTwsCTR86wReTKFHlzxhLKZiDrJuV2Y7CtNG7KGrAArf+A==}
+    peerDependencies:
+      '@tiptap/extension-text-style': 3.27.1
 
-  '@turbo/linux-arm64@2.9.18':
-    resolution: {integrity: sha512-Va1kXI04naMgYwqv/5Dfa36dTDx8015U7oaQAjrXa45ua9OoFjSV4OmvkML4EmXvUclQHCiBRbY8bvd0jV7eAg==}
-    cpu: [arm64]
-    os: [linux]
+  '@tiptap/extension-document@3.27.1':
+    resolution: {integrity: sha512-8FbBTkfnRP4iVaoj+2h3iWa+H0eGDD3yTyVCwrmue/sQTkqUNUoSuAZa3GDG4Sd41xdPwTJxl9nUWGgM1qDCnw==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@turbo/windows-64@2.9.18':
-    resolution: {integrity: sha512-m0kDhZANxSNz9ck1ybogFscHabriAsp4eDFNrN/1H5WrgTF7b3VlcPZnhuO3v2+E2KnCbeAc+UUT10BZZHdDKw==}
-    cpu: [x64]
-    os: [win32]
+  '@tiptap/extension-dropcursor@3.27.1':
+    resolution: {integrity: sha512-blFf9x9RG0Qr7P3FoAH/033ffa+mMLZn34trVs8Vi0Ppk6FmJAg5HpYFOtmYoeREdNDJ5rHJKV7SoACbOHgskQ==}
+    peerDependencies:
+      '@tiptap/extensions': 3.27.1
 
-  '@turbo/windows-arm64@2.9.18':
-    resolution: {integrity: sha512-nUdR8WqoomUys9iIQmG45TMiizJ+5BV8egSeLLZba/AWblyp3fVBcIH1kSE58OtK4g2YzbMJEth6Ttv9w5rqMA==}
-    cpu: [arm64]
-    os: [win32]
+  '@tiptap/extension-floating-menu@3.27.1':
+    resolution: {integrity: sha512-BmJF1VqB7dSJkgAalrpVFj88WLhxKjcWPuWHOqf2ITrUU2832BhKLXKmxjWUy1gqV8PfNNVWtGfIERy7I0y0+Q==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
 
-  '@turf/area@7.3.5':
-    resolution: {integrity: sha512-sSn80wPT7XfBIDN3vurCPxhk9W4U8ozS/XImSqeLN8qveTICOxzZkhsGDMp0CuncaN+plWut4a2TdNM7mzZB6Q==}
+  '@tiptap/extension-font-family@3.27.1':
+    resolution: {integrity: sha512-sxPae35pbJSaF3IZRGDglB5z/7nzS9dmxLLjiQNWYmgUIs8+/EYcrsN/woYUS0nsgHswgBmg7DwBabunKLSGhQ==}
+    peerDependencies:
+      '@tiptap/extension-text-style': 3.27.1
 
-  '@turf/bbox@7.3.5':
-    resolution: {integrity: sha512-oG1ya/HtBjAIg4TimbWx+nOYPbY0bCvt82Bq8tm6sBw3qqtbOyRSfDz79Sq90TnH7DXJprJ1qnVGKNtZ6jemfw==}
+  '@tiptap/extension-gapcursor@3.27.1':
+    resolution: {integrity: sha512-QoezN0wdvXIwLQ4ee2ccWDaX3RG0lzgQpIMpMz55oPDhpUVax1+19ApsS53LkcktpS4EbnPL4xO4DaJk0Vp7PQ==}
+    peerDependencies:
+      '@tiptap/extensions': 3.27.1
 
-  '@turf/centroid@7.3.5':
-    resolution: {integrity: sha512-hkWaqwGFdOn6Tf0EWfn2yn1XZ1FWE1h2C5ZWstDMu/FxYO5DB+YjlmOFPl4K6SmSOEgdV07eK2vDCyPeTHqKGA==}
+  '@tiptap/extension-hard-break@3.27.1':
+    resolution: {integrity: sha512-iv/m9hzl6jfSj9Q8UEjAxONvCoUDaP7M9SRCPx3PaLNxA230TTD6RE0Ye4zFJ8ze7ZVoJJMAqg9Qpq1iYg2JOQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@turf/helpers@7.3.5':
-    resolution: {integrity: sha512-E/NMGV5MwbjjP7AJXBtsanC3yY8N2MQ87IGdIgkB2ji5AtBpwnH4L3gEqpYN4RlCJJWbLbzO91BbKv2waUd0eg==}
+  '@tiptap/extension-heading@3.27.1':
+    resolution: {integrity: sha512-SrC4l1kEIyv9ZXFaI/8LQqU2MyMmjczw7XXsWUQOTN4YXv0JyVgMNR3cI/wz0d2xsTfBdZ1N85Tdng+Ga1t0Sg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@turf/meta@7.3.5':
-    resolution: {integrity: sha512-r+ohqxoyqeigFB0oFrQx/YEHIkOKqcKpCjvZkvZs7Tkv+IFco5MezAd2zd4rzK+0DfFgDP3KpJc7HqrYjvEjhg==}
+  '@tiptap/extension-highlight@3.27.1':
+    resolution: {integrity: sha512-IeMIUKbW4oyRkgn92BPYQ0fifkbTwVigKwa107nGDHMokz+pHQPFHy8xG3U7gtUOra/8OUo57bFgNGuP0TaH4A==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@tybys/wasm-util@0.10.2':
-    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
+  '@tiptap/extension-horizontal-rule@3.27.1':
+    resolution: {integrity: sha512-QlKE7qn5qMnIGVGhXQlvYedvLtNJ9z0dmit5w8vPb8tKzW4Spk6M7N2kruprrDA8GBwHfeR5wmF+njfUm34qxg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
 
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+  '@tiptap/extension-image@3.27.1':
+    resolution: {integrity: sha512-+JTahgQT+NxiGjduaB3qJVyhU/wh4m3pVkht1Earioku2bm/apj5Lb8rSowa/NJYP3B+oQgV/V4YLw5dtDgBoA==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  '@tiptap/extension-italic@3.27.1':
+    resolution: {integrity: sha512-jGGeyn9uRUnNjSTHpbqhiGsp6KaYTSbV09jDXPJI9cDwfV9hpugLvpaCZd0BMBbhU1B1W6kOfX0BE15qX/HQfA==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
 
-  '@types/babel__generator@7.27.0':
+  '@tiptap/extension-link@3.27.1':
+    resolution: {integrity: sha512-/2jBfsxBZUDGJmpZifqRQPz7f1E5qpS1BckTZ39TADzUJX+feKy7RJ3DtQ02+8y6SSMzvP9loGVjrk6zEMTk4g==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-list-item@3.27.1':
+    resolution: {integrity: sha512-zwRl01ETfCkWUvtvK5fw9bXtAajMPkvlkE3Cq6JvH3LF7XXJwDtNj5Tj7exacMpCaSZmlNc43vFb2rAYnrnwMA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
+
+  '@tiptap/extension-list-keymap@3.27.1':
+    resolution: {integrity: sha512-OIMZNlzPSO8WRd4ic73Fxckzl4N1tesjjLL2XApaNA/uMpO0LoF6WSRPAWv+Z24Wp92ARRJAnRP7iZoI5+Jxig==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
+
+  '@tiptap/extension-list@3.27.1':
+    resolution: {integrity: sha512-c2Upru7lj0/ZV/Ibww6cNz6sUS8m6Dp/9uygFhYcZOd3X8M0xBIEk42c6m6SQehkPziVA8QOgNJz7sMqsbz1OQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-ordered-list@3.27.1':
+    resolution: {integrity: sha512-GYrKqD//9nHJ2r80uXqbDMzRnFpGzbaEQRTSGaO/SH7DvXWFMow8evkOdjQ7PCQO07jNjJo75+A85Jwu3Ov3AA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
+
+  '@tiptap/extension-paragraph@3.27.1':
+    resolution: {integrity: sha512-7K7eo1gruOgAsnbK+GCV23AUVUI0cL1bTig8HaPneoFMVbig7vddk8jNLKBWO8TXVbG7TuHdnDN4F98vdtwh5Q==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-strike@3.27.1':
+    resolution: {integrity: sha512-Y3DW1jlSlCNCyMGHP3+3qBNNPS83wuFz4RTYGjZtvRRTCRh7apZme9XRWMq1rN5mJ2Cr7fKocA2/5Bs13KgN6Q==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-subscript@3.27.1':
+    resolution: {integrity: sha512-A8bokr7c7QBndZcMX0F4AK1y4xEYd5MvOczojFusaiTfvAnH3D8PwFbOPQs3ZLB8W9K3bn4g/XH55P1IAPFGyg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-superscript@3.27.1':
+    resolution: {integrity: sha512-8021uld246dqhtzZdzjvnWcfiJwElPQ50zZe7Fc3QGFiNRDVWQ2ATXGJFmXEopgCU5GuZaytPMtAq4UVDXc6xw==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-table-cell@3.27.1':
+    resolution: {integrity: sha512-aopweoHugP+ZR5WTgb7mccXXWmjoNv7PBjtQDl8rvS4IWsJE1w23B+rkj7VuoncO8WK5bU3SS9O3l5aObql68w==}
+    peerDependencies:
+      '@tiptap/extension-table': 3.27.1
+
+  '@tiptap/extension-table-header@3.27.1':
+    resolution: {integrity: sha512-+J9EyKP6RMInfMJbIoNemqWzHxZe9XZv/7OjpsvtVZO1cxMTd5W1xIg0Ntr7YMdG9eKBC8Vwx5jjFbRm2tbM3A==}
+    peerDependencies:
+      '@tiptap/extension-table': 3.27.1
+
+  '@tiptap/extension-table-row@3.27.1':
+    resolution: {integrity: sha512-peEcbNRrJJ9Qc/WNKQNFbkwBrJvBvq22Dp5WNqEygn/ZJez1qD9ctd10+D6f3b9GtSyx12sfDgn8yBufWa+Iug==}
+    peerDependencies:
+      '@tiptap/extension-table': 3.27.1
+
+  '@tiptap/extension-table@3.27.1':
+    resolution: {integrity: sha512-tNB8kjxo0+XPremnWkd6NUikpeJ+JQrss7HntL8GgIxX4t0gkdnLn9yUWb0JzcaYP7Y8iTZZHdkPs0P154DG8Q==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-task-item@3.27.1':
+    resolution: {integrity: sha512-HxS85Xqlf9voWpqW6yJNExjnqy9AcQbvL7K41gzKUIaXZdNxAyEkUg7wve7WAd7AUPI9yrS9WONplhmq7pWuJw==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
+
+  '@tiptap/extension-task-list@3.27.1':
+    resolution: {integrity: sha512-5LaJU3q/O6S1aNe9uj/VbZ7uS8G9mJMvJGNm/wRGyR3HcZtHAcFsPh9+woylQvUThD0qO9OMeGXkgqRSE+ayuA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.27.1
+
+  '@tiptap/extension-text-align@3.27.1':
+    resolution: {integrity: sha512-EXawuJBO55wd8WcTbHTMoPhv0CGQxza4yCCPB5Hqz4ZPQwahIr3ej+8yp/kimIl0xokabwZ0/Fu8STQ4AkZv5g==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-text-style@3.27.1':
+    resolution: {integrity: sha512-J48WIl+6YDYTFPhWXUBQk+u7+AKVUqTdvrZOQyPYCGuQMgHrYzgWrI5+HeEifUgXJ5rMIWWP3qytp7KhVVqpDQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-text@3.27.1':
+    resolution: {integrity: sha512-6ZwaZwSrDh+KFFv6V1J79oO37yPs7y1bFxvk1/9Ih2rn3Xr5AWz+eMS+n8RpH3djBVVAQpdIAeYQgcn+VCSsTg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-underline@3.27.1':
+    resolution: {integrity: sha512-N889J4nXN/TPfVt8uF9N1A0SY82E90zwc1y26lqOcw6KWNLmQrlhMh/9OD4ikLDbekmFpOBq/UicpHf/6S8hbQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extension-youtube@3.27.1':
+    resolution: {integrity: sha512-3ThjdJ2+oQAq/t1aXDR8fGjRA+L6jJxZoNrOkw/KrysDmoflFd4Vn+7ZctKtop4fkC9GjX8NX6NzkfQoe4lCrQ==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+
+  '@tiptap/extensions@3.27.1':
+    resolution: {integrity: sha512-1Tdx9faw8k0/83V6X+xCDVhV8yElGt95JxeW3YMkKQJI56QdlPz0xOdJPlMiSGJKinPyVier+x9LJD/YZUZIaw==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/pm@3.27.1':
+    resolution: {integrity: sha512-Ffjx+vimmBU7zH/KrpXzJid3+pziCe/VL2aexSTP63cyQwKQ65LkFkCKaIsSpFdQQuakVZBGWjCA5RoBV852pw==}
+
+  '@tiptap/react@3.27.1':
+    resolution: {integrity: sha512-/Wn2fc9zMtX08MXYScDFsm4wJ8lzfhfPEdbtls7WCDlbtrop48PWlkHDBBJrywARfAQTB2mFs9KiFy9yrQm5Lg==}
+    peerDependencies:
+      '@tiptap/core': 3.27.1
+      '@tiptap/pm': 3.27.1
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
+  '@tiptap/starter-kit@3.27.1':
+    resolution: {integrity: sha512-vfxRsqW8rCc0k4pzo0ilU3wobVi2wqVj88VZI2SlgZlNnUAkrDGDIAph7CTa9k9fshV+O1ivpEgPC5yC046jow==}
+
+  '@tootallnate/once@2.0.1':
+    resolution: {integrity: sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==}
+    engines: {node: '>= 10'}
+
+  '@tsconfig/node10@1.0.12':
+    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@turbo/darwin-64@2.10.2':
+    resolution: {integrity: sha512-wBM3ObqOWnKUDmg7QfUFDkDHPFUAJmrYlYqmEM8jMPAPA/I6wRJIbWimeQUqhOiQ8xPKhzyWM+xaiUP0wz8FEQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/darwin-arm64@2.10.2':
+    resolution: {integrity: sha512-/Cq0joWnuMjDPfhjbFP4sv+C/7gkQ415zlaO4XUzD5EZxbtrKgXKvuuydMvogG8GeUnN1aDltW71RlmEfpjbyw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/linux-64@2.10.2':
+    resolution: {integrity: sha512-mMsf5IIhiKuceEXNstd25IbadjBXZ0amxzFOqliEzJX6HyeeHdBQPVSY583PWqYDyqM/FB8d5ZjkthfBSeuH3Q==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/linux-arm64@2.10.2':
+    resolution: {integrity: sha512-Wcng1i2kaKmXutmwxT9MUoYZvdaIekXAdlGr4+0TpgbhGLw7nDuEcRBFrxb5BbRoX1d1q8SpdRxLc45TvDZIdQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/windows-64@2.10.2':
+    resolution: {integrity: sha512-SsNhM7Ho7EpAdwtrJKBOic9Hso23vu6Dp0gAfLOvUFjPzurr/sGQlXZEvr6z89ne4RDOypTwz5CBDrixpMKtXw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/windows-arm64@2.10.2':
+    resolution: {integrity: sha512-Gf+S7ICAdimT/n02bOuVWKvhHnct/HYjZg3oBNIz5hZ9ZyWHbQim9J3P5Qip8WpX0ksxF7eaBVziJCuLnjhqDg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@turf/area@7.3.5':
+    resolution: {integrity: sha512-sSn80wPT7XfBIDN3vurCPxhk9W4U8ozS/XImSqeLN8qveTICOxzZkhsGDMp0CuncaN+plWut4a2TdNM7mzZB6Q==}
+
+  '@turf/bbox@7.3.5':
+    resolution: {integrity: sha512-oG1ya/HtBjAIg4TimbWx+nOYPbY0bCvt82Bq8tm6sBw3qqtbOyRSfDz79Sq90TnH7DXJprJ1qnVGKNtZ6jemfw==}
+
+  '@turf/centroid@7.3.5':
+    resolution: {integrity: sha512-hkWaqwGFdOn6Tf0EWfn2yn1XZ1FWE1h2C5ZWstDMu/FxYO5DB+YjlmOFPl4K6SmSOEgdV07eK2vDCyPeTHqKGA==}
+
+  '@turf/helpers@7.3.5':
+    resolution: {integrity: sha512-E/NMGV5MwbjjP7AJXBtsanC3yY8N2MQ87IGdIgkB2ji5AtBpwnH4L3gEqpYN4RlCJJWbLbzO91BbKv2waUd0eg==}
+
+  '@turf/meta@7.3.5':
+    resolution: {integrity: sha512-r+ohqxoyqeigFB0oFrQx/YEHIkOKqcKpCjvZkvZs7Tkv+IFco5MezAd2zd4rzK+0DfFgDP3KpJc7HqrYjvEjhg==}
+
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
     resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
 
   '@types/babel__template@7.4.4':
@@ -5290,8 +5746,8 @@ packages:
   '@types/glob@7.2.0':
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
 
-  '@types/google.maps@3.65.1':
-    resolution: {integrity: sha512-O9monmoXfyWsuyR4Wz3TZU26qai9y7jUV7DSRySluae6O5tQt3Obw5ETt0HKfNsjctnlF/yx/Tfn3WQNmKRXZA==}
+  '@types/google.maps@3.65.2':
+    resolution: {integrity: sha512-e52bmOhGCQSNabFpL48iQlwJybq6rfns8NUVJ20MR7CdPlHQ2RmSCnPbJfrUYJfogrE4OiHQTZ4LXpop+eer1w==}
 
   '@types/graceful-fs@4.1.9':
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
@@ -5428,6 +5884,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
   '@types/warning@3.0.4':
     resolution: {integrity: sha512-CqN8MnISMwQbLJXO3doBAV4Yw9hx9/Pyr2rZ78+NfaCnhyRA/nKrpyk6E7mKw17ZOaQdLpK9GiUjrqLzBlN3sg==}
 
@@ -5440,99 +5899,100 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
-  '@typescript-eslint/eslint-plugin@8.61.1':
-    resolution: {integrity: sha512-ZPlVl3PB3et/59Ne0fv/sci6ZXz4T4Hp4nTJ56i/Y0gR89ARb+KphojTq6j+56E5PIezmOIOOWyY+aWQFd+IkQ==}
+  '@typescript-eslint/eslint-plugin@8.62.1':
+    resolution: {integrity: sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.61.1
+      '@typescript-eslint/parser': ^8.62.1
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/parser@8.61.1':
-    resolution: {integrity: sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg==}
+  '@typescript-eslint/parser@8.62.1':
+    resolution: {integrity: sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/project-service@8.61.1':
-    resolution: {integrity: sha512-PrC4JYGmR241lYnfhmKGTXkFqv8+ymbTFgSAY0fVXpY82/QkMw5TZPl+vGzuDDU2QYJk9fIDOBTntF+yDv9LEA==}
+  '@typescript-eslint/project-service@8.62.1':
+    resolution: {integrity: sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.61.1':
-    resolution: {integrity: sha512-L2bdIeoQS8FlKAvONAr20w6OcLXeB+qiDKbAooS9A0Ben+iSIkBef0FxqwKWYqt5sa0i4KJtxVyVmhMylKzF5w==}
+  '@typescript-eslint/scope-manager@8.62.1':
+    resolution: {integrity: sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.61.1':
-    resolution: {integrity: sha512-UN/H4di+OO7EWx2ovME+8t31YO+KVnK0RRKEHR3kOt21/Ay8BOq3M1OMvWs5vNiqcFCYGYoxK3MXPZzmMUE+yg==}
+  '@typescript-eslint/tsconfig-utils@8.62.1':
+    resolution: {integrity: sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.61.1':
-    resolution: {integrity: sha512-GYRicKmVK0C4fsKgaACaknOUAq9Oa2kwsjnpFhFcS/5p4Ht5IP9OVLbgIgcK4SRk92nVHFluurg1lumD9dBcLw==}
+  '@typescript-eslint/type-utils@8.62.1':
+    resolution: {integrity: sha512-aXM5xlqXiTxPibXB93cLAURfT3rlizf7uMXISCXy66Isr/9hISJx3yDsKl0L7lKa51b8JpFuNKby0/O0pEm9jg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/types@8.61.1':
-    resolution: {integrity: sha512-G+CRlPqLv7Bz1IZVs03x5K59F1veqL0EJUROAdGhKsEq8qOiRiZbI+HUojPq5l0fEGOKModD9br6lObhB8zkoA==}
+  '@typescript-eslint/types@8.62.1':
+    resolution: {integrity: sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.61.1':
-    resolution: {integrity: sha512-u+oQD3BqYWPc8YV9Zab4vaJElJuwOLPRc10Jm1o/qS+6Qwen14HCWwx0Seo4LnSn2wxea2Ik8DxPt2/FHmuhrg==}
+  '@typescript-eslint/typescript-estree@8.62.1':
+    resolution: {integrity: sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/utils@8.61.1':
-    resolution: {integrity: sha512-1+P/3Dj6jvtybE1q0HQ6yBt/gq+oKJyLdEv4HdnqasaEXRSYCAsD59mXEVQnM/ULNdQxbX77tdG4jPRjIS6knA==}
+  '@typescript-eslint/utils@8.62.1':
+    resolution: {integrity: sha512-sHtbPfuKNZCG+ih8SyjjucqRntSVmp8XgL5u6o9mAhiSn8ds5o/M/XdM0abweme2Tln3szOstOrZ9OXitvPh0g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>5.8.0 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.61.1':
-    resolution: {integrity: sha512-6fJ9MHWtK14C1DSkiMlHUSOmrVebL7150xZJBlJiL62jjhIA4JmOq6flwBgDxIdBKKdoiZRel+dfPD5MLfny3w==}
+  '@typescript-eslint/visitor-keys@8.62.1':
+    resolution: {integrity: sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@uiw/codemirror-extensions-basic-setup@4.25.10':
-    resolution: {integrity: sha512-P3vytLlpE62KYSWrMUnwDCv2lvaQDuDZzyj03mHntuHo5bSl34fRZpjTY3kQTPGuXHxkGSYpoPFFj+hMTqaaMQ==}
+  '@uiw/color-convert@2.10.3':
+    resolution: {integrity: sha512-5tIjb4CZzGR7K3Sshswsuuc6FOAFNFwjtF0hkhKH3f+CMauC4Akv7LPq6o9v68S7dIAeKvfj8qWg5Tc2I1TVSA==}
     peerDependencies:
-      '@codemirror/autocomplete': '>=6.0.0'
-      '@codemirror/commands': '>=6.0.0'
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/lint': '>=6.0.0'
-      '@codemirror/search': '>=6.0.0'
-      '@codemirror/state': ^6.5.2
-      '@codemirror/view': ^6.38.1
+      '@babel/runtime': '>=7.19.0'
 
-  '@uiw/codemirror-theme-github@4.25.10':
-    resolution: {integrity: sha512-iMM2QT4FaebJMO4W7lXmxNkRPIjKzgY26wL0QG0Ugy0gzsnxoNz4zgNeFIblPA8rvrN3vOIhNNh4nk9UOlFKxA==}
+  '@uiw/react-color-compact@2.10.3':
+    resolution: {integrity: sha512-iXIG7idhaZ3XNFanKbVfFsL4w2GU5yWRUR+J5L1SzkXar1LTCjx7IDScweEBKnMdpPzDGiS2kTIn5anAif4ZDg==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
 
-  '@uiw/codemirror-themes@4.25.10':
-    resolution: {integrity: sha512-Fqiz1HIuDlDftcL+/O53V333UOH6MqQ84VbiQB5egn6u+uDwAqACp1FrdAoi4wgpR3b3TGW4Gr0wIYcrJSSz1A==}
+  '@uiw/react-color-editable-input-rgba@2.10.3':
+    resolution: {integrity: sha512-n0kyNTNicRKASJNWYJexfwwfbbwvOJEYGQO8tX4PivmZYQVuYZq/vqsgYG5y+VGrBYZsHFfY+0LtPS4AXlz+Aw==}
     peerDependencies:
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/state': ^6.5.2
-      '@codemirror/view': ^6.38.1
+      '@babel/runtime': '>=7.19.0'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
+  '@uiw/react-color-editable-input@2.10.3':
+    resolution: {integrity: sha512-QnYNpFI0p8pssYbWxIJwfmUdPwzzX0IXOAl4mU8q1HQNYoXFBGFJ4rXkJSOdauumAfOr4C8RKZlTB4/83EBBPQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
 
-  '@uiw/react-codemirror@4.25.10':
-    resolution: {integrity: sha512-DzgSMwM5qzB7v1FIb4gEeriYt67iiay756/HIOM9mAbeOVK0MO7rqefHf0O5c0269pJKMW7AH9FjclExD23V9w==}
+  '@uiw/react-color-swatch@2.10.3':
+    resolution: {integrity: sha512-7Q/h9RTeloFnrIo/k6U5g+D/abSIT62FiAQZLaEC34O2eOtu1LQReTXAgx39b1HSQ8piCgBYaQc7oM9WhRTPow==}
     peerDependencies:
-      '@babel/runtime': '>=7.11.0'
-      '@codemirror/state': ^6.5.2
-      '@codemirror/theme-one-dark': '>=6.0.0'
-      '@codemirror/view': ^6.38.1
-      codemirror: '>=6.0.0'
+      '@babel/runtime': '>=7.19.0'
       react: '>=18.0.0 <19.0.0'
       react-dom: '>=18.0.0 <19.0.0'
 
-  '@ungap/structured-clone@1.3.1':
-    resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
+  '@ungap/structured-clone@1.3.2':
+    resolution: {integrity: sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==}
 
   '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     resolution: {integrity: sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==}
@@ -5781,6 +6241,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -5878,8 +6342,8 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.11.4:
-    resolution: {integrity: sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==}
+  axe-core@4.12.1:
+    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
     engines: {node: '>=4'}
 
   babel-jest@29.7.0:
@@ -5970,8 +6434,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.10.37:
-    resolution: {integrity: sha512-girxaJ7WZssDOFhzCGZTDKoTa1gk6A1TbflaYTpykLJ4UU9Fz9kx1aREM8JCuoVHbL8X8T/mJg7w2oYSq72Oig==}
+  baseline-browser-mapping@2.10.40:
+    resolution: {integrity: sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -6010,8 +6474,8 @@ packages:
   brace-expansion@2.1.1:
     resolution: {integrity: sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==}
 
-  brace-expansion@5.0.6:
-    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
+  brace-expansion@5.0.7:
+    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
     engines: {node: 18 || 20 || >=22}
 
   braces@3.0.3:
@@ -6027,8 +6491,8 @@ packages:
   brandi@5.1.0:
     resolution: {integrity: sha512-wGAIaC/pj/SMRCc7RdEhawT83YcbuxSViRAWp0d5cWOCjpGqAzCJo8NeiL/5rUbAPL4zlQ45ciz5eMnARMGygA==}
 
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+  browserslist@4.28.4:
+    resolution: {integrity: sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -6076,8 +6540,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001799:
-    resolution: {integrity: sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==}
+  caniuse-lite@1.0.30001800:
+    resolution: {integrity: sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==}
 
   canvas@3.2.3:
     resolution: {integrity: sha512-PzE5nJZPz72YUAfo8oTp0u3fqqY7IzlTubneAihqDYAUcBk7ryeCmBbdJBEdaH0bptSOe2VT2Zwcb3UaFyaSWw==}
@@ -6180,9 +6644,6 @@ packages:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
-  codemirror@6.0.2:
-    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
-
   collect-v8-coverage@1.0.3:
     resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
 
@@ -6373,9 +6834,6 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
-  crelt@1.0.6:
-    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
-
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -6690,6 +7148,9 @@ packages:
     resolution: {integrity: sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -6759,8 +7220,8 @@ packages:
     peerDependencies:
       react: '>=18.0.0 <19.0.0'
 
-  downshift@9.3.6:
-    resolution: {integrity: sha512-xEKP1vbt/k7Siu481TKibmj8EyL6iyBwaRJgb6gCsFyLeiyZ1KEJnApS9R1U71hTdK5ym0R99AOYRROcTz1PeQ==}
+  downshift@9.4.0:
+    resolution: {integrity: sha512-yIwyzRYzycKwMZhvOahsn4BmRr4Ffi0JymdWOtTDhR+LGDEXCZHTcwgUbNBC/oZLT6YrR46iwJe/BrQUS5ClQQ==}
     peerDependencies:
       react: '>=18.0.0 <19.0.0'
 
@@ -6784,8 +7245,8 @@ packages:
   earcut@2.2.4:
     resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
 
-  earcut@3.0.2:
-    resolution: {integrity: sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==}
+  earcut@3.2.0:
+    resolution: {integrity: sha512-qy0wTgkOKsKC0cHVd4cKFfaO5u7egzs0F2bQ/9l5Pvm0EJM4XDdUMFoCJrxmWc2Fc3sRFa8l6gds8tx+6BcN8g==}
 
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
@@ -6798,8 +7259,8 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.373:
-    resolution: {integrity: sha512-G2Hym8JIf/QreuseqkDibgH8Ci8KfJzqGDKdakbhSx9UltwRBH2cBLAWU/lBX0sCdv0TlhyxQyDCnSfxgMWsjA==}
+  electron-to-chromium@1.5.383:
+    resolution: {integrity: sha512-I2484/KkAvl8lm9VyjH2JnbOIV0d/UCqT7gbzs6l+o6Vmn9wgB66uVcKX+Vk6HrXtY6fbWTOEXuv8waDTuFNCw==}
 
   elementary-circuits-directed-graph@1.3.1:
     resolution: {integrity: sha512-ZEiB5qkn2adYmpXGnJKkxT8uJHlW/mxmBpmeqawEHzPxh9HkLD4/1mFYX5l0On+f6rcPIt8/EWlRU2Vo3fX6dQ==}
@@ -6889,8 +7350,8 @@ packages:
     resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
     engines: {node: '>= 0.4'}
 
-  es-to-primitive@1.3.1:
-    resolution: {integrity: sha512-CxN9N56HYfd2m/acc/NOFrZQsN9kU4eh+2kk6A707Kz1krH8tKmfrs5RnftB8WNX80T0NS7vSQsDOlg23diR2g==}
+  es-to-primitive@1.3.4:
+    resolution: {integrity: sha512-yPDz7wqpg1/mmHLmS3tcfTfbw5f1eryXvyghYBffGdERwe+mV7ZcWzTR8LR17Kvqt3qfPurjlonmnq3MKXIOXw==}
     engines: {node: '>= 0.4'}
 
   es5-ext@0.10.64:
@@ -6983,8 +7444,8 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-jest@29.15.2:
-    resolution: {integrity: sha512-kEN4r9RZl1xcsb4arGq89LrcVdOUFII/JSCwtTPJyv16mDwmPrcuEQwpxqZHeINvcsd7oK5O/rhdGlxFRaZwvQ==}
+  eslint-plugin-jest@29.15.4:
+    resolution: {integrity: sha512-6ln5i9Nkrb27X4w91ZPt/xHDsVQnvxTS2ntgq6r32u+8gymdUrp88TdcBXSveZW0Dl+M5v2H6K75kJhMvUGhjg==}
     engines: {node: ^20.12.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^8.0.0
@@ -7131,9 +7592,6 @@ packages:
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
-  eventemitter3@5.0.4:
-    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
-
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -7204,6 +7662,10 @@ packages:
   fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
+  fast-equals@5.4.0:
+    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -7217,8 +7679,8 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-uri@3.1.2:
-    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+  fast-uri@3.1.3:
+    resolution: {integrity: sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==}
 
   fast-xml-parser@4.5.6:
     resolution: {integrity: sha512-Yd4vkROfJf8AuJrDIVMVmYfULKmIJszVsMv7Vo71aocsKgFxpdlpSHXSaInvyYfgw2PRuObQSW2GFpVMUjxu9A==}
@@ -7304,8 +7766,12 @@ packages:
   flow-enums-runtime@0.0.6:
     resolution: {integrity: sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw==}
 
-  flow-parser@0.318.0:
-    resolution: {integrity: sha512-66vPPqpjOcroUke2vbiyRNS87lbTi7ib80CM9lsn45qymGHPL4nrdY9FKo0TvtrFFqHQErfB/BJeqVkEnWeK/g==}
+  flow-estree@0.321.0:
+    resolution: {integrity: sha512-rQY7YKoo+PKpAHQjEP2cxyIefk04OCEKUlbtV4y6LAUG3Ly7guQX9YH8th6drSmYcNkMgpqWMaHRhhYaAF69CA==}
+    engines: {node: '>=18'}
+
+  flow-parser@0.321.0:
+    resolution: {integrity: sha512-9LNK2rp/NWWbwdEK6mxC54XfQRyD2lVV0iPVBYf+5o5vvqJl7ietkR1hX3/dZ39j0GAbL4PIFoeekDViOW0x/Q==}
     engines: {node: '>=0.4.0'}
 
   font-atlas@2.1.0:
@@ -7348,8 +7814,8 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
-  fs-extra@11.3.5:
-    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+  fs-extra@11.3.6:
+    resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
     engines: {node: '>=14.14'}
 
   fs-extra@8.1.0:
@@ -7407,6 +7873,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -7433,7 +7903,7 @@ packages:
   git-raw-commits@4.0.0:
     resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
     engines: {node: '>=16'}
-    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
+    deprecated: Deprecated and no longer maintained. Use @conventional-changelog/git-client instead.
     hasBin: true
 
   github-from-package@0.0.0:
@@ -7498,8 +7968,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@17.6.0:
-    resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
+  globals@17.7.0:
+    resolution: {integrity: sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -7632,6 +8102,10 @@ packages:
   hermes-parser@0.36.0:
     resolution: {integrity: sha512-GdpwMmH5x6IpC1cijvcvYnlPB60Mh6kTSF/NFdYV/j56gYdi+0RIakYs+eqOV+bbO0SW7mgVVGSsTJxyPQfo3w==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   hono@4.12.25:
     resolution: {integrity: sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ==}
     engines: {node: '>=16.9.0'}
@@ -7727,8 +8201,8 @@ packages:
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
-  immutable@5.1.6:
-    resolution: {integrity: sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==}
+  immutable@5.1.9:
+    resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}
 
   import-cwd@3.0.0:
     resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
@@ -8394,12 +8868,12 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@3.14.2:
-    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+  js-yaml@3.15.0:
+    resolution: {integrity: sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog==}
     hasBin: true
 
-  js-yaml@4.2.0:
-    resolution: {integrity: sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==}
+  js-yaml@4.3.0:
+    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
     hasBin: true
 
   jsbarcode@3.12.3:
@@ -8584,16 +9058,9 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
-  lodash.clonedeep@4.5.0:
-    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
-
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
-  lodash.isequal@4.5.0:
-    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
-    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
-
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -8746,8 +9213,8 @@ packages:
   mendix@10.24.75382:
     resolution: {integrity: sha512-ICMxqkWUejsc3KeFD9BJYvC+T4soi/NB2iapwWPC7oN0lCrFx36upzwI4rU77oMdRHsrVSsFVYLBy7sJJOABHw==}
 
-  mendix@11.10.0:
-    resolution: {integrity: sha512-OsLdgNJfhwG4/TcOIMMk0gu0ewHq3Xlv2CNW1YJy2ujqD19ngFvBVB9YTjYxmf+RMn1EG0FQYrn6zCSFzmbL4A==}
+  mendix@11.12.0:
+    resolution: {integrity: sha512-p6CF7Uqz4NvL0ylaOug16BxEhvV3g0MP7HzG6xr6PYKi3ADOQVy5secDlSj08qFTsjWZjqS463So2Fj9/QMv+g==}
 
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
@@ -8972,8 +9439,8 @@ packages:
     resolution: {integrity: sha512-Jd0fILWG44a9luj8v5kED4WI+zfkkgwKyRQKItTtlPfEsh7Lznfi1kr8/iZ+XAIss4Qq5GqRB0qtWbaz9ceO/A==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
-  nanoid@3.3.12:
-    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -9009,8 +9476,8 @@ packages:
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
-  node-abi@3.92.0:
-    resolution: {integrity: sha512-KdHvFWZjEKDf0cakgFjebl371GPsISX2oZHcuyKqM7DtogIsHrqKeLTo8wBHxaXRAQlY2PsPlZmfo+9ZCxEREQ==}
+  node-abi@3.93.0:
+    resolution: {integrity: sha512-Cu6yUpX5Iavugm8BeX7c0wgU9CvOqfd1yM6A1d2q2ZMjym7GjpASv2GdRcTq3Fx+Sb5OgBkEEpw4VnAbY6Y5RA==}
     engines: {node: '>=10'}
 
   node-addon-api@7.1.1:
@@ -9021,8 +9488,8 @@ packages:
     engines: {node: '>=10.5.0'}
     deprecated: Use your platform's native DOMException instead
 
-  node-exports-info@1.6.0:
-    resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
+  node-exports-info@1.6.2:
+    resolution: {integrity: sha512-kXs9Go0cah0qHVV2v389IXQLdLCeE1xfFtjOAF+iobu0OIoG1pje8At2vMHyaPMiPMnG/LWP50twML21eMcAag==}
     engines: {node: '>= 0.4'}
 
   node-fetch@2.7.0:
@@ -9041,8 +9508,8 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
-  node-releases@2.0.47:
-    resolution: {integrity: sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==}
+  node-releases@2.0.50:
+    resolution: {integrity: sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==}
     engines: {node: '>=18'}
 
   nopt@10.0.1:
@@ -9162,6 +9629,9 @@ packages:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -9224,9 +9694,6 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
-  parchment@3.0.0:
-    resolution: {integrity: sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -9358,16 +9825,16 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
-  playwright-core@1.61.0:
-    resolution: {integrity: sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==}
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
     engines: {node: '>=18'}
     hasBin: true
 
   playwright-ctrf-json-reporter@0.0.27:
     resolution: {integrity: sha512-FZ8KadoHJc7xhf5XM0R9F8XBsTSm4vywa5/fhmeo2nZhN31UmapYwRfxaBsGk6AbsvGmft5G+MVmkBjTJZic/Q==}
 
-  playwright@1.61.0:
-    resolution: {integrity: sha512-Z+7BeeqQPRRzklHsVFP4KTGIyMxKUmfeRA4WisM6G3/XW6nwGeX6fX9qYaDa+CiUqpOkb2f6X3nar05R3kSuJQ==}
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -9619,8 +10086,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.15:
-    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
     engines: {node: ^10 || ^12 || >=14}
 
   potpack@1.0.2:
@@ -9651,8 +10118,8 @@ packages:
       prettier:
         optional: true
 
-  prettier@3.8.4:
-    resolution: {integrity: sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==}
+  prettier@3.9.4:
+    resolution: {integrity: sha512-yWG/o/4oJfo036EKAfK6ACAoDOfHeRHx4tuxkfBZiauURiaSmYwlpOr5LQqKtIkRD2z1PLteme2WoxEnj4tHTg==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -9706,6 +10173,45 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  prosemirror-changeset@2.4.1:
+    resolution: {integrity: sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==}
+
+  prosemirror-commands@1.7.1:
+    resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+
+  prosemirror-dropcursor@1.8.2:
+    resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.9:
+    resolution: {integrity: sha512-pRTklkDDMMRopyoAcrr9wV/8g/RYgrLHBuJAb5hlEuYZRdm5yqmPjWId83fpBwPpSFqEdja0H7Dfd7z1X/npcA==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.12.0:
+    resolution: {integrity: sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==}
+
+  prosemirror-view@1.41.9:
+    resolution: {integrity: sha512-clTunTX+eaLbr87L1V1QPheRlEQJyTlL3gXe9x3jQIk3rL0RVWxviDGz8tFaydwIVm+hKhYCyr+R/zBtWr9s6A==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -9747,8 +10253,8 @@ packages:
     peerDependencies:
       react: '>=18.0.0 <19.0.0'
 
-  qs@6.15.2:
-    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
+  qs@6.15.3:
+    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
     engines: {node: '>=0.6'}
 
   querystringify@2.2.0:
@@ -9766,17 +10272,6 @@ packages:
   quickselect@3.0.0:
     resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
 
-  quill-delta@5.1.0:
-    resolution: {integrity: sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==}
-    engines: {node: '>= 12.0.0'}
-
-  quill-resize-module@2.1.3:
-    resolution: {integrity: sha512-Hrs/pwKqmnEkY8Z5zbp4LxdLSHmQBXGAR5yzEFDeSfWTZIMpi6yII/dqIeXfwQBKAxWAVSxEeWqY7DMZ2GLTaQ==}
-
-  quill@2.0.3:
-    resolution: {integrity: sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==}
-    engines: {npm: '>=8.2.3'}
-
   raf@3.4.1:
     resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
 
@@ -9787,6 +10282,10 @@ packages:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
+  range-parser@1.3.0:
+    resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
+    engines: {node: '>= 0.6'}
+
   raw-body@3.0.2:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
@@ -9832,8 +10331,8 @@ packages:
     peerDependencies:
       react: '>=18.0.0 <19.0.0'
 
-  react-image-crop@11.0.10:
-    resolution: {integrity: sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==}
+  react-image-crop@11.1.2:
+    resolution: {integrity: sha512-+0Pc2fxpwKL4u4oLmdKBw8XSwUceFbXbKEHvFOlsl/MGB1OVNic4uBlAPmEHGXYgoJIq+b63xHbc/aJMG0AVkA==}
     peerDependencies:
       react: '>=18.0.0 <19.0.0'
 
@@ -9898,6 +10397,48 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-scroll-sync@1.0.2:
+    resolution: {integrity: sha512-uQTyayj/DbkejXFwsQI7o+5+pNC2uXJVsYpiGVOMKTF6NzIoE6cvEsw4NjTEKAX21iSgTJexWIE2WWyD3oBtsA==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
+  react-simple-code-editor@0.14.1:
+    resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-test-renderer@19.2.7:
     resolution: {integrity: sha512-U4TyPDJ9MsC8rFimXuJum8w40aPc9kbOZYO8Pc2/4A884i8hwJsMNA/JNyuOc/f2/37wHvk7HjpVl1V4re7Dig==}
     peerDependencies:
@@ -9933,8 +10474,8 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+  recast@0.23.12:
+    resolution: {integrity: sha512-dEWRjcINDu/F4l2dYx57ugBtD7HV9KXESyxhzw/MqWLeglJrsjJKqACPyUPg+6AF8mIgm+Zi0dZ3ACoIg+QtpA==}
     engines: {node: '>= 4'}
 
   rechoir@0.6.2:
@@ -10096,11 +10637,14 @@ packages:
     peerDependencies:
       rollup: ^2.0.0 || ^3.0.0 || ^4.0.0
 
-  rollup@4.62.0:
-    resolution: {integrity: sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==}
+  rollup@4.62.2:
+    resolution: {integrity: sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   router@2.2.0:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
@@ -10169,8 +10713,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.8.4:
-    resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==}
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -10189,8 +10733,8 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
-  serialize-javascript@7.0.5:
-    resolution: {integrity: sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==}
+  serialize-javascript@7.0.7:
+    resolution: {integrity: sha512-YAy8Od6KV+uuwUuU50np8fGB/Aues6Y0nAhA9y/hId74PlKUcme4pXcBD46NWKr1Q4osN/iseZ17YqO1XfmI8g==}
     engines: {node: '>=20.0.0'}
 
   serve-static@1.16.3:
@@ -10242,8 +10786,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.4:
-    resolution: {integrity: sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==}
+  shell-quote@1.9.0:
+    resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
     engines: {node: '>= 0.4'}
 
   shelljs@0.10.0:
@@ -10510,9 +11054,6 @@ packages:
   style-inject@0.3.0:
     resolution: {integrity: sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==}
 
-  style-mod@4.1.3:
-    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
-
   stylehacks@5.1.1:
     resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -10562,11 +11103,11 @@ packages:
     resolution: {integrity: sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tabbable@6.4.0:
-    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+  tabbable@6.5.0:
+    resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==}
 
-  tar-fs@2.1.4:
-    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
+  tar-fs@2.1.5:
+    resolution: {integrity: sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==}
 
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
@@ -10738,8 +11279,8 @@ packages:
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
-  turbo@2.9.18:
-    resolution: {integrity: sha512-bwabv6PupzeavybzEoArBAkwq5fnzwf8OFnRtpHwnviFWuwJPFxtyH+aVp36TmIqK3aYYgtTJ3J0m2ysxxSzQg==}
+  turbo@2.10.2:
+    resolution: {integrity: sha512-wTExrNrRjB8qzIcg+ZLm0A3GFNLDsWNwdS/RBXB0FPrBDyzk3i96Yx+TxWZC7a0k1SIreFB8ciUbxjmEqTH8IQ==}
     hasBin: true
 
   tweetnacl@1.0.3:
@@ -10794,8 +11335,8 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
-  typescript-eslint@8.61.1:
-    resolution: {integrity: sha512-V7PayAfJokV3pEHgN7/v03D1SpujhRfQtYLbLIiBfDDncdg4PAiRBfoS4cnCANK4jmAPncczi59QO3afiXUlNw==}
+  typescript-eslint@8.62.1:
+    resolution: {integrity: sha512-vymnnM5g0AKQDSAyfP12nMIBvgwgA42syg74kkuZ4x1VuTzwQKwc5h9rGxeShCjny5o+zWAb6OEoz7XLgrIkIw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
@@ -10806,11 +11347,6 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  typescript@6.0.3:
-    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
@@ -10888,6 +11424,26 @@ packages:
   url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '>=18.2.36'
+      react: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -10900,8 +11456,8 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
-  uuid@14.0.0:
-    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+  uuid@14.0.1:
+    resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
     hasBin: true
 
   v8-compile-cache-lib@3.0.1:
@@ -11150,12 +11706,12 @@ packages:
     resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  yargs@16.2.0:
-    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+  yargs@16.2.2:
+    resolution: {integrity: sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==}
     engines: {node: '>=10'}
 
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+  yargs@17.7.3:
+    resolution: {integrity: sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==}
     engines: {node: '>=12'}
 
   yn@3.1.1:
@@ -11170,8 +11726,8 @@ packages:
     resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
     engines: {node: '>=12.20'}
 
-  zip-a-folder@6.1.1:
-    resolution: {integrity: sha512-8hjtUn4YQpj8HZvDwtGHhol27oDf+D1x70ldKwA3Bwru6gup62fDVrBTd+BC90/8REgjdCa5ep7EsBiGHudSdA==}
+  zip-a-folder@6.1.2:
+    resolution: {integrity: sha512-M2MC7HTJTFux2UrSmjBamaoLr71g9rkr3n6TaAvArvkgaxuuaZCMrWhYyA2SNYp+NISUave9xuQw3kWS7c25fw==}
     hasBin: true
 
   zod-to-json-schema@3.25.2:
@@ -11202,10 +11758,10 @@ snapshots:
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
 
-  '@axe-core/playwright@4.11.3(playwright-core@1.61.0)':
+  '@axe-core/playwright@4.12.1(playwright-core@1.61.1)':
     dependencies:
-      axe-core: 4.11.4
-      playwright-core: 1.61.0
+      axe-core: 4.12.1
+      playwright-core: 1.61.1
 
   '@babel/code-frame@7.29.7':
     dependencies:
@@ -11259,7 +11815,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -12091,98 +12647,15 @@ snapshots:
     dependencies:
       commander: 2.20.3
 
-  '@codemirror/autocomplete@6.20.3':
-    dependencies:
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/common': 1.5.2
-
-  '@codemirror/commands@6.10.3':
-    dependencies:
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/common': 1.5.2
-
-  '@codemirror/lang-css@6.3.1':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.3
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@lezer/common': 1.5.2
-      '@lezer/css': 1.3.3
-
-  '@codemirror/lang-html@6.4.11':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.3
-      '@codemirror/lang-css': 6.3.1
-      '@codemirror/lang-javascript': 6.2.5
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/common': 1.5.2
-      '@lezer/css': 1.3.3
-      '@lezer/html': 1.3.13
-
-  '@codemirror/lang-javascript@6.2.5':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.3
-      '@codemirror/language': 6.12.3
-      '@codemirror/lint': 6.9.7
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/common': 1.5.2
-      '@lezer/javascript': 1.5.4
-
-  '@codemirror/language@6.12.3':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/common': 1.5.2
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.10
-      style-mod: 4.1.3
-
-  '@codemirror/lint@6.9.7':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      crelt: 1.0.6
-
-  '@codemirror/search@6.7.0':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      crelt: 1.0.6
-
-  '@codemirror/state@6.6.0':
-    dependencies:
-      '@marijn/find-cluster-break': 1.0.2
-
-  '@codemirror/theme-one-dark@6.1.3':
-    dependencies:
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-      '@lezer/highlight': 1.2.3
-
-  '@codemirror/view@6.43.1':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      crelt: 1.0.6
-      style-mod: 4.1.3
-      w3c-keyname: 2.2.8
-
-  '@commitlint/cli@19.8.1(@types/node@24.12.4)(typescript@6.0.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.12.4)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.12.4)(typescript@6.0.3)
+      '@commitlint/load': 19.8.1(@types/node@24.12.4)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
       tinyexec: 1.2.4
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - '@types/node'
       - typescript
@@ -12216,7 +12689,7 @@ snapshots:
   '@commitlint/is-ignored@19.8.1':
     dependencies:
       '@commitlint/types': 19.8.1
-      semver: 7.8.4
+      semver: 7.8.5
 
   '@commitlint/lint@19.8.1':
     dependencies:
@@ -12225,15 +12698,15 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@24.12.4)(typescript@6.0.3)':
+  '@commitlint/load@19.8.1(@types/node@24.12.4)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
       '@commitlint/resolve-extends': 19.8.1
       '@commitlint/types': 19.8.1
       chalk: 5.6.2
-      cosmiconfig: 9.0.2(typescript@6.0.3)
-      cosmiconfig-typescript-loader: 6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.2(typescript@6.0.3))(typescript@6.0.3)
+      cosmiconfig: 9.0.2(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.2(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -12355,7 +12828,7 @@ snapshots:
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.2.0
+      js-yaml: 4.3.0
       minimatch: 3.1.5
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -12391,7 +12864,7 @@ snapshots:
       '@floating-ui/utils': 0.2.11
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      tabbable: 6.4.0
+      tabbable: 6.5.0
 
   '@floating-ui/react@0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -12399,7 +12872,7 @@ snapshots:
       '@floating-ui/utils': 0.2.11
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      tabbable: 6.4.0
+      tabbable: 6.5.0
 
   '@floating-ui/utils@0.2.11': {}
 
@@ -12458,7 +12931,7 @@ snapshots:
       camelcase: 5.3.1
       find-up: 4.1.0
       get-package-type: 0.1.0
-      js-yaml: 3.14.2
+      js-yaml: 3.15.0
       resolve-from: 5.0.0
 
   '@istanbuljs/schema@0.1.6': {}
@@ -12481,7 +12954,7 @@ snapshots:
       jest-util: 30.3.0
       slash: 3.0.0
 
-  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))':
+  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))':
     dependencies:
       '@jest/console': 29.7.0
       '@jest/reporters': 29.7.0
@@ -12495,7 +12968,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -12552,7 +13025,7 @@ snapshots:
       - ts-node
     optional: true
 
-  '@jest/core@30.3.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))':
+  '@jest/core@30.3.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))':
     dependencies:
       '@jest/console': 30.3.0
       '@jest/pattern': 30.0.1
@@ -12567,7 +13040,7 @@ snapshots:
       exit-x: 0.2.2
       graceful-fs: 4.2.11
       jest-changed-files: 30.3.0
-      jest-config: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest-config: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-haste-map: 30.3.0
       jest-message-util: 30.3.0
       jest-regex-util: 30.0.1
@@ -12909,34 +13382,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@lezer/common@1.5.2': {}
-
-  '@lezer/css@1.3.3':
-    dependencies:
-      '@lezer/common': 1.5.2
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.10
-
-  '@lezer/highlight@1.2.3':
-    dependencies:
-      '@lezer/common': 1.5.2
-
-  '@lezer/html@1.3.13':
-    dependencies:
-      '@lezer/common': 1.5.2
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.10
-
-  '@lezer/javascript@1.5.4':
-    dependencies:
-      '@lezer/common': 1.5.2
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.10
-
-  '@lezer/lr@1.4.10':
-    dependencies:
-      '@lezer/common': 1.5.2
-
   '@mapbox/geojson-rewind@0.5.2':
     dependencies:
       get-stream: 6.0.1
@@ -12944,7 +13389,7 @@ snapshots:
 
   '@mapbox/geojson-types@1.0.2': {}
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+  '@mapbox/jsonlint-lines-primitives@2.0.3': {}
 
   '@mapbox/mapbox-gl-supported@1.5.0(mapbox-gl@1.13.3)':
     dependencies:
@@ -12968,7 +13413,7 @@ snapshots:
 
   '@maplibre/maplibre-gl-style-spec@20.4.0':
     dependencies:
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/unitbezier': 0.0.1
       json-stringify-pretty-compact: 4.0.0
       minimist: 1.2.8
@@ -12976,11 +13421,9 @@ snapshots:
       rw: 1.3.3
       tinyqueue: 3.0.0
 
-  '@marijn/find-cluster-break@1.0.2': {}
-
   '@melloware/coloris@0.25.0': {}
 
-  '@mendix/pluggable-widgets-tools@11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)':
+  '@mendix/pluggable-widgets-tools@11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/eslint-parser': 7.29.7(@babel/core@7.29.7)(eslint@9.39.4(jiti@2.6.1))
@@ -12989,68 +13432,68 @@ snapshots:
       '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-react': 7.29.7(@babel/core@7.29.7)
-      '@prettier/plugin-xml': 3.4.2(prettier@3.8.4)
+      '@prettier/plugin-xml': 3.4.2(prettier@3.9.4)
       '@react-native/babel-preset': 0.77.3(@babel/core@7.29.7)(@babel/preset-env@7.29.7(@babel/core@7.29.7))
-      '@rollup/plugin-alias': 5.1.1(rollup@4.62.0)
-      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.0)
-      '@rollup/plugin-commonjs': 29.0.3(rollup@4.62.0)
-      '@rollup/plugin-image': 3.0.3(rollup@4.62.0)
-      '@rollup/plugin-json': 6.1.0(rollup@4.62.0)
-      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.62.0)
-      '@rollup/plugin-terser': 1.0.0(rollup@4.62.0)
-      '@rollup/plugin-typescript': 12.3.0(rollup@4.62.0)(tslib@2.8.1)(typescript@5.9.3)
-      '@rollup/plugin-url': 8.0.2(rollup@4.62.0)
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.62.2)
+      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.2)
+      '@rollup/plugin-commonjs': 29.0.3(rollup@4.62.2)
+      '@rollup/plugin-image': 3.0.3(rollup@4.62.2)
+      '@rollup/plugin-json': 6.1.0(rollup@4.62.2)
+      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.62.2)
+      '@rollup/plugin-terser': 1.0.0(rollup@4.62.2)
+      '@rollup/plugin-typescript': 12.3.0(rollup@4.62.2)(tslib@2.8.1)(typescript@5.9.3)
+      '@rollup/plugin-url': 8.0.2(rollup@4.62.2)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       '@testing-library/dom': 10.4.1
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/react': 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/react-native': 13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)
+      '@testing-library/react-native': 13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
       '@types/semver': 7.7.1
       '@types/testing-library__jest-dom': 5.14.9
-      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       ansi-colors: 4.1.3
       babel-jest: 29.7.0(@babel/core@7.29.7)
       big.js: 6.2.2
       core-js: 3.49.0
       dotenv: 17.4.2
       fast-glob: 3.3.3
-      fs-extra: 11.3.5
+      fs-extra: 11.3.6
       identity-obj-proxy: 3.0.0
       jasmine: 3.99.0
       jasmine-core: 3.99.1
-      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-environment-jsdom: 30.3.0(canvas@3.2.3)
       jest-jasmine2: 30.3.0
       jest-junit: 17.0.0
       make-dir: 5.1.0
-      mendix: 11.10.0
+      mendix: 11.12.0
       mime: 4.1.0
-      postcss: 8.5.15
-      postcss-import: 14.1.0(postcss@8.5.15)
-      postcss-url: 10.1.4(postcss@8.5.15)
+      postcss: 8.5.16
+      postcss-import: 14.1.0(postcss@8.5.16)
+      postcss-url: 10.1.4(postcss@8.5.16)
       react-test-renderer: 19.2.7(react@18.3.1)
       recursive-copy: 2.0.14
       resolve: 1.22.12
-      rollup: 4.62.0
+      rollup: 4.62.2
       rollup-plugin-clear: 2.0.7
       rollup-plugin-command: 1.1.3
-      rollup-plugin-license: 3.7.1(picomatch@4.0.4)(rollup@4.62.0)
+      rollup-plugin-license: 3.7.1(picomatch@4.0.4)(rollup@4.62.2)
       rollup-plugin-livereload: 2.0.5
-      rollup-plugin-postcss: 4.0.2(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      rollup-plugin-postcss: 4.0.2(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       rollup-plugin-re: 1.0.7
       sass: 1.101.0
-      semver: 7.8.4
+      semver: 7.8.5
       shelljs: 0.10.0
       shx: 0.4.0
-      ts-jest: 29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3)
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)
+      ts-jest: 29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3)
+      ts-node: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
       typescript: 5.9.3
       xml2js: 0.6.2
-      zip-a-folder: 6.1.1
+      zip-a-folder: 6.1.2
     transitivePeerDependencies:
       - '@jest/transform'
       - '@jest/types'
@@ -13075,7 +13518,7 @@ snapshots:
       - tslib
       - utf-8-validate
 
-  '@mendix/pluggable-widgets-tools@11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)':
+  '@mendix/pluggable-widgets-tools@11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.43)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.9.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/eslint-parser': 7.29.7(@babel/core@7.29.7)(eslint@9.39.4(jiti@2.6.1))
@@ -13084,68 +13527,68 @@ snapshots:
       '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-react': 7.29.7(@babel/core@7.29.7)
-      '@prettier/plugin-xml': 3.4.2(prettier@3.8.4)
+      '@prettier/plugin-xml': 3.4.2(prettier@3.9.4)
       '@react-native/babel-preset': 0.77.3(@babel/core@7.29.7)(@babel/preset-env@7.29.7(@babel/core@7.29.7))
-      '@rollup/plugin-alias': 5.1.1(rollup@4.62.0)
-      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.0)
-      '@rollup/plugin-commonjs': 29.0.3(rollup@4.62.0)
-      '@rollup/plugin-image': 3.0.3(rollup@4.62.0)
-      '@rollup/plugin-json': 6.1.0(rollup@4.62.0)
-      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.62.0)
-      '@rollup/plugin-terser': 1.0.0(rollup@4.62.0)
-      '@rollup/plugin-typescript': 12.3.0(rollup@4.62.0)(tslib@2.8.1)(typescript@5.9.3)
-      '@rollup/plugin-url': 8.0.2(rollup@4.62.0)
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.62.2)
+      '@rollup/plugin-babel': 6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.2)
+      '@rollup/plugin-commonjs': 29.0.3(rollup@4.62.2)
+      '@rollup/plugin-image': 3.0.3(rollup@4.62.2)
+      '@rollup/plugin-json': 6.1.0(rollup@4.62.2)
+      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.62.2)
+      '@rollup/plugin-terser': 1.0.0(rollup@4.62.2)
+      '@rollup/plugin-typescript': 12.3.0(rollup@4.62.2)(tslib@2.8.1)(typescript@5.9.3)
+      '@rollup/plugin-url': 8.0.2(rollup@4.62.2)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       '@testing-library/dom': 10.4.1
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/react': 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/react-native': 13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)
+      '@testing-library/react-native': 13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
       '@types/semver': 7.7.1
       '@types/testing-library__jest-dom': 5.14.9
-      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       ansi-colors: 4.1.3
       babel-jest: 29.7.0(@babel/core@7.29.7)
       big.js: 6.2.2
       core-js: 3.49.0
       dotenv: 17.4.2
       fast-glob: 3.3.3
-      fs-extra: 11.3.5
+      fs-extra: 11.3.6
       identity-obj-proxy: 3.0.0
       jasmine: 3.99.0
       jasmine-core: 3.99.1
-      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-environment-jsdom: 30.3.0(canvas@3.2.3)
       jest-jasmine2: 30.3.0
       jest-junit: 17.0.0
       make-dir: 5.1.0
-      mendix: 11.10.0
+      mendix: 11.12.0
       mime: 4.1.0
-      postcss: 8.5.15
-      postcss-import: 14.1.0(postcss@8.5.15)
-      postcss-url: 10.1.4(postcss@8.5.15)
+      postcss: 8.5.16
+      postcss-import: 14.1.0(postcss@8.5.16)
+      postcss-url: 10.1.4(postcss@8.5.16)
       react-test-renderer: 19.2.7(react@18.3.1)
       recursive-copy: 2.0.14
       resolve: 1.22.12
-      rollup: 4.62.0
+      rollup: 4.62.2
       rollup-plugin-clear: 2.0.7
       rollup-plugin-command: 1.1.3
-      rollup-plugin-license: 3.7.1(rollup@4.62.0)
+      rollup-plugin-license: 3.7.1(rollup@4.62.2)
       rollup-plugin-livereload: 2.0.5
-      rollup-plugin-postcss: 4.0.2(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      rollup-plugin-postcss: 4.0.2(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       rollup-plugin-re: 1.0.7
       sass: 1.101.0
-      semver: 7.8.4
+      semver: 7.8.5
       shelljs: 0.10.0
       shx: 0.4.0
-      ts-jest: 29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3)
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)
+      ts-jest: 29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3)
+      ts-node: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
       typescript: 5.9.3
       xml2js: 0.6.2
-      zip-a-folder: 6.1.1
+      zip-a-folder: 6.1.2
     transitivePeerDependencies:
       - '@jest/transform'
       - '@jest/types'
@@ -13192,11 +13635,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@tybys/wasm-util': 0.10.2
+      '@tybys/wasm-util': 0.10.3
     optional: true
 
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
@@ -13285,9 +13728,9 @@ snapshots:
 
   '@pkgr/core@0.3.6': {}
 
-  '@playwright/test@1.61.0':
+  '@playwright/test@1.61.1':
     dependencies:
-      playwright: 1.61.0
+      playwright: 1.61.1
 
   '@plotly/d3-sankey-circular@0.33.1':
     dependencies:
@@ -13308,7 +13751,7 @@ snapshots:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
       '@mapbox/geojson-types': 1.0.2
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3)
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/tiny-sdf': 1.2.5
@@ -13348,10 +13791,33 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@prettier/plugin-xml@3.4.2(prettier@3.8.4)':
+  '@prettier/plugin-xml@3.4.2(prettier@3.9.4)':
     dependencies:
       '@xml-tools/parser': 1.0.11
-      prettier: 3.8.4
+      prettier: 3.9.4
+
+  '@radix-ui/primitive@1.1.4': {}
+
+  '@radix-ui/react-arrow@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-collection@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
   '@radix-ui/react-compose-refs@1.1.3(@types/react@19.2.17)(react@18.3.1)':
     dependencies:
@@ -13365,7 +13831,128 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-primitive@2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-direction@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dismissable-layer@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-dropdown-menu@2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-focus-guards@1.1.4(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-focus-scope@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-id@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-menu@2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-collection': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-popper': 1.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-popper@1.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/rect': 1.1.2
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-portal@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-presence@1.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-primitive@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@18.3.1)
       react: 18.3.1
@@ -13374,10 +13961,27 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-progress@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-progress@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-roving-focus@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-collection': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@18.3.1)
       '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
@@ -13391,6 +13995,49 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-use-callback-ref@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-controllable-state@1.2.3(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-effect-event@0.0.3(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-layout-effect@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-rect@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.2
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-size@1.1.2(@types/react@19.2.17)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/rect@1.1.2': {}
+
   '@rc-component/motion@1.3.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@rc-component/util': 1.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13513,7 +14160,7 @@ snapshots:
       invariant: 2.2.4
       jscodeshift: 17.3.0(@babel/preset-env@7.29.7(@babel/core@7.29.7))
       nullthrows: 1.1.1
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -13525,7 +14172,7 @@ snapshots:
       invariant: 2.2.4
       nullthrows: 1.1.1
       tinyglobby: 0.2.17
-      yargs: 17.7.2
+      yargs: 17.7.3
 
   '@react-native/community-cli-plugin@0.86.0':
     dependencies:
@@ -13535,7 +14182,7 @@ snapshots:
       metro: 0.84.4
       metro-config: 0.84.4
       metro-core: 0.84.4
-      semver: 7.8.4
+      semver: 7.8.5
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -13590,24 +14237,24 @@ snapshots:
       dequal: 2.0.3
       react: 18.3.1
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.62.0)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.62.2)':
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-babel@6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.0)':
+  '@rollup/plugin-babel@6.1.0(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@4.62.2)':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/helper-module-imports': 7.29.7
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
     optionalDependencies:
       '@types/babel__core': 7.20.5
-      rollup: 4.62.0
+      rollup: 4.62.2
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@28.0.9(rollup@4.62.0)':
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.4)
@@ -13615,11 +14262,11 @@ snapshots:
       magic-string: 0.30.21
       picomatch: 4.0.4
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-commonjs@29.0.3(rollup@4.62.0)':
+  '@rollup/plugin-commonjs@29.0.3(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.4)
@@ -13627,162 +14274,162 @@ snapshots:
       magic-string: 0.30.21
       picomatch: 4.0.4
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-image@3.0.3(rollup@4.62.0)':
+  '@rollup/plugin-image@3.0.3(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       mini-svg-data-uri: 1.4.4
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-json@6.1.0(rollup@4.62.0)':
+  '@rollup/plugin-json@6.1.0(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-node-resolve@15.3.1(rollup@4.62.0)':
+  '@rollup/plugin-node-resolve@15.3.1(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.12
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-node-resolve@16.0.3(rollup@4.62.0)':
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.12
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-replace@6.0.3(rollup@4.62.0)':
+  '@rollup/plugin-replace@6.0.3(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       magic-string: 0.30.21
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.62.0)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.62.2)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.6.2
       terser: 5.48.0
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-terser@1.0.0(rollup@4.62.0)':
+  '@rollup/plugin-terser@1.0.0(rollup@4.62.2)':
     dependencies:
-      serialize-javascript: 7.0.5
+      serialize-javascript: 7.0.7
       smob: 1.6.2
       terser: 5.48.0
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/plugin-typescript@12.3.0(rollup@4.62.0)(tslib@2.8.1)(typescript@5.9.3)':
+  '@rollup/plugin-typescript@12.3.0(rollup@4.62.2)(tslib@2.8.1)(typescript@5.9.3)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       resolve: 1.22.12
       typescript: 5.9.3
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
       tslib: 2.8.1
 
-  '@rollup/plugin-url@8.0.2(rollup@4.62.0)':
+  '@rollup/plugin-url@8.0.2(rollup@4.62.2)':
     dependencies:
-      '@rollup/pluginutils': 5.4.0(rollup@4.62.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       make-dir: 3.1.0
       mime: 3.0.0
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/pluginutils@5.4.0(rollup@4.62.0)':
+  '@rollup/pluginutils@5.4.0(rollup@4.62.2)':
     dependencies:
       '@types/estree': 1.0.9
       estree-walker: 2.0.2
       picomatch: 4.0.4
     optionalDependencies:
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  '@rollup/rollup-android-arm-eabi@4.62.0':
+  '@rollup/rollup-android-arm-eabi@4.62.2':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.62.0':
+  '@rollup/rollup-android-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.62.0':
+  '@rollup/rollup-darwin-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.62.0':
+  '@rollup/rollup-darwin-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.62.0':
+  '@rollup/rollup-freebsd-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.62.0':
+  '@rollup/rollup-freebsd-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.62.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.62.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.62.0':
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.62.0':
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.62.0':
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-musl@4.62.0':
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.62.0':
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-musl@4.62.0':
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.62.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.62.0':
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.62.0':
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.62.0':
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.62.0':
+  '@rollup/rollup-linux-x64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-openbsd-x64@4.62.0':
+  '@rollup/rollup-openbsd-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.62.0':
+  '@rollup/rollup-openharmony-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.62.0':
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.62.0':
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.62.0':
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.62.0':
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
     optional: true
 
   '@rtsao/scc@1.1.0': {}
@@ -13803,118 +14450,353 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@swc/core-darwin-arm64@1.15.41':
+  '@swc/core-darwin-arm64@1.15.43':
+    optional: true
+
+  '@swc/core-darwin-x64@1.15.43':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.15.43':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.15.43':
     optional: true
 
-  '@swc/core-darwin-x64@1.15.41':
+  '@swc/core-linux-arm64-musl@1.15.43':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.15.41':
+  '@swc/core-linux-ppc64-gnu@1.15.43':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.15.41':
+  '@swc/core-linux-s390x-gnu@1.15.43':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.15.41':
-    optional: true
+  '@swc/core-linux-x64-gnu@1.15.43':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.15.43':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.15.43':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.15.43':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.15.43':
+    optional: true
+
+  '@swc/core@1.15.43':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.27
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.43
+      '@swc/core-darwin-x64': 1.15.43
+      '@swc/core-linux-arm-gnueabihf': 1.15.43
+      '@swc/core-linux-arm64-gnu': 1.15.43
+      '@swc/core-linux-arm64-musl': 1.15.43
+      '@swc/core-linux-ppc64-gnu': 1.15.43
+      '@swc/core-linux-s390x-gnu': 1.15.43
+      '@swc/core-linux-x64-gnu': 1.15.43
+      '@swc/core-linux-x64-musl': 1.15.43
+      '@swc/core-win32-arm64-msvc': 1.15.43
+      '@swc/core-win32-ia32-msvc': 1.15.43
+      '@swc/core-win32-x64-msvc': 1.15.43
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/jest@0.2.39(@swc/core@1.15.43)':
+    dependencies:
+      '@jest/create-cache-key-function': 30.4.1
+      '@swc/core': 1.15.43
+      '@swc/counter': 0.1.3
+      jsonc-parser: 3.3.1
+
+  '@swc/types@0.1.27':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react-native@13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      jest-matcher-utils: 30.4.1
+      picocolors: 1.1.1
+      pretty-format: 30.4.1
+      react: 18.3.1
+      react-native: 0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1)
+      react-test-renderer: 19.2.7(react@18.3.1)
+      redent: 3.0.0
+    optionalDependencies:
+      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
+  '@tiptap/core@3.27.1(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-blockquote@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-bold@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-bubble-menu@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+    optional: true
+
+  '@tiptap/extension-bullet-list@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-code-block@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-code@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-color@3.27.1(@tiptap/extension-text-style@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1)))':
+    dependencies:
+      '@tiptap/extension-text-style': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+
+  '@tiptap/extension-document@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-dropcursor@3.27.1(@tiptap/extensions@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extensions': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-floating-menu@3.27.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+    optional: true
+
+  '@tiptap/extension-font-family@3.27.1(@tiptap/extension-text-style@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1)))':
+    dependencies:
+      '@tiptap/extension-text-style': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+
+  '@tiptap/extension-gapcursor@3.27.1(@tiptap/extensions@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extensions': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-hard-break@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-heading@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-highlight@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-horizontal-rule@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-image@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-italic@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-link@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+      linkifyjs: 4.3.3
+
+  '@tiptap/extension-list-item@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-list-keymap@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+
+  '@tiptap/extension-ordered-list@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-paragraph@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-strike@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+
+  '@tiptap/extension-subscript@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
 
-  '@swc/core-linux-ppc64-gnu@1.15.41':
-    optional: true
+  '@tiptap/extension-superscript@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
 
-  '@swc/core-linux-s390x-gnu@1.15.41':
-    optional: true
+  '@tiptap/extension-table-cell@3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
 
-  '@swc/core-linux-x64-gnu@1.15.41':
-    optional: true
+  '@tiptap/extension-table-header@3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
 
-  '@swc/core-linux-x64-musl@1.15.41':
-    optional: true
+  '@tiptap/extension-table-row@3.27.1(@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
 
-  '@swc/core-win32-arm64-msvc@1.15.41':
-    optional: true
+  '@tiptap/extension-table@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
 
-  '@swc/core-win32-ia32-msvc@1.15.41':
-    optional: true
+  '@tiptap/extension-task-item@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
 
-  '@swc/core-win32-x64-msvc@1.15.41':
-    optional: true
+  '@tiptap/extension-task-list@3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
 
-  '@swc/core@1.15.41':
+  '@tiptap/extension-text-align@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
     dependencies:
-      '@swc/counter': 0.1.3
-      '@swc/types': 0.1.27
-    optionalDependencies:
-      '@swc/core-darwin-arm64': 1.15.41
-      '@swc/core-darwin-x64': 1.15.41
-      '@swc/core-linux-arm-gnueabihf': 1.15.41
-      '@swc/core-linux-arm64-gnu': 1.15.41
-      '@swc/core-linux-arm64-musl': 1.15.41
-      '@swc/core-linux-ppc64-gnu': 1.15.41
-      '@swc/core-linux-s390x-gnu': 1.15.41
-      '@swc/core-linux-x64-gnu': 1.15.41
-      '@swc/core-linux-x64-musl': 1.15.41
-      '@swc/core-win32-arm64-msvc': 1.15.41
-      '@swc/core-win32-ia32-msvc': 1.15.41
-      '@swc/core-win32-x64-msvc': 1.15.41
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
 
-  '@swc/counter@0.1.3': {}
+  '@tiptap/extension-text-style@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
 
-  '@swc/jest@0.2.39(@swc/core@1.15.41)':
+  '@tiptap/extension-text@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
     dependencies:
-      '@jest/create-cache-key-function': 30.4.1
-      '@swc/core': 1.15.41
-      '@swc/counter': 0.1.3
-      jsonc-parser: 3.3.1
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
 
-  '@swc/types@0.1.27':
+  '@tiptap/extension-underline@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
     dependencies:
-      '@swc/counter': 0.1.3
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
 
-  '@testing-library/dom@10.4.1':
+  '@tiptap/extension-youtube@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))':
     dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/runtime': 7.29.7
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      picocolors: 1.1.1
-      pretty-format: 27.5.1
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
 
-  '@testing-library/jest-dom@6.9.1':
+  '@tiptap/extensions@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)':
     dependencies:
-      '@adobe/css-tools': 4.5.0
-      aria-query: 5.3.2
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      picocolors: 1.1.1
-      redent: 3.0.0
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
 
-  '@testing-library/react-native@13.3.3(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react-test-renderer@19.2.7(react@18.3.1))(react@18.3.1)':
+  '@tiptap/pm@3.27.1':
     dependencies:
-      jest-matcher-utils: 30.4.1
-      picocolors: 1.1.1
-      pretty-format: 30.4.1
-      react: 18.3.1
-      react-native: 0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1)
-      react-test-renderer: 19.2.7(react@18.3.1)
-      redent: 3.0.0
-    optionalDependencies:
-      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      prosemirror-changeset: 2.4.1
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.9
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tiptap/react@3.27.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.29.7
-      '@testing-library/dom': 10.4.1
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/use-sync-external-store': 0.0.6
+      fast-equals: 5.4.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.6.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
-    dependencies:
-      '@testing-library/dom': 10.4.1
+      '@tiptap/extension-bubble-menu': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-floating-menu': 3.27.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+    transitivePeerDependencies:
+      - '@floating-ui/dom'
+
+  '@tiptap/starter-kit@3.27.1':
+    dependencies:
+      '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
+      '@tiptap/extension-blockquote': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-bold': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-bullet-list': 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-code': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-code-block': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-document': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-dropcursor': 3.27.1(@tiptap/extensions@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-gapcursor': 3.27.1(@tiptap/extensions@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-hard-break': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-heading': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-horizontal-rule': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-italic': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-link': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-list': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/extension-list-item': 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-list-keymap': 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-ordered-list': 3.27.1(@tiptap/extension-list@3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1))
+      '@tiptap/extension-paragraph': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-strike': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-text': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extension-underline': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))
+      '@tiptap/extensions': 3.27.1(@tiptap/core@3.27.1(@tiptap/pm@3.27.1))(@tiptap/pm@3.27.1)
+      '@tiptap/pm': 3.27.1
 
   '@tootallnate/once@2.0.1': {}
 
@@ -13926,22 +14808,22 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
-  '@turbo/darwin-64@2.9.18':
+  '@turbo/darwin-64@2.10.2':
     optional: true
 
-  '@turbo/darwin-arm64@2.9.18':
+  '@turbo/darwin-arm64@2.10.2':
     optional: true
 
-  '@turbo/linux-64@2.9.18':
+  '@turbo/linux-64@2.10.2':
     optional: true
 
-  '@turbo/linux-arm64@2.9.18':
+  '@turbo/linux-arm64@2.10.2':
     optional: true
 
-  '@turbo/windows-64@2.9.18':
+  '@turbo/windows-64@2.10.2':
     optional: true
 
-  '@turbo/windows-arm64@2.9.18':
+  '@turbo/windows-arm64@2.10.2':
     optional: true
 
   '@turf/area@7.3.5':
@@ -13976,7 +14858,7 @@ snapshots:
       '@types/geojson': 7946.0.16
       tslib: 2.8.1
 
-  '@tybys/wasm-util@0.10.2':
+  '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -14042,7 +14924,7 @@ snapshots:
       '@types/minimatch': 3.0.5
       '@types/node': 24.12.4
 
-  '@types/google.maps@3.65.1': {}
+  '@types/google.maps@3.65.2': {}
 
   '@types/graceful-fs@4.1.9':
     dependencies:
@@ -14201,6 +15083,8 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
+  '@types/use-sync-external-store@0.0.6': {}
+
   '@types/warning@3.0.4': {}
 
   '@types/whatwg-mimetype@3.0.2': {}
@@ -14211,14 +15095,14 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/type-utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.61.1
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/type-utils': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
       eslint: 9.39.4(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -14227,82 +15111,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/type-utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.61.1
-      eslint: 9.39.4(jiti@2.6.1)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.61.1
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
       debug: 4.4.3
       eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.61.1
-      debug: 4.4.3
-      eslint: 9.39.4(jiti@2.6.1)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.61.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.62.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.61.1(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
-      debug: 4.4.3
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.61.1':
+  '@typescript-eslint/scope-manager@8.62.1':
     dependencies:
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/visitor-keys': 8.61.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
 
-  '@typescript-eslint/tsconfig-utils@8.61.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.62.1(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/tsconfig-utils@8.61.1(typescript@6.0.3)':
+  '@typescript-eslint/type-utils@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      typescript: 6.0.3
-
-  '@typescript-eslint/type-utils@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.4(jiti@2.6.1)
       ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -14310,119 +15153,75 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      debug: 4.4.3
-      eslint: 9.39.4(jiti@2.6.1)
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.61.1': {}
+  '@typescript-eslint/types@8.62.1': {}
 
-  '@typescript-eslint/typescript-estree@8.61.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.62.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.61.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/visitor-keys': 8.61.1
+      '@typescript-eslint/project-service': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
       debug: 4.4.3
       minimatch: 10.2.5
-      semver: 7.8.4
+      semver: 7.8.5
       tinyglobby: 0.2.17
       ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.61.1(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/visitor-keys': 8.61.1
-      debug: 4.4.3
-      minimatch: 10.2.5
-      semver: 7.8.4
-      tinyglobby: 0.2.17
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)':
+  '@typescript-eslint/visitor-keys@8.62.1':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@6.0.3)
-      eslint: 9.39.4(jiti@2.6.1)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
+      '@typescript-eslint/types': 8.62.1
+      eslint-visitor-keys: 5.0.1
 
-  '@typescript-eslint/visitor-keys@8.61.1':
+  '@uiw/color-convert@2.10.3(@babel/runtime@7.29.7)':
     dependencies:
-      '@typescript-eslint/types': 8.61.1
-      eslint-visitor-keys: 5.0.1
+      '@babel/runtime': 7.29.7
 
-  '@uiw/codemirror-extensions-basic-setup@4.25.10(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)':
+  '@uiw/react-color-compact@2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.20.3
-      '@codemirror/commands': 6.10.3
-      '@codemirror/language': 6.12.3
-      '@codemirror/lint': 6.9.7
-      '@codemirror/search': 6.7.0
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
+      '@babel/runtime': 7.29.7
+      '@uiw/color-convert': 2.10.3(@babel/runtime@7.29.7)
+      '@uiw/react-color-editable-input': 2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/react-color-swatch': 2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@uiw/codemirror-theme-github@4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)':
+  '@uiw/react-color-editable-input-rgba@2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@uiw/codemirror-themes': 4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)
-    transitivePeerDependencies:
-      - '@codemirror/language'
-      - '@codemirror/state'
-      - '@codemirror/view'
+      '@babel/runtime': 7.29.7
+      '@uiw/color-convert': 2.10.3(@babel/runtime@7.29.7)
+      '@uiw/react-color-editable-input': 2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@uiw/codemirror-themes@4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)':
+  '@uiw/react-color-editable-input@2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
+      '@babel/runtime': 7.29.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@uiw/react-codemirror@4.25.10(@babel/runtime@7.29.7)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.1)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@uiw/react-color-swatch@2.10.3(@babel/runtime@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.29.7
-      '@codemirror/commands': 6.10.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/theme-one-dark': 6.1.3
-      '@codemirror/view': 6.43.1
-      '@uiw/codemirror-extensions-basic-setup': 4.25.10(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.7)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/view@6.43.1)
-      codemirror: 6.0.2
+      '@uiw/color-convert': 2.10.3(@babel/runtime@7.29.7)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-    transitivePeerDependencies:
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
 
-  '@ungap/structured-clone@1.3.1': {}
+  '@ungap/structured-clone@1.3.2': {}
 
   '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     optional: true
@@ -14482,7 +15281,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
@@ -14496,7 +15295,7 @@ snapshots:
 
   '@vis.gl/react-google-maps@0.8.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@types/google.maps': 3.65.1
+      '@types/google.maps': 3.65.2
       fast-deep-equal: 3.1.3
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -14573,7 +15372,7 @@ snapshots:
   ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.2
+      fast-uri: 3.1.3
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -14610,6 +15409,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -14723,7 +15526,7 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.11.4: {}
+  axe-core@4.12.1: {}
 
   babel-jest@29.7.0(@babel/core@7.29.7):
     dependencies:
@@ -14867,7 +15670,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.10.37: {}
+  baseline-browser-mapping@2.10.40: {}
 
   big.js@6.2.2: {}
 
@@ -14898,7 +15701,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
-      qs: 6.15.2
+      qs: 6.15.3
       raw-body: 3.0.2
       type-is: 2.1.0
     transitivePeerDependencies:
@@ -14915,7 +15718,7 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.6:
+  brace-expansion@5.0.7:
     dependencies:
       balanced-match: 4.0.4
 
@@ -14930,13 +15733,13 @@ snapshots:
 
   brandi@5.1.0: {}
 
-  browserslist@4.28.2:
+  browserslist@4.28.4:
     dependencies:
-      baseline-browser-mapping: 2.10.37
-      caniuse-lite: 1.0.30001799
-      electron-to-chromium: 1.5.373
-      node-releases: 2.0.47
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+      baseline-browser-mapping: 2.10.40
+      caniuse-lite: 1.0.30001800
+      electron-to-chromium: 1.5.383
+      node-releases: 2.0.50
+      update-browserslist-db: 1.2.3(browserslist@4.28.4)
 
   bs-logger@0.2.6:
     dependencies:
@@ -14980,12 +15783,12 @@ snapshots:
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.28.2
-      caniuse-lite: 1.0.30001799
+      browserslist: 4.28.4
+      caniuse-lite: 1.0.30001800
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001799: {}
+  caniuse-lite@1.0.30001800: {}
 
   canvas@3.2.3:
     dependencies:
@@ -15094,16 +15897,6 @@ snapshots:
 
   co@4.6.0: {}
 
-  codemirror@6.0.2:
-    dependencies:
-      '@codemirror/autocomplete': 6.20.3
-      '@codemirror/commands': 6.10.3
-      '@codemirror/language': 6.12.3
-      '@codemirror/lint': 6.9.7
-      '@codemirror/search': 6.7.0
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.43.1
-
   collect-v8-coverage@1.0.3: {}
 
   color-alpha@1.1.3:
@@ -15203,7 +15996,7 @@ snapshots:
       spawn-command: 0.0.2
       supports-color: 8.1.1
       tree-kill: 1.2.2
-      yargs: 16.2.0
+      yargs: 16.2.2
 
   config-chain@1.1.13:
     dependencies:
@@ -15255,7 +16048,7 @@ snapshots:
 
   core-js-compat@3.49.0:
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
 
   core-js@3.49.0: {}
 
@@ -15266,31 +16059,31 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig-typescript-loader@6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.2(typescript@6.0.3))(typescript@6.0.3):
+  cosmiconfig-typescript-loader@6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.2(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
       '@types/node': 24.12.4
-      cosmiconfig: 9.0.2(typescript@6.0.3)
+      cosmiconfig: 9.0.2(typescript@5.9.3)
       jiti: 2.6.1
-      typescript: 6.0.3
+      typescript: 5.9.3
 
-  cosmiconfig@9.0.2(typescript@6.0.3):
+  cosmiconfig@9.0.2(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
-      js-yaml: 4.2.0
+      js-yaml: 4.3.0
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 6.0.3
+      typescript: 5.9.3
 
   country-regex@1.1.0: {}
 
-  create-jest@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  create-jest@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -15301,8 +16094,6 @@ snapshots:
 
   create-require@1.1.1: {}
 
-  crelt@1.0.6: {}
-
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.6
@@ -15323,9 +16114,9 @@ snapshots:
 
   cross-zip@4.0.1: {}
 
-  css-declaration-sorter@6.4.1(postcss@8.5.15):
+  css-declaration-sorter@6.4.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
   css-font-size-keywords@1.0.0: {}
 
@@ -15374,48 +16165,48 @@ snapshots:
 
   cssfontparser@1.2.1: {}
 
-  cssnano-preset-default@5.2.14(postcss@8.5.15):
-    dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.5.15)
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
-      postcss-calc: 8.2.4(postcss@8.5.15)
-      postcss-colormin: 5.3.1(postcss@8.5.15)
-      postcss-convert-values: 5.1.3(postcss@8.5.15)
-      postcss-discard-comments: 5.1.2(postcss@8.5.15)
-      postcss-discard-duplicates: 5.1.0(postcss@8.5.15)
-      postcss-discard-empty: 5.1.1(postcss@8.5.15)
-      postcss-discard-overridden: 5.1.0(postcss@8.5.15)
-      postcss-merge-longhand: 5.1.7(postcss@8.5.15)
-      postcss-merge-rules: 5.1.4(postcss@8.5.15)
-      postcss-minify-font-values: 5.1.0(postcss@8.5.15)
-      postcss-minify-gradients: 5.1.1(postcss@8.5.15)
-      postcss-minify-params: 5.1.4(postcss@8.5.15)
-      postcss-minify-selectors: 5.2.1(postcss@8.5.15)
-      postcss-normalize-charset: 5.1.0(postcss@8.5.15)
-      postcss-normalize-display-values: 5.1.0(postcss@8.5.15)
-      postcss-normalize-positions: 5.1.1(postcss@8.5.15)
-      postcss-normalize-repeat-style: 5.1.1(postcss@8.5.15)
-      postcss-normalize-string: 5.1.0(postcss@8.5.15)
-      postcss-normalize-timing-functions: 5.1.0(postcss@8.5.15)
-      postcss-normalize-unicode: 5.1.1(postcss@8.5.15)
-      postcss-normalize-url: 5.1.0(postcss@8.5.15)
-      postcss-normalize-whitespace: 5.1.1(postcss@8.5.15)
-      postcss-ordered-values: 5.1.3(postcss@8.5.15)
-      postcss-reduce-initial: 5.1.2(postcss@8.5.15)
-      postcss-reduce-transforms: 5.1.0(postcss@8.5.15)
-      postcss-svgo: 5.1.0(postcss@8.5.15)
-      postcss-unique-selectors: 5.1.1(postcss@8.5.15)
-
-  cssnano-utils@3.1.0(postcss@8.5.15):
-    dependencies:
-      postcss: 8.5.15
-
-  cssnano@5.1.15(postcss@8.5.15):
-    dependencies:
-      cssnano-preset-default: 5.2.14(postcss@8.5.15)
+  cssnano-preset-default@5.2.14(postcss@8.5.16):
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.5.16)
+      cssnano-utils: 3.1.0(postcss@8.5.16)
+      postcss: 8.5.16
+      postcss-calc: 8.2.4(postcss@8.5.16)
+      postcss-colormin: 5.3.1(postcss@8.5.16)
+      postcss-convert-values: 5.1.3(postcss@8.5.16)
+      postcss-discard-comments: 5.1.2(postcss@8.5.16)
+      postcss-discard-duplicates: 5.1.0(postcss@8.5.16)
+      postcss-discard-empty: 5.1.1(postcss@8.5.16)
+      postcss-discard-overridden: 5.1.0(postcss@8.5.16)
+      postcss-merge-longhand: 5.1.7(postcss@8.5.16)
+      postcss-merge-rules: 5.1.4(postcss@8.5.16)
+      postcss-minify-font-values: 5.1.0(postcss@8.5.16)
+      postcss-minify-gradients: 5.1.1(postcss@8.5.16)
+      postcss-minify-params: 5.1.4(postcss@8.5.16)
+      postcss-minify-selectors: 5.2.1(postcss@8.5.16)
+      postcss-normalize-charset: 5.1.0(postcss@8.5.16)
+      postcss-normalize-display-values: 5.1.0(postcss@8.5.16)
+      postcss-normalize-positions: 5.1.1(postcss@8.5.16)
+      postcss-normalize-repeat-style: 5.1.1(postcss@8.5.16)
+      postcss-normalize-string: 5.1.0(postcss@8.5.16)
+      postcss-normalize-timing-functions: 5.1.0(postcss@8.5.16)
+      postcss-normalize-unicode: 5.1.1(postcss@8.5.16)
+      postcss-normalize-url: 5.1.0(postcss@8.5.16)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.5.16)
+      postcss-ordered-values: 5.1.3(postcss@8.5.16)
+      postcss-reduce-initial: 5.1.2(postcss@8.5.16)
+      postcss-reduce-transforms: 5.1.0(postcss@8.5.16)
+      postcss-svgo: 5.1.0(postcss@8.5.16)
+      postcss-unique-selectors: 5.1.1(postcss@8.5.16)
+
+  cssnano-utils@3.1.0(postcss@8.5.16):
+    dependencies:
+      postcss: 8.5.16
+
+  cssnano@5.1.15(postcss@8.5.16):
+    dependencies:
+      cssnano-preset-default: 5.2.14(postcss@8.5.16)
       lilconfig: 2.1.0
-      postcss: 8.5.15
+      postcss: 8.5.16
       yaml: 1.10.3
 
   csso@4.2.0:
@@ -15625,6 +16416,8 @@ snapshots:
 
   detect-newline@4.0.1: {}
 
+  detect-node-es@1.1.0: {}
+
   diff-sequences@29.6.3: {}
 
   diff@4.0.4: {}
@@ -15700,7 +16493,7 @@ snapshots:
       react-is: 17.0.2
       tslib: 2.8.1
 
-  downshift@9.3.6(react@18.3.1):
+  downshift@9.4.0(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.29.7
       compute-scroll-into-view: 3.1.1
@@ -15733,7 +16526,7 @@ snapshots:
 
   earcut@2.2.4: {}
 
-  earcut@3.0.2: {}
+  earcut@3.2.0: {}
 
   eastasianwidth@0.2.0: {}
 
@@ -15742,11 +16535,11 @@ snapshots:
       '@one-ini/wasm': 0.2.1
       commander: 14.0.3
       minimatch: 10.2.5
-      semver: 7.8.4
+      semver: 7.8.5
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.373: {}
+  electron-to-chromium@1.5.383: {}
 
   elementary-circuits-directed-graph@1.3.1:
     dependencies:
@@ -15812,7 +16605,7 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.2
       es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.1
+      es-to-primitive: 1.3.4
       function.prototype.name: 1.2.0
       get-intrinsic: 1.3.0
       get-proto: 1.0.1
@@ -15905,9 +16698,10 @@ snapshots:
     dependencies:
       hasown: 2.0.4
 
-  es-to-primitive@1.3.1:
+  es-to-primitive@1.3.4:
     dependencies:
       es-abstract-get: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
       is-callable: 1.2.7
       is-date-object: 1.1.0
@@ -15972,11 +16766,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.13.0(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint-import-resolver-node@0.3.10)(eslint@9.39.4(jiti@2.6.1)):
+  eslint-module-utils@2.13.0(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.10
     transitivePeerDependencies:
@@ -15985,9 +16779,9 @@ snapshots:
   eslint-plugin-cypress@5.4.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-      globals: 17.6.0
+      globals: 17.7.0
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -15998,7 +16792,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.10
-      eslint-module-utils: 2.13.0(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint-import-resolver-node@0.3.10)(eslint@9.39.4(jiti@2.6.1))
+      eslint-module-utils: 2.13.0(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint@9.39.4(jiti@2.6.1))
       hasown: 2.0.4
       is-core-module: 2.16.2
       is-glob: 4.0.3
@@ -16010,20 +16804,20 @@ snapshots:
       string.prototype.trimend: 1.0.10
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@29.15.2(@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(jest@30.3.0(@types/node@24.12.4))(typescript@6.0.3):
+  eslint-plugin-jest@29.15.4(@typescript-eslint/eslint-plugin@8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(jest@30.3.0(@types/node@24.12.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       jest: 30.3.0(@types/node@24.12.4)
-      typescript: 6.0.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -16037,7 +16831,7 @@ snapshots:
       eslint-fix-utils: 0.4.2(@types/estree@1.0.9)(eslint@9.39.4(jiti@2.6.1))
       jsonc-eslint-parser: 3.1.0
       package-json-validator: 1.5.2
-      semver: 7.8.4
+      semver: 7.8.5
       sort-object-keys: 2.1.0
       sort-package-json: 3.7.1
       validate-npm-package-name: 7.0.2
@@ -16047,12 +16841,12 @@ snapshots:
   eslint-plugin-playwright@2.10.4(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-      globals: 17.6.0
+      globals: 17.7.0
 
-  eslint-plugin-prettier@5.5.6(eslint-config-prettier@9.1.2(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))(prettier@3.8.4):
+  eslint-plugin-prettier@5.5.6(eslint-config-prettier@9.1.2(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))(prettier@3.9.4):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-      prettier: 3.8.4
+      prettier: 3.9.4
       prettier-linter-helpers: 1.0.1
       synckit: 0.11.13
     optionalDependencies:
@@ -16199,8 +16993,6 @@ snapshots:
 
   eventemitter3@4.0.7: {}
 
-  eventemitter3@5.0.4: {}
-
   events@3.3.0: {}
 
   eventsource-parser@3.1.0: {}
@@ -16293,8 +17085,8 @@ snapshots:
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.15.2
-      range-parser: 1.2.1
+      qs: 6.15.3
+      range-parser: 1.3.0
       router: 2.2.0
       send: 1.2.1
       serve-static: 2.2.1
@@ -16317,6 +17109,8 @@ snapshots:
 
   fast-diff@1.3.0: {}
 
+  fast-equals@5.4.0: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -16333,7 +17127,7 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-uri@3.1.2: {}
+  fast-uri@3.1.3: {}
 
   fast-xml-parser@4.5.6:
     dependencies:
@@ -16436,7 +17230,11 @@ snapshots:
 
   flow-enums-runtime@0.0.6: {}
 
-  flow-parser@0.318.0: {}
+  flow-estree@0.321.0: {}
+
+  flow-parser@0.321.0:
+    dependencies:
+      flow-estree: 0.321.0
 
   font-atlas@2.1.0:
     dependencies:
@@ -16481,7 +17279,7 @@ snapshots:
   fs-constants@1.0.0:
     optional: true
 
-  fs-extra@11.3.5:
+  fs-extra@11.3.6:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.2.1
@@ -16546,6 +17344,8 @@ snapshots:
       hasown: 2.0.4
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -16674,7 +17474,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@17.6.0: {}
+  globals@17.7.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -16847,6 +17647,8 @@ snapshots:
     dependencies:
       hermes-estree: 0.36.0
 
+  highlight.js@11.11.1: {}
+
   hono@4.12.25: {}
 
   hosted-git-info@9.0.3:
@@ -16925,9 +17727,9 @@ snapshots:
 
   icss-replace-symbols@1.1.0: {}
 
-  icss-utils@5.1.0(postcss@8.5.15):
+  icss-utils@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
   identity-obj-proxy@3.0.0:
     dependencies:
@@ -16945,7 +17747,7 @@ snapshots:
 
   immediate@3.0.6: {}
 
-  immutable@5.1.6: {}
+  immutable@5.1.9: {}
 
   import-cwd@3.0.0:
     dependencies:
@@ -17215,7 +18017,7 @@ snapshots:
       '@babel/parser': 7.29.7
       '@istanbuljs/schema': 0.1.6
       istanbul-lib-coverage: 3.2.2
-      semver: 7.8.4
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -17341,19 +18143,19 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  jest-cli@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      create-jest: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      jest-config: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -17371,7 +18173,7 @@ snapshots:
       jest-config: 30.3.0(@types/node@24.12.4)
       jest-util: 30.3.0
       jest-validate: 30.3.0
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -17380,18 +18182,18 @@ snapshots:
       - ts-node
     optional: true
 
-  jest-cli@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)):
+  jest-cli@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 30.3.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      '@jest/core': 30.3.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       '@jest/test-result': 30.3.0
       '@jest/types': 30.3.0
       chalk: 4.1.2
       exit-x: 0.2.2
       import-local: 3.2.0
-      jest-config: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest-config: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       jest-util: 30.3.0
       jest-validate: 30.3.0
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -17399,7 +18201,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  jest-config@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
       '@babel/core': 7.29.7
       '@jest/test-sequencer': 29.7.0
@@ -17425,7 +18227,7 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 24.12.4
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)
+      ts-node: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -17462,7 +18264,7 @@ snapshots:
       - supports-color
     optional: true
 
-  jest-config@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)):
+  jest-config@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
       '@babel/core': 7.29.7
       '@jest/get-type': 30.1.0
@@ -17489,7 +18291,7 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 24.12.4
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)
+      ts-node: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -17644,7 +18446,7 @@ snapshots:
     dependencies:
       mkdirp: 1.0.4
       strip-ansi: 6.0.1
-      uuid: 14.0.0
+      uuid: 14.0.1
       xml: 1.0.1
 
   jest-leak-detector@29.7.0:
@@ -17912,7 +18714,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.8.4
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -17937,7 +18739,7 @@ snapshots:
       jest-message-util: 30.3.0
       jest-util: 30.3.0
       pretty-format: 30.3.0
-      semver: 7.8.4
+      semver: 7.8.5
       synckit: 0.11.13
     transitivePeerDependencies:
       - supports-color
@@ -18019,17 +18821,17 @@ snapshots:
   jest-worker@30.3.0:
     dependencies:
       '@types/node': 24.12.4
-      '@ungap/structured-clone': 1.3.1
+      '@ungap/structured-clone': 1.3.2
       jest-util: 30.3.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  jest@29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
+      jest-cli: 29.7.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -18050,12 +18852,12 @@ snapshots:
       - ts-node
     optional: true
 
-  jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)):
+  jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 30.3.0(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      '@jest/core': 30.3.0(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       '@jest/types': 30.3.0
       import-local: 3.2.0
-      jest-cli: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest-cli: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -18079,12 +18881,12 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@3.14.2:
+  js-yaml@3.15.0:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
-  js-yaml@4.2.0:
+  js-yaml@4.3.0:
     dependencies:
       argparse: 2.0.1
 
@@ -18104,12 +18906,12 @@ snapshots:
       '@babel/preset-flow': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
       '@babel/register': 7.29.7(@babel/core@7.29.7)
-      flow-parser: 0.318.0
+      flow-parser: 0.321.0
       graceful-fs: 4.2.11
       micromatch: 4.0.8
       neo-async: 2.6.2
       picocolors: 1.1.1
-      recast: 0.23.11
+      recast: 0.23.12
       tmp: 0.2.7
       write-file-atomic: 5.0.1
     optionalDependencies:
@@ -18205,7 +19007,7 @@ snapshots:
     dependencies:
       acorn: 8.17.0
       eslint-visitor-keys: 5.0.1
-      semver: 7.8.4
+      semver: 7.8.5
 
   jsonc-parser@3.3.1: {}
 
@@ -18318,12 +19120,8 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
-  lodash.clonedeep@4.5.0: {}
-
   lodash.debounce@4.0.8: {}
 
-  lodash.isequal@4.5.0: {}
-
   lodash.isplainobject@4.0.6: {}
 
   lodash.kebabcase@4.1.1: {}
@@ -18390,7 +19188,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.8.4
+      semver: 7.8.5
 
   make-dir@5.1.0: {}
 
@@ -18410,7 +19208,7 @@ snapshots:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
       '@mapbox/geojson-types': 1.0.2
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3)
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/tiny-sdf': 1.2.5
@@ -18434,7 +19232,7 @@ snapshots:
   maplibre-gl@4.7.1:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/tiny-sdf': 2.2.0
       '@mapbox/unitbezier': 0.0.1
@@ -18447,7 +19245,7 @@ snapshots:
       '@types/mapbox__vector-tile': 1.3.4
       '@types/pbf': 3.0.5
       '@types/supercluster': 7.1.3
-      earcut: 3.0.2
+      earcut: 3.2.0
       geojson-vt: 4.0.3
       gl-matrix: 3.4.4
       global-prefix: 4.0.0
@@ -18504,7 +19302,7 @@ snapshots:
       '@types/big.js': 6.2.2
       '@types/react': 19.2.17
 
-  mendix@11.10.0:
+  mendix@11.12.0:
     dependencies:
       '@types/big.js': 6.2.2
       '@types/react': 19.2.17
@@ -18689,7 +19487,7 @@ snapshots:
       source-map: 0.5.7
       throat: 5.0.0
       ws: 7.5.11
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -18731,7 +19529,7 @@ snapshots:
 
   minimatch@10.2.5:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.7
 
   minimatch@3.1.5:
     dependencies:
@@ -18809,7 +19607,7 @@ snapshots:
 
   nanoevents@9.1.0: {}
 
-  nanoid@3.3.12: {}
+  nanoid@3.3.15: {}
 
   napi-build-utils@2.0.0:
     optional: true
@@ -18836,9 +19634,9 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  node-abi@3.92.0:
+  node-abi@3.93.0:
     dependencies:
-      semver: 7.8.4
+      semver: 7.8.5
     optional: true
 
   node-addon-api@7.1.1:
@@ -18846,7 +19644,7 @@ snapshots:
 
   node-domexception@1.0.0: {}
 
-  node-exports-info@1.6.0:
+  node-exports-info@1.6.2:
     dependencies:
       array.prototype.flatmap: 1.3.3
       es-errors: 1.3.0
@@ -18865,7 +19663,7 @@ snapshots:
 
   node-int64@0.4.0: {}
 
-  node-releases@2.0.47: {}
+  node-releases@2.0.50: {}
 
   nopt@10.0.1:
     dependencies:
@@ -18885,7 +19683,7 @@ snapshots:
     dependencies:
       hosted-git-info: 9.0.3
       proc-log: 6.1.0
-      semver: 7.8.4
+      semver: 7.8.5
       validate-npm-package-name: 7.0.2
 
   npm-run-path@2.0.2:
@@ -19007,6 +19805,8 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
+  orderedmap@2.1.1: {}
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -19059,7 +19859,7 @@ snapshots:
   package-json-validator@1.5.2:
     dependencies:
       npm-package-arg: 13.0.2
-      semver: 7.8.4
+      semver: 7.8.5
       validate-npm-package-license: 3.0.4
       validate-npm-package-name: 7.0.2
 
@@ -19067,8 +19867,6 @@ snapshots:
 
   pako@1.0.11: {}
 
-  parchment@3.0.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -19167,13 +19965,13 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
-  playwright-core@1.61.0: {}
+  playwright-core@1.61.1: {}
 
   playwright-ctrf-json-reporter@0.0.27: {}
 
-  playwright@1.61.0:
+  playwright@1.61.1:
     dependencies:
-      playwright-core: 1.61.0
+      playwright-core: 1.61.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -19234,204 +20032,196 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-calc@8.2.4(postcss@8.5.15):
+  postcss-calc@8.2.4(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@5.3.1(postcss@8.5.15):
+  postcss-colormin@5.3.1(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@5.1.3(postcss@8.5.15):
+  postcss-convert-values@5.1.3(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.15
+      browserslist: 4.28.4
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-discard-comments@5.1.2(postcss@8.5.15):
+  postcss-discard-comments@5.1.2(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-discard-duplicates@5.1.0(postcss@8.5.15):
+  postcss-discard-duplicates@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-discard-empty@5.1.1(postcss@8.5.15):
+  postcss-discard-empty@5.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-discard-overridden@5.1.0(postcss@8.5.15):
+  postcss-discard-overridden@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-import@14.1.0(postcss@8.5.15):
+  postcss-import@14.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.12
 
-  postcss-import@16.1.1(postcss@8.5.15):
+  postcss-import@16.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.12
 
-  postcss-load-config@3.1.4(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.3
-    optionalDependencies:
-      postcss: 8.5.15
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)
-
-  postcss-load-config@3.1.4(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  postcss-load-config@3.1.4(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.3
     optionalDependencies:
-      postcss: 8.5.15
-      ts-node: 10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)
+      postcss: 8.5.16
+      ts-node: 10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)
 
-  postcss-merge-longhand@5.1.7(postcss@8.5.15):
+  postcss-merge-longhand@5.1.7(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
-      stylehacks: 5.1.1(postcss@8.5.15)
+      stylehacks: 5.1.1(postcss@8.5.16)
 
-  postcss-merge-rules@5.1.4(postcss@8.5.15):
+  postcss-merge-rules@5.1.4(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       caniuse-api: 3.0.0
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.16)
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.4
 
-  postcss-minify-font-values@5.1.0(postcss@8.5.15):
+  postcss-minify-font-values@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@5.1.1(postcss@8.5.15):
+  postcss-minify-gradients@5.1.1(postcss@8.5.16):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.16)
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@5.1.4(postcss@8.5.15):
+  postcss-minify-params@5.1.4(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      browserslist: 4.28.4
+      cssnano-utils: 3.1.0(postcss@8.5.16)
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@5.2.1(postcss@8.5.15):
+  postcss-minify-selectors@5.2.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.4
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.15):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.15):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.16):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      icss-utils: 5.1.0(postcss@8.5.16)
+      postcss: 8.5.16
       postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.15):
+  postcss-modules-scope@3.2.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-selector-parser: 7.1.4
 
-  postcss-modules-values@4.0.0(postcss@8.5.15):
+  postcss-modules-values@4.0.0(postcss@8.5.16):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      icss-utils: 5.1.0(postcss@8.5.16)
+      postcss: 8.5.16
 
-  postcss-modules@4.3.1(postcss@8.5.15):
+  postcss-modules@4.3.1(postcss@8.5.16):
     dependencies:
       generic-names: 4.0.0
       icss-replace-symbols: 1.1.0
       lodash.camelcase: 4.3.0
-      postcss: 8.5.15
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.15)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.15)
-      postcss-modules-scope: 3.2.1(postcss@8.5.15)
-      postcss-modules-values: 4.0.0(postcss@8.5.15)
+      postcss: 8.5.16
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.16)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.16)
+      postcss-modules-scope: 3.2.1(postcss@8.5.16)
+      postcss-modules-values: 4.0.0(postcss@8.5.16)
       string-hash: 1.1.3
 
-  postcss-normalize-charset@5.1.0(postcss@8.5.15):
+  postcss-normalize-charset@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-normalize-display-values@5.1.0(postcss@8.5.15):
+  postcss-normalize-display-values@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@5.1.1(postcss@8.5.15):
+  postcss-normalize-positions@5.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@5.1.1(postcss@8.5.15):
+  postcss-normalize-repeat-style@5.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@5.1.0(postcss@8.5.15):
+  postcss-normalize-string@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@5.1.0(postcss@8.5.15):
+  postcss-normalize-timing-functions@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@5.1.1(postcss@8.5.15):
+  postcss-normalize-unicode@5.1.1(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.15
+      browserslist: 4.28.4
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@5.1.0(postcss@8.5.15):
+  postcss-normalize-url@5.1.0(postcss@8.5.16):
     dependencies:
       normalize-url: 6.1.0
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@5.1.1(postcss@8.5.15):
+  postcss-normalize-whitespace@5.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@5.1.3(postcss@8.5.15):
+  postcss-ordered-values@5.1.3(postcss@8.5.16):
     dependencies:
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.16)
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-initial@5.1.2(postcss@8.5.15):
+  postcss-reduce-initial@5.1.2(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       caniuse-api: 3.0.0
-      postcss: 8.5.15
+      postcss: 8.5.16
 
-  postcss-reduce-transforms@5.1.0(postcss@8.5.15):
+  postcss-reduce-transforms@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
   postcss-selector-parser@6.1.4:
@@ -19444,30 +20234,30 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-svgo@5.1.0(postcss@8.5.15):
+  postcss-svgo@5.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
       svgo: 2.8.2
 
-  postcss-unique-selectors@5.1.1(postcss@8.5.15):
+  postcss-unique-selectors@5.1.1(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.4
 
-  postcss-url@10.1.4(postcss@8.5.15):
+  postcss-url@10.1.4(postcss@8.5.16):
     dependencies:
       make-dir: 3.1.0
       mime: 2.5.2
       minimatch: 3.1.5
-      postcss: 8.5.15
+      postcss: 8.5.16
       xxhashjs: 0.2.2
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.15:
+  postcss@8.5.16:
     dependencies:
-      nanoid: 3.3.12
+      nanoid: 3.3.15
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -19483,11 +20273,11 @@ snapshots:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 2.0.0
-      node-abi: 3.92.0
+      node-abi: 3.93.0
       pump: 3.0.4
       rc: 1.2.8
       simple-get: 4.0.1
-      tar-fs: 2.1.4
+      tar-fs: 2.1.5
       tunnel-agent: 0.6.0
     optional: true
 
@@ -19497,13 +20287,13 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-packagejson@2.5.22(prettier@3.8.4):
+  prettier-plugin-packagejson@2.5.22(prettier@3.9.4):
     dependencies:
       sort-package-json: 3.6.0
     optionalDependencies:
-      prettier: 3.8.4
+      prettier: 3.9.4
 
-  prettier@3.8.4: {}
+  prettier@3.9.4: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -19530,14 +20320,14 @@ snapshots:
       react-is-18: react-is@18.3.1
       react-is-19: react-is@19.2.7
 
-  pretty-quick@4.2.2(prettier@3.8.4):
+  pretty-quick@4.2.2(prettier@3.9.4):
     dependencies:
       '@pkgr/core': 0.2.10
       ignore: 7.0.5
       mri: 1.2.0
       picocolors: 1.1.1
       picomatch: 4.0.4
-      prettier: 3.8.4
+      prettier: 3.9.4
       tinyexec: 0.3.2
       tslib: 2.8.1
 
@@ -19574,6 +20364,80 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  prosemirror-changeset@2.4.1:
+    dependencies:
+      prosemirror-transform: 1.12.0
+
+  prosemirror-commands@1.7.1:
+    dependencies:
+      prosemirror-model: 1.25.9
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-dropcursor@1.8.2:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.9
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.9
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.9:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.9
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.9
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.9
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.41.9
+
+  prosemirror-transform@1.12.0:
+    dependencies:
+      prosemirror-model: 1.25.9
+
+  prosemirror-view@1.41.9:
+    dependencies:
+      prosemirror-model: 1.25.9
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
   proto-list@1.2.4: {}
 
   protocol-buffers-schema@3.6.1: {}
@@ -19610,8 +20474,9 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  qs@6.15.2:
+  qs@6.15.3:
     dependencies:
+      es-define-property: 1.0.1
       side-channel: 1.1.1
 
   querystringify@2.2.0: {}
@@ -19626,21 +20491,6 @@ snapshots:
 
   quickselect@3.0.0: {}
 
-  quill-delta@5.1.0:
-    dependencies:
-      fast-diff: 1.3.0
-      lodash.clonedeep: 4.5.0
-      lodash.isequal: 4.5.0
-
-  quill-resize-module@2.1.3: {}
-
-  quill@2.0.3:
-    dependencies:
-      eventemitter3: 5.0.4
-      lodash-es: 4.18.1
-      parchment: 3.0.0
-      quill-delta: 5.1.0
-
   raf@3.4.1:
     dependencies:
       performance-now: 2.1.0
@@ -19651,6 +20501,8 @@ snapshots:
 
   range-parser@1.2.1: {}
 
+  range-parser@1.3.0: {}
+
   raw-body@3.0.2:
     dependencies:
       bytes: 3.1.2
@@ -19718,7 +20570,7 @@ snapshots:
 
   react-devtools-core@6.1.5:
     dependencies:
-      shell-quote: 1.8.4
+      shell-quote: 1.9.0
       ws: 7.5.11
     transitivePeerDependencies:
       - bufferutil
@@ -19737,7 +20589,7 @@ snapshots:
       prop-types: 15.8.1
       react: 18.3.1
 
-  react-image-crop@11.0.10(react@18.3.1):
+  react-image-crop@11.1.2(react@18.3.1):
     dependencies:
       react: 18.3.1
 
@@ -19780,12 +20632,12 @@ snapshots:
       react-refresh: 0.14.2
       regenerator-runtime: 0.13.11
       scheduler: 0.27.0
-      semver: 7.8.4
+      semver: 7.8.5
       stacktrace-parser: 0.1.11
       tinyglobby: 0.2.17
       whatwg-fetch: 3.6.20
       ws: 7.5.11
-      yargs: 17.7.2
+      yargs: 17.7.3
     optionalDependencies:
       '@types/react': 19.2.17
     transitivePeerDependencies:
@@ -19837,6 +20689,43 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-scroll-sync@1.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-simple-code-editor@0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   react-test-renderer@19.2.7(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -19885,7 +20774,7 @@ snapshots:
 
   readdirp@5.0.0: {}
 
-  recast@0.23.11:
+  recast@0.23.12:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
@@ -20044,7 +20933,7 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
       is-core-module: 2.16.2
-      node-exports-info: 1.6.0
+      node-exports-info: 1.6.2
       object-keys: 1.1.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
@@ -20078,7 +20967,7 @@ snapshots:
       globby: 10.0.1
       is-plain-object: 3.0.1
 
-  rollup-plugin-license@3.7.1(picomatch@4.0.4)(rollup@4.62.0):
+  rollup-plugin-license@3.7.1(picomatch@4.0.4)(rollup@4.62.2):
     dependencies:
       commenting: 1.1.0
       fdir: 6.5.0(picomatch@4.0.4)
@@ -20086,13 +20975,13 @@ snapshots:
       magic-string: 0.30.21
       moment: 2.30.1
       package-name-regex: 2.0.6
-      rollup: 4.62.0
+      rollup: 4.62.2
       spdx-expression-validate: 2.0.0
       spdx-satisfies: 5.0.1
     transitivePeerDependencies:
       - picomatch
 
-  rollup-plugin-license@3.7.1(rollup@4.62.0):
+  rollup-plugin-license@3.7.1(rollup@4.62.2):
     dependencies:
       commenting: 1.1.0
       fdir: 6.5.0
@@ -20100,7 +20989,7 @@ snapshots:
       magic-string: 0.30.21
       moment: 2.30.1
       package-name-regex: 2.0.6
-      rollup: 4.62.0
+      rollup: 4.62.2
       spdx-expression-validate: 2.0.0
       spdx-satisfies: 5.0.1
     transitivePeerDependencies:
@@ -20113,36 +21002,17 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  rollup-plugin-postcss@4.0.2(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)):
-    dependencies:
-      chalk: 4.1.2
-      concat-with-sourcemaps: 1.1.0
-      cssnano: 5.1.15(postcss@8.5.15)
-      import-cwd: 3.0.0
-      p-queue: 6.6.2
-      pify: 5.0.0
-      postcss: 8.5.15
-      postcss-load-config: 3.1.4(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
-      postcss-modules: 4.3.1(postcss@8.5.15)
-      promise.series: 0.2.0
-      resolve: 1.22.12
-      rollup-pluginutils: 2.8.2
-      safe-identifier: 0.4.2
-      style-inject: 0.3.0
-    transitivePeerDependencies:
-      - ts-node
-
-  rollup-plugin-postcss@4.0.2(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3)):
+  rollup-plugin-postcss@4.0.2(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)):
     dependencies:
       chalk: 4.1.2
       concat-with-sourcemaps: 1.1.0
-      cssnano: 5.1.15(postcss@8.5.15)
+      cssnano: 5.1.15(postcss@8.5.16)
       import-cwd: 3.0.0
       p-queue: 6.6.2
       pify: 5.0.0
-      postcss: 8.5.15
-      postcss-load-config: 3.1.4(postcss@8.5.15)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3))
-      postcss-modules: 4.3.1(postcss@8.5.15)
+      postcss: 8.5.16
+      postcss-load-config: 3.1.4(postcss@8.5.16)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
+      postcss-modules: 4.3.1(postcss@8.5.16)
       promise.series: 0.2.0
       resolve: 1.22.12
       rollup-pluginutils: 2.8.2
@@ -20160,42 +21030,44 @@ snapshots:
     dependencies:
       estree-walker: 0.6.1
 
-  rollup-preserve-directives@1.1.3(rollup@4.62.0):
+  rollup-preserve-directives@1.1.3(rollup@4.62.2):
     dependencies:
       magic-string: 0.30.21
-      rollup: 4.62.0
+      rollup: 4.62.2
 
-  rollup@4.62.0:
+  rollup@4.62.2:
     dependencies:
       '@types/estree': 1.0.9
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.62.0
-      '@rollup/rollup-android-arm64': 4.62.0
-      '@rollup/rollup-darwin-arm64': 4.62.0
-      '@rollup/rollup-darwin-x64': 4.62.0
-      '@rollup/rollup-freebsd-arm64': 4.62.0
-      '@rollup/rollup-freebsd-x64': 4.62.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.62.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.62.0
-      '@rollup/rollup-linux-arm64-gnu': 4.62.0
-      '@rollup/rollup-linux-arm64-musl': 4.62.0
-      '@rollup/rollup-linux-loong64-gnu': 4.62.0
-      '@rollup/rollup-linux-loong64-musl': 4.62.0
-      '@rollup/rollup-linux-ppc64-gnu': 4.62.0
-      '@rollup/rollup-linux-ppc64-musl': 4.62.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.62.0
-      '@rollup/rollup-linux-riscv64-musl': 4.62.0
-      '@rollup/rollup-linux-s390x-gnu': 4.62.0
-      '@rollup/rollup-linux-x64-gnu': 4.62.0
-      '@rollup/rollup-linux-x64-musl': 4.62.0
-      '@rollup/rollup-openbsd-x64': 4.62.0
-      '@rollup/rollup-openharmony-arm64': 4.62.0
-      '@rollup/rollup-win32-arm64-msvc': 4.62.0
-      '@rollup/rollup-win32-ia32-msvc': 4.62.0
-      '@rollup/rollup-win32-x64-gnu': 4.62.0
-      '@rollup/rollup-win32-x64-msvc': 4.62.0
+      '@rollup/rollup-android-arm-eabi': 4.62.2
+      '@rollup/rollup-android-arm64': 4.62.2
+      '@rollup/rollup-darwin-arm64': 4.62.2
+      '@rollup/rollup-darwin-x64': 4.62.2
+      '@rollup/rollup-freebsd-arm64': 4.62.2
+      '@rollup/rollup-freebsd-x64': 4.62.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.2
+      '@rollup/rollup-linux-arm64-gnu': 4.62.2
+      '@rollup/rollup-linux-arm64-musl': 4.62.2
+      '@rollup/rollup-linux-loong64-gnu': 4.62.2
+      '@rollup/rollup-linux-loong64-musl': 4.62.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.2
+      '@rollup/rollup-linux-ppc64-musl': 4.62.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.2
+      '@rollup/rollup-linux-riscv64-musl': 4.62.2
+      '@rollup/rollup-linux-s390x-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-musl': 4.62.2
+      '@rollup/rollup-openbsd-x64': 4.62.2
+      '@rollup/rollup-openharmony-arm64': 4.62.2
+      '@rollup/rollup-win32-arm64-msvc': 4.62.2
+      '@rollup/rollup-win32-ia32-msvc': 4.62.2
+      '@rollup/rollup-win32-x64-gnu': 4.62.2
+      '@rollup/rollup-win32-x64-msvc': 4.62.2
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
   router@2.2.0:
     dependencies:
       debug: 4.4.3
@@ -20248,7 +21120,7 @@ snapshots:
   sass@1.101.0:
     dependencies:
       chokidar: 5.0.0
-      immutable: 5.1.6
+      immutable: 5.1.9
       source-map-js: 1.2.1
     optionalDependencies:
       '@parcel/watcher': 2.5.6
@@ -20269,7 +21141,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.8.4: {}
+  semver@7.8.5: {}
 
   send@0.19.2:
     dependencies:
@@ -20300,7 +21172,7 @@ snapshots:
       mime-types: 3.0.2
       ms: 2.1.3
       on-finished: 2.4.1
-      range-parser: 1.2.1
+      range-parser: 1.3.0
       statuses: 2.0.2
     transitivePeerDependencies:
       - supports-color
@@ -20311,7 +21183,7 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
-  serialize-javascript@7.0.5: {}
+  serialize-javascript@7.0.7: {}
 
   serve-static@1.16.3:
     dependencies:
@@ -20375,7 +21247,7 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.4: {}
+  shell-quote@1.9.0: {}
 
   shelljs@0.10.0:
     dependencies:
@@ -20464,7 +21336,7 @@ snapshots:
       detect-newline: 4.0.1
       git-hooks-list: 4.2.1
       is-plain-obj: 4.1.0
-      semver: 7.8.4
+      semver: 7.8.5
       sort-object-keys: 2.1.0
       tinyglobby: 0.2.17
 
@@ -20474,7 +21346,7 @@ snapshots:
       detect-newline: 4.0.1
       git-hooks-list: 4.2.1
       is-plain-obj: 4.1.0
-      semver: 7.8.4
+      semver: 7.8.5
       sort-object-keys: 2.1.0
       tinyglobby: 0.2.17
 
@@ -20676,12 +21548,10 @@ snapshots:
 
   style-inject@0.3.0: {}
 
-  style-mod@4.1.3: {}
-
-  stylehacks@5.1.1(postcss@8.5.15):
+  stylehacks@5.1.1(postcss@8.5.16):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.15
+      browserslist: 4.28.4
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.4
 
   supercluster@7.1.5:
@@ -20737,9 +21607,9 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.3.6
 
-  tabbable@6.4.0: {}
+  tabbable@6.5.0: {}
 
-  tar-fs@2.1.4:
+  tar-fs@2.1.5:
     dependencies:
       chownr: 1.1.4
       mkdirp-classic: 0.5.3
@@ -20855,22 +21725,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  ts-api-utils@2.5.0(typescript@6.0.3):
-    dependencies:
-      typescript: 6.0.3
-
   ts-custom-error@3.3.1: {}
 
-  ts-jest@29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3):
+  ts-jest@29.4.11(@babel/core@7.29.7)(@jest/transform@30.3.0)(@jest/types@30.4.1)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3)))(typescript@5.9.3):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
       handlebars: 4.7.9
-      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3))
+      jest: 30.3.0(@types/node@24.12.4)(ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3))
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.8.4
+      semver: 7.8.5
       type-fest: 4.41.0
       typescript: 5.9.3
       yargs-parser: 21.1.1
@@ -20881,7 +21747,7 @@ snapshots:
       babel-jest: 29.7.0(@babel/core@7.29.7)
       jest-util: 30.4.1
 
-  ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@5.9.3):
+  ts-node@10.9.2(@swc/core@1.15.43)(@types/node@24.12.4)(typescript@5.9.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.12
@@ -20899,27 +21765,7 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
-      '@swc/core': 1.15.41
-
-  ts-node@10.9.2(@swc/core@1.15.41)(@types/node@24.12.4)(typescript@6.0.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.12
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 24.12.4
-      acorn: 8.17.0
-      acorn-walk: 8.3.5
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.4
-      make-error: 1.3.6
-      typescript: 6.0.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optionalDependencies:
-      '@swc/core': 1.15.41
+      '@swc/core': 1.15.43
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -20937,14 +21783,14 @@ snapshots:
       safe-buffer: 5.2.1
     optional: true
 
-  turbo@2.9.18:
+  turbo@2.10.2:
     optionalDependencies:
-      '@turbo/darwin-64': 2.9.18
-      '@turbo/darwin-arm64': 2.9.18
-      '@turbo/linux-64': 2.9.18
-      '@turbo/linux-arm64': 2.9.18
-      '@turbo/windows-64': 2.9.18
-      '@turbo/windows-arm64': 2.9.18
+      '@turbo/darwin-64': 2.10.2
+      '@turbo/darwin-arm64': 2.10.2
+      '@turbo/linux-64': 2.10.2
+      '@turbo/linux-arm64': 2.10.2
+      '@turbo/windows-64': 2.10.2
+      '@turbo/windows-arm64': 2.10.2
 
   tweetnacl@1.0.3: {}
 
@@ -21008,21 +21854,19 @@ snapshots:
 
   typedarray@0.0.6: {}
 
-  typescript-eslint@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3):
+  typescript-eslint@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3))(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.61.1(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
-      typescript: 6.0.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   typescript@5.9.3: {}
 
-  typescript@6.0.3: {}
-
   uc.micro@2.1.0: {}
 
   uglify-js@3.19.3:
@@ -21095,9 +21939,9 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.12.2
       '@unrs/resolver-binding-win32-x64-msvc': 1.12.2
 
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
+  update-browserslist-db@1.2.3(browserslist@4.28.4):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -21112,6 +21956,21 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   use-sync-external-store@1.6.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -21120,7 +21979,7 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
-  uuid@14.0.0: {}
+  uuid@14.0.1: {}
 
   v8-compile-cache-lib@3.0.1: {}
 
@@ -21340,7 +22199,7 @@ snapshots:
 
   yargs-parser@22.0.0: {}
 
-  yargs@16.2.0:
+  yargs@16.2.2:
     dependencies:
       cliui: 7.0.4
       escalade: 3.2.0
@@ -21350,7 +22209,7 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 20.2.9
 
-  yargs@17.7.2:
+  yargs@17.7.3:
     dependencies:
       cliui: 8.0.1
       escalade: 3.2.0
@@ -21366,7 +22225,7 @@ snapshots:
 
   yocto-queue@1.2.2: {}
 
-  zip-a-folder@6.1.1:
+  zip-a-folder@6.1.2:
     dependencies:
       lzma: 2.3.2
       tinyglobby: 0.2.17