From 9e70dc825e743a65bddc05ca67c25ab5b8e034ff Mon Sep 17 00:00:00 2001
From: umaranis <mail@umaranis.com>
Date: Mon, 16 Jan 2023 23:03:18 +1100
Subject: [PATCH] refactor: more control to user library user in composing the
 editor with plugins and controls

---
 demos/plaintext-editor/src/App.svelte         | 21 ++---
 .../src/PlainTextComposer.svelte              | 34 ++++++++
 demos/playground/src/App.svelte               |  5 +-
 demos/playground/src/RichTextComposer.svelte  | 61 +++++++++++++++
 demos/richtext-editor-basic/src/App.svelte    | 10 +--
 .../src/RichTextBasicComposer.svelte          | 39 ++++++++++
 demos/richtext-editor/src/App.svelte          | 10 +--
 .../src/RichTextComposer.svelte               | 59 ++++++++++++++
 demos/sveltekit/src/RichTextComposer.svelte   | 59 ++++++++++++++
 demos/sveltekit/src/routes/+page.js           |  2 +
 demos/sveltekit/src/routes/+page.svelte       | 13 ++--
 .../sveltekit/src/themes/StickyEditorTheme.js |  4 +-
 .../RichTextBasicComposer.svelte              | 12 ---
 .../richtext-basic/RichTextBasicEditor.svelte | 25 ------
 .../richtext/RichTextComposer.svelte          | 12 ---
 .../components/richtext/RichTextEditor.svelte | 44 -----------
 .../svelte-lexical/src/core/Composer.svelte   | 13 ++++
 .../src/core/ContentEditable.svelte           | 78 +++++++++++++++++++
 .../svelte-lexical/src/core/TextEditor.svelte | 58 --------------
 packages/svelte-lexical/src/index.ts          | 19 +++--
 20 files changed, 384 insertions(+), 194 deletions(-)
 create mode 100644 demos/plaintext-editor/src/PlainTextComposer.svelte
 create mode 100644 demos/playground/src/RichTextComposer.svelte
 create mode 100644 demos/richtext-editor-basic/src/RichTextBasicComposer.svelte
 create mode 100644 demos/richtext-editor/src/RichTextComposer.svelte
 create mode 100644 demos/sveltekit/src/RichTextComposer.svelte
 create mode 100644 demos/sveltekit/src/routes/+page.js
 delete mode 100644 packages/svelte-lexical/src/components/richtext-basic/RichTextBasicComposer.svelte
 delete mode 100644 packages/svelte-lexical/src/components/richtext-basic/RichTextBasicEditor.svelte
 delete mode 100644 packages/svelte-lexical/src/components/richtext/RichTextComposer.svelte
 delete mode 100644 packages/svelte-lexical/src/components/richtext/RichTextEditor.svelte
 create mode 100644 packages/svelte-lexical/src/core/Composer.svelte
 create mode 100644 packages/svelte-lexical/src/core/ContentEditable.svelte
 delete mode 100644 packages/svelte-lexical/src/core/TextEditor.svelte

diff --git a/demos/plaintext-editor/src/App.svelte b/demos/plaintext-editor/src/App.svelte
index e26be28..ac5d479 100644
--- a/demos/plaintext-editor/src/App.svelte
+++ b/demos/plaintext-editor/src/App.svelte
@@ -1,28 +1,17 @@
 <script>
-  import { TextEditor, PlainTextPlugin, HistoryPlugin } from 'svelte-lexical';
-  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
-
-  const config = {
-    theme: PlaygroundEditorTheme,
-    nodes: [],
-    onError: (error) => {
-      throw error;
-    },
-  };
+  import PlainTextComposer from './PlainTextComposer.svelte';
 </script>
 
 <main>
   <h1>Svelte Lexical!</h1>
   <p>
     This Plain Text Editor is build with <a
-      href="https://github.com/umaranis/svelte-lexical/">svelte-lexical</a
-    >
+      href="https://github.com/umaranis/svelte-lexical/">
+      svelte-lexical
+    </a>
   </p>
 
