Works with yarn.

This commit is contained in:
2022-06-07 12:02:54 +02:00
parent 7ebe981909
commit 4e700989fa
8 changed files with 53 additions and 56 deletions

1
src/default.d.ts vendored
View File

@@ -1,3 +1,4 @@
declare module '@storybook/addon-svelte-csf';
declare module 'prosemirror-svelte/state';
declare module 'prosemirror-svelte/helpers/plugins';
declare module 'daisyui';

View 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]
});
};

View File

@@ -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) {