Initial add prosemirror editor.

.prettierrc

@@ -1,5 +1,6 @@
 {
-	"useTabs": true,
+	"useTabs": false,
+	"tabWidth": 2,
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100

.storybook/main.cjs

@@ -1,17 +1,17 @@
 module.exports = {
   // NOTE! added support for Vite builder
-    core: {
-      builder: "storybook-builder-vite"
+  webpackFinal: async (config) => {
+    const svelteLoader = config.module.rules.find(
+      (r) => r.loader && r.loader.includes('svelte-loader')
+    );
+    svelteLoader.options.preprocess = require('svelte-preprocess')();
+    return config;
   },
-    stories: [
-      "../src/**/*.stories.mdx",
-      "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
-    ],
-    addons: [
-      "@storybook/addon-links",
-      "@storybook/addon-essentials",
-      "@storybook/addon-svelte-csf"
-    ],
+  core: {
+    builder: 'storybook-builder-vite'
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
   svelteOptions: {
     preprocess: require('svelte-preprocess')({
       typescript: true,
@@ -19,5 +19,4 @@ module.exports = {
       sourceMap: true
     })
   }
-  }
-  
+};

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -56,6 +56,7 @@
   "type": "module",
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.0",
-		"cookie": "^0.4.1"
+    "cookie": "^0.4.1",
+    "prosemirror-svelte": "^0.2.4"
   }
 }

src/default.d.ts

@@ -0,0 +1 @@
+declare module '@storybook/addon-svelte-csf';

src/lib/editor/components/Image.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let alt: string;
+  export let src: string;
+  export let title: string | undefined = undefined;
+  export let width: string | undefined = undefined;
+  export let height: string | undefined = undefined;
+</script>
+
+<img {src} {alt} {title} {width} {height} />

src/stories/Button.stories.svelte

@@ -1,19 +1,19 @@
 <script>
-    import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-    import Button from "../lib/button/Button.svelte";
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import Button from '../lib/button/Button.svelte';
 </script>
 
 <Meta
   title="Example/Button"
   component={Button}
   argTypes={{
-      label: { control: "text" },
-      primary: { control: "boolean" },
-      backgroundColor: { control: "color" },
+    label: { control: 'text' },
+    primary: { control: 'boolean' },
+    backgroundColor: { control: 'color' },
     size: {
-        control: { type: "select", options: ['xs', "sm", "md", "lg"] },
+      control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
     },
-      onClick: { action: "onClick" },
+    onClick: { action: 'onClick' }
   }}
 />
 
@@ -25,29 +25,28 @@
   name="Primary"
   args={{
     primary: true,
-      label: "Button",
+    label: 'Button'
   }}
 />
 
 <Story
   name="Secondary"
   args={{
-      label: "Button",
+    label: 'Button'
   }}
 />
 <Story
   name="Large"
   args={{
-      size: "lg",
-      label: "Button",
+    size: 'lg',
+    label: 'Button'
   }}
 />
 
 <Story
   name="Small"
   args={{
-      size: "sm",
-      label: "Button",
+    size: 'sm',
+    label: 'Button'
   }}
 />
-  

src/stories/Prosemirror.stories.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import ProsemirrorEditor from 'prosemirror-svelte';
+</script>
+
+<Meta
+  title="Example/Editor"
+  component={ProsemirrorEditor}
+  argTypes={{
+    label: { control: 'text' },
+    primary: { control: 'boolean' },
+    backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
+    },
+    onClick: { action: 'onClick' }
+  }}
+/>
+
+<Template let:args>
+  <ProsemirrorEditor {...args} on:click={args.onClick} />
+</Template>
+
+<Story
+  name="Base Editor"
+  args={{
+    primary: true,
+    label: 'Editor'
+  }}
+/>