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

Use the tailwind css typography.

Browse Source
This commit is contained in:
Laur Ivan 2022-06-10 12:28:44 +02:00
parent f5685df6a7
commit 77cb482a76
8 changed files with 779 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -39,6 +39,7 @@
"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",
"node-sass": "^7.0.1",
"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",

20
src/app.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="black">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body>
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>
</html> </html>

7
src/lib/editor/Editor.svelte
View File

@ -3,6 +3,8 @@
import { EditorView } from 'prosemirror-view'; import { EditorView } from 'prosemirror-view';
import type { EditorState } from 'prosemirror-state'; import type { EditorState } from 'prosemirror-state';
import colors from '../shared/styling/colors';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
/** @type string */ /** @type string */
@ -83,14 +85,19 @@
}; };
//on:custom={onCustomEvent} //on:custom={onCustomEvent}
export let textColor = colors.almostBlack;
</script> </script>
<div <div
class={className} class={className}
class:ProseMirror={true} class:ProseMirror={true}
class:prose={true}
class:prose-sm={true}
class:editor_empty={editorIsEmpty} class:editor_empty={editorIsEmpty}
data-placeholder={placeholder} data-placeholder={placeholder}
bind:this={editor} bind:this={editor}
style="--textColor: {textColor}"
on:focus on:focus
on:blur on:blur
on:keydown on:keydown

32
src/lib/shared/styling/colors.ts Normal file
View File

@ -0,0 +1,32 @@
const colors = {
transparent: 'transparent',
almostBlack: '#111319',
lightBlack: '#2F3336',
almostWhite: '#E6E6E6',
veryDarkBlue: '#08090C',
slate: '#9BA6B2',
slateLight: '#DAE1E9',
slateDark: '#394351',
smoke: '#F4F7FA',
smokeLight: '#F9FBFC',
smokeDark: '#E8EBED',
white: '#FFF',
white05: 'rgba(255, 255, 255, 0.05)',
white10: 'rgba(255, 255, 255, 0.1)',
white50: 'rgba(255, 255, 255, 0.5)',
white75: 'rgba(255, 255, 255, 0.75)',
black: '#000',
black05: 'rgba(0, 0, 0, 0.05)',
black10: 'rgba(0, 0, 0, 0.1)',
black50: 'rgba(0, 0, 0, 0.50)',
primary: '#0366d6',
yellow: '#EDBA07',
warmGrey: '#EDF2F7',
searchHighlight: '#FDEA9B',
danger: '#ff476f',
warning: '#f08a24',
success: '#2f3336',
info: '#a0d3e8'
};
export default colors;

8
src/lib/shared/styling/fonts.ts Normal file
View File

@ -0,0 +1,8 @@
const fonts = {
fontFamily:
"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
fontWeight: 400
};
export default fonts;

36
src/stories/Prosemirror.stories.svelte
View File

@ -1,24 +1,38 @@
<script> <script lang="ts">
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import RichTextEditor104 from '../lib/editor/examples/RichTextEditor104.svelte'; import Editor from '../lib/editor/Editor.svelte';
import { createMarkdownEditor } from '../lib/editor/examples/MarkdownEditor';
let content = `
# H1
## H2
## H3
This is *some* **text**
* bullet
* bullet
1. one
1. two
1. three`;
let editorState = createMarkdownEditor((content = content));
</script> </script>
<Meta <Meta
title="Example/Editor" title="Example/Editor"
component={RichTextEditor104} component={Editor}
argTypes={{ argTypes={{
label: { control: 'text' }, placeholder: { control: 'text' }
primary: { control: 'boolean' },
backgroundColor: { control: 'color' },
size: {
control: { type: 'select', options: ['xs', 'sm', 'md', 'lg'] }
},
onClick: { action: 'onClick' }
}} }}
/> />
<Template let:args> <Template let:args>
<RichTextEditor104 {...args} on:click={args.onClick} /> <Editor {editorState} {...args} />
</Template> </Template>
<Story <Story

56
tailwind.config.cjs
View File

@ -1,30 +1,30 @@
module.exports = { module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
colors: { colors: {
'blue': '#1fb6ff', blue: '#1fb6ff',
'purple': '#7e5bef', purple: '#7e5bef',
'pink': '#ff49db', pink: '#ff49db',
'orange': '#ff7849', orange: '#ff7849',
'green': '#13ce66', green: '#13ce66',
'yellow': '#ffc82c', yellow: '#ffc82c',
'gray-dark': '#273444', 'gray-dark': '#273444',
'gray': '#8492a6', gray: '#8492a6',
'gray-light': '#d3dce6', 'gray-light': '#d3dce6'
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}, },
plugins: [require("daisyui")], fontFamily: {
} sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif']
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem'
},
borderRadius: {
'4xl': '2rem'
}
}
},
plugins: [require('@tailwindcss/typography'), require('daisyui')]
};

700
yarn.lock
View File

File diff suppressed because it is too large Load Diff