Hooks into wikilinks extension rendering? #10

clartaq · Dec'17

I'm working on a wiki program that uses Markdown for it's content. I've been using flexmark (thank you so much) to handle the Markdown and passing that on to MathJax to handle rendering mathematics.

I also use Mediawiki style wikilinks, "[[link-part|optional-display-part]]", for internal links to other pages in the wiki. Up to now, I've resolved the wikilinks with a regular expression search and pasting the link back into the document along with appropriate styling -- red text for links to pages that don't exist and disabled links that the user is not allowed to follow because of their role, e.g. a "normal" user cannot follow links that would let them delete another user account.

This has worked fine except that wikilinks inside code blocks get translated anyway. Makes writing some documentation problematic. I thought the wikilinks extension would be a better way to handle this if there is a way to change rendering of links based on user authorization. But I can't figure out if there is already something like that capability (just adding a class in the HTML), or if cloning the extension would be the right thing to do, or if something else would be better.

Any advice?

solved #7
replies 8
views 8.7K
likes 0

Vladimir Schneider vsch · Dec'17 Team

You definitely should use the Wiki link extension for parsing wiki links and optionally wiki images ![[]].

To complete the functionality you need to create a custom LinkResolver which will convert the wiki page text to a URL based on your rules.

Link resolver returns a ResolvedLink instance which also contains attributes for the generated HTML so you can add class or other attributes in the link resolver to have these rendered in the HTML a tag as attributes.

Custom link resolvers shows link and image handling:

CustomLinkResolverSample

This one uses pegdown options provider but it is not critical since it translates pegdown options to flexmark-java options, this custom link resolver handles wiki links and wiki images:

PegdownCustomLinkResolverOptions

clartaq · Dec'17 Author

Thanks for the quick, helpful response! I'll give it a try.

clartaq · Sep'18 Author

I was finally able to get back to this. Things mostly work with one problem
I'll get to in a moment.

I ended up writing an AttributeProvider and associated HtmlRendererExtension.
(I put them in a gist here
if you are interested.)

They do exactly what I wanted, styling links in the wiki depending on the
role of the user and whether the link target is already a page in the wiki.

The new AttributeProvider produces exactly the same HTML as the method
that I was using previously, except for links in code listings, which are no
longer translated -- the reason for making the switch in the first place.

The problem is that, although the HTML is the same, the generated links do
not always point to the same place. I'm not sure if this is the
intended behavior. Let me explain.

When I add a wikilink to the "About" page, the expected HTML is <a href="About">About</a> and the intended URL is localhost:1350/About (depending on the host of course.) That is what should happen and almost always does.

However, I have some special pages that are generated automatically on demand
when particular links are clicked, for example, clicking on an [[All Tags]] link causes generation of a page listing all of the tags used in the wiki. Each of the tags shown are themselves special in that clicking them will
generate another page showing the titles of all pages that use the tag.

For example, the "All Tags" page will show an entry for the "about" tag. The HTML for the link will be <a href="about/as-tag">about</a>. Clicking the link will produce a page showing all of the pages that use the "about" tag, including the "About" page. The HTML for the "About" page is exactly as shown above, but when you hover over the link, it shows a URL of localhost:1350/about/About which is not the same as before and not what is desired. Clicking such a link causes nasty consequences. In fact, all of the other URLs on the page have the same extraneous /about injected in them except for links in menus that were not passed through the translator.

I'm just not clear if this is intended based on the URL of the previous page or if it is a bug. I haven't been able to figure it out myself from looking at the code.

Thanks for your help.

Vladimir Schneider vsch · Sep'18 Team

1 #5

@clartaq, the rendering of the WikiLink will use whatever value is defined by the resolver for the url attribute:

ResolvedLink resolvedLink = context.resolveLink(WikiLinkExtension.WIKI_LINK, node.getLink().unescape(), null);
html.attr("href", resolvedLink.getUrl());
html.srcPos(node.getChars()).withAttr(resolvedLink).tag("a");
context.renderChildren(node);//html.text(node.getText().isNotNull() ? node.getText().toString() : node.getPageRef().toString());
html.tag("/a");

What is the HTML defined for the <a> tags when the URL hover shows .../about/About?

Could you please make a short file with this issue and post the HTML for the page here?

clartaq · Sep'18 Author

1 #6

The HTML doesn't change. It's <a href="About">About</a> for the "About" page, for example. That is the HTML produced by a wikilink typed into a page or one generated by the program as described.

Here's the HTML for the page generated to show all wiki pages containing the tag about. The list of links for those pages is near the bottom. You will see that the HTML in the list is just the same as that near the menu near the top. But when you hover over the link in the menu, the browser shows localhost:1350/About. But when you hover over the link (with the same HTML) in the generated list of links near the bottom, the browser shows localhost:1350/about/About. Something else that may be relevant is that the URL in the address bar is http://localhost:1350/about/as-tag when this pages is displayed.

