Commit more stuff.

This commit is contained in:
Laur Ivan 2022-06-09 21:16:30 +02:00
parent 4e700989fa
commit f5685df6a7
4 changed files with 590 additions and 483 deletions

View File

@ -0,0 +1,97 @@
<script lang="ts">
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
import { EditorView } from 'prosemirror-view';
import type { EditorState } from 'prosemirror-state';
const dispatch = createEventDispatcher();
/** @type string */
export let placeholder = '';
/** @type string */
export let className: string = 'ui-editor';
/** @type EditorState */
export let editorState: EditorState;
/** Reference to the editor component
* @type HTMLDivElement */
let editor: HTMLDivElement;
/** Reference to the editor view
* @type EditorView|null */
export let view: EditorView | null = null;
/** Initial EditorView props */
export let editorViewProps = {};
/** Focus the content-editable div */
export function focus() {
view && view.focus();
}
/** Blur the content-editable div */
export function blur() {
editor && editor.blur();
}
/** Tracks whether the editor is empty (i.e. has a content size of 0) */
let editorIsEmpty: boolean;
$: editorIsEmpty = editorState
? editorState.doc.content.size === 0 ||
(editorState.doc.textContent === '' && editorState.doc.content.size < 3)
: true;
/** Tracks whether changes to editor state were not yet dispatched */
let isDirty = false;
$: if (view && editorState && !isDirty) {
view.updateState(editorState); // necessary to keep the DOM in sync with the editor state on external updates
}
/**
* On mount, we create the prosemirror editor
*/
onMount(() => {
view = new EditorView(
{ mount: editor },
{
...editorViewProps,
state: editorState
}
);
});
/**
* Here we destroy the editor view.
*/
onDestroy(() => {
view && view.destroy();
});
/*
* Event processing
*/
/**
* Captures custom events from plugins and dispatches them with a new event type (based on event.detail.type)
* @param event {CustomEvent}
*/
const onCustomEvent = (event: CustomEvent<any>) => {
if (event.detail) {
const { type, ...detail } = event.detail;
dispatch(type || 'custom', detail);
}
};
//on:custom={onCustomEvent}
</script>
<div
class={className}
class:ProseMirror={true}
class:editor_empty={editorIsEmpty}
data-placeholder={placeholder}
bind:this={editor}
on:focus
on:blur
on:keydown
/>

View File

@ -0,0 +1,10 @@
<script lang="ts">
export let rtl: boolean;
export let readOnly: boolean | undefined = undefined;
export let readOnlyWriteCheckboxes: boolean | undefined = undefined;
export let grow: boolean | undefined = undefined;
</script>
<div>
<slot />
</div>

View File

@ -44,12 +44,19 @@
/>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Remember me</span>
<input type="checkbox" class="toggle" bind:checked={yes} on:change={editor} />
</label>
<button class="btn" on:click={clearEditor}>Clear</button>
<button class="btn" on:click={resetEditor}>Reset</button>
<button class="btn" on:click={showHtml}>Show HTML</button>
<button class="btn" on:click={showText}>Show Text</button>
<div
class="preview border-base-300 bg-base-200 rounded-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 undefined"
>
<label class="label cursor-pointer">
<span class="label-text">Toggle MD </span>
<input type="checkbox" class="toggle" bind:checked={yes} on:change={editor} />
</label>
<div class="btn-group">
<button class="btn" on:click={clearEditor}>Clear</button>
<button class="btn" on:click={resetEditor}>Reset</button>
<button class="btn" on:click={showHtml}>Show HTML</button>
<button class="btn" on:click={showText}>Show Text</button>
</div>
</div>
</div>

943
yarn.lock

File diff suppressed because it is too large Load Diff