generated from laur/svelte-tailwind-storybook
Works with yarn.
This commit is contained in:
1
src/default.d.ts
vendored
1
src/default.d.ts
vendored
@@ -1,3 +1,4 @@
|
||||
declare module '@storybook/addon-svelte-csf';
|
||||
declare module 'prosemirror-svelte/state';
|
||||
declare module 'prosemirror-svelte/helpers/plugins';
|
||||
declare module 'daisyui';
|
||||
|
||||
26
src/lib/editor/examples/MarkdownEditor.ts
Normal file
26
src/lib/editor/examples/MarkdownEditor.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { EditorState, TextSelection } from 'prosemirror-state';
|
||||
import { schema, defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown';
|
||||
import { corePlugins } from 'prosemirror-svelte/helpers/plugins';
|
||||
|
||||
/**
|
||||
* Create an empty editor state, for a multi-line editor schema
|
||||
* @param content {string}
|
||||
* @param plugins {array<Plugin>}
|
||||
* @return {EditorState}
|
||||
*/
|
||||
export const createMarkdownEditor = (content = '', plugins = []) => {
|
||||
let doc, selection;
|
||||
|
||||
if (content) {
|
||||
const paragraphs = content.split('\n');
|
||||
doc = defaultMarkdownParser.parse(content);
|
||||
//selection = TextSelection.atEnd(doc);
|
||||
}
|
||||
|
||||
return EditorState.create({
|
||||
schema: schema,
|
||||
doc: doc as any,
|
||||
selection,
|
||||
plugins: [...corePlugins, ...plugins]
|
||||
});
|
||||
};
|
||||
@@ -1,21 +1,16 @@
|
||||
<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>`;
|
||||
import { clear, toHTML, toPlainText } from 'prosemirror-svelte/state';
|
||||
import { createMarkdownEditor } from './MarkdownEditor';
|
||||
const markdown = `
|
||||
# This is a H1
|
||||
|
||||
* One
|
||||
* Two
|
||||
* Three`;
|
||||
let focusEditor: any;
|
||||
let editorState = createRichTextEditor(html, exampleSetup(schema as any));
|
||||
let editorState = createMarkdownEditor(markdown);
|
||||
function handleChange(event: any) {
|
||||
editorState = event.detail.editorState;
|
||||
}
|
||||
@@ -24,7 +19,7 @@
|
||||
focusEditor();
|
||||
}
|
||||
function resetEditor(event: any) {
|
||||
editorState = createRichTextEditor(html);
|
||||
editorState = createMarkdownEditor(markdown);
|
||||
focusEditor();
|
||||
}
|
||||
function showHtml(event: any) {
|
||||
|
||||
Reference in New Issue
Block a user