<!DOCTYPE html>
<html lang="en"><head><title>CWiki: All Pages with Tag "about"</title><link href="/css/styles.css?126558821" rel="stylesheet" type="text/css"><link href="/js/styles/default.css" rel="stylesheet" type="text/css"></head><body class="page"><header class="page-header"><div class="header-wrapper"><hgroup class="left-header-wrapper"><h1 class="brand-title">CWiki</h1><p class="brand-sub-title">A Simple <a href="https://en.wikipedia.org/wiki/Wiki">Wiki</a></p></hgroup><nav class="hmenu"><span class="menu-item"><a href="/New Page">New</a></span><span class="menu-item"><a href="/">Home</a></span><div class="menu-item"><ul><li class="subNav"><a>More  ▾</a><ul><li><a href="/About">About</a></li><li><a href="/import">Import</a></li><li><a href="/export-all">Export All</a></li><li><a href="/Admin">Admin</a></li><li><a href="/logout">Sign Out</a></li></ul></li></ul></div><div class="search-container"><form action="/search" enctype="multipart/form-data" id="searchbox" method="post"><input id="search-text" name="search-text" placeholder="Enter search terms here..." type="text"></form></div></nav></div></header><div class="sidebar-and-article"><aside class="left-aside"><div><p>Here's your <a href="Sidebar">Sidebar</a>. You can edit this page just like any other to put useful stuff here. Things like reminders of how to do things or useful links. See the <a href="About%20the%20Sidebar">About the Sidebar</a> page for tips and information. Then, go ahead and edit it.</p>
<h6>Useful Links</h6>
<ul>
  <li><a href="All%20Pages">All Pages</a></li>
  <li><a href="All%20Users">All Users</a></li>
  <li><a href="All%20Tags">All Tags</a></li>
  <li><a href="Special%20Pages">Special Pages</a></li>
  <li><a href="Orphans">Orphans</a></li>
  <li><a href="To%20Do">To Do</a></li>
  <li><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown Cheatsheet</a></li>
</ul>
<h6>Maintenance</h6>
<ul>
  <li><a href="preferences">Preferences</a></li>
  <li><a href="compress">Compress</a></li>
  <li><a href="backup">Backup</a></li>
  <li><a href="restore">Restore</a></li>
  <li><a href="create-user">Create User</a></li>
  <li><a href="select-profile">Edit User Profile</a></li>
  <li><a href="delete-user">Delete User</a></li>
  <li><a href="reset-password">Reset Password</a></li>
</ul>
</div></aside><article class="page-content"><div><div class="page-title-div"><h1 class="page-title-header">All Pages with Tag "about"</h1><p class="author-line"><span class="author-header">Author: </span>CWiki</p><p class="tag-line"><span class="tag-header">Tags: </span><span class="tag-text">None</span></p><p class="date-line"><span class="date-header">Created: </span><span class="date-text">05 Sep 2018, 02:49:40 PM, </span><span class="date-header">Last Modified: </span><span class="date-text">05 Sep 2018, 02:49:40 PM</span></p></div><div class="two-column-list"><div><ul>
  <li><a href="About">About</a></li>
  <li><a href="About%20Admin%20Pages">About Admin Pages</a></li>
  <li><a href="About%20Backup%20and%20Restore">About Backup and Restore</a></li>
  <li><a href="About%20Compressing%20the%20Database">About Compressing the Database</a></li>
  <li><a href="About%20CWiki">About CWiki</a></li>
  <li><a href="About%20Front%20Matter">About Front Matter</a></li>
  <li><a href="About%20Images">About Images</a></li>
  <li><a href="About%20Import/Export">About Import/Export</a></li>
  <li><a href="About%20Roles">About Roles</a></li>
  <li><a href="About%20Seed%20Pages">About Seed Pages</a></li>
  <li><a href="About%20Tags">About Tags</a></li>
  <li><a href="About%20TeX">About TeX</a></li>
  <li><a href="About%20the%20Sidebar">About the Sidebar</a></li>
  <li><a href="Front%20Page">Front Page</a></li>
  <li><a href="Links%20Primer">Links Primer</a></li>
</ul>
</div></div></div></article></div><div class="standard-scripts"><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_SVG" type="text/javascript"></script><script src="/js/mathjax-config.js" type="text/javascript"></script><script src="/js/highlight.pack.js" type="text/javascript"></script></div></body></html>

Vladimir Schneider vsch · Sep'18 Team

You should not use relative links for your href. The About page is really at /About not About. When you create the relative link for a page at /about/as-tag the browser sees it as located in /about so any relative links in that page will be relative to the page directory. Hence you see about/About. You need to generate absolute links or at least site relative /.... starting with a slash.

Then your links will not depend for which page they are generated.

clartaq · Sep'18 Author

Hmmm... I think you are right. My request handler knows how to respond to URLs of that form. But I'm abusing the rules for constructing URLs in a way that no third party software would be aware of. I'll rework the routing based on query strings, which I have been ignorant of until now. (In all my professional career, I never wrote networking or web-based software. Just desktop and embedded medical stuff. Working with the web is all new to me.)

Thank you for continuing to educate me! I truly appreciate the time you have taken.

clartaq accepted post #7 as the answer 6 years ago