TTY.WTF migrating to Milkdown

[mihailik]

TTY.WTF editor

My cutie tiny tool for faux-formatting text using Unicode tricks. TTY.WTF uses CodeMirror 6:

Now I'm migrating on Milkdown, and adding a killer new feature: runnable code blocks, early prototype at md.tty.wtf

Wait a minute, that's not just an editor, it becomes...

Milkdown-powered Notebook

One app to bring together formatted content, scripts, data visualisations and bind them in one document.

• Embed JSON data
• Or call HTTP with fetch
• Run all sorts of slicing/dicing
• Throw it into a table, chart, THREE.js scene
• Allow user inputs inside document

Imagine the power of Excel/VBA but not evil and fit for the web.

What's now

Milkdown is largely integrated, and it's 𝒜 𝒲 𝐸 𝒮 𝒪 𝑀 𝐸 !!!

For runnable code, I need:

• Upgrade the code block UX with [Run] button
• Handle actual execution
• Display the results for text/JSON at least

At first just for JavaScript code.

In future?

TypeScript, obviosly
Python via Brython
Ag-Grid for data output
Input UI elements
Safely access non-public APIs — via OAuth, or Basic auth, or whatever else

Keen to hear any thoughts, suggestions, advice!

And again, thanks a lot for this extremely cool project @Saul-Mirone

[mihailik]

I've got script execution POC!!

See a Markdown document with a button to run script block: md.tty.wtf/...

Now this is very hacky: the button is injected via CSS ::before and DOM events.

I'd love to integrate a runner feature with Milkdown's code-block properly. Could you give me some directions @Saul-Mirone please?

1. Can I inject my custom DOM above and below codemirror-host, around this line in packages/components/src/code-block/view/component.ts L201?
2. Can I add custom keyboard shortcut (maybe Cmd-Enter) to trigger my JS execution code?

Do I need a private fork of Milkdown for that, or can I achieve that with customisation of the official library?

Many thanks again!

[mihailik]

Or alternative approach: inject execution UX at CodeMirror side.

Following CodeMirror Panel Example I can attach a panel with results/errors/progress at the bottom of the code block without involving Milkdown.

Update: managed to handle it this CodeMirror panel way!

However it creates weird scrolling issues when results are taking large space.

Maybe it better belongs to the code-block DOM after all?

Any advice much appreciated ❤️

[mihailik]

Having played with CodeMirror-powered code blocks in Milkdown more, I'm thinking it's a dead end.

They are just not sufficiently integrated in the editor. Selection is off, styles off, copy-pasting is weird, adding adornments too hard.

For the complexity I need, the code-block logic will have to be re-implemented natively on ProseMirror. That's also a chance to base highlights and rich code interactions on VSCode tooling, i.e. TypeScript language server and so on.

[trancethehuman]

The design looks awesome

[mihailik]

Thank you!!

I've got a fair bit ahead with a custom codeblock implementation, that pulls the result text into the document as a readonly island.

tty.wtf/...

This way navigation across the Milkdown document is seamless, you can also copy-paste script results with no second thought.

Still more needed to restore syntax highlights and results formatting, but the example above should give a taste of the potential.

[mihailik]

Massive update since!

Try yourself: TTY.WTF/Examples+with+code+blocks...

• Syntax highlight, error squigglies and tooltips are implemented using language services from TypeScript.
• TypeScript library is loaded asynchronously, not blocking initial load.
• All browser typings are pulled at runtime (lib.d.ts).
• JS code is evaluated asynchronously in an isolated IFRAME, and results displayed below script.
• Result area is effectively read-only, you can only delete it together with whole code-block.

There's been really a lot of work done, redone and refactored.

Ongoing focus:

• Typing completions for JS/TS
• Execution improvements, including transforming the code before running:
  • import statements
  • console.log outputs
• Supporting DOM execution output, by embedding hosting IFRAME into Milkdown document
• Adding HTTP language support, executing by making a request

[mihailik]

Here I've had to remove the Milkdown own code-block handling, and replace with more complex one.

The key difference is that Milkdown sees code-block as a simple block-level node, with contained text and a lang attribute:

code_block - block-level, content: text*, lang: "JavaScript" Math.sin(1)

A more complex structure is needed to support results in-document, compare with the above for the same Markdown:

code_block - a block-level element, with rigid content: code_block_backtick_language code_block_script code_block_execution_state code_block_backtick_language - block-level, content: text* JavaScript code_block_script - block-level, content: text* Math.sin(1) code_block_execution_state - block-level, content: text* 0.8414709848078965

This ProseMirror schema allows smooth navigation and selection of code blocks in Milkdown document.

Interactive selection/cursor can freely move in/out of execution results sub-block. This is important.

When used for real purpose, those results would contain relevant and important calculation data. Users will want to copy-paste out these to other places. That's why it's important to have these results as smoothly embedded in the document.

[mihailik]

Another massive leap in progress!

TTY.wtf/BSki+identity+operations...

• JavaScript, JSON, TypeScript semantic highlight
• Syntax and semantics error (red squiggles) TS/JS/json
• Tooltips - including browser API docs
• Auto completion as you type
• Execution for JavaScript
• Fetching for HTTP language: either raw URL or full HTTP request with headers, method etc.
• Auto-detecting tabular response data, formatting into a grid

Near future focus will be on look-n-feel boost, and supporting Python and SQL code blocks.

Not just syntax highlight, execution environment for Python and SQL.

Data fetched via HTTP can be munched by JS, sliced by Python and further queries by SQL in the same document!

See in action

[mihailik]

Switching from CodeMirror to native ProseMirror took a great deal of effort, but it's so much smoother.

Cursor movement, selection, change transactions — all just speak the same language 🤌

I've figured out the interactivity too, like clicking on ℹ️ expands error details, basically updating the ProseMirror document and decorations.

[mihailik]

A big chunk of work was outside the editor: a model for safe execution.

I'm creating a hidden IFRAME for that, on a subdomain like 123abc-ifrwrk.tty.wtf — which leads to full isolation by the browser.

That IFRAME is talking to the editor via postMessage.

That'll get even more funky with Python execution!

[mihailik]

But I do want to allow visual outputs in future (like for code snippets involving THREE.js)

So that hidden IFRAME may need to become unhidden one day.

This is such a rabbit hole of a project 🐇