lynhan318 / nextlint Goto Github PK

Hello!

I wonder how I can add tiptap extensions.
My guess is adding them as a props in SvelteEditor component or somewhere
onCreated={createdEditor => { editor = createdEditor }}

Thank you!

Hey there 👋

Firstly, nice job on this project. It's exactly what I've needed for a long time🫂.

I keep getting this error and I'm confused. Usually, I'd switch dependencies, but nextlint is too good to pass on😊.

Error: <SvelteEditor> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <SvelteEditor>.

I'm kind of confused 🥲 and I haven't gotten any real closure on this. I've gotten this with some dependencies in the past using svelte(kit) + vite, and I haven't been able to go forward without switching dependencies.

I hope I can get some help here, and perhaps some background (down-to-earth) info on what exactly causes this error using svelte(kit) + vite. Thanks in advance!

Is there any way to update the bubble/slash menu or to Shikiji's code block languages? I tried adding the tiptap Heading extension with the four 1, 2, 3, and 4, but it doesn't update, and I couldn't figure out if there was a way to add modify the Shikiji languages list.

I can't get the example from the setup instructions in the README to work.
It says to do

  import {type Editor, EditorTheme, SvelteEditor} from '@nextlint/svelte';

but Editor doesn't seem to be exported by this library. Its content is

export { default as SvelteEditor } from './Editor.svelte';
export { default as EditorTheme } from './EditorTheme.svelte';

so no Editor.

For some reason the EditorTheme is still being imported even though I'm tree shaking, thus overriding my own shadcn settings.

I think EditorTheme shouldn't be included in the index, but maybe on it's own, like so?

import EditorTheme from '@nextlint/svelte/components/EditorTheme.svelte';

When I hover over a route, the route is being prefetched thus also the component listed below. And you can dynamically see my theme change 😂

This is what my code looks like:

<script lang="ts">
	import type { Editor } from '@nextlint/svelte';
	import { SvelteEditor } from '@nextlint/svelte';
	import type { Content, Extensions, JSONContent } from '@tiptap/core';
	import { cn } from '$lib/utils/ui';

	export let name: string;
	export let placeholder = 'Start typing...';

	export let value: Content;

	function handleOnChange(editor: Editor) {
		value = JSON.stringify(editor.getJSON(), null);
	}
</script>

<div
	class={cn(
		'dark:border-border min-h-[200px] rounded-md border bg-white !p-4 px-3 py-2 shadow-sm ring-offset-white dark:bg-gray-950 dark:ring-gray-950'
	)}
>
	<SvelteEditor content={value} {placeholder} onChange={handleOnChange} />

	<input type="hidden" {name} bind:value />
</div>

Great work first of all,

how to regulate visuals like this and correct them?

Also, why the readme mentions the EditorTheme component but when trying to import it it says it doesn't exist?

Cannot detect block type on figure