How should I get the tiptap output JSON or HTML?

[rchrdnsh]

I found these methods on the editor in the tiptap docs:

const json = editor.getJSON()

// ...and...

const html = editor.getHTML()

...and I tried adding that in the onMount call in the Editor component:

  let editor: Readable<Editor>;
  let json;
  $: console.log(json)

onMount(() => {
    editor = createEditor({
      extensions: [StarterKit, Underline, SvelteCounterExtension, SvelteEditableExtension],
      content: ` ...content... `,
      editorProps: {
        attributes: {
          class: '',
        },
      },
    });
    json = editor.getJSON()
  });

...and I get the following errors in the console:

proxy.js?v=644e1a6b:15 [HMR][Svelte] Failed to rerender <TipTapEditor>
logError @ proxy.js?v=644e1a6b:15
(anonymous) @ proxy.js?v=644e1a6b:410
reload @ proxy.js?v=644e1a6b:406
(anonymous) @ hot-api.js?v=644e1a6b:150
(anonymous) @ client.ts:559
(anonymous) @ client.ts:476
(anonymous) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonymous) @ client.ts:176
handleMessage @ client.ts:174
(anonymous) @ client.ts:91
Show 7 more frames
proxy.js?v=644e1a6b:19 TypeError: editor.getJSON is not a function
    at TipTapEditor.svelte:46:19
    at run (utils.js:41:9)
    at Array.map (<anonymous>)
    at Component.js:47:48
    at flush (scheduler.js:99:5)
    at init (Component.js:153:3)
    at new TipTapEditor (TipTapEditor.svelte:89:75)
    at createComponent (svelte-hooks.js?v=644e1a6b:206:20)
    at targetCmp.$replace (svelte-hooks.js?v=644e1a6b:269:15)
    at refreshComponent (proxy.js?v=644e1a6b:171:15)

...and this warning in the terminal:

Property 'getJSON' does not exist on type 'Readable<Editor>'.

...soooo...not quite sure how I should go about getting the output in JSON or HTML form...

Any thoughts/advice is appreciated, thanks :-)

[sibiraj-s]

editor is a readable instance. You should do

onMount(() => {
  editor = createEditor({
    // ...options
  });
  json = $editor.getJSON()
});

[rchrdnsh]

sheeesh! my bad, keep missing little things like this. Yeah, it works just fine now, thanks! XD

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related items and link to relevant comments in the thread.