build: add an editor to svelte-lexical route pages for testing

umaranis · May 29, 2024 · b586f68 · b586f68
1 parent 26e52ca
commit b586f68
Show file tree

Hide file tree

Showing 100 changed files with 2,648 additions and 9 deletions.
diff --git a/packages/svelte-lexical/src/global.css b/packages/svelte-lexical/src/global.css
diff --git a/packages/svelte-lexical/src/routes/+page.svelte b/packages/svelte-lexical/src/routes/+page.svelte
@@ -1,9 +1,32 @@
-<h1>Welcome to svelte-lexical library</h1>
-<p>
-  Create your package using @sveltejs/package and preview/showcase your work
-  with SvelteKit
-</p>
-<p>
-  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a>
-  to read the documentation
-</p>
+<script>
+  import RichTextComposer from './RichTextComposer.svelte';
+  import '../global.css';
+</script>
+
+<main>
+  <img src="images/logo.svg" alt="Svelte Lexical!" />
+  <p>
+    Welcome to <a href="https://github.com/umaranis/svelte-lexical/">
+      svelte-lexical
+    </a>
+    demo built using
+    <a href="https://kit.svelte.dev">SvelteKit</a>
+  </p>
+  <div style="text-align: left;">
+    <RichTextComposer />
+  </div>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: none;
+    margin: 0 auto;
+  }
+
+  img {
+    margin: 2em;
+    max-width: 800px;
+  }
+</style>
diff --git a/packages/svelte-lexical/src/routes/RichTextComposer.svelte b/packages/svelte-lexical/src/routes/RichTextComposer.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import {
+    Composer,
+    ContentEditable,
+    ToolbarRichText,
+    ActionBar,
+    RichTextPlugin,
+    HistoryPlugin,
+    ListPlugin,
+    CheckListPlugin,
+    HorizontalRulePlugin,
+    ImagePlugin,
+  } from '$lib/index.js';
+  import {
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    HorizontalRuleNode,
+    ImageNode,
+  } from '$lib/index.js';
+  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme.js';
+  import {
+    $getRoot as getRoot,
+    $createTextNode as createTextNode,
+    $createParagraphNode as createParagraphNode,
+  } from '$lib/index.js';
+  import MarkdownShortcutPlugin from '$lib/core/plugins/MardownShortcut/MarkdownShortcutPlugin.svelte';
+
+  const initialConfig = {
+    theme: PlaygroundEditorTheme,
+    namespace: 'pg_sveltekit',
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      HorizontalRuleNode,
+      ImageNode,
+    ],
+    onError: (error: Error) => {
+      throw error;
+    },
+    editorState: () => {
+      const root = getRoot();
+      if (root.getFirstChild() === null) {
+        const paragraph = createParagraphNode();
+        paragraph.append(
+          createTextNode('This demo environment is built with '),
+          createTextNode('svelte-lexical').toggleFormat('code'),
+          createTextNode('.'),
+          createTextNode(' Try typing in '),
+          createTextNode('some text').toggleFormat('bold'),
+          createTextNode(' with '),
+          createTextNode('different').toggleFormat('italic'),
+          createTextNode(' formats.'),
+        );
+        root.append(paragraph);
+      }
+    },
+  };
+</script>
+
+<Composer {initialConfig}>
+  <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/packages/svelte-lexical/src/routes/themes/CommentEditorTheme.css b/packages/svelte-lexical/src/routes/themes/CommentEditorTheme.css
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.CommentEditorTheme__paragraph {
+  margin: 0;
+  position: 'relative';
+}
diff --git a/packages/svelte-lexical/src/routes/themes/CommentEditorTheme.js b/packages/svelte-lexical/src/routes/themes/CommentEditorTheme.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './CommentEditorTheme.css';
+
+import baseTheme from './PlaygroundEditorTheme';
+
+const theme = {
+  ...baseTheme,
+  paragraph: 'CommentEditorTheme__paragraph',
+};
+
+export default theme;