migrate from v6 to v7

[sytolk]

Hi,

In milkdown v6 I have custom link and image nodes and use it like that: https://github.com/tagspaces/tagspaces-common/blob/develop/packages/tagspaces-md/src/MilkdownEditor.tsx#L155

In v7 it's have widgetViewFactory that can add content before and after position of link node (It's text node with Mark) : https://github.com/Milkdown/website/blob/main/src/components/playground-editor/editor-component/LinkWidget.tsx

But I want to completelly replace link with custom component like this: https://github.com/tagspaces/tagspaces-common/blob/develop/packages/tagspaces-md/src/MilkdownEditor.tsx#L94

How can be done this with milkdown v7?

Thanks

[sytolk]

I have try this https://codesandbox.io/s/gifted-meninsky-6kfc7t?file=/src/Editor.tsx:867-902
It works but html dont have href attribute in this sample:

export const TSLink = () => {
  const {
    contentRef,
    node: { attrs },
    setAttrs
  } = useNodeViewContext();

  const { href = '' } = attrs;

  // Adding Custom attributes to current node failed with error setPos()..
  // setAttrs({ title: 'testing-id'}); //, onClick: 'alert(\'' + href + '\')' });

  return (
    <>
      <span ref={contentRef} style={{ cursor: 'pointer', color: 'green' }} />
    </>
  );
};

https://github.com/Saul-Mirone/prosemirror-adapter/blob/main/packages/react/README.md#play-with-node-view

[sytolk]

using useWidgetViewFactory the problem is that I can create new link with DecorationSet but after the original on
Is it possible to replace link with the new on?

[Saul-Mirone]

If all you need is just override the click behavior when clicking on link attributes, you should use a prosemirror plugin and configure the event hooks: https://prosemirror.net/docs/ref/#view.EditorProps.handleClickOn.

Also, it's possible to pass in a custom dom element in toDOM in schema spec, you can extend the spec and override the behavior:

linkSchema.extendSchema(prev => {
  return (ctx) => {
    const baseSchema = prev(ctx)
    return {
      ...baseSchema,
      toDOM: () => {
        const a = document.createElement('a');
        return a;
      }
    }
  }
})

But in most cases, you should consider to use the first method.

About the node view, as I mentioned before in your issue. It's not supposed to be used in marks so you shouldn't use that.

[sytolk]

@Saul-Mirone thanks for the answer. I have try with handleClickOn but node here is not link (link is Mark object) onClick node is paragraph

For method two its not clear how to set this new linkSchema to Mark object ?
Example using $mark miss me: https://github.com/Milkdown/milkdown/blob/main/packages/utils/src/composable/%24mark.ts#L33

[Saul-Mirone]

You need to check the marks property in node. It will be a list of marks and if it contains link, you will see the mark there. The method generally triggers on every click event and you need to filter out the part you want.

[sytolk]

@Saul-Mirone have you see the debugger on click on link => Node marks = [] (empty array)

I suppose that onClick is handled on parent node: paragraph
The debugger stops when I'm click on <a href="http://tagspaces.org">link</link>

[sytolk]

Here is the sandbox with handleClickOn

https://codesandbox.io/s/sharp-sammet-s562uw?file=/src/Editor.tsx

[Saul-Mirone]

It's in the content of the node. You can see the marks in the text node.

[sytolk]

I see now thanks

[sytolk]

@Saul-Mirone it works now but how to event.preventDefault() on click to navigates to the URL specified in the href attribute of the link

https://codesandbox.io/s/sharp-sammet-s562uw?file=/src/Editor.tsx

[Saul-Mirone]

I guess it's because your editable prop is set to false. However IMO it should work if you call event.preventDefault(). It might be a prosemirror bug.

[sytolk]

With editable = true href url is not fired at all but for me it's more important to handle link in read mode of editor. I have use milkdown editor in <iframe> of the Electron app. In Milkdown editor it's have inner links with custom protocol like ts://.. and must be handled and send href to the parent Electron app window.parent.postMessage(...)
This function handleClickOn looks promissing only preventDefault functionality missing.. to not try to open ts:// links

[Saul-Mirone]

If that's the case, a possible workaround would be like:

// Add this in .config
const observer = new MutationObserver(() => {
  const links = Array.from(root.querySelectorAll('a'));
  links.forEach((link) => {
    link.onclick = () => false;
  })
})
observer.observe(root, {
  childList: true,
})

[sytolk]

@Saul-Mirone your workaround works for me thanks!