<script>
  import { onMount } from 'svelte';

  import { json } from '@codemirror/lang-json';
  import { editorFromTextarea } from '$lib/codemirror';
  import { EditorView, basicSetup } from 'codemirror';

/**
 * @function editorFromTextarea
 * @param {HTMLTextAreaElement} field
 * @param {Array<import('@codemirror/state').Extension>} extensions
 * @returns {import('@codemirror/view').EditorView}
 */
export const editorFromTextarea = (field, ...extensions) => {
  if (!field.parentNode) {
    throw new Error('Parent node missing');
  }
  const view = new EditorView({
    extensions: [basicSetup, ...extensions],
    doc: field.value,
  });

  field.parentNode.insertBefore(view.dom, field);
  field.style.display = 'none';
  if (field.form) {
    field.form.addEventListener('submit', () => {
      field.value = view.state.doc.toString();
    });
  }
  return view;
};
  /** @type {HTMLTextAreaElement} */
  let textareaElement;

  onMount(() => {
    const textareaView = editorFromTextarea(
      textareaElement,
      json(),
      EditorView.updateListener.of((view) => {
        if (view.docChanged) {
          try {
            console.log(view.state.doc.toString());
          } catch {}
        }
      }),
    );
  }
</script>
<textarea bind:this={textareaElement} id="textareaElement" name="textareaElement" value="Text Content"></textarea>

<script>
  import { onMount } from 'svelte';

  import { json } from '@codemirror/lang-json';
  import { editorFromTextarea } from '$lib/codemirror';
  import { EditorView, basicSetup } from 'codemirror';

/**
 * @function editorFromTextarea
 * @param {HTMLTextAreaElement} field
 * @param {Array<import('@codemirror/state').Extension>} extensions
 * @returns {import('@codemirror/view').EditorView}
 */
export const editorFromTextarea = (field, ...extensions) => {
  if (!field.parentNode) {
    throw new Error('Parent node missing');
  }
  const view = new EditorView({
    extensions: [basicSetup, ...extensions],
    doc: field.value,
  });

  field.parentNode.insertBefore(view.dom, field);
  field.style.display = 'none';
  if (field.form) {
    field.form.addEventListener('submit', () => {
      field.value = view.state.doc.toString();
    });
  }
  return view;
};
  /** @type {HTMLTextAreaElement} */
  let textareaElement;

  onMount(() => {
    const textareaView = editorFromTextarea(
      textareaElement,
      json(),
      EditorView.updateListener.of((view) => {
        if (view.docChanged) {
          try {
            console.log(view.state.doc.toString());
          } catch {}
        }
      }),
    );
  }
</script>
<textarea bind:this={textareaElement} id="textareaElement" name="textareaElement" value="Text Content"></textarea>