@ni/nimble-components 20.1.18 → 20.1.20

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 30 Aug 2023 18:04:09 GMT
+   * Generated on Thu, 31 Aug 2023 18:57:21 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -37836,9 +37836,6 @@
       buildProps(tr, shouldDispatch = true) {
           const { rawCommands, editor, state } = this;
           const { view } = editor;
-          if (state.storedMarks) {
-              tr.setStoredMarks(state.storedMarks);
-          }
           const props = {
               tr,
               editor,
@@ -37848,7 +37845,7 @@
                   transaction: tr,
               }),
               dispatch: shouldDispatch ? () => undefined : undefined,
-              chain: () => this.createChain(tr),
+              chain: () => this.createChain(tr, shouldDispatch),
               can: () => this.createCan(tr),
               get commands() {
                   return Object.fromEntries(Object.entries(rawCommands).map(([name, command]) => {
@@ -38024,7 +38021,10 @@
                   return;
               }
               if (key === 'class') {
-                  mergedAttributes[key] = [mergedAttributes[key], value].join(' ');
+                  const valueClasses = value ? value.split(' ') : [];
+                  const existingClasses = mergedAttributes[key] ? mergedAttributes[key].split(' ') : [];
+                  const insertClasses = valueClasses.filter(valueClass => !existingClasses.includes(valueClass));
+                  mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ');
               }
               else if (key === 'style') {
                   mergedAttributes[key] = [mergedAttributes[key], value].join('; ');
@@ -39027,6 +39027,16 @@
       return createParagraphNear$1(state, dispatch);
   };
 
+  const cut = (originRange, targetPos) => ({ editor, tr }) => {
+      const { state } = editor;
+      const contentSlice = state.doc.slice(originRange.from, originRange.to);
+      tr.deleteRange(originRange.from, originRange.to);
+      const newPos = tr.mapping.map(targetPos);
+      tr.insert(newPos, contentSlice.content);
+      tr.setSelection(new TextSelection(tr.doc.resolve(newPos - 1)));
+      return true;
+  };
+
   const deleteCurrentNode = () => ({ tr, dispatch }) => {
       const { selection } = tr;
       const currentNode = selection.$anchor.node();
@@ -39356,7 +39366,7 @@
           if (content.toString() === '<>') {
               return true;
           }
-          let { from, to } = typeof position === 'number' ? { from: position, to: position } : position;
+          let { from, to } = typeof position === 'number' ? { from: position, to: position } : { from: position.from, to: position.to };
           let isOnlyTextContent = true;
           let isOnlyBlockContent = true;
           const nodes = isFragment(content) ? content : [content];
@@ -39418,6 +39428,40 @@
       return joinForward$1(state, dispatch);
   };
 
+  const joinItemBackward = () => ({ tr, state, dispatch, }) => {
+      try {
+          const point = joinPoint(state.doc, state.selection.$from.pos, -1);
+          if (point === null || point === undefined) {
+              return false;
+          }
+          tr.join(point, 2);
+          if (dispatch) {
+              dispatch(tr);
+          }
+          return true;
+      }
+      catch {
+          return false;
+      }
+  };
+
+  const joinItemForward = () => ({ state, dispatch, tr, }) => {
+      try {
+          const point = joinPoint(state.doc, state.selection.$from.pos, +1);
+          if (point === null || point === undefined) {
+              return false;
+          }
+          tr.join(point, 2);
+          if (dispatch) {
+              dispatch(tr);
+          }
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  };
+
   function isMacOS() {
       return typeof navigator !== 'undefined'
           ? /Mac/.test(navigator.platform)
@@ -39664,6 +39708,28 @@
       return true;
   };
 
+  function getMarkAttributes(state, typeOrName) {
+      const type = getMarkType(typeOrName, state.schema);
+      const { from, to, empty } = state.selection;
+      const marks = [];
+      if (empty) {
+          if (state.storedMarks) {
+              marks.push(...state.storedMarks);
+          }
+          marks.push(...state.selection.$head.marks());
+      }
+      else {
+          state.doc.nodesBetween(from, to, node => {
+              marks.push(...node.marks);
+          });
+      }
+      const mark = marks.find(markItem => markItem.type.name === type.name);
+      if (!mark) {
+          return {};
+      }
+      return { ...mark.attrs };
+  }
+
   function defaultBlockAt(match) {
       for (let i = 0; i < match.edgeCount; i += 1) {
           const { type } = match.edge(i);
@@ -39708,28 +39774,6 @@
       return getTextBetween(node, range, options);
   }
 
-  function getMarkAttributes(state, typeOrName) {
-      const type = getMarkType(typeOrName, state.schema);
-      const { from, to, empty } = state.selection;
-      const marks = [];
-      if (empty) {
-          if (state.storedMarks) {
-              marks.push(...state.storedMarks);
-          }
-          marks.push(...state.selection.$head.marks());
-      }
-      else {
-          state.doc.nodesBetween(from, to, node => {
-              marks.push(...node.marks);
-          });
-      }
-      const mark = marks.find(markItem => markItem.type.name === type.name);
-      if (!mark) {
-          return {};
-      }
-      return { ...mark.attrs };
-  }
-
   function getNodeAttributes(state, typeOrName) {
       const type = getNodeType(typeOrName, state.schema);
       const { from, to } = state.selection;
@@ -40448,6 +40492,7 @@
     clearNodes: clearNodes,
     command: command,
     createParagraphNear: createParagraphNear,
+    cut: cut,
     deleteCurrentNode: deleteCurrentNode,
     deleteNode: deleteNode,
     deleteRange: deleteRange,
@@ -40464,6 +40509,8 @@
     joinDown: joinDown,
     joinBackward: joinBackward,
     joinForward: joinForward,
+    joinItemBackward: joinItemBackward,
+    joinItemForward: joinItemForward,
     keyboardShortcut: keyboardShortcut,
     lift: lift,
     liftEmptyBlock: liftEmptyBlock,
@@ -40563,7 +40610,12 @@
                   const { selection, doc } = tr;
                   const { empty, $anchor } = selection;
                   const { pos, parent } = $anchor;
-                  const isAtStart = Selection$2.atStart(doc).from === pos;
+                  const $parentPos = $anchor.parent.isTextblock ? tr.doc.resolve(pos - 1) : $anchor;
+                  const parentIsIsolating = $parentPos.parent.type.spec.isolating;
+                  const parentPos = $anchor.pos - $anchor.parentOffset;
+                  const isAtStart = (parentIsIsolating && $parentPos.parent.childCount === 1)
+                      ? parentPos === $anchor.pos
+                      : Selection$2.atStart(doc).from === pos;
                   if (!empty || !isAtStart || !parent.type.isTextblock || parent.textContent.length) {
                       return false;
                   }
@@ -40976,6 +41028,7 @@ img.ProseMirror-separator {
           });
           this.view.updateState(newState);
           this.createNodeViews();
+          this.prependClass();
           // Let’s store the editor instance in the DOM element.
           // So we’ll have access to it for tests.
           const dom = this.view.dom;
@@ -40989,6 +41042,12 @@ img.ProseMirror-separator {
               nodeViews: this.extensionManager.nodeViews,
           });
       }
+      /**
+       * Prepend class name to element.
+       */
+      prependClass() {
+          this.view.dom.className = `tiptap ${this.view.dom.className}`;
+      }
       captureTransaction(fn) {
           this.isCapturingTransaction = true;
           fn();
@@ -41139,7 +41198,6 @@ img.ProseMirror-separator {
               const { tr } = state;
               const captureGroup = match[match.length - 1];
               const fullMatch = match[0];
-              let markEnd = range.to;
               if (captureGroup) {
                   const startSpaces = fullMatch.search(/\S/);
                   const textStart = range.from + fullMatch.indexOf(captureGroup);
@@ -41160,7 +41218,7 @@ img.ProseMirror-separator {
                   if (textStart > range.from) {
                       tr.delete(range.from + startSpaces, textStart);
                   }
-                  markEnd = range.from + startSpaces + captureGroup.length;
+                  const markEnd = range.from + startSpaces + captureGroup.length;
                   tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}));
                   tr.removeStoredMark(config.type);
               }
@@ -54653,6 +54711,8 @@ img.ProseMirror-separator {
       addOptions() {
           return {
               HTMLAttributes: {},
+              bulletListTypeName: 'bulletList',
+              orderedListTypeName: 'orderedList',
           };
       },
       content: 'paragraph block*',
@@ -55420,8 +55480,11 @@ img.ProseMirror-separator {
       addKeyboardShortcuts() {
           return {
               'Mod-z': () => this.editor.commands.undo(),
+              'Mod-Z': () => this.editor.commands.undo(),
               'Mod-y': () => this.editor.commands.redo(),
+              'Mod-Y': () => this.editor.commands.redo(),
               'Shift-Mod-z': () => this.editor.commands.redo(),
+              'Shift-Mod-Z': () => this.editor.commands.redo(),
               // Russian keyboard layouts
               'Mod-я': () => this.editor.commands.undo(),
               'Shift-Mod-я': () => this.editor.commands.redo(),
@@ -55507,6 +55570,8 @@ img.ProseMirror-separator {
       addOptions() {
           return {
               HTMLAttributes: {},
+              bulletListTypeName: 'bulletList',
+              orderedListTypeName: 'orderedList',
           };
       },
       content: 'paragraph block*',
@@ -55535,6 +55600,8 @@ img.ProseMirror-separator {
       addOptions() {
           return {
               HTMLAttributes: {},
+              bulletListTypeName: 'bulletList',
+              orderedListTypeName: 'orderedList',
           };
       },
       content: 'paragraph block*',
@@ -55707,6 +55774,65 @@ img.ProseMirror-separator {
       },
   });
 
+  const Placeholder = Extension.create({
+      name: 'placeholder',
+      addOptions() {
+          return {
+              emptyEditorClass: 'is-editor-empty',
+              emptyNodeClass: 'is-empty',
+              placeholder: 'Write something …',
+              showOnlyWhenEditable: true,
+              showOnlyCurrent: true,
+              includeChildren: false,
+          };
+      },
+      addProseMirrorPlugins() {
+          return [
+              new Plugin({
+                  key: new PluginKey('placeholder'),
+                  props: {
+                      decorations: ({ doc, selection }) => {
+                          const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+                          const { anchor } = selection;
+                          const decorations = [];
+                          if (!active) {
+                              return null;
+                          }
+                          // only calculate isEmpty once due to its performance impacts (see issue #3360)
+                          const emptyDocInstance = doc.type.createAndFill();
+                          const isEditorEmpty = (emptyDocInstance === null || emptyDocInstance === void 0 ? void 0 : emptyDocInstance.sameMarkup(doc))
+                              && emptyDocInstance.content.findDiffStart(doc.content) === null;
+                          doc.descendants((node, pos) => {
+                              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+                              const isEmpty = !node.isLeaf && !node.childCount;
+                              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                                  const classes = [this.options.emptyNodeClass];
+                                  if (isEditorEmpty) {
+                                      classes.push(this.options.emptyEditorClass);
+                                  }
+                                  const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                                      class: classes.join(' '),
+                                      'data-placeholder': typeof this.options.placeholder === 'function'
+                                          ? this.options.placeholder({
+                                              editor: this.editor,
+                                              node,
+                                              pos,
+                                              hasAnchor,
+                                          })
+                                          : this.options.placeholder,
+                                  });
+                                  decorations.push(decoration);
+                              }
+                              return this.options.includeChildren;
+                          });
+                          return DecorationSet.create(doc, decorations);
+                      },
+                  },
+              }),
+          ];
+      },
+  });
+
   const Text = Node$1.create({
       name: 'text',
       group: 'inline',
@@ -55761,12 +55887,18 @@ img.ProseMirror-separator {
         <div class="container">
             <section ${ref('editorContainer')} class="editor-container">
             </section>
-            <section class="footer-section" part="footer-section">
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+                style="--ni-private-rich-text-editor-scrollbar-width: ${x => x.scrollbarWidth}px;"
+            ></${iconExclamationMarkTag}>
+            <section class="footer-section">
                 <${toolbarTag}>
                     <${toggleButtonTag}
                         ${ref('boldButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Bold"
                         @click=${x => x.boldButtonClick()}
@@ -55780,6 +55912,7 @@ img.ProseMirror-separator {
                         ${ref('italicsButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Italics"
                         @click=${x => x.italicsButtonClick()}
@@ -55793,6 +55926,7 @@ img.ProseMirror-separator {
                         ${ref('bulletListButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Bullet List"
                         @click=${x => x.bulletListButtonClick()}
@@ -55806,6 +55940,7 @@ img.ProseMirror-separator {
                         ${ref('numberedListButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Numbered List"
                         @click=${x => x.numberedListButtonClick()}
@@ -55820,12 +55955,14 @@ img.ProseMirror-separator {
                     <slot name="footer-actions"></slot>
                 </span>
             </section>
+            ${errorTextTemplate}
         </div>
     </template>
 `;
 
   const styles$p = css `
     ${display('inline-flex')}
+    ${styles$B}
 
     :host {
         font: ${bodyFont};
@@ -55835,6 +55972,9 @@ img.ProseMirror-separator {
         --ni-private-rich-text-editor-hover-indicator-width: calc(
             ${borderWidth} + 1px
         );
+        ${
+/** Initial height of rich text editor with one line space when the footer is visible. */ ''}
+        height: 82px;
         --ni-private-rich-text-editor-footer-section-height: 40px;
         ${
 /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''}
@@ -55842,6 +55982,7 @@ img.ProseMirror-separator {
     }
 
     .container {
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -55873,37 +56014,55 @@ img.ProseMirror-separator {
         }
     }
 
+    :host([disabled]) .container {
+        color: ${bodyDisabledFontColor};
+        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
+    }
+
+    :host([error-visible]) .container {
+        border-bottom-color: ${failColor};
+    }
+
     :host(:hover) .container::after {
-        width: 100%;
+        width: calc(100% + 2 * ${borderWidth});
+    }
+
+    :host([disabled]:hover) .container::after {
+        width: 0px;
+    }
+
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    .editor-container {
+        display: contents;
     }
 
     .editor {
+        display: flex;
+        flex-direction: column;
         border: ${borderWidth} solid transparent;
         border-radius: 0px;
-        height: calc(
-            100% - var(--ni-private-rich-text-editor-footer-section-height)
-        );
-        overflow: auto;
+        flex: 1;
+        overflow: hidden;
     }
 
-    .editor-container {
-        display: contents;
+    :host([footer-hidden]) .editor {
+        height: 100%;
     }
 
     .ProseMirror {
-        ${
-/**
- * Min height represents the one line space for the initial view and max height is referred from the visual design.
- * However, max height will be `fit-content` when the `fit-to-content` attribute for the editor component is implemented.
- */ ''}
-        min-height: 32px;
-        max-height: 132px;
+        overflow: auto;
         height: 100%;
-        border: ${borderWidth} solid transparent;
+        border: 0px;
         border-radius: 0px;
         background-color: transparent;
         font: inherit;
         padding: 8px;
+        ${
+/* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
+        padding-right: calc(${iconSize});
         box-sizing: border-box;
         position: relative;
         color: inherit;
@@ -55950,15 +56109,38 @@ img.ProseMirror-separator {
         margin-block: 0;
     }
 
+    ${
+/**
+ * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.
+ * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup
+ */ ''}
+    .ProseMirror p.is-editor-empty:first-child::before {
+        color: ${controlLabelFontColor};
+        content: attr(data-placeholder);
+        float: left;
+        height: 0;
+        pointer-events: none;
+        word-break: break-word;
+    }
+
+    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .footer-section {
         display: flex;
         justify-content: space-between;
+        flex-shrink: 0;
         border: ${borderWidth} solid transparent;
         border-top-color: rgba(${borderRgbPartialColor}, 0.1);
         height: var(--ni-private-rich-text-editor-footer-section-height);
         overflow: hidden;
     }
 
+    :host([footer-hidden]) .footer-section {
+        display: none;
+    }
+
     nimble-toolbar::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
@@ -55975,6 +56157,17 @@ img.ProseMirror-separator {
         gap: ${standardPadding};
         place-items: center;
     }
+
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: calc(${standardPadding} / 2);
+        right: var(--ni-private-rich-text-editor-scrollbar-width);
+    }
 `;
 
   /**
@@ -55982,12 +56175,57 @@ img.ProseMirror-separator {
    */
   class RichTextEditor extends FoundationElement {
       constructor() {
-          super();
+          super(...arguments);
+          /**
+           * @internal
+           */
+          this.editor = this.createEditor();
+          /**
+           * @internal
+           */
+          this.tiptapEditor = this.createTiptapEditor();
+          /**
+           * Whether to disable user from editing and interacting with toolbar buttons
+           *
+           * @public
+           * HTML Attribute: disabled
+           */
+          this.disabled = false;
+          /**
+           * Whether to hide the footer of the rich text editor
+           *
+           * @public
+           * HTML Attribute: footer-hidden
+           */
+          this.footerHidden = false;
+          /**
+           * Whether to display the error state.
+           *
+           * @public
+           * HTML Attribute: error-visible
+           */
+          this.errorVisible = false;
+          /**
+           * The width of the vertical scrollbar, if displayed.
+           * @internal
+           */
+          this.scrollbarWidth = -1;
+          this.updateScrollbarWidthQueued = false;
           this.markdownParser = this.initializeMarkdownParser();
           this.markdownSerializer = this.initializeMarkdownSerializer();
           this.domSerializer = DOMSerializer.fromSchema(schema);
           this.xmlSerializer = new XMLSerializer();
-          this.initializeEditor();
+      }
+      /**
+       * True if the editor is empty or contains only whitespace, false otherwise.
+       *
+       * @public
+       */
+      get empty() {
+          // Tiptap [isEmpty](https://tiptap.dev/api/editor#is-empty) returns false even if the editor has only whitespace.
+          // However, the expectation is to return true if the editor is empty or contains only whitespace.
+          // Hence, by retrieving the current text content using Tiptap state docs and then trimming the string to determine whether it is empty or not.
+          return this.tiptapEditor.state.doc.textContent.trim().length === 0;
       }
       /**
        * @internal
@@ -55998,6 +56236,10 @@ img.ProseMirror-separator {
               this.editorContainer.append(this.editor);
           }
           this.bindEditorTransactionEvent();
+          this.bindEditorUpdateEvent();
+          this.stopNativeInputEventPropagation();
+          this.resizeObserver = new ResizeObserver(() => this.onResize());
+          this.resizeObserver.observe(this);
       }
       /**
        * @internal
@@ -56005,6 +56247,38 @@ img.ProseMirror-separator {
       disconnectedCallback() {
           super.disconnectedCallback();
           this.unbindEditorTransactionEvent();
+          this.unbindEditorUpdateEvent();
+          this.unbindNativeInputEvent();
+          this.resizeObserver?.disconnect();
+      }
+      /**
+       * @internal
+       */
+      disabledChanged() {
+          this.tiptapEditor.setEditable(!this.disabled);
+          this.setEditorTabIndex();
+          this.editor.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+      }
+      /**
+       * Update the placeholder text and view of the editor.
+       * @internal
+       */
+      placeholderChanged() {
+          const placeholderExtension = this.getTipTapExtension('placeholder');
+          placeholderExtension.options.placeholder = this.placeholder ?? '';
+          this.tiptapEditor.view.dispatch(this.tiptapEditor.state.tr);
+          this.queueUpdateScrollbarWidth();
+      }
+      /**
+       * @internal
+       */
+      ariaLabelChanged() {
+          if (this.ariaLabel !== null && this.ariaLabel !== undefined) {
+              this.editor.setAttribute('aria-label', this.ariaLabel);
+          }
+          else {
+              this.editor.removeAttribute('aria-label');
+          }
       }
       /**
        * Toggle the bold mark and focus back to the editor
@@ -56012,6 +56286,7 @@ img.ProseMirror-separator {
        */
       boldButtonClick() {
           this.tiptapEditor.chain().focus().toggleBold().run();
+          this.forceFocusEditor();
       }
       /**
        * Toggle the bold mark and focus back to the editor
@@ -56020,6 +56295,7 @@ img.ProseMirror-separator {
       boldButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleBold().run();
+              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56030,6 +56306,7 @@ img.ProseMirror-separator {
        */
       italicsButtonClick() {
           this.tiptapEditor.chain().focus().toggleItalic().run();
+          this.forceFocusEditor();
       }
       /**
        * Toggle the italics mark and focus back to the editor
@@ -56038,6 +56315,7 @@ img.ProseMirror-separator {
       italicsButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleItalic().run();
+              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56048,6 +56326,7 @@ img.ProseMirror-separator {
        */
       bulletListButtonClick() {
           this.tiptapEditor.chain().focus().toggleBulletList().run();
+          this.forceFocusEditor();
       }
       /**
        * Toggle the unordered list node and focus back to the editor
@@ -56056,6 +56335,7 @@ img.ProseMirror-separator {
       bulletListButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleBulletList().run();
+              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56066,6 +56346,7 @@ img.ProseMirror-separator {
        */
       numberedListButtonClick() {
           this.tiptapEditor.chain().focus().toggleOrderedList().run();
+          this.forceFocusEditor();
       }
       /**
        * Toggle the ordered list node and focus back to the editor
@@ -56074,6 +56355,7 @@ img.ProseMirror-separator {
       numberedListButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleOrderedList().run();
+              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56103,6 +56385,39 @@ img.ProseMirror-separator {
           event.stopPropagation();
           return false;
       }
+      createEditor() {
+          const editor = document.createElement('div');
+          editor.className = 'editor';
+          editor.setAttribute('aria-multiline', 'true');
+          editor.setAttribute('role', 'textbox');
+          editor.setAttribute('aria-disabled', 'false');
+          return editor;
+      }
+      createTiptapEditor() {
+          /**
+           * For more information on the extensions for the supported formatting options, refer to the links below.
+           * Tiptap marks: https://tiptap.dev/api/marks
+           * Tiptap nodes: https://tiptap.dev/api/nodes
+           */
+          return new Editor({
+              element: this.editor,
+              extensions: [
+                  Document$1,
+                  Paragraph,
+                  Text,
+                  BulletList,
+                  OrderedList,
+                  ListItem$1,
+                  Bold,
+                  Italic,
+                  History,
+                  Placeholder.configure({
+                      placeholder: '',
+                      showOnlyWhenEditable: false
+                  })
+              ]
+          });
+      }
       /**
        * This function takes the Fragment from parseMarkdownToDOM function and return the serialized string using XMLSerializer
        */
@@ -56169,32 +56484,6 @@ img.ProseMirror-separator {
           }
           return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
       }
-      initializeEditor() {
-          // Create div from the constructor because the TipTap editor requires its host element before the template is instantiated.
-          this.editor = document.createElement('div');
-          this.editor.className = 'editor';
-          this.editor.setAttribute('aria-multiline', 'true');
-          this.editor.setAttribute('role', 'textbox');
-          /**
-           * For more information on the extensions for the supported formatting options, refer to the links below.
-           * Tiptap marks: https://tiptap.dev/api/marks
-           * Tiptap nodes: https://tiptap.dev/api/nodes
-           */
-          this.tiptapEditor = new Editor({
-              element: this.editor,
-              extensions: [
-                  Document$1,
-                  Paragraph,
-                  Text,
-                  BulletList,
-                  OrderedList,
-                  ListItem$1,
-                  Bold,
-                  Italic,
-                  History
-              ]
-          });
-      }
       /**
        * Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to
        * various actions such as mouse events, keyboard events, changes in the editor content etc,.
@@ -56223,7 +56512,90 @@ img.ProseMirror-separator {
                   return false;
           }
       }
+      unbindEditorUpdateEvent() {
+          this.tiptapEditor.off('update');
+      }
+      /**
+       * input event is fired when there is a change in the content of the editor.
+       *
+       * https://tiptap.dev/api/events#update
+       */
+      bindEditorUpdateEvent() {
+          this.tiptapEditor.on('update', () => {
+              this.$emit('input');
+              this.queueUpdateScrollbarWidth();
+          });
+      }
+      /**
+       * Stopping the native input event propagation emitted by the contenteditable element in the Tiptap
+       * since there is an issue (linked below) in ProseMirror where selecting the text and removing it
+       * does not trigger the native HTMLElement input event. So using the "update" event emitted by the
+       * Tiptap to capture it as an "input" customEvent in the rich text editor.
+       *
+       * Prose Mirror issue: https://discuss.prosemirror.net/t/how-to-handle-select-backspace-delete-cut-type-kind-of-events-handletextinput-or-handledomevents-input-doesnt-help/4844
+       */
+      stopNativeInputEventPropagation() {
+          this.tiptapEditor.view.dom.addEventListener('input', event => {
+              event.stopPropagation();
+          });
+      }
+      unbindNativeInputEvent() {
+          this.tiptapEditor.view.dom.removeEventListener('input', () => { });
+      }
+      queueUpdateScrollbarWidth() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateScrollbarWidthQueued) {
+              this.updateScrollbarWidthQueued = true;
+              DOM.queueUpdate(() => this.updateScrollbarWidth());
+          }
+      }
+      updateScrollbarWidth() {
+          this.updateScrollbarWidthQueued = false;
+          this.scrollbarWidth = this.tiptapEditor.view.dom.offsetWidth
+              - this.tiptapEditor.view.dom.clientWidth;
+      }
+      onResize() {
+          this.scrollbarWidth = this.tiptapEditor.view.dom.offsetWidth
+              - this.tiptapEditor.view.dom.clientWidth;
+      }
+      getTipTapExtension(extensionName) {
+          return this.tiptapEditor.extensionManager.extensions.find(extension => extension.name === extensionName);
+      }
+      setEditorTabIndex() {
+          this.tiptapEditor.setOptions({
+              editorProps: {
+                  attributes: {
+                      tabindex: this.disabled ? '-1' : '0'
+                  }
+              }
+          });
+      }
+      // In Firefox browser, once the editor gets focused, the blinking caret will be visible until we click format buttons (Bold, Italic ...) in the Firefox browser (changing focus).
+      // But once any of the toolbar button is clicked, editor internally has its focus but the blinking caret disappears.
+      // As a workaround, manually triggering blur and setting focus on editor makes the blinking caret to re-appear.
+      // Mozilla issue https://bugzilla.mozilla.org/show_bug.cgi?id=1496769 tracks removal of this workaround.
+      forceFocusEditor() {
+          this.tiptapEditor.commands.blur();
+          this.tiptapEditor.commands.focus();
+      }
   }
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], RichTextEditor.prototype, "disabled", void 0);
+  __decorate$1([
+      attr({ attribute: 'footer-hidden', mode: 'boolean' })
+  ], RichTextEditor.prototype, "footerHidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-visible', mode: 'boolean' })
+  ], RichTextEditor.prototype, "errorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-text' })
+  ], RichTextEditor.prototype, "errorText", void 0);
+  __decorate$1([
+      attr
+  ], RichTextEditor.prototype, "placeholder", void 0);
   __decorate$1([
       observable
   ], RichTextEditor.prototype, "boldButton", void 0);
@@ -56236,6 +56608,10 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextEditor.prototype, "numberedListButton", void 0);
+  __decorate$1([
+      observable
+  ], RichTextEditor.prototype, "scrollbarWidth", void 0);
+  applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$l,