A first version that has some working standard features.

demo/src/the-app.js

@@ -11,6 +11,12 @@ import '../../tp-rtb-strike.js';
 import '../../tp-rtb-underline.js';
 import '../../tp-rtb-code.js';
 import '../../tp-rtb-clear-format.js';
+import '../../tp-rtb-link.js';
+import '../../tp-rtb-undo.js';
+import '../../tp-rtb-redo.js';
+import '../../tp-rtb-emoji-suggestion.js';
+import '../../tp-rtb-user-mention.js';
+
 import { LitElement, html, css } from 'lit';
 
 class TheApp extends LitElement {
@@ -24,6 +30,13 @@ class TheApp extends LitElement {
           inset: 0;
           font-family: sans-serif;
         }
+
+        [slot="editor-content"] {
+          padding: 8px;
+          flex-grow: 1;
+          border: 1px solid #ccc;
+          min-height: 100px;
+        }
       `
     ];
   }
@@ -31,23 +44,71 @@ class TheApp extends LitElement {
   render() {
     return html`
       <tp-rich-text-box>
+        <div slot="content" id="editor-content-element"></div>
+        <!-- Selection Menu Controls -->
         <tp-rtb-bold></tp-rtb-bold>
         <tp-rtb-italic></tp-rtb-italic>
         <tp-rtb-strike></tp-rtb-strike>
         <tp-rtb-underline></tp-rtb-underline>
         <tp-rtb-code></tp-rtb-code>
         <tp-rtb-clear-format></tp-rtb-clear-format>
+        <tp-rtb-link></tp-rtb-link>
+        <tp-rtb-undo></tp-rtb-undo>
+        <tp-rtb-redo></tp-rtb-redo>
+        <!-- Suggestion Menu Content -->
+        <tp-rtb-emoji-suggestion slot="suggestion-content"></tp-rtb-emoji-suggestion>
+        <tp-rtb-user-mention slot="suggestion-content"></tp-rtb-user-mention>
       </tp-rich-text-box>
+      <div style="margin-top: 20px;">
+        <button @click="${this._saveContent}">Save JSON</button>
+        <button @click="${this._loadContent}">Load JSON</button>
+      </div>
+      <div style="margin-top: 10px; font-size: 14px; color: #666;">
+        <p><strong>Instructions:</strong></p>
+        <ul>
+          <li>Select text to see formatting controls</li>
+          <li>Type ":" for emoji suggestions (e.g., ":grinning")</li>
+          <li>Type "@" for user mentions (e.g., "@john")</li>
+        </ul>
+      </div>
+      <textarea id="jsonContent" style="width: 100%; height: 200px; margin-top: 10px;"></textarea>
     `;
   }
 
   static get properties() {
     return {
+      _editor: { type: Object },
     };
   }
 
   constructor() {
     super();
+    this._editor = null;
+  }
+
+  firstUpdated() {
+    this._editor = this.shadowRoot.querySelector('tp-rich-text-box');
+  }
+
+  _saveContent() {
+    if (this._editor) {
+      const jsonContent = this._editor.value;
+      this.shadowRoot.querySelector('#jsonContent').value = JSON.stringify(jsonContent, null, 2);
+      console.log('Content saved:', jsonContent);
+    }
+  }
+
+  _loadContent() {
+    if (this._editor) {
+      try {
+        const jsonContent = JSON.parse(this.shadowRoot.querySelector('#jsonContent').value);
+        this._editor.value = jsonContent;
+        console.log('Content loaded:', jsonContent);
+      } catch (e) {
+        console.error('Invalid JSON:', e);
+        alert('Invalid JSON content. Please check the textarea.');
+      }
+    }
   }
 }