diff --git a/packages/koenig-lexical/demo/DemoApp.jsx b/packages/koenig-lexical/demo/DemoApp.jsx
index 382289fd0..fec670ecb 100644
--- a/packages/koenig-lexical/demo/DemoApp.jsx
+++ b/packages/koenig-lexical/demo/DemoApp.jsx
@@ -5,7 +5,6 @@ import FloatingButton from './components/FloatingButton';
 import InitialContentToggle from './components/InitialContentToggle';
 import LockIcon from './assets/icons/kg-lock.svg?react';
 import React, {useState} from 'react';
-import ReplacementStringsPlugin from '../src/plugins/ReplacementStringsPlugin';
 import Sidebar from './components/Sidebar';
 import TitleTextBox from './components/TitleTextBox';
 import Watermark from './components/Watermark';
@@ -16,9 +15,10 @@ import emailContent from './content/email-content.json';
 import minimalContent from './content/minimal-content.json';
 import {$getRoot, $isDecoratorNode} from 'lexical';
 import {
-    BASIC_NODES, BASIC_TRANSFORMERS, EMAIL_NODES, EMAIL_TRANSFORMERS,
-    KoenigComposableEditor, KoenigComposer, KoenigEditor, ListPlugin, MINIMAL_NODES,
-    MINIMAL_TRANSFORMERS, RestrictContentPlugin, TKCountPlugin, WordCountPlugin
+    BASIC_NODES, BASIC_TRANSFORMERS, EMAIL_NODES,
+    KoenigComposableEditor, KoenigComposer, KoenigEditor, KoenigEmailEditor,
+    MINIMAL_NODES, MINIMAL_TRANSFORMERS, RestrictContentPlugin,
+    TKCountPlugin, WordCountPlugin
 } from '../src';
 import {defaultHeaders as defaultUnsplashHeaders} from './utils/unsplashConfig';
 import {fetchEmbed} from './utils/fetchEmbed';
@@ -159,17 +159,13 @@ function DemoEditor({editorType, registerAPI, cursorDidExitAtTop, darkMode, setW
         );
     } else if (editorType === 'email') {
         return (
-            <KoenigComposableEditor
+            <KoenigEmailEditor
                 cursorDidExitAtTop={cursorDidExitAtTop}
-                isSnippetsEnabled={false}
-                markdownTransformers={EMAIL_TRANSFORMERS}
                 placeholderText="Begin writing your email..."
                 registerAPI={registerAPI}
             >
-                <ListPlugin />
-                <ReplacementStringsPlugin />
                 <WordCountPlugin onChange={setWordCount} />
-            </KoenigComposableEditor>
+            </KoenigEmailEditor>
         );
     }
 
diff --git a/packages/koenig-lexical/src/components/KoenigEmailEditor.jsx b/packages/koenig-lexical/src/components/KoenigEmailEditor.jsx
new file mode 100644
index 000000000..a3eeaffe0
--- /dev/null
+++ b/packages/koenig-lexical/src/components/KoenigEmailEditor.jsx
@@ -0,0 +1,31 @@
+import '../styles/index.css';
+import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
+import KoenigComposableEditor from './KoenigComposableEditor';
+import React from 'react';
+import ReplacementStringsPlugin from '../plugins/ReplacementStringsPlugin';
+import {ButtonPlugin} from '../plugins/ButtonPlugin';
+import {CalloutPlugin} from '../plugins/CalloutPlugin';
+import {EMAIL_TRANSFORMERS} from '../plugins/MarkdownShortcutPlugin';
+import {ListPlugin} from '@lexical/react/LexicalListPlugin';
+
+const KoenigEmailEditor = ({
+    children,
+    ...props
+}) => {
+    return (
+        <KoenigComposableEditor
+            isSnippetsEnabled={false}
+            markdownTransformers={EMAIL_TRANSFORMERS}
+            {...props}
+        >
+            <ListPlugin />
+            <ReplacementStringsPlugin />
+            <ButtonPlugin />
+            <CalloutPlugin />
+            <HorizontalRulePlugin />
+            {children}
+        </KoenigComposableEditor>
+    );
+};
+
+export default KoenigEmailEditor;
diff --git a/packages/koenig-lexical/src/index.js b/packages/koenig-lexical/src/index.js
index f5ee8ec65..a30fec012 100644
--- a/packages/koenig-lexical/src/index.js
+++ b/packages/koenig-lexical/src/index.js
@@ -4,6 +4,7 @@ import KoenigCardWrapper from './components/KoenigCardWrapper';
 import KoenigComposableEditor from './components/KoenigComposableEditor';
 import KoenigComposer from './components/KoenigComposer';
 import KoenigEditor from './components/KoenigEditor';
+import KoenigEmailEditor from './components/KoenigEmailEditor';
 import KoenigNestedComposer from './components/KoenigNestedComposer';
 
 /* Plugins */
@@ -64,6 +65,7 @@ export {
     KoenigComposableEditor,
     KoenigComposer,
     KoenigEditor,
+    KoenigEmailEditor,
     KoenigNestedComposer,
     KoenigCardWrapper,
 
diff --git a/packages/koenig-lexical/src/nodes/EmailNodes.js b/packages/koenig-lexical/src/nodes/EmailNodes.js
index 1f1d0126b..e9f7d6708 100644
--- a/packages/koenig-lexical/src/nodes/EmailNodes.js
+++ b/packages/koenig-lexical/src/nodes/EmailNodes.js
@@ -10,6 +10,8 @@ import {LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';
 
 import {AsideNode} from './AsideNode';
+import {ButtonNode} from './ButtonNode';
+import {CalloutNode} from './CalloutNode';
 import {HorizontalRuleNode} from './HorizontalRuleNode';
 
 const EMAIL_NODES = [
@@ -23,6 +25,8 @@ const EMAIL_NODES = [
     ListNode,
     ListItemNode,
     LinkNode,
+    ButtonNode,
+    CalloutNode,
     HorizontalRuleNode
 ];
 
diff --git a/packages/koenig-lexical/test/e2e/editors/email-editor.test.js b/packages/koenig-lexical/test/e2e/editors/email-editor.test.js
index c7b233ce0..c0e811989 100644
--- a/packages/koenig-lexical/test/e2e/editors/email-editor.test.js
+++ b/packages/koenig-lexical/test/e2e/editors/email-editor.test.js
@@ -93,7 +93,7 @@ test.describe('Koenig Editor with email template nodes', async function () {
 
         test('can create horizontal rules with --- shortcut', async function () {
             await focusEditor(page);
-            await page.keyboard.type('--- ');
+            await page.keyboard.type('---');
 
             await assertHTML(page, html`
                 <div data-lexical-decorator="true" contenteditable="false">