Button that converts markdown to wikitext

[linonetwo]

Demo: https://deploy-preview-9462--tiddlywiki-previews.netlify.app/

before merge, revert change in editions/tw5.com/tiddlywiki.info

new action widget that handles children action widget for notification

handle multiple import options

title: $:/plugins/tiddlywiki/wikitext-serialize/markdown/ui/ImportOptions test
tags: $:/tags/ImportOptions
condition: [match[text/plain]]

\whitespace trim
<$checkbox
	tiddler="$:/config/wikitext-serialize/xxxx"
	field="text"
	checked="yes"
	unchecked="no"
	default="no"
>
	&#32;
	tesxttext
</$checkbox>

editor buttons

closes #9415 and deprecates https://github.com/tiddly-gittly/md-to-tid

[netlify]

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	62fe158
🔍 Latest deploy log	https://app.netlify.com/projects/tiddlywiki-previews/deploys/69e31adda2835a00074352f5
😎 Deploy Preview	https://deploy-preview-9462--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Confirmed: linonetwo has already signed the Contributor License Agreement (see contributing.md)

[github-actions]

📊 Build Size Comparison: empty.html

Branch	Size
Base (master)	2447.2 KB
PR	2449.2 KB

Diff: ⬆️ Increase: +2.0 KB

---

✅ Change Note Status

All change notes are properly formatted and validated!

📝 $:/changenotes/5.5.0/#9462

Type: feature | Category: widget
Release: 5.5.0

Add button and import option to convert Markdown tiddlers to WikiText

🔗 #9462

👥 Contributors: linonetwo

---

📖 Change Note Guidelines

Change notes help track and communicate changes effectively. See the full documentation for details.

[Copilot]

Pull request overview

This PR adds markdown-to-wikitext conversion functionality to the wikitext-serialize plugin, implementing a comprehensive system for converting markdown content to TiddlyWiki wikitext format. The conversion is available through multiple interfaces including a JavaScript API, toolbar button, and import dialog option.

Key changes include:

• Core markdown-to-wikiast conversion engine with modular handler architecture
• Support for common markdown elements (headings, formatting, lists, links, images, tables, code blocks, blockquotes)
• UI components for manual and automatic conversion
• Comprehensive test suite with multiple test cases
• Enhanced quoteblock serialization for nested quotes

Reviewed changes

