laur/prosemirror-markdown
laur/prosemirror-markdown
1
0
Fork 0
generated from laur/svelte-tailwind-storybook
Code Issues Pull Requests Projects Releases Wiki Activity

Initial add prosemirror editor.

Browse Source
This commit is contained in:
Laur Ivan 2022-06-06 18:48:59 +02:00
parent d663de7ea1
commit 591008bd21
10 changed files with 39088 additions and 37188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc
View File

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

41
.storybook/main.cjs
View File

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

5
.vscode/settings.json vendored Normal file
View File

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

75965
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

119
package.json
View File

@ -1,61 +1,62 @@
{ {
"name": "sveltekit-tailwind-storybook", "name": "sveltekit-tailwind-storybook",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"dev": "svelte-kit dev", "dev": "svelte-kit dev",
"build": "svelte-kit build", "build": "svelte-kit build",
"package": "svelte-kit package", "package": "svelte-kit package",
"preview": "svelte-kit preview", "preview": "svelte-kit preview",
"prepare": "svelte-kit sync", "prepare": "svelte-kit sync",
"test": "playwright test", "test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json", "check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .", "lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. .", "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: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", "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": "start-storybook -p 6006",
"build-storybook": "build-storybook" "build-storybook": "build-storybook"
}, },
"devDependencies": { "devDependencies": {
"@mdx-js/react": "^2.1.1", "@mdx-js/react": "^2.1.1",
"@playwright/test": "^1.21.0", "@playwright/test": "^1.21.0",
"@storybook/addon-actions": "^6.5.6", "@storybook/addon-actions": "^6.5.6",
"@storybook/addon-docs": "^6.5.6", "@storybook/addon-docs": "^6.5.6",
"@storybook/addon-essentials": "^6.5.6", "@storybook/addon-essentials": "^6.5.6",
"@storybook/addon-links": "^6.5.6", "@storybook/addon-links": "^6.5.6",
"@storybook/addon-svelte-csf": "^2.0.4", "@storybook/addon-svelte-csf": "^2.0.4",
"@storybook/svelte": "^6.5.6", "@storybook/svelte": "^6.5.6",
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next", "@sveltejs/kit": "next",
"@tailwindcss/typography": "^0.5.2", "@tailwindcss/typography": "^0.5.2",
"@types/cookie": "^0.4.1", "@types/cookie": "^0.4.1",
"@typescript-eslint/eslint-plugin": "^5.10.1", "@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1", "@typescript-eslint/parser": "^5.10.1",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"concurrently": "^7.2.1", "concurrently": "^7.2.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"daisyui": "^2.15.2", "daisyui": "^2.15.2",
"eslint": "^8.12.0", "eslint": "^8.12.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"postcss-import": "^14.1.0", "postcss-import": "^14.1.0",
"postcss-nesting": "^10.1.7", "postcss-nesting": "^10.1.7",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.0", "prettier-plugin-svelte": "^2.5.0",
"storybook-builder-vite": "^0.1.23", "storybook-builder-vite": "^0.1.23",
"svelte": "^3.46.0", "svelte": "^3.46.0",
"svelte-check": "^2.2.6", "svelte-check": "^2.2.6",
"svelte-preprocess": "^4.10.1", "svelte-preprocess": "^4.10.1",
"tailwindcss": "^3.0.24", "tailwindcss": "^3.0.24",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"typescript": "~4.6.2" "typescript": "~4.6.2"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource/fira-mono": "^4.5.0", "@fontsource/fira-mono": "^4.5.0",
"cookie": "^0.4.1" "cookie": "^0.4.1",
} "prosemirror-svelte": "^0.2.4"
}
} }

1
src/default.d.ts vendored Normal file
View File

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

9
src/lib/editor/components/Image.svelte Normal file
View File

@ -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} />

103
src/stories/Button.stories.svelte
View File

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

0
src/stories/counter.stories.svelte → src/stories/Counter.stories.svelte
View File

30
src/stories/Prosemirror.stories.svelte Normal file
View File

@ -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'
}}
/>