Closed benloh closed 8 months ago
NOTING Decision:
markdown
template type to a string
. See slack@jdanish two fixes:
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>
. @jdanish Also, you can use emojis now.
e.g. try adding Hello from mars :satellite:
to a markdown-able field.
Looks good!!
This adds:
Markdown support in Templates
Custom attribute fields usually use a
string
,numeric
,boolean
, oroption
type.We now have a new
markdown
attribute field type. It essentially works the same as astring
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 typestring
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 amarkdown
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
notes
type
property, change the type fromstring
tomarkdown
Edit the
*.template.toml
file directly*.template.toml
file for the project you're working on.type = "string"
totype = "markdown"
. The attribute definition looks like this: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.
**bold**
to the field.Insert Image URL Dialog
To make it easier to insert an image, we added a "Insert Image URL" dialog. To use it:
This is an image.
.an
andimage
.![image](https://example.com/image.jpg)
.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
NetGraph
-- replaced byNCGraph
Search
-- replaced byNCSearch
NodeSelector
-- replaced byNCNode
Technical Background
Previously, markdown rendering was done via Joshua's implementation of
markdown-react-js
andMarkdownNote.jsx
. Whilemarkdown-react-js
was created by the same authors ofmarkdown-it
, the repo hasn't been touched in 5 years, so we are deprecating it in favor of the more updatedmarkdown-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 #58._blank
to markdown linksmarkdown-it-emoji
support has not been implemented yet for the new NCNode and NCEdge.