Created email editor component

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>
         );
     }
 

packages/koenig-lexical/src/components/KoenigEmailEditor.jsx

@@ -0,0 +1,27 @@
+import '../styles/index.css';
+import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
+import KoenigComposableEditor from './KoenigComposableEditor';
+import React from 'react';
+import ReplacementStringsPlugin from '../plugins/ReplacementStringsPlugin';
+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 />
+            <HorizontalRulePlugin />
+            {children}
+        </KoenigComposableEditor>
+    );
+};
+
+export default KoenigEmailEditor;

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,
 

packages/koenig-lexical/src/nodes/EmailNodes.js

@@ -9,7 +9,6 @@ import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';
 
-import {AsideNode} from './AsideNode';
 import {HorizontalRuleNode} from './HorizontalRuleNode';
 
 const EMAIL_NODES = [
@@ -19,7 +18,6 @@ const EMAIL_NODES = [
     ExtendedHeadingNode,
     extendedHeadingNodeReplacement,
     QuoteNode,
-    AsideNode,
     ListNode,
     ListItemNode,
     LinkNode,

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">