Commit more stuff.

src/lib/editor/Editor.svelte

@@ -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
+/>

src/lib/editor/components/EditorContainer.svelte

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

src/lib/editor/examples/RichTextEditor104.svelte

@@ -44,12 +44,19 @@
 />
 
 <div class="form-control">
+  <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">Remember me</span>
+      <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>