-  <TextEditor {config}>
-    <PlainTextPlugin />
-    <HistoryPlugin />
-  </TextEditor>
+  <PlainTextComposer />
 </main>
 
 <style>
diff --git a/demos/plaintext-editor/src/PlainTextComposer.svelte b/demos/plaintext-editor/src/PlainTextComposer.svelte
new file mode 100644
index 0000000..b8e2f8f
--- /dev/null
+++ b/demos/plaintext-editor/src/PlainTextComposer.svelte
@@ -0,0 +1,34 @@
+<script>
+  import {
+    Composer,
+    ContentEditable,
+    ActionBar,
+    PlainTextPlugin,
+    HistoryPlugin,
+  } from 'svelte-lexical';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+
+  const config = {
+    theme: PlaygroundEditorTheme,
+    nodes: [],
+    onError: (error) => {
+      throw error;
+    },
+  };
+</script>
+
+<Composer {config}>
+  <div class="editor-shell">
+    <div class="editor-container">
+      <div class="editor-scroller">
+        <div class="editor">
+          <ContentEditable />
+        </div>
+      </div>
+      <PlainTextPlugin />
+      <HistoryPlugin />
+
+      <ActionBar />
+    </div>
+  </div>
+</Composer>
diff --git a/demos/playground/src/App.svelte b/demos/playground/src/App.svelte
index 00bd7d3..bc5a4f9 100644
--- a/demos/playground/src/App.svelte
+++ b/demos/playground/src/App.svelte
@@ -1,6 +1,5 @@
 <script>
-  import {RichTextComposer} from 'svelte-lexical';
-  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+  import RichTextComposer from './RichTextComposer.svelte';
 </script>
 
 <main>
@@ -17,7 +16,7 @@
     Check if lexical is affected by this by enclosing editor in a center aligned div
   -->
   <div style="text-align: left;">
-    <RichTextComposer theme={PlaygroundEditorTheme} />
+    <RichTextComposer />
   </div>
 </main>
 
diff --git a/demos/playground/src/RichTextComposer.svelte b/demos/playground/src/RichTextComposer.svelte
new file mode 100644
index 0000000..3fe325e
--- /dev/null
+++ b/demos/playground/src/RichTextComposer.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import {
+    Composer,
+    ContentEditable,
+    ToolbarRichText,
+    ActionBar,
+    RichTextPlugin,
+    HistoryPlugin,
+    ListPlugin,
+    CheckListPlugin,
+    HorizontalRulePlugin,
+    ImagePlugin,
+    //TreeViewPlugin,
+  } from 'svelte-lexical';
+  import {
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    HorizontalRuleNode,
+    ImageNode,
+  } from 'svelte-lexical';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+
+  const config = {
+    theme: PlaygroundEditorTheme,
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      HorizontalRuleNode,
+      ImageNode,
+    ],
+    onError: (error) => {
+      throw error;
+    },
+  };
+</script>
+
+<Composer {config}>
+  <div class="editor-shell">
+    <ToolbarRichText />
+    <div class="editor-container">
+      <div class="editor-scroller">
+        <div class="editor">
+          <ContentEditable />
+        </div>
+      </div>
+      <RichTextPlugin />
+      <HistoryPlugin />
+      <ListPlugin />
+      <CheckListPlugin />
+      <HorizontalRulePlugin />
+      <ImagePlugin />
+
+      <ActionBar />
+    </div>
+    <!--<TreeViewPlugin />-->
+  </div>
+</Composer>
diff --git a/demos/richtext-editor-basic/src/App.svelte b/demos/richtext-editor-basic/src/App.svelte
index 1032843..38b7e71 100644
--- a/demos/richtext-editor-basic/src/App.svelte
+++ b/demos/richtext-editor-basic/src/App.svelte
@@ -1,17 +1,17 @@
 <script>
