refactor: more control to user library user in composing the editor w…

…ith plugins and controls
umaranis · Jan 16, 2023 · 9e70dc8 · 9e70dc8
1 parent 6a0a70c
commit 9e70dc8
Show file tree

Hide file tree

Showing 20 changed files with 384 additions and 194 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,2 @@
+//TODO: initializeEditor references `document` which causes the server-side-rendering to fail
+export const ssr = false;
diff --git 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
@@ -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',
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		//TODO: initializeEditor references `document` which causes the server-side-rendering to fail
		export const ssr = false;