@heartlandone/vega 2.75.0-RTE-table-preview → 2.75.1

package/dist/cjs/vega-rich-text-editor_4.cjs.entry.js

@@ -9,25 +9,23 @@ const component = require('./component-1e352960.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-b5e71bf6.js');
-const vegaInternalEventId = require('./vega-internal-event-id-73334b4b.js');
-const dtoRendererManager = require('./dto-renderer-manager-ae5fcbba.js');
+const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
+const dtoRendererManager = require('./dto-renderer-manager-03e1a038.js');
 const typeGuard = require('./type-guard-a0f026d8.js');
 const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
-const codeBlock = require('./code-block-d9001f03.js');
-const imageAnnotationAction = require('./image-annotation-action-4435d531.js');
+const codeBlock = require('./code-block-c1d2e6a8.js');
+const imageAnnotationAction = require('./image-annotation-action-3fa501b7.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-const index$1 = require('./index-19e5b936.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-3ea2464a.js');
+const index$1 = require('./index-95fca64f.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-aef2fb1e.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-2dacabbd.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-3fa87162.js');
-const contentState = require('./content-state-466f277f.js');
-const alignLeft = require('./align-left-4a76df69.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-b00e9f58.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-468e19aa.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-787c67dc.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const observer = require('./observer-f49483e8.js');
 const timer = require('./timer-5f33058b.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-8a87ec08.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-0dcb08c8.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-ba312af9.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-aca87dac.js');
 const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
 const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
@@ -36,12 +34,12 @@ const chevronDown = require('./chevron-down-9847bf78.js');
 const trashCan = require('./trash-can-46a5e19a.js');
 const ui = require('./ui-9e181079.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
+require('./string-39438062.js');
+require('./object-e2e28e3d.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./typography-4560e7f1.js');
 require('./translation-5f9f9c0c.js');
-require('./string-39438062.js');
-require('./object-e2e28e3d.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./wait-for-vega-handler-5469ff80.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
@@ -49,9 +47,9 @@ require('./try-get-document-c0ebd39a.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-77deba40.js');
+require('./sub-state-observer-slimmer-5d0b8ac3.js');
 require('./internal-vega-event-manager-6befeb34.js');
-require('./range-cafe69a9.js');
+require('./range-79b668e7.js');
 require('./synchronize-task-queue-1ee80e94.js');
 require('./keyboard-manager-slimmer-0d45f944.js');
 require('./keyboard-manager-3dea6b28.js');
@@ -69,6 +67,7 @@ class CodeFormatter {
   constructor() {
     /**
      * Formats a given HTML source string by applying indentation and cleaning up styles.
+     * Content inside preserve tags (pre) is preserved as-is without formatting.
      *
      * @param {string} source - The HTML source string to format.
      * @param {CodeFormatOptions} options - Formatting options.
@@ -83,9 +82,25 @@ class CodeFormatter {
       const tokens = source.split(tagRegex).filter((t) => t.length > 0);
       let indentLevel = 0;
       let output = '';
+      let preserveDepth = 0;
       for (let i = 0; i < tokens.length; i++) {
         let token = tokens[i];
-        // Decrease indentation for closing tags
+        const tagName = CodeFormatter.getTagName(token);
+        // Track if we're entering or exiting preserve tags
+        if (CodeFormatter.PRESERVE_CONTENT_TAGS.has(tagName)) {
+          if (token.startsWith('</')) {
+            preserveDepth = Math.max(0, preserveDepth - 1);
+          }
+          else if (token.startsWith('<')) {
+            preserveDepth++;
+          }
+        }
+        // If inside preserve tag, output as-is without formatting
+        if (preserveDepth > 0) {
+          output += token;
+          continue;
+        }
+        // Decrease indentation for closing tags (after exiting preserve tags)
         if (token.startsWith('</')) {
           indentLevel = Math.max(0, indentLevel - 1);
         }
@@ -95,15 +110,20 @@ class CodeFormatter {
           token = token.replace(/style\s*=\s*"([^"]*)"/g, (_, styleContent) => {
             return `style="${this.formatStyle(styleContent)}"`;
           });
-          const tagName = CodeFormatter.getTagName(token);
           const isInline = CodeFormatter.INLINE_TAGS.has(tagName);
-          // Inline tag grouping: e.g., <strong>Text</strong> stays on one line
-          if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
-            // Group consecutive inline tags
+          // Inline tag grouping: e.g., <strong>Text</strong> or <span></span> stays on one line
+          // Check for empty tags: <tag></tag> (closing tag immediately follows opening tag)
+          if (isInline && i + 1 < tokens.length && tokens[i + 1] === `</${tagName}>`) {
+            // Empty inline tag: <span></span>
+            output += `${indent}${token}${tokens[i + 1]}\n`;
+            i += 1;
+          }
+          else if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags with content
             let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
             i += 2;
             // Keep merging consecutive inline tag pairs
-            while (i + 2 < tokens.length &&
+            while (i + 3 < tokens.length &&
               tokens[i + 1].startsWith('<') &&
               CodeFormatter.INLINE_TAGS.has(CodeFormatter.getTagName(tokens[i + 1])) &&
               tokens[i + 3] === `</${CodeFormatter.getTagName(tokens[i + 1])}>`) {
@@ -117,7 +137,7 @@ class CodeFormatter {
             // Increase indentation for non-void opening tags
             if (!token.startsWith('</') &&
               !token.endsWith('/>') &&
-              !/^<br|^<img|^<meta|^<input|^<hr/i.test(token)) {
+              !CodeFormatter.VOID_TAGS.has(tagName)) {
               indentLevel++;
             }
           }
@@ -158,6 +178,10 @@ class CodeFormatter {
       .join('; ');
   }
 }
+/**
+ * Inline/phrasing elements that should be kept on a single line with their content.
+ * These tags are formatted as: <tag>content</tag> on one line.
+ */
 CodeFormatter.INLINE_TAGS = new Set([
   'span',
   'strong',
@@ -177,9 +201,33 @@ CodeFormatter.INLINE_TAGS = new Set([
   'del',
   'ins',
 ]);
+/**
+ * Void/self-closing elements that don't have closing tags.
+ * Used to avoid increasing indentation for these elements.
+ */
+CodeFormatter.VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+/**
+ * Tags whose content should be preserved as-is without formatting.
+ */
+CodeFormatter.PRESERVE_CONTENT_TAGS = new Set(['pre']);
 const CodeFormatter$1 = new CodeFormatter();
 
-var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -290,53 +338,53 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderSourceViewContent()));
   }
 }
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "sourceEditConfig", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
-__decorate$B([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -432,67 +480,67 @@ class ToolbarRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return [renderedItems, totalVisibleCount];
   }
 }
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "host", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "selectionController", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceView", void 0);
 
@@ -500,7 +548,7 @@ const bold = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
 };
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -542,7 +590,7 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
 (() => {
   internalIconManager.VegaInternalIconManager.register({ bold });
 })();
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -550,7 +598,7 @@ const italic = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -590,7 +638,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbar
 (() => {
   internalIconManager.VegaInternalIconManager.register({ italic });
 })();
-__decorate$y([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -598,7 +646,7 @@ const underline = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -641,7 +689,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTool
 (() => {
   internalIconManager.VegaInternalIconManager.register({ underline });
 })();
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -649,7 +697,7 @@ const textSize = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 128V96h96l0 320H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H256c17.7 0 32-14.3 32-32s-14.3-32-32-32H224l0-320h96v32c0 17.7 14.3 32 32 32s32-14.3 32-32V80c0-26.5-21.5-48-48-48H192 48C21.5 32 0 53.5 0 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32zM384 304V288h64l0 128H432c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H512l0-128h64v16c0 17.7 14.3 32 32 32s32-14.3 32-32V272c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v32c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></svg>`,
 };
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -760,10 +808,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -771,7 +819,7 @@ const TextSlash = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L355.7 253.5 400.2 96H503L497 120.2c-4.3 17.1 6.1 34.5 23.3 38.8s34.5-6.1 38.8-23.3l11-44.1C577.6 61.3 554.7 32 523.5 32H376.1h-.3H204.5c-22 0-41.2 15-46.6 36.4l-6.3 25.2L38.8 5.1zm168 131.7c.1-.3 .2-.7 .3-1L217 96H333.7L301.3 210.8l-94.5-74.1zM243.3 416H192c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H309.8l17.6-62.1L272.9 311 243.3 416z"/></svg>`,
 };
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -808,7 +856,7 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
     'text-slash': TextSlash,
   });
 })();
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -816,7 +864,7 @@ const codeSimple = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6zm146.7 0L498.7 256 361.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>`,
 };
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -854,7 +902,7 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -862,7 +910,7 @@ const strikethrough = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"/></svg>`,
 };
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -905,7 +953,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.VisualMode
 (() => {
   internalIconManager.VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -913,7 +961,7 @@ const link = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"/></svg>`,
 };
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -996,7 +1044,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
 (() => {
   internalIconManager.VegaInternalIconManager.register({ link: link });
 })();
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1004,7 +1052,7 @@ const indent = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32zm32 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3V176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z"/></svg>`,
 };
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1038,7 +1086,7 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
 (() => {
   internalIconManager.VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1046,7 +1094,7 @@ const outdent = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M6 64C6 46.3 20.3 32 38 32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38C20.3 96 6 81.7 6 64zM198 192c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32zm32 96H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32s14.3-32 32-32zM6 448c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38c-17.7 0-32-14.3-32-32zm.2-179.4c-8.2-6.4-8.2-18.9 0-25.3l101.9-79.3c10.5-8.2 25.8-.7 25.8 12.6V335.3c0 13.3-15.3 20.8-25.8 12.6L6.2 268.6z"/></svg>`,
 };
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1081,7 +1129,7 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
 (() => {
   internalIconManager.VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1102,7 +1150,7 @@ class ImageUpdateUrlAction extends codeBlock.ModifyContentAction {
   }
 }
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1162,13 +1210,13 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
 (() => {
   internalIconManager.VegaInternalIconManager.register({ image: image });
 })();
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1205,7 +1253,7 @@ class TransformParagraphAction extends codeBlock.ModifyContentAction {
   }
 }
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1236,11 +1284,11 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+      selectedNodes.some((node) => node instanceof dtoRendererManager.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof dtoRendererManager.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1264,14 +1312,14 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
     }
   }
 }
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1300,11 +1348,11 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+      selectedNodes.some((node) => node instanceof dtoRendererManager.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
-      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof dtoRendererManager.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1328,14 +1376,14 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
     }
   }
 }
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1410,20 +1458,24 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualMod
     'list-ol': ListOL,
   });
 })();
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const AlignLeft = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
+};
+
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1455,17 +1507,21 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTool
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-left': alignLeft.AlignLeft,
+    'align-left': AlignLeft,
   });
 })();
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const AlignCenter = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>`,
+};
+
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1497,17 +1553,21 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTo
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-center': alignLeft.AlignCenter,
+    'align-center': AlignCenter,
   });
 })();
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const AlignRight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
+};
+
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1539,17 +1599,21 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-right': alignLeft.AlignRight,
+    'align-right': AlignRight,
   });
 })();
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const AlignJustify = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/></svg>`,
+};
+
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1581,17 +1645,17 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeT
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-justify': alignLeft.AlignJustify,
+    'align-justify': AlignJustify,
   });
 })();
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1649,22 +1713,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.Visu
         .some((block) => this.shouldDisabledToolbar(block, codeBlock.HorizontalAlignmentAnnotationAction.name)));
   }
 }
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1705,7 +1769,7 @@ class RTEEditorState {
   }
 }
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1735,8 +1799,8 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
    */
   componentWillLoad() {
-    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
-      this.value = contentState.VegaRTEContent.fromJSON(this.value);
+    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
+      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value);
     }
     this.registerEditorRefAndContent();
   }
