Temp commit - doesn't work.

src/default.d.ts

@@ -1 +1,3 @@
 declare module '@storybook/addon-svelte-csf';
+declare module 'prosemirror-svelte/state';
+declare module 'daisyui';

src/lib/editor/examples/RichTextEditor104.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Plugin, PluginKey } from 'prosemirror-state';
+  import ProsemirrorEditor from 'prosemirror-svelte';
+  import { createRichTextEditor, clear, toHTML, toPlainText } from 'prosemirror-svelte/state';
+  import { schema, defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown';
+  import { exampleSetup } from 'prosemirror-example-setup';
+  const html = `
+<h3>I am Rich</h3>
+<p>Hello there! I am Rich, a rich-text editor. </p>
+<p>Go ahead and edit me.</p>
+<p>You can change the format using the keyboard. E.g.: </p>
+<p><strong>Ctrl/Cmd-b</strong> will toggle text as <strong>bold</strong>.</p>
+<p><strong>Ctrl/Cmd-i</strong> will toggle text as <em>italic</em>.</p>
+<p><b>Ctrl-Shift-0</b> will set the block type to paragraph.</p>
+<p><b>Ctrl-Shift-1,2,3...</b> will set the block type to heading 1,2,3...</p>`;
+  let focusEditor: any;
+  let editorState = createRichTextEditor(html, exampleSetup(schema as any));
+  function handleChange(event: any) {
+    editorState = event.detail.editorState;
+  }
+  function clearEditor(event: any) {
+    editorState = clear(editorState);
+    focusEditor();
+  }
+  function resetEditor(event: any) {
+    editorState = createRichTextEditor(html);
+    focusEditor();
+  }
+  function showHtml(event: any) {
+    alert(toHTML(editorState));
+  }
+  function showText(event: any) {
+    alert(toPlainText(editorState));
+  }
+  onMount(() => focusEditor());
+
+  let yes = false;
+  function editor() {
+    console.log('HAHAHA ', yes);
+  }
+</script>
+
+<ProsemirrorEditor
+  {editorState}
+  bind:focus={focusEditor}
+  on:change={handleChange}
+  placeholder="Go ahead and edit me!"
+/>
+
+<div class="form-control">
+  <label class="label cursor-pointer">
+    <span class="label-text">Remember me</span>
+    <input type="checkbox" class="toggle" bind:checked={yes} on:change={editor} />
+  </label>
+  <button class="btn" on:click={clearEditor}>Clear</button>
+  <button class="btn" on:click={resetEditor}>Reset</button>
+  <button class="btn" on:click={showHtml}>Show HTML</button>
+  <button class="btn" on:click={showText}>Show Text</button>
+</div>

src/stories/Prosemirror.stories.svelte

@@ -1,11 +1,11 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import ProsemirrorEditor from 'prosemirror-svelte';
+  import RichTextEditor104 from '../lib/editor/examples/RichTextEditor104.svelte';
 </script>
 
 <Meta
   title="Example/Editor"
-  component={ProsemirrorEditor}
+  component={RichTextEditor104}
   argTypes={{
     label: { control: 'text' },
     primary: { control: 'boolean' },
@@ -18,7 +18,7 @@
 />
 
 <Template let:args>
-  <ProsemirrorEditor {...args} on:click={args.onClick} />
+  <RichTextEditor104 {...args} on:click={args.onClick} />
 </Template>
 
 <Story