Multiple editors in one component

[budivoogt]

I'm trying to import multiple Tiptap editors into a single component. Unfortunately binding each of these editors to this parent component results in strange errors, like the editor HTML not loading.

I see this is possible using Vue. Is there a Svelte equivalent?

[sibiraj-s]

This should be working, even creating a different editor instance for each editor and it still broke?

[budivoogt]

Thanks for your quick response. Unfortunately I'm not having success with this implementation. Am I doing it wrong?

Excerpt from parent component:

<script lang="ts">
	let editor: Readable<Editor>;
</script>

<Form.Field {form} name="descriptionHTML">
		<Form.Control>
			<Form.Label>Description</Form.Label>
			{#key $formData.descriptionHTML}
				<TapTapEditor bind:valueHTML={$formData.descriptionHTML} bind:editor />
			{/key}
		</Form.Control>
		<Form.Description>
			Describe the position to a potential candidate. Mention the direct team, responsibilities,
			goals and impact.
		</Form.Description>
		<Form.FieldErrors />
	</Form.Field>

	<Form.Field {form} name="requirementsHTML">
		<Form.Control>
			<Form.Label>Requirements</Form.Label>
			{#key $formData.requirementsHTML}
				<TapTapEditor bind:valueHTML={$formData.requirementsHTML} bind:editor />
			{/key}
		</Form.Control>
		<Form.Description>
			What skills must the candidate have? How many years of experience? Any bonus points for
			particular items?
		</Form.Description>
		<Form.FieldErrors />
	</Form.Field>

	<Form.Field {form} name="benefitsHTML">
		<Form.Control>
			<Form.Label>Benefits</Form.Label>
			{#key $formData.benefitsHTML}
				<TapTapEditor bind:valueHTML={$formData.benefitsHTML} bind:editor />
			{/key}
		</Form.Control>
		<Form.Description>
			What benefits do you offer, besides the salary? Describe if you permit remote work, if there
			are any secondary employment benefits like health care, day care, educational budget, etc.
		</Form.Description>
		<Form.FieldErrors />
	</Form.Field>

Excerpt of editor component:

export let editor: Readable<Editor>;
	let className: string | undefined = undefined;

	export { className as class };
	export let valueJSON: JSONContent | undefined | null = undefined;
	export let valueHTML: HTMLContent | undefined | null = undefined;

	let isFocused = false;

	onMount(() => {
		editor = createEditor({
			extensions: [
				StarterKit.configure({
					// Configure an included extension
					paragraph: {},
					heading: {
						levels: [1, 2, 3, 4, 5]
					},
					listItem: {},
					bulletList: {},
					orderedList: {}
				}),
				Placeholder.configure({
					placeholder: 'Start writing...'
				})
			],
			content: valueHTML,
			onUpdate: ({ editor }) => {
				valueJSON = editor.getJSON();
				valueHTML = editor.getHTML();
			},
			editorProps: {
				attributes: {
					class: cn(
						'border bg-white border-input dark:bg-gray-950 rounded-b-md p-3 outline-none prose-h2:text-lg prose-h1:text-xl !text-sm !max-w-full prose first-of-type:prose-headings:mt-0 prose-sm lg:prose-base dark:prose-invert'
					)
				}
			}
		});
	});

.... etc etc

	<EditorContent editor={$editor} />

[sibiraj-s]

You should be creating a different editor for each description, requirements, benifits

const sharedConfig = {
 ... your tiptap config
}

descriptionEditor = createEditor(sharedConfig)
requirementsEditor = createEditor(sharedConfig)
benifitsEditor = createEditor(sharedConfig)

[budivoogt]

Thanks for the quick response!

We were able to create a solution as such:

Form Component

        let editors: { [key: string]: Readable<Editor> | null } = {
          description: createEditorHelper(),
          requirements: createEditorHelper(),
          benefits: createEditorHelper()
    };

    function resetFormData() {
        Object.values(editors).forEach((readable) => {
            if (readable) {
                const editor = get(readable);
                editor.commands.clearContent();
            }
        });
    }

        <Form.Field {form} name="descriptionHTML">
        <Form.Control>
            <Form.Label class="text-md">Description</Form.Label>
            {#if editors.description}
                <TipTapEditor bind:html={$formData.descriptionHTML} editor={editors.description} />
            {/if}
        </Form.Control>
        <Form.Description>
            Describe the position to a potential candidate. Mention the direct team, responsibilities,
            goals and impact.
        </Form.Description>
        <Form.FieldErrors />
    </Form.Field>

helper

export function createEditorHelper(): Readable<Editor> | null {
    if (browser) {
        return createEditor(sharedEditorConfig);
    }
    return null;
}

editor

    onMount(() => {
        $editor.on('create', ({ editor }) => {
            if (html) editor.commands.setContent(html);
        });

        $editor.on('update', ({ editor }) => {
            html = editor.getHTML();
        });
    });

    onDestroy(() => {
        if (editor) {
            $editor.destroy();
        }
    });

[sibiraj-s]

Great it works now. 🎉