@@ -1745,11 +1809,11 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    */
   watchValueUpdate() {
     const autoMatchFormat = this.sourceEditConfig.autoMatchFormat;
-    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
-      this.value = contentState.VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
+    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
+      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
     }
     else if (!this.value || this.value.children.length === 0) {
-      this.value = contentState.VegaRTEContent.createEmptyContent({ autoMatchFormat });
+      this.value = dtoRendererManager.VegaRTEContent.createEmptyContent({ autoMatchFormat });
     }
     else {
       this.changeEventEmitter.emit(this.value);
@@ -1791,37 +1855,37 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "historyController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "sourceEditConfig", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
 
@@ -2103,7 +2167,7 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
+        firstBlock.apply(new dtoRendererManager.MergeTwoBlocksNodesAction(lastBlock));
         const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
@@ -2120,7 +2184,7 @@ class InsertParagraphHandler extends BaseHandler {
     const currentBlock = cursorNode.parent;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
-      const breakAction = new contentState.InsertNewParagraphAction(cursorNode, startOffset);
+      const breakAction = new dtoRendererManager.InsertNewParagraphAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
@@ -2447,13 +2511,13 @@ class InsertPasteHandler extends BaseHandler {
       const pastedText = event.dataTransfer.getData('text/plain');
       pastedHTML = this.parsePlainText(pastedText);
     }
-    const context = contentState.StylePreservator.preserve(pastedHTML);
+    const context = dtoRendererManager.StylePreservator.preserve(pastedHTML);
     const safeHtml = context.getProcessedHtml();
     const parser = new DOMParser();
     const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
     const htmlElements = Array.from(parsedDoc.body.childNodes);
     context.restore(htmlElements);
-    return contentState.ElementToDtoStrategyProcessor.process(htmlElements)
+    return dtoRendererManager.ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -2487,7 +2551,7 @@ class InsertPasteHandler extends BaseHandler {
   }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2593,7 +2657,7 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
       const defaultParagraph = [
         { id, type: 'paragraph', nodes: [{ id: `${id}1`, type: 'text', text: '' }] },
       ];
-      void this.valueController.flushChanges(contentState.VegaRTEContent.fromJSON(defaultParagraph));
+      void this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromJSON(defaultParagraph));
     }
   }
   /**
@@ -2614,28 +2678,28 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
     return false;
   }
 }
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -2655,7 +2719,7 @@ class InsertImageToBlockAction extends codeBlock.ModifyContentAction {
   }
 }
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2671,8 +2735,8 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
    */
   insertImageToCaretPosition(imageUrl) {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const imageBlock = new contentState.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    const newImageNode = new contentState.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    const imageBlock = new dtoRendererManager.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    const newImageNode = new dtoRendererManager.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
     imageBlock.apply(new codeBlock.AppendChildrenAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.children.length < 1) {
@@ -2744,26 +2808,26 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2829,19 +2893,66 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the text node color
+ */
+class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Register an observer to watch for dark mode updates, which will update the color of text node .
+   */
+  connectedCallback() {
+    this.observer = new observer.Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      const textNodeElements = imageAnnotationAction.TextNodeRenderingRegistry.getTextNodeElements();
+      textNodeElements.forEach((textColorAnnotation, element) => {
+        element.style.color = isDark
+          ? textColorAnnotation.textColor.dark
+          : textColorAnnotation.textColor.light;
+      });
+    });
+    changeManager.ChangeManager.register(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], TextNodeColorController.prototype, "connectedCallback", null);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], TextNodeColorController.prototype, "disconnectResizeObserver", null);
+
 var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -3164,7 +3275,7 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
         let shouldDeleteBlock = startNode.parent;
         // if the node grand parent is html block and the html block only has one child, we need insert the paragraph before the html block to jump out the html block
         if (shouldDeleteBlock.parent &&
-          !(shouldDeleteBlock.parent instanceof contentState.VegaRTEContent) &&
+          !(shouldDeleteBlock.parent instanceof dtoRendererManager.VegaRTEContent) &&
           shouldDeleteBlock.parent.children.length === 1) {
           shouldDeleteBlock = shouldDeleteBlock.parent;
         }
