README
@svelte-parts/editor
A markdown editor for svelte. Uses codemirror and exposes a svelte wrapper so you can create your own editor.
Install
npm install @svelte-parts/editor
Markdown editor usage
<script>
import Editor from '@svelte-parts/editor'
</script>
<Editor />
Properties
onChange: (value: string) => void
initialValue: string
theme: string
(see below)
All properties are optional
CSS
You must use the codemirror css. The editor is unusable without it. How to include it is up to you.
- You can import it directly in the file, if your setup allows it. If you use rollup, you need a plugin such as
rollup-plugin-css-only
<script>
import Editor from '@svelte-parts/editor'
import 'codemirror/lib/codemirror.css'
</script>
<Editor />
- Or copy the file from
node_modules/codemirror/lib/codemirror.css
and include it directly inindex.html
<link rel='stylesheet' href='/codemirror.css'>
Themes
The editor works with the default css file. It is however possible to add themes. Two are provided with this package:
@svelte-parts/editor/md-dark.css
@svelte-parts/editor/md-light.css
The theme must be declared to the component with the theme
property. Example:
<script>
import Editor from '@svelte-parts/editor'
import 'codemirror/lib/codemirror.css'
import '@svelte-parts/editor/md-dark.css'
</script>
<Editor theme="md-dark" />
Find more codemirror themes here.
Code mirror wrapper usage
<script>
import CodeMirror from '@svelte-parts/editor/codemirror'
import 'codemirror/lib/codemirror.css'
const config = {
lineNumbers: true,
lineWrapping: true,
}
</script>
<CodeMirror config={config} />
Properties
config: EditorConfiguration
accessEditor: (editor: EditorFromTextArea) => void | undefined
See how the markdown editor is made for an example usage.