-  import { RichTextBasicComposer } from 'svelte-lexical';
-  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+  import RichTextBasicComposer from './RichTextBasicComposer.svelte';
 </script>
 
 <main>
   <h1>Svelte Lexical!</h1>
   <p>
     This Rich Text Editor is build with <a
-      href="https://github.com/umaranis/svelte-lexical/">svelte-lexical</a
-    >
+      href="https://github.com/umaranis/svelte-lexical/">
+      svelte-lexical
+    </a>
   </p>
 
-  <RichTextBasicComposer theme={PlaygroundEditorTheme}/>    
+  <RichTextBasicComposer />
 </main>
 
 <style>
diff --git a/demos/richtext-editor-basic/src/RichTextBasicComposer.svelte b/demos/richtext-editor-basic/src/RichTextBasicComposer.svelte
new file mode 100644
index 0000000..2c509af
--- /dev/null
+++ b/demos/richtext-editor-basic/src/RichTextBasicComposer.svelte
@@ -0,0 +1,39 @@
+<script>
+  import {
+    Composer,
+    ContentEditable,
+    ToolbarRichText,
+    ActionBar,
+    RichTextPlugin,
+    HistoryPlugin,
+    ListPlugin,
+  } from 'svelte-lexical';
+  import {HeadingNode, QuoteNode, ListNode, ListItemNode} from 'svelte-lexical';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+
+  const config = {
+    theme: PlaygroundEditorTheme,
+    nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode],
+    onError: (error) => {
+      throw error;
+    },
+  };
+</script>
+
+<Composer {config}>
+  <div class="editor-shell">
+    <ToolbarRichText />
+    <div class="editor-container">
+      <div class="editor-scroller">
+        <div class="editor">
+          <ContentEditable />
+        </div>
+      </div>
+      <RichTextPlugin />
+      <HistoryPlugin />
+      <ListPlugin />
+
+      <ActionBar />
+    </div>
+  </div>
+</Composer>
diff --git a/demos/richtext-editor/src/App.svelte b/demos/richtext-editor/src/App.svelte
index 1491b37..874cf00 100644
--- a/demos/richtext-editor/src/App.svelte
+++ b/demos/richtext-editor/src/App.svelte
@@ -1,17 +1,17 @@
 <script>
-  import { RichTextComposer } from 'svelte-lexical';
-  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+  import RichTextComposer from './RichTextComposer.svelte';
 </script>
 
 <main>
   <h1>Svelte Lexical!</h1>
   <p>
     This Rich Text Editor is build with <a
-      href="https://github.com/umaranis/svelte-lexical/">svelte-lexical</a
-    >
+      href="https://github.com/umaranis/svelte-lexical/">
+      svelte-lexical
+    </a>
   </p>
 
-  <RichTextComposer theme={PlaygroundEditorTheme}/>    
+  <RichTextComposer />
 </main>
 
 <style>
