Overriding $view of the linkSchema

[zgrybus]

Hello,
How to change the view for a link? I'm trying to change it via nodeViewFactory, but linkSchema is MarkType, so.. I think I'm doing it wrong.
My current code:

export const LinkNode: React.FC = () => {
   const { contentRef, node: { attrs } } = useNodeViewContext();

   const { href } = attr;

   return (
     <span ref={contentRef} />
   )
}

And my useEditor:

useEditor(
    root =>
      MilkdownEditor.make()
        .config(ctx => {
          ctx.set(rootCtx, root);
          ctx.set(defaultValueCtx, defaultMarkdownValue);
        })
       .use(commonmark)
       .use(
         $view(linkSchema.mark, () =>
            nodeViewFactory({
              component: LinkNode,
              as: 'span',
              contentAs: 'a',
            })
        )
       ),
   []
)

I see that there is https://prosemirror.net/docs/ref/#view.MarkViewConstructor that $view accepts as well, however I don't see any markViewFactory() hook 🤔

[Saul-Mirone]

The mark view is highly not recommended by the author of prosemirror, you can learn more details at: https://discuss.prosemirror.net/t/prosemirror-adapter-for-react-and-vue/5010/2

[zgrybus]

So basically, the only way for extending this linkSchema view is using useWidgetViewFactory? 🤔 or I miss something?

How would you do that?

[zgrybus]

HI @Saul-Mirone

I've implemented it this way, but as I guess, I'm breaking the rules of prose-mirror as is said in the link that you sent, right?
https://codesandbox.io/s/smoosh-sunset-ey4uhy?file=/src/LinkNode.tsx

[Saul-Mirone]

So basically, the only way for extending this linkSchema view is using useWidgetViewFactory? 🤔 or I miss something?

How would you do that?

I think so. Or you can use pluginView to provide some additional UI such as tool bar.

[Saul-Mirone]

HI @Saul-Mirone

I've implemented it this way, but as I guess, I'm breaking the rules of prose-mirror as is said in the link that you sent, right? https://codesandbox.io/s/smoosh-sunset-ey4uhy?file=/src/LinkNode.tsx

I've checked your code and I think it does break the rule and may cause some strange behaviors.

[sytolk]

@zgrybus do you have success override linkSchema ? I needs to add custom attribute like onClick or custom component for link: https://github.com/orgs/Milkdown/discussions/1008

[zgrybus]

@sytolk Hmm.. I guess that my solution does not satisfy you, but I may share what I've achieved so far.

• My widget hook - https://github.com/DareData/notion-style-editor/blob/main/src/lib/packages/EditorContext/hooks/useCommonmarkPlugin/useGoogleSlidesPlugin.tsx
• Component - https://github.com/DareData/notion-style-editor/blob/main/src/lib/components/GoogleSlidesWidget/GoogleSlidesWidget.tsx

You can't use nodeViewContext as anchor is markType :(

[zgrybus]

@sytolk You may always use useWidgetViewFactory, but getting it to work for my purposes was quite difficult.

[knownasilya]

@Saul-Mirone is there a better way to do this in v7? Maybe replacing the link schema? If so, is there any example? I want to make links clickable as normal a, but have an edit icon next to it