Feature: Re-implement Markdown support and Image Support

[benloh]

This adds:

1. The ability to add markdown text in NCNode and NCEdge fields
2. The ability to add images to a Node or Edge via markdown.

Markdown support in Templates

Custom attribute fields usually use a string, numeric, boolean, or option type.

We now have a new markdown attribute field type. It essentially works the same as a string field, but in the rendered view, the string text will be parsed as markdown and rendered as HTML. This supports most markdown formatting, including links and images.

Only fields that have been set to a markdown type will render as markdown. Any attribute fields that are of type string will continue to render as a simple string.

To Use a Markdown Field

Custom Markdown type attribute fields need to be defined for the project template you're using before you can use them. The easiest way to use a markdown field is to change an existing field from a string type to a markdown type.

Defining Markdown Type Fields

You can either edit the template using the Template Editor UI, or edit the template *.template.toml file directly.

Edit the Template using the Template Editor UI

1. Select "More..." > "Edit Template" > "Edit Current Template"
2. Find the custom attribute field you want to change, e.g. notes
3. Under the type property, change the type from string to markdown
4. Save the template.
5. The new type should be applied immediately.
6. Test the template -- see "Using a Markdown FIeld" below.

Edit the *.template.toml file directly

1. Open the *.template.toml file for the project you're working on.
2. Find the attribute you want to change.
3. Change the type = "string" to type = "markdown".
   The attribute definition looks like this:

[nodeDefs.notes]
type = "markdown"
displayLabel = "Significance"
exportLabel = "Notes"
help = "Display name of the node"
includeInGraphTooltip = true
hidden = false

4. Save the template file and reload the project.
5. Test the template -- see "Using a Markdown FIeld" below.

Using a Markdown FIeld

The rendered markdown is only visible in "View" mode. In "Edit" mode you only see the raw string. We currently do not support WYSIWYG in the editor.

1. Open a Node or Edge field with a markdown field.
2. Click "Edit" to edit the Node or Edge.
3. Add markdown text, e.g. add **bold** to the field.
4. NOTE the input field displays the string value, not the rendered markdown HTML.
5. Click "Save" and the markdown will be rendered.

Insert Image URL Dialog

To make it easier to insert an image, we added a "Insert Image URL" dialog. To use it:

1. Open a Node or Edge field with a markdown field.
2. Click "Edit" to edit the Node or Edge.
3. NOTE any field that supports markdown will have a "Insert Image URL..." button visible.
4. Click in the text field and type any text you want to add. e.g. This is an image..
5. Insert the cursor where you want the image to be inserted. e.g. between an and image.
6. Click the "Insert Image URL..." button -- A dialog window will display.
7. Paste the image URL into the "Paste Image URL:" input field. (You can of course open a new browser window and select a image address to copy).
8. Upon pasting the URL, if the URL is valid, the image will be displayed. If you see a broken image icon, then either the URL is malformed, or the image URL is not public.
9. Click "Insert" to add the image to the text -- The dialog will insert a snippet of markdown text for the image, e.g. ![image](https://example.com/image.jpg).
10. Click "Save" to save the Node or Edge. The image will be displayed as soon as you exit the Edit mode.

NOTE that this is just pure markdown, so be careful while editing the raw text. It's easy to screw up the image markdown.

Additional Features/Fixes

• Help text on NCNode and NCEdge has now been styled
• Old deprecated NetCreate.jsx components have been removed:
  • NetGraph -- replaced by NCGraph
  • Search -- replaced by NCSearch
  • NodeSelector -- replaced by NCNode

---

Technical Background

Previously, markdown rendering was done via Joshua's implementation of markdown-react-js and MarkdownNote.jsx. While markdown-react-js was created by the same authors of markdown-it, the repo hasn't been touched in 5 years, so we are deprecating it in favor of the more updated markdown-it.

See markdown-it for more information.

---

Issues / TO DO

• markdown fields do not support WYSIWYG editing. If this is needed, we can consider adding it later. Will address in the future. See Re-implement MarkDown in notes fields #58.
• @jdanish Node and Edge Tables do not render markdown in the table view. For large networks this is potentially a performance bottleneck. Is it OK to leave the table view as strings? Or do we want to force Markdown rendering and just live with the performance hit?
• attribute hovers do not show markdown. No need for now.
• BUG: Second image URL Dialog is shown
• Limit size of preview in Image URL Dialog
• Limit size of image in NCNode/NCEdge
• Limit size of image in NodeTable/EdgeTable
• Hack add _blank to markdown links
• markdown-it-emoji support has not been implemented yet for the new NCNode and NCEdge.

[benloh]

NOTING Decision:

• Markdown will be enabled for Node and Edge tables. If performance becomes an issue, the fix is to change the markdown template type to a string. See slack

[benloh]

@jdanish two fixes:

• Image sizes should now be limited in the URL Dialog, the NCNode and NCEdge views, and in the NodeTable and EdgeTable views.
• I've hacked in a target="_blank" to all links -- this is a pretty egregious hack as there isn't an easy way to elegantly parse markdown nor modify the resulting dom elements. Basically the system first converts the markdown text to an html string (e.g. [link](mypage.html) becomes <a href="mypage.html">link</a>. We then do a blind search for <a href and replace it with <a target="_blank" href, so <a href="mypage.html">link</a> becomes <a target="_blank" href="mypage.html">link</a>.

[benloh]

@jdanish Also, you can use emojis now.

e.g. try adding Hello from mars :satellite: to a markdown-able field.

[jdanish]

Looks good!!