Temp commit - doesn't work.

alpha/MarkdownView.ts

@@ -0,0 +1,18 @@
+export class MarkdownView {
+  textarea: any;
+
+  constructor(target: any, content: any) {
+    this.textarea = target.appendChild(document.createElement('textarea'));
+    this.textarea.value = content;
+  }
+
+  get content() {
+    return this.textarea.value;
+  }
+  focus() {
+    this.textarea.focus();
+  }
+  destroy() {
+    this.textarea.remove();
+  }
+}

alpha/ProseMirrorView.ts

@@ -0,0 +1,28 @@
+import { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+import { schema, defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown';
+import { exampleSetup } from 'prosemirror-example-setup';
+
+export class ProseMirrorView {
+  view: any;
+  constructor(target: any, content: string) {
+    let tmpDoc = defaultMarkdownParser.parse(content);
+    let tmpDoc1 = tmpDoc === null ? undefined : tmpDoc;
+    this.view = new EditorView(target, {
+      state: EditorState.create({
+        doc: tmpDoc1,
+        plugins: exampleSetup({ schema })
+      })
+    });
+  }
+
+  get content(): string {
+    return defaultMarkdownSerializer.serialize(this.view.state.doc);
+  }
+  focus() {
+    this.view.focus();
+  }
+  destroy() {
+    this.view.destroy();
+  }
+}

package.json

@@ -14,7 +14,7 @@
     "format": "prettier --write --plugin-search-dir=. .",
     "tailwind:watch": "cross-env TAILWIND_MODE=watch cross-env NODE_ENV=development  postcss src/styles/tailwind.css -o static/app.css -w",
     "tailwind:build": "cross-env TAILWIND_MODE=build cross-env NODE_ENV=production  postcss src/styles/tailwind.css -o static/app.css",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "BROWSER=none start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
   "devDependencies": {
@@ -57,6 +57,9 @@
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.0",
     "cookie": "^0.4.1",
+    "prosemirror-example-setup": "^1.2.0",
+    "prosemirror-markdown": "^1.9.1",
+    "prosemirror-menu": "^1.2.0",
     "prosemirror-svelte": "^0.2.4"
   }
 }

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

storybook-static/project.json

@@ -0,0 +1 @@
+{"generatedAt":1654589143881,"builder":{"name":"storybook-builder-vite"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"svelte-kit","packageName":"@sveltejs/kit","version":"1.0.0-next.348"},"packageManager":{"type":"npm","version":"8.11.0"},"storybookVersion":"6.5.7","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.7"},"@storybook/addon-docs":{"version":"6.5.7"},"@storybook/svelte":{"version":"6.5.7"},"storybook-builder-vite":{"version":"0.1.23"}},"framework":{"name":"svelte","options":{"preprocess":{"defaultLanguages":{"markup":"html","style":"css","script":"javascript"}}}},"addons":{"@storybook/addon-links":{"version":"6.5.7"},"@storybook/addon-essentials":{"version":"6.5.7"},"@storybook/addon-svelte-csf":{"version":"2.0.4"}}}