Links not working for a custom button, only in full preview mode. Link works fine in dual pane mode.

[futuremotiondev]

Environment

Joplin version: 2.10.19 Platform: Windows OS specifics: Win10 Pro x64 22H2

Steps to reproduce

My code:

<div><a href="http://www.google.com"><vsys-btn class="gray"><span class="icon-info-circle"></span><p>This is a gray button</p></vsys-btn></a></div>

Screenshot:

I have some custom CSS styling for the vsys-btn tag to make it look like a button as you can see above. When I'm in dual pane mode, I can click the button and it works fine. But if I toggle the editor to just show rendered markdown, the links no longer work.

Here's another screenshot showing that the button is in-fact wrapped in an a tag:

Describe what you expected to happen

I expect the button to function normally.

[laurent22]

Not sure if related but the class jop-noMdConv is for internal use, and is now cleared when loading the note.

Other than that, I don't really understand the issue based on the screenshot and explanation

[dpoulton-github]

Observation

Your screenshots suggest that you are not toggling between the Markdown editor "dual pane" and the Markdown editor's single pane viewer, but between the Markdown editor "dual pane" and the WYSIWYG editor.

In the WYSIWYG editor links are followed using CTRL+click but even this does not work with your button. I have duplicated this. So your button works in the Markdown editor's viewer but not in the WYSIWYG editor. Why this is I do not know.

However, rather than use the WYSIWYG editor as a "viewer" you can remain in the Markdown editor and switch between different views - editor only, editor and viewer (your first screenshot) and viewer only - by keeping the "M↓" button active and using the toolbar "Toggle editor layout" button (see image), or CTRL+L, or View > Toggle editor layout.

If your button works in the Markdown viewer of the "dual pane" view it should also work in the viewer only view.

What views this button toggles through can be changed using View > Layout button sequence.

This does not solve the problem as to why the styled <a> link does not work in the WYSIWYG editor, but it does allow you to use your button.

[futuremotiondev]

@dpoulton-github Thanks for all that info. Glad to know that the buttons will work when I go to the viewer only view.

I'd really like them to work in the WYSIWYG editor though. Hopefully some kind of patch or update will get pushed.

[futuremotiondev]

@laurent22 I'm not making any use of jop-noMdConv in my CSS or HTML. So I don't think that's an issue.

The problem is:

1. I can click my button in the markdown preview window in dual pane mode.
2. I can click my button in the full page markdown preview window.
3. I cannot click my button in the WYSIWYG editor.

HTML:

<a href="http://www.google.com"><vsys-btn class="blue"><span class="icon-info-circle"></span>This is a blue button</vsys-btn></a>
<a href="http://www.google.com"><vsys-btn class="gray"><span class="icon-info-circle"></span>This is a gray button</vsys-btn></a>

CSS:

vsys-btn {
   background-color: #fff;
   border-radius: 0.3125rem;
   display: inline-flex;
   font-size: 0.96rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   margin-left: 0rem;
   margin-right: 0.6rem;
   padding: 0.8rem;
   font-weight: 400;
   font-family: "Helvetica LT Pro", "Helvetica", "Arial", sans-serif;
   line-height: 1.4rem;
   color: #5b5e66;
   border: 1px solid #aaa;
   max-width: fit-content;
   align-items: center;
}

vsys-btn span {
   font-size: var(--icon-vsmall);
   margin-right: var(--icon-vsmall-margin);
}

vsys-btn.blue {
   background-color: var(--icon-color-info);
   color: var(--icon-color-white);
   border: 1px solid var(--icon-color-info);
}

vsys-btn.gray {
   background-color: var(--icon-color-white);
   color: var(--icon-color-neutral-3);
   border: 1px solid #aaa;
}

vsys-btn.gray span {
    color: var(--icon-color-neutral-1);
}

vsys-btn p {
    margin-top: 0em;
    margin-bottom: 0em;
    padding-top: 3px;
}

It would be great if there was a way to get this to work in WYSIWYG mode.

Would you consider a patch?

Hopefully this clarifies the issue further for you.

Edit:

Just wanted to also specify that control-clicking on the button in the WYSIWYG editor doesn't work either.

Edit 2:

I took a screenshot of the live HTML code in the WYSIWYG editor via Devtools.

So as you can see the a tags are still there.

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[futuremotiondev]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

Would still love a resolution to this issue.

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, feel free to create a new issue with up-to-date information.