diff --git a/demos/richtext-editor/src/RichTextComposer.svelte b/demos/richtext-editor/src/RichTextComposer.svelte
new file mode 100644
index 0000000..6c21df5
--- /dev/null
+++ b/demos/richtext-editor/src/RichTextComposer.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import {
+    Composer,
+    ContentEditable,
+    ToolbarRichText,
+    ActionBar,
+    RichTextPlugin,
+    HistoryPlugin,
+    ListPlugin,
+    CheckListPlugin,
+    HorizontalRulePlugin,
+    ImagePlugin,
+  } from 'svelte-lexical';
+  import {
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    HorizontalRuleNode,
+    ImageNode,
+  } from 'svelte-lexical';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+
+  const config = {
+    theme: PlaygroundEditorTheme,
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      HorizontalRuleNode,
+      ImageNode,
+    ],
+    onError: (error) => {
+      throw error;
+    },
+  };
+</script>
+
+<Composer {config}>
+  <div class="editor-shell">
+    <ToolbarRichText />
+    <div class="editor-container">
+      <div class="editor-scroller">
+        <div class="editor">
+          <ContentEditable />
+        </div>
+      </div>
+      <RichTextPlugin />
+      <HistoryPlugin />
+      <ListPlugin />
+      <CheckListPlugin />
+      <HorizontalRulePlugin />
+      <ImagePlugin />
+
+      <ActionBar />
+    </div>
+  </div>
+</Composer>
diff --git a/demos/sveltekit/src/RichTextComposer.svelte b/demos/sveltekit/src/RichTextComposer.svelte
new file mode 100644
index 0000000..32cea9b
--- /dev/null
+++ b/demos/sveltekit/src/RichTextComposer.svelte
@@ -0,0 +1,59 @@
+<script>
+  import {
+    Composer,
+    ContentEditable,
+    ToolbarRichText,
+    ActionBar,
+    RichTextPlugin,
+    HistoryPlugin,
+    ListPlugin,
+    CheckListPlugin,
+    HorizontalRulePlugin,
+    ImagePlugin,
+  } from 'svelte-lexical';
+  import {
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    HorizontalRuleNode,
+    ImageNode,
+  } from 'svelte-lexical';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+
+  const config = {
+    theme: PlaygroundEditorTheme,
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      HorizontalRuleNode,
+      ImageNode,
+    ],
+    onError: (error) => {
+      throw error;
+    },
+  };
+</script>
+
+<Composer {config}>
+  <div class="editor-shell">
+    <ToolbarRichText />
+    <div class="editor-container">
+      <div class="editor-scroller">
+        <div class="editor">
+          <ContentEditable />
+        </div>
+      </div>
+      <RichTextPlugin />
+      <HistoryPlugin />
+      <ListPlugin />
+      <CheckListPlugin />
+      <HorizontalRulePlugin />
+      <ImagePlugin />
+
+      <ActionBar />
+    </div>
+  </div>
+</Composer>
diff --git a/demos/sveltekit/src/routes/+page.js b/demos/sveltekit/src/routes/+page.js
new file mode 100644
index 0000000..ff7f5c1
--- /dev/null
+++ b/demos/sveltekit/src/routes/+page.js
@@ -0,0 +1,2 @@
+//TODO: initializeEditor references `document` which causes the server-side-rendering to fail
+export const ssr = false;
\ No newline at end of file
diff --git a/demos/sveltekit/src/routes/+page.svelte b/demos/sveltekit/src/routes/+page.svelte
index 1b42594..4a79d45 100644
--- a/demos/sveltekit/src/routes/+page.svelte
+++ b/demos/sveltekit/src/routes/+page.svelte
@@ -1,8 +1,11 @@
 <script>
-    import { RichTextComposer } from 'svelte-lexical';
-    import PlaygroundEditorTheme from '../themes/PlaygroundEditorTheme';
-    import '../global.css';
+  import RichTextComposer from './../RichTextComposer.svelte';
+  import '../global.css';
 </script>
+
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-<RichTextComposer theme={PlaygroundEditorTheme}/>
+<p>
+  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a>
+  to read the documentation
+</p>
+<RichTextComposer />
diff --git a/demos/sveltekit/src/themes/StickyEditorTheme.js b/demos/sveltekit/src/themes/StickyEditorTheme.js
index 07f5dfa..2a73dee 100644
--- a/demos/sveltekit/src/themes/StickyEditorTheme.js
+++ b/demos/sveltekit/src/themes/StickyEditorTheme.js
@@ -7,13 +7,11 @@
  * @flow strict
  */
 
-import type {EditorThemeClasses} from 'lexical';
-
 import './StickyEditorTheme.css';
 
 import baseTheme from './PlaygroundEditorTheme';
 
