ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.54k stars 2.29k forks source link

[Bug]: Svelte REPL not starting ('defaultExtensions' is not exported) #4144

Open mmailaender opened 1 year ago

mmailaender commented 1 year ago

Which packages did you experience the bug in?

Tiptap Svelte REPL

What Tiptap version are you using?

2.0.3

What’s the bug you are facing?

Tried to run the Svelte REPL linked on this page: https://tiptap.dev/installation/svelte#take-a-shortcut-svelte-repl-with-tiptap

After starting I get the error 'defaultExtensions' is not exported by https://unpkg.com/@tiptap/starter-kit@2.0.3/dist/index.js, imported by ./Editor.svelte image

As a result, the editor will be not renderd.

What browser are you using?

Chrome

Code example

https://svelte.dev/repl/798f1b81b9184780aca18d9a005487d2?version=3.31.2

What did you expect to happen?

No error - Instead the editor will be rendered

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

Prinzhorn commented 6 months ago

Here's the fixed version: https://svelte.dev/repl/7678261313034e2c996f96b3599ed4f6?version=4.2.15

<script type="module">
  import { onMount, onDestroy } from 'svelte'
  import { Editor } from '@tiptap/core'
-  import { defaultExtensions } from '@tiptap/starter-kit'
+  import StarterKit from '@tiptap/starter-kit'
    import BubbleMenu from '@tiptap/extension-bubble-menu'

    let bubbleMenu
  let element
  let editor

  onMount(() => {
    editor = new Editor({
      element: element,
      extensions: [
-               ...defaultExtensions(),
+               StarterKit,
                BubbleMenu.configure({
              element: bubbleMenu,
            }),
            ],
      content: `
                <h1>Hello Svelte! 🌍️ </h1>
                <p>This editor is running in Svelte.</p>
                <p>Select some text to see the bubble menu popping up.</p>
            `,
      onTransaction: () => {
        // force re-render so `editor.isActive` works as expected
        editor = editor
      },
    })
  })