Getting Content From Editor - SvelteKit

[enesbala5]

I am unable to find any method of getting content from the editor in SvelteKit, and methods listed in the other Q&A do not work in this scenario.

<script>
	import {
		Composer,
		ContentEditable,
		ToolbarRichText,
		ActionBar,
		RichTextPlugin,
		HistoryPlugin,
		ListPlugin,
		CheckListPlugin,
		HorizontalRulePlugin,
		ImagePlugin,
	} from 'svelte-lexical';
	import { HeadingNode, QuoteNode, ListNode, ListItemNode, HorizontalRuleNode, ImageNode } from 'svelte-lexical';
	import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
	import { onMount } from 'svelte';
	let composer;

	const config = {
		theme: PlaygroundEditorTheme,
		nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode, HorizontalRuleNode, ImageNode],
		onError: (error) => {
			throw error;
		},
	};
</script>

<Composer initialConfig={config} bind:this={composer}>
	<div class="editor-shell">
		<ToolbarRichText />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HistoryPlugin />
			<ListPlugin />
			<CheckListPlugin />
			<HorizontalRulePlugin />
			<ImagePlugin />

			<ActionBar />
		</div>
	</div>
</Composer>

[umaranis]

Hi @enesbala5 ,

The simplest option is to upgrade to version 0.3.3 and follow the instruction here afterwards.

Another option is to create a svelte component and place it inside the composer. The new component can get the access to Lexical Editor from svelte context getContext('editor').

[enesbala5]

Quick follow up question:

I want to save the editor state to my DB, and then display the content on an Read Only editor.
Is saving the Editor State the best way of doing that?

[umaranis]

Yes @enesbala5. Editor State is the best.
There are import / export buttons in the playground demo showing how to write state to file and read it from file.

Probably the best place to get started is this discussion here.