When running the code in examples/vue, I entered Chinese in the editor but received incorrect results. For example:
I entered 哈哈 using the built-in input method of Windows 10, but I got hh'h哈哈

This problem seems to only appear in the Vue example, and the React example is OK.

Is there any chance you could support angular? I love milkdown and your work around it. As I am forced to use angular for my project, I would love to see this adapter for angular.

Thank you!

When using the code in examples/svelte I get error in this code (Editor.svelte, lines 32, 27, etc.):

 // line 29:
  function editor(element: HTMLElement) {
    editorView = createEditorView(element, {
      paragraph: nodeViewFactory({
        component: Paragraph,
        as: 'div',
        contentAs: 'p'
      }),
      heading: nodeViewFactory({
        component: Heading
      })
    }, [
      new Plugin({
        view: pluginViewFactory({
          component: Size
        })
      }),
...

The error reads:

Type 'typeof Paragraph__SvelteComponent_' is not assignable to type 'SvelteNodeViewComponent'.
Types of parameters 'options' and 'options' are incompatible.
Type 'ComponentConstructorOptions' is not assignable to type 'ComponentConstructorOptions<Record<string, never>>'.
Type 'EmptyProps' is not assignable to type 'Record<string, never>'.
Index signature for type 'string' is missing in type 'EmptyProps'.ts(2322)

Not sure how exactly approach a fix... My guess is that changing type in the adapter code should suffice, but did not have the courage to look inside, yet.

"@sveltejs/kit": "^1.5.0",
"@sveltejs/adapter-auto": "^2.0.0",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"@prosemirror-adapter/svelte": "^0.2.4",

Basic collaboration is working. Adding text to the document is sent to collaborators. However, I'm having trouble with a custom node view.

A custom node view calls setAttrs({value: ...}) to modify the value (Mermaid code) of a diagram node, similar to the way the Milkdown Playground does it.

It gets setAttrs via const setAttrs = useNodeViewContext("setAttrs");

I don't see any errors in the JavaScript console or elsewhere. Collaborators connected to the same document don't seem to be receiving the changes. Is there something else that I need to do to modify the Y doc?

I can also guess that if I'm able to get that working, the custom nodeview won't know its node was changed. Can the store returned by useNodeViewContext("node") be used to re-render the component or does Prosemirror handle that?

Here's my code

Thank you for creating this repo. I was trying to build a custom editor I discovered that useWidgetViewFactory seems to work in React, but always seem to return an undefined value in Vue.

I've created a test environment which demonstrate this edgecase:
https://stackblitz.com/edit/github-rdvuhn?file=createEditorView.ts

Am I mis-using or misunderstanding how useWidgetViewFactory works?

Any chance you could add support for Alpine.js?

It's based on Vue and is widely used as part of Laravel Livewire and in packages like Filament.

I might give it a go, if you can't, but I'm much more a backend guy and find the Prosemirror API quite confusing 😉

Cheers!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

npm install @prosemirror-adapter/svelte
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.57.0" from @prosemirror-adapter/[email protected]
npm ERR! node_modules/@prosemirror-adapter/svelte
npm ERR!   @prosemirror-adapter/svelte@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/rchrdnsh/.npm/_logs/2023-07-15T23_53_13_299Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rchrdnsh/.npm/_logs/2023-07-15T23_53_13_299Z-debug-0.log

when installing...

When combining Milkdown and prosemirror-adapter/svelte, setAttrs({ value: 5 }) causes the Svelte component (declared via $view) to be removed and a new component takes its place. In my case, the Svelte component consists of a textarea. setAtrrs() moves the cursor out of the textarea to the top of the Milkdown editor. I guess I could capture the cursor location in update() but I'm not sure what I could do to find it later when the new Svelte component is created. I think I'm supposed to use a Svelte store for this. Is that correct? I realize that a better solution is to use a Prosemirror Editor instead of textarea and use transactions (which has better support for undo/redo and collaboration), but that's what the Milkdown Playground does eg with the diagram plugin.

const { view } = usePluginViewContext()
const somePropDeep = computed(()=>view.value.state.select)//or other things

Vue can't track the effect of somePropDeep when view was shallowRef, we should use triggerRef manually after assigned

I just found one place, I think there might be such other things like this in this library

@prosemirror-adapter/svelte 0.2.5
svelte 3.58.0
Milkdown 7.2

I created a Milkdown editor with the diagram plugin. The editor content defaults to a string starting with ```mermaid

This works fine. Milkdown displays the Mermaid diagram text (Mermaid code).

<div data-type="diagram" data-id="gfceeaae" data-value="  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;" contenteditable="false">  graph TD;
    A--&gt;B;
    A--&gt;C;
    B--&gt;D;
    C--&gt;D;</div>

I want to implement something similar to the way the Milkdown playground behaves (edit diagram / display diagram as svg), but using Svelte. I added a nodeview plugin:

use( [diagram, $view(diagramSchema.node, () =>
    nodeViewFactory({
      component: MyComponent,
    }))]);

MyComponent.svelte looks like:

<script>
const contentRef = useNodeViewContext('contentRef');
</script>

<div class='text-red-500' use:contentRef/>

The produced HTML looks like the following. The Mermaid diagram code does not appear. I have tried:

1. contentAs: 'div'
2. as: 'div'
3. as: 'div', contentAs: 'div'

<div class="milkdown">
<div contenteditable="true" translate="no" class="ProseMirror editor" role="textbox">
<div data-node-view-root="true">
<div class="text-red-500">
<div data-node-view-content="true" style="white-space: inherit;">
<br class="ProseMirror-trailingBreak"></div></div></div></div></div>

contentRef is a Svelte action that acts on the div that I provided.

(t4) => {
          t4 && t4 instanceof HTMLElement && 
             this.contentDOM && t4.firstChild !== this.contentDOM && 
             t4.appendChild(this.contentDOM);
}

this.contentDOM appears to be:

<div data-node-view-content="true" style="white-space: inherit;">
<br class="ProseMirror-trailingBreak"></div>

Apparently I need to call useNodeViewContext('node') instead and interact with the prose mirror node.