@@ -3588,7 +3699,7 @@ class SourceEditToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
       return;
     }
     if (typeof sourceViewValue === 'string') {
-      await this.valueController.flushChanges(contentState.VegaRTEContent.fromHtml(sourceViewValue, {
+      await this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromHtml(sourceViewValue, {
         autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
       }));
     }
@@ -3674,22 +3785,10 @@ class RTEExtensionController extends globalSlimmerRegistry.VegaSlimmer {
           flushValue: this.flushValue,
           isSourceEditMode: this.isSourceEditMode,
           getSelectedNodes: this.getSelectedNodes,
-          setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
-          getSelection: this.selectionController.getSelection.bind(this.selectionController),
         });
       }
     }
   }
-  /**
-   * Destroys all registered extensions.
-   */
-  destroyExtension() {
-    if (this.extensions) {
-      for (const extension of this.extensions) {
-        extension.destroyExtension();
-      }
-    }
-  }
   /**
    * Update extension context when extensions property changes.
    *
@@ -3697,11 +3796,6 @@ class RTEExtensionController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {VegaRTEExtension[]} oldValue - Old extensions array.
    */
   handleExtensionsChange(newValue, oldValue) {
-    if (oldValue) {
-      for (const extension of oldValue) {
-        extension.destroyExtension();
-      }
-    }
     if (!array.isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
       this.initialExtensionContext();
     }
@@ -3725,14 +3819,11 @@ __decorate$7([
 __decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);
-__decorate$7([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], RTEExtensionController.prototype, "destroyExtension", null);
 __decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchExtensions')
 ], RTEExtensionController.prototype, "handleExtensionsChange", null);
 
-const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !important}.source-view-container{margin-top:12px}.source-view-container vega-code-block::part(editor-toolbar){display:none}";
+const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !important}.source-view-container{margin-top:12px}.source-view-container vega-code-block::part(editor-toolbar){display:none}";
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3798,6 +3889,7 @@ const VegaRichTextEditor = class {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectObserverFactory.VegaImageInserted);
     this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
+    this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
@@ -3859,7 +3951,7 @@ const VegaRichTextEditor = class {
      * @defaultValue [{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]
      */
     // eslint-disable-next-line @stencil/strict-mutable
-    this.value = contentState.VegaRTEContent.createEmptyContent();
+    this.value = dtoRendererManager.VegaRTEContent.createEmptyContent();
     /**
      * Specifies the built-in toolbar items available in the rich-text editor.
      *
@@ -4040,6 +4132,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);