Copilot reviewed 52 out of 53 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast.js	Main conversion engine implementing markdown-it tokens to wikitext AST transformation
plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast/*.js	Individual handlers for each markdown element type (headings, lists, links, etc.)
plugins/tiddlywiki/wikitext-serialize/markdown/action-convert-markdown.js	Action widget for manual markdown conversion via toolbar button
plugins/tiddlywiki/wikitext-serialize/markdown/convert-markdown-on-import.js	Hook for automatic markdown conversion during import
plugins/tiddlywiki/wikitext-serialize/markdown/ui/*.tid	UI components for toolbar button and import options
plugins/tiddlywiki/wikitext-serialize/rules/quoteblock.js	Enhanced quoteblock serializer with nested quote support
plugins/tiddlywiki/wikitext-serialize/rules/parameters.js	Defensive check for orderedAttributes
plugins/tiddlywiki/wikitext-serialize/rules/html.js	Defensive check for orderedAttributes
editions/test/tiddlers/tests/data/markdown-to-wikitext/*.tid	Test cases for markdown conversion
editions/test/tiddlers/tests/test-markdown-to-wikitext.js	Test runner for markdown conversion
core/ui/ViewTemplate/title.tid	Conditional rendering support for toolbar buttons
core/ui/ImportListing.tid	Import options rendering in import dialog

Comments suppressed due to low confidence (5)

plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast/text.js:1

• The handler assumes token.content exists, but text tokens from markdown-it may have token.value instead of token.content depending on the token type. This should check both properties or validate the token structure.
  plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast/table.js:1
• The alignment parsing logic is duplicated in both th_open and td_open handlers. Extract this to a shared helper function to improve maintainability.
  plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast/table.js:1
• The alignment parsing logic is duplicated in both th_open and td_open handlers. Extract this to a shared helper function to improve maintainability.
  plugins/tiddlywiki/wikitext-serialize/rules/quoteblock.js:1
• The deeply nested property access makes this line difficult to read and maintain. Consider using optional chaining (tree.attributes?.class?.value) or breaking into multiple lines with intermediate variables.
  plugins/tiddlywiki/wikitext-serialize/markdown/mdast-to-wikiast/heading.js:1
• The variable 'level' is computed but never used. Either remove this line or add a comment explaining why it's extracted but not utilized.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 53 out of 54 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Leilei332]

I think converting markdown to tw wikitext should be in another plugin. Wikitext serialize should only provide APIs.

[linonetwo]

@Jermolene said in #9415 that I can put them together, see if he will change his mind when he see change set is so large.

[linonetwo]

@Jermolene Code is bloating, and it includes a new button in UI, so maybe not suitable in wikitext-serialize plugin, how about put them into markdown plugin? Or just a standalone plugin, as user is intended not using markdown feature.

[Jermolene]

The new icon, that is the best I can get, I can't draw svg myself, just combine 2 icons to create one.

Thanks @linonetwo, I think it's pretty good – all great artists copy.

[pmario]

The new icon, that is the best I can get, I can't draw svg myself, just combine 2 icons to create one.

IMO the icon indicates a conversion in 2 directions according to the arrow heads. - Is this intended or should it be 2 icons with a arrow in 1 direction.

I could create the SVGs if you want.

[linonetwo]

IMO the icon indicates a conversion in 2 directions according to the arrow heads. - Is this intended or should it be 2 icons with a arrow in 1 direction.

I could create the SVGs if you want.

@pmario you are right, please help if you could. One directional icon will also make M↓ icon larger, easier to read.
Better if you could invent an icon for "WikiText". Like that one for markdown. Like Ti?

And bi-directional conversion is totally possible, but I don't want to impl that right now because we still regarding wikitext as the basic of tiddlywiki. Even add this feature, I will make 2 separate icons so user could hide one of them from toolbar.

[linonetwo]

How about this icon

[superuser-does]

I like that, also making it top-bottom which is more friendly to i18n (some languages are read right-to-left).

I would suggest having Motovun Jack/his head (like the TiddlyDesktop logo), instead of [Ti], which is not used elsewhere to represent TiddlyWiki.

[pmario]

How about this icon

I do like it.

I would suggest having Motovun Jack/his head (like the TiddlyDesktop logo), instead of [Ti], which is not used elsewhere to represent TiddlyWiki.

I think that will be too close to the GitHub logo, if it is so little. IMO "Ti" is good.

---

I did experiment a bit, but I did not really like too much.

[superuser-does]

I did a bit of experimenting myself - just with simple Inkscape clipping.
I agree it's not great with the main version of Jack, but vilc's slightly touched up version from the forum worked quite well IMO.

SVG:

The SVG is definitely not integration-appropriate, it is just a visual proof of concept. If you choose to follow this path, it's important that the head does not touch the edge (would look out of place versus other buttons), so we cannot use Jack's full body.

[Jermolene]

Thanks @linonetwo. Having Jack in the icon would have been nice, but it does not look practical. I’d suggest “TW” instead of “Ti” because that is already established as a 2-letter abbreviation for TiddlyWiki.

[linonetwo]

Note that this icon area is very small, so don't be too complicated, TW is complex enough.
Have to simplify the arror and the box around TW so it won't looks dirty.

Anyway, it fallbacks to tooltip.

[linonetwo]

SVG:

@superuser-does That looks like Jim Carrey "The Mask" instead, haha

[Jermolene]

Note that this icon area is very small, so don't be too complicated, TW is complex enough. Have to simplify the arror and the box around TW so it won't looks dirty.

Perhaps it could be simplified very slightly by making the TW box also be white on black, avoiding the borders

[linonetwo]

Draw by gemini3.1, is this really better than white version?

[superuser-does]

Not bad, and IMO you can go either way with it (solid or blank background).

I would comment that the typeface for TW strikes me as incogruent with the rest of TW's style.

I don't have the ability to execute this but I would suggest these ways to refine it further:

1. The Markdown logotype should be exactly as per Dustin Curtis's Markdown mark, which is the de facto logo of the language.
   It's too small for me to tell but I think you are using this already.
2. The "TW" text should use a glyph from the default font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"
   ... and as the first few are non-free, it may be better go with it "TW" as it appears in Noto Sans, as the first free font in that list.
   OR, the code font family ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace - the first free font here being Liberation Mono.

For the second part, you can type it out in Inkscape and then click Path > Object to Path. This would probably bloat the SVG in other ways (even when storing as Plain SVG) so I will leave it to the experts here on how to get the size down.

It's worth consider if the arrow's wings could be restored, by thinning the stroke. This could be looked at last, after all changes to the two logos have been made.

These are small tweaks though and I think you have landed on a sensible button to represent it!

[linonetwo]

@superuser-does It is not font, SVG icon usually don't depend on font. It is draw point by point, very difficult, so usually I just use icon from https://morosanuae.github.io/tw-icons/

[superuser-does]

@superuser-does It is not font, SVG icon usually don't depend on font. It is draw point by point, very difficult, so usually I just use icon from https://morosanuae.github.io/tw-icons/

Yes. My suggestion was to enter it in text in an SVG editor like Inkscape with that font installed & set. Then use the Object to Path tool, which will convert your text object to SVG paths, based on the currently loaded font.

[linonetwo]

Let gemini use same W as M.

You can choose a best verson, each in a commit.

[superuser-does]

I had a bit of free time and did the steps I discussed above to put both M↓ and TW in proper type and better align with branding.

Changes:

• After a few experiments, I settled on Noto Sans in Ultra-Bold type for TW.
• I replaced the Markdown wordmark with the official version by Dustin Curtis (which is in the public domain). The version provided in @linonetwo's SVG was slightly different. It is mainly visible in the arrow width, though the M had different metrics as well.

Here is the button as I did in Inkscape with a bit of boilerplate removed (and paths converted):

I then got Gemini Pro 3.1 to bake it into the path, so it looks like a cutout - cutting down on code while also making it more TW-appropriate:

Caveats:

1. This relies on fill-rule="evenodd", which was added to Edge on 2020-01-15 and Safari on 2020-03-24, across all versions. This is over 6 years ago and I hope it is acceptable to the project.
2. The resulting file is twice as large. 2367 bytes compared to the previous iteration's 1006 bytes. It could be made much smaller by actually rendering the text, but I stuck with the glyph approach from earlier.

Finally, here is this turned into a TID file:

title: $:/plugins/tiddlywiki/markdown/md-to-tid/images/convert-markdown
tags: $:/tags/Image

\parameters (size:"22pt")
<svg width=<<size>> height=<<size>> xmlns="http://www.w3.org/2000/svg" class="tc-image-convert-markdown tc-image-button" viewBox="0 0 24 24" fill="none">
  <path id="md-box" fill="currentColor" fill-rule="evenodd" d="M 1.65,1.65 L 11.55,1.65 A 0.55,0.55 0 0 1 12.1,2.2 L 12.1,11 A 0.55,0.55 0 0 1 11.55,11.55 L 1.65,11.55 A 0.55,0.55 0 0 1 1.1,11 L 1.1,2.2 A 0.55,0.55 0 0 1 1.65,1.65 Z M 2.2215209,8.520882 V 4.6791179 H 3.351451 L 4.4813809,6.0915315 5.611311,4.6791179 h 1.12993 V 8.520882 H 5.611311 V 6.3175171 L 4.4813809,7.7299301 3.3514508,6.3175171 V 8.520882 Z m 7.0620635,0 L 7.5886893,6.6564967 H 8.7186194 V 4.6791179 H 9.84855 v 1.9773788 h 1.129929 z" />
  <path id="line" d="m 12.2,5.8 q 4.6,0 4.6,6.4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  <path id="arrowhead" d="m 16.8,12.2 3,-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  <path id="tw-box" fill="currentColor" fill-rule="evenodd" d="M 12.45,12.45 L 22.9,12.45 A 0.55,0.55 0 0 1 23.45,13 L 23.45,21.8 A 0.55,0.55 0 0 1 22.9,22.35 L 12.45,22.35 A 0.55,0.55 0 0 1 11.9,21.8 L 11.9,13 A 0.55,0.55 0 0 1 12.45,12.45 Z M 15.37591,19.347277 H 14.437727 V 16.22182 H 13.43409 v -0.769092 h 2.945457 V 16.22182 H 15.37591 Z M 21.915912,15.452728 l -0.976364,3.894549 h -1.080001 l -0.452728,-1.88182 q -0.01636,-0.05455 -0.04364,-0.174546 -0.02182,-0.12 -0.04909,-0.261818 -0.02727,-0.141818 -0.05455,-0.272727 -0.02182,-0.136364 -0.02727,-0.223637 -0.01091,0.08727 -0.03818,0.223637 -0.02182,0.130909 -0.04909,0.272727 -0.02727,0.141818 -0.05455,0.261818 -0.02727,0.120001 -0.03818,0.174546 l -0.458182,1.88182 h -1.074546 l -0.981819,-3.894549 h 0.905455 l 0.463637,2.045456 q 0.02727,0.114546 0.06546,0.305455 0.03818,0.190909 0.07091,0.392728 0.03818,0.196363 0.05454,0.327273 0.02182,-0.174546 0.06546,-0.409092 0.04364,-0.24 0.08727,-0.458182 0.04909,-0.223636 0.08182,-0.349091 l 0.463637,-1.854547 h 0.867273 l 0.463637,1.854547 q 0.02182,0.09273 0.05455,0.245455 0.03273,0.152727 0.06546,0.332727 0.03273,0.174546 0.06,0.343637 0.03273,0.169091 0.04909,0.294546 0.01636,-0.13091 0.04909,-0.327273 0.03818,-0.201819 0.07636,-0.387273 0.03818,-0.19091 0.06546,-0.305455 l 0.463637,-2.050911 z" />
</svg>

All these steps involved some manual edits, including some helpful ID names.

This is how it looks in context:

And up close:

I hope this is okay to integrate, bearing the caveat above in mind.

[linonetwo]

Thank you, I've updated it.

fill-rule="evenodd" is fine, we already use it everywhere.