-const theme: EditorThemeClasses = {
+const theme = {
   ...baseTheme,
   paragraph: 'StickyEditorTheme__paragraph',
 };
diff --git a/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicComposer.svelte b/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicComposer.svelte
deleted file mode 100644
index 0bfb9a0..0000000
--- a/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicComposer.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import Toolbar from './ToolbarBasic.svelte';
-  import RichTextBasicEditor from './RichTextBasicEditor.svelte';
-  import ActionBar from '../actionbar/ActionBar.svelte';
-
-  export let theme;
-</script>
-
-<RichTextBasicEditor {theme}>
-  <Toolbar slot="toolbar" />
-  <ActionBar slot="actions" />
-</RichTextBasicEditor>
diff --git a/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicEditor.svelte b/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicEditor.svelte
deleted file mode 100644
index 69c0e0e..0000000
--- a/packages/svelte-lexical/src/components/richtext-basic/RichTextBasicEditor.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-  import { ListItemNode, ListNode } from '@lexical/list';
-  import TextEditor from '../../core/TextEditor.svelte';
-  import RichTextPlugin from '../../core/plugins/RichTextPlugin.svelte';
-  import HistoryPlugin from '../../core/plugins/HistoryPlugin.svelte';
-  import ListPlugin from '../../core/plugins/ListPlugin.svelte';
-
-  export let theme;
-
-  const config = {
-    theme,
-    nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode],
-    onError: (error) => {
-      throw error;
-    },
-  };
-</script>
-
-<TextEditor {config}>
-  <slot name="toolbar" slot="toolbar" />
-  <RichTextPlugin />
-  <HistoryPlugin />
-  <ListPlugin />
-</TextEditor>
diff --git a/packages/svelte-lexical/src/components/richtext/RichTextComposer.svelte b/packages/svelte-lexical/src/components/richtext/RichTextComposer.svelte
deleted file mode 100644
index 91c0e33..0000000
--- a/packages/svelte-lexical/src/components/richtext/RichTextComposer.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import ToolbarRichText from './ToolbarRichText.svelte';
-  import RichTextEditor from './RichTextEditor.svelte';
-  import ActionBar from '../actionbar/ActionBar.svelte';
-
-  export let theme;
-</script>
-
-<RichTextEditor {theme}>
-  <ToolbarRichText slot="toolbar" />
-  <ActionBar slot="actions" />
-</RichTextEditor>
diff --git a/packages/svelte-lexical/src/components/richtext/RichTextEditor.svelte b/packages/svelte-lexical/src/components/richtext/RichTextEditor.svelte
deleted file mode 100644
index 0493027..0000000
--- a/packages/svelte-lexical/src/components/richtext/RichTextEditor.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-  import pkgLRT from '@lexical/rich-text';
-  import {ListItemNode, ListNode} from '@lexical/list';
-  import TextEditor from '../../core/TextEditor.svelte';
-  import RichTextPlugin from '../../core/plugins/RichTextPlugin.svelte';
-  import HistoryPlugin from '../../core/plugins/HistoryPlugin.svelte';
-  import ListPlugin from '../../core/plugins/ListPlugin.svelte';
-  import {HorizontalRuleNode} from '../../core/plugins/HorizontalRuleNode.ts';
-
-  import HorizontalRulePlugin from '../../core/plugins/HorizontalRulePlugin.svelte';
-  import ImagePlugin from '../../core/plugins/ImagePlugin.svelte';
-  import {ImageNode} from '../../core/plugins/ImageNode';
-  import CheckListPlugin from '../../core/plugins/CheckListPlugin.svelte';
-
-  const {HeadingNode, QuoteNode} = pkgLRT;
-
-  export let theme;
-
-  const config = {
-    theme,
-    nodes: [
-      HeadingNode,
-      ListNode,
-      ListItemNode,
-      QuoteNode,
-      HorizontalRuleNode,
-      ImageNode,
-    ],
-    onError: (error) => {
-      throw error;
-    },
-  };
-</script>
-
-<TextEditor {config}>
-  <slot name="toolbar" slot="toolbar" />
-  <RichTextPlugin />
-  <HistoryPlugin />
-  <ListPlugin />
-  <CheckListPlugin />
-  <HorizontalRulePlugin />
-  <ImagePlugin />
-  <slot name="actions" slot="actions" />
-</TextEditor>
diff --git a/packages/svelte-lexical/src/core/Composer.svelte b/packages/svelte-lexical/src/core/Composer.svelte
new file mode 100644
index 0000000..e93e9e6
--- /dev/null
+++ b/packages/svelte-lexical/src/core/Composer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import {createEditor} from 'lexical';
+  import {setContext} from 'svelte';
+  import {initializeEditor} from './initializeEditor';
+
+  export let config = {};
+
+  const editor = createEditor(config);
+  initializeEditor(editor);
+  setContext('editor', editor);
+</script>
+
+<slot />
diff --git a/packages/svelte-lexical/src/core/ContentEditable.svelte b/packages/svelte-lexical/src/core/ContentEditable.svelte
new file mode 100644
index 0000000..40ae561
--- /dev/null
+++ b/packages/svelte-lexical/src/core/ContentEditable.svelte
@@ -0,0 +1,78 @@
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<script lang="ts">
+  import type {LexicalEditor} from 'lexical';
+  import {getContext, onMount} from 'svelte';
+
+  export let ariaActiveDescendantID: string;
+  export let ariaAutoComplete: 'list' | 'none' | 'inline' | 'both' | null;
+  export let ariaControls: string;
+  export let ariaDescribedBy: string;
+  export let ariaExpanded: boolean;
+  export let ariaLabel: string;
+  export let ariaLabelledBy: string;
+  export let ariaMultiline: boolean;
+  export let ariaOwneeID: string;
+  export let ariaRequired: boolean;
+  export let autoCapitalize: boolean;
+  export let autoComplete: boolean;
+  export let autoCorrect: boolean;
+  //export let className: string;  // I have hardcoded it. @lexical/image plugin seems to depend on the harded class name.
+  export let id: string;
+  //export let readOnly: boolean; // it is defined in lexical code but not used
+  export let role: 'textbox';
+  export let spellCheck = true;
+  export let style: string;
+  export let tabIndex: number;
+  export let testid: string;
+
+  let isEditable = false;
+  const editor: LexicalEditor = getContext('editor');
+  let ref: null | HTMLElement;
+
+  onMount(() => {
+    editor.setRootElement(ref);
+    isEditable = editor.isEditable();
+    editor.registerEditableListener((currentIsEditable) => {
+      isEditable = currentIsEditable;
+    });
+  });
+</script>
+
+<div
+  aria-activedescendant={!isEditable ? null : ariaActiveDescendantID}
+  aria-autocomplete={!isEditable ? null : ariaAutoComplete}
+  aria-controls={!isEditable ? null : ariaControls}
+  aria-describedby={ariaDescribedBy}
+  aria-expanded={ariaExpanded}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledBy}
+  aria-multiline={ariaMultiline}
+  aria-owns={!isEditable ? null : ariaOwneeID}
+  aria-required={ariaRequired}
+  autoCapitalize={autoCapitalize !== undefined
+    ? String(autoCapitalize)
+    : undefined}
+  {autoComplete}
+  autoCorrect={autoCorrect !== undefined ? String(autoCorrect) : undefined}
+  class="ContentEditable__root"
+  contentEditable={isEditable}
+  data-testid={testid}
+  {id}
+  bind:this={ref}
+  role={!isEditable ? undefined : role}
+  spellcheck={spellCheck}
+  {style}
+  tabindex={tabIndex} />
+
+<style>
+  .ContentEditable__root {
+    border: 0;
+    font-size: 15px;
+    display: block;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: 10px; /* when updated from lexical, left and right padding increases a lot which only makes sense when block rearrange handle is enabled (not implemented yet and won't be included in simple editors) */
+    min-height: 150px; /* when updated to latest from lexical, empty editor only receives focus when you click on the first line inside the editor. */
+  }
+</style>
diff --git a/packages/svelte-lexical/src/core/TextEditor.svelte b/packages/svelte-lexical/src/core/TextEditor.svelte
deleted file mode 100644
index 86f77c2..0000000
--- a/packages/svelte-lexical/src/core/TextEditor.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-  //import './ContentEditable.css';
-
-  import {createEditor} from 'lexical';
-  import {onMount, setContext} from 'svelte';
-  import {initializeEditor} from './initializeEditor.ts';
-
-  export let config = {};
-  let contentEditableElement;
-
-  const editor = createEditor(config);
-  setContext('editor', editor);
-
-  onMount(() => {
-    editor.setRootElement(contentEditableElement);
-    initializeEditor(editor);
-  });
-</script>
-
-<div class="editor-shell">
-  <slot name="toolbar" />
-  <div class="editor-container">
-    <div class="editor-scroller">
-      <div class="editor">
-        <div
-          contenteditable="true"
-          bind:this={contentEditableElement}
-          class="ContentEditable__root" />
-      </div>
-    </div>
-    <!-- slot for plugins -->
-    <slot />
-    <slot name="actions" />
-  </div>
-</div>
-
-<style>
-  /*
-   Updating this file to the latest from lexical introduces couple of issues:
-   1- Empty editor only receives focus when you click on the first line inside the editor.
-   2- Left and right padding is increased a lot which only makes sense when block rearrange handle is enabled (not implemented yet and won't be included in simple editors)
-  */
-  .ContentEditable__root {
-    min-height: 150px;
-    border: 0;
-    resize: none;
-    cursor: text;
-    font-size: 15px;
-    caret-color: rgb(5, 5, 5);
-    display: block;
-    position: relative;
-    tab-size: 1;
-    outline: 0;
-    padding: 10px;
-    overflow: auto;
-    resize: vertical;
-  }
-</style>
diff --git a/packages/svelte-lexical/src/index.ts b/packages/svelte-lexical/src/index.ts
index 9223efc..9ba59e5 100644
--- a/packages/svelte-lexical/src/index.ts
+++ b/packages/svelte-lexical/src/index.ts
@@ -1,15 +1,22 @@
-export {default as TextEditor} from './core/TextEditor.svelte';
 export {default as PlainTextPlugin} from './core/plugins/PlainTextPlugin.svelte';
 export {default as RichTextPlugin} from './core/plugins/RichTextPlugin.svelte';
 export {default as HistoryPlugin} from './core/plugins/HistoryPlugin.svelte';
 export {default as ListPlugin} from './core/plugins/ListPlugin.svelte';
