Link target attributes disappearing unexpectedly

1

Link attributes are appearing/disappearing unexpectedly.

My goal is to have links open in a new window.

I have imported markdown-it-link-attributes and am successfully adding ‘target = “_blank”’ to links - see schema below.

<p>Click this link to <a href="http://www.google.com" title="google" target="_blank" rel="noopener">google</a> now.</p>

However, if I add another mark (such as bold) to the text BEFORE the link, the target and rel attributes disappear.

<p><span class="uw-editor-bold"> Click </span> this link to <a href="http://www.google.com" title="google">google</a> now.</p>

If I remove the bold mark then the link attributes reappear.

<p>Click this link to <a href="http://www.google.com" title="google" target="_blank" rel="noopener">google</a> now.</p>

If I put a bold mark AFTER the link, the attributes remain as one would expect.

<p>Click this link to <a href="http://www.google.com" title="google" target="_blank" rel="noopener">google</a> <span class="uw-editor-bold"> now </span>.</p>

Here is the link schema that I’ve defined

    link: {
        attrs: {
          href: {},
          title: {default: null},
          target: {default: '_blank'},
          rel: {default: 'noopener'}
        },
        inclusive: false,
        parseDOM: [{tag: 'a[href]', getAttrs(dom: HTMLAnchorElement) {
          return {
              href: dom.getAttribute('href'),
              title: dom.getAttribute('title'),
              target: dom.getAttribute('target'),
              rel: dom.getAttribute('rel')
            };
        }}],
        toDOM(node) {
            const {href, title, target, rel} = node.attrs;
            return ['a', {href, title, target, rel}, 0];
        }
    }

Questions:

  1. Can anyone see what I’m doing wrong?
  2. Did I create my schema properly?
  3. Did I need to import the extra library in order to have markdown link attributes?

Thank you for any help.

2

Nothing stands out in that code. Are you sure you are using your modified schema everywhere? Does the problem happen across browsers?

3

Thank you for your quick reply.

I’m beginning to think this might be the problem. Maybe somehow another schema is being used. I have been tracing over and over again and I can’t ever see that the schema gets switched to something else.

Can you confirm for me if I was correct that I needed to use the library markdown-it-link-attributes to extend markdown in order to add those attributes? Or could I just have the schema default values to do that?

4

To parse from Markdown you need that, yes. And you might also need a serializer rule. Is the problem occuring when put the document through Markdown text and back, or during normal editing inside ProseMirror, without any serializing/parsing happening?

5

It is when markdown is serialized and parsed - the very last thing that happens is that the editor turns the HTML to markdown - the markdown that is generated looks like this -

Click this {bold} link {bold} to google now .

Maybe this is showing me that the attributes have not been added to the markdown implementation by the third party library.

The editor view state has the proper info, though.

Editor view state
Editor view state738×265 15.2 KB

6

I suppose that’s what’s happening. Did you define a custom MarkdownSerializer with a custom function for your link mark?

7

No, I can’t find anything like that in the code I’m working with. I will look into that.

8

I finally found that there was another instance of the markdown parser being used that hadn’t been set up with the markdown-it-link-attributes extension.

Thanks for confirming that my initial code was set up correctly. That really helped!