Failure to implement inside a Svelte component (NPM)

[AustinFoss]

I attempted your install via npm method and ran into the following error: Cannot use import statement outside a module

My project is built using Astro (vite) and I'm implementing the TinyMDE inside a Svelte component. My package.json specifies my project with type: "module" so I think this might have something to do with how this library is built using commonjs.

Is this actually meant to be used in a browser with one of the standard front end frame works or just NodeJS?

[jefago]

cjs vs mjs, the bane of my existence.

This is definitely meant to be used in the browser, although I haven't done a lot of testing with frontend frameworks. I can try to reproduce and see if it is easily fixable. It might well be, I think I might just have to add type: "module" to the package.json of this package...

[jefago]

Alright this should be fixed via #50 in 0.1.11 which is published on npm, thanks for reporting.

Works in this minimal Svelte example:

<script>
    import { onMount } from 'svelte';
    import { Editor, CommandBar } from 'tiny-markdown-editor';
    onMount(() => {
        const tinyMDE = new Editor({ element: 'editor' });
        const toolbar = new CommandBar({ editor: tinyMDE, element: 'toolbar' });
    });
</script>

<div id="toolbar"></div>
<div id="editor"></div>

[AustinFoss]

Yes, thank you very much! Confirmed that this now works through npm for me now as well.

Bonus, your demonstrated example also answered why I was getting a 'navigator is not defined' error when try the self hosted install option. Solution was to utilize the onMount() method.