+export {default as CheckListPlugin} from './core/plugins/CheckListPlugin.svelte';
+export {default as HorizontalRulePlugin} from './core/plugins/HorizontalRulePlugin.svelte';
+export {default as ImagePlugin} from './core/plugins/ImagePlugin.svelte';
 
-export {default as RichTextEditor} from './components/richtext/RichTextEditor.svelte';
-export {default as RichTextComposer} from './components/richtext/RichTextComposer.svelte';
-
-export {default as RichTextBasicEditor} from './components/richtext-basic/RichTextBasicEditor.svelte';
-export {default as RichTextBasicComposer} from './components/richtext-basic/RichTextBasicComposer.svelte';
+export {HeadingNode, QuoteNode} from '@lexical/rich-text';
+export {ListNode, ListItemNode} from '@lexical/list';
+export {HorizontalRuleNode} from './core/plugins/HorizontalRuleNode';
+export {ImageNode} from './core/plugins/ImageNode';
 
 export {default as ToolbarBasic} from './components/richtext-basic/ToolbarBasic.svelte';
+export {default as ToolbarRichText} from './components/richtext/ToolbarRichText.svelte';
+export {default as ActionBar} from './components/actionbar/ActionBar.svelte';
+export {default as TreeViewPlugin} from './core/plugins/TreeViewPlugin.svelte';
+
+export {default as ContentEditable} from './core/ContentEditable.svelte';
+export {default as Composer} from './core/Composer.svelte';
 
 export {type EditorThemeClasses} from 'lexical';