feat(playground): Implement codemirror based template string editor

[cephalization]

TODO:

• Implement tests
  • Need to figure out rollup plugins in jest or switch to vitest
• Implement mustache like template language
  • Should be a quick-ish port just copy-pasting the fstring grammar and adding double brackets
• Implement variable replacement util that utilizes parsed tree

[cephalization]

This is the last known mustache syntax bug I can find.

Triple backticks selects the left two most braces and the inner most two right braces and includes one brace as input. Desired behavior is probably to escape this entirely.

[cephalization]

Change this to TemplateLanguages.FString to test that instead.

[Parker-Stafford]

nit: your check below avoids this, but sometimes prefer writing records as Record<string, string | number | undefined> just because it's a little more honest and catches unset keys

[cephalization]

in my opinion we should just enable noUncheckedIndexedAccess in our tsconfig if we are concerned about unset keys

[cephalization]

Added

[Parker-Stafford]

cool stuff

[mikeldking]

I think there's some very minor syntax issues e.g. raw {{}}

[mikeldking]

Light mode looks "unhighlighted" for some reason - probably need a different theme?

[mikeldking]

This is so cool. Excited to wire it all up

[mikeldking]

I see the ...props so I get that you are trying to keep this generic. Maybe you can expose under /code a version that doesn't have things like line numbers since I think that's the primary use-case

[cephalization]

I'm happy to tweak any defaults you want for TemplateEditor, including removing line numbers and setting a default height.

I tend to opt for exposing all props on components so that I don't have to add them later but I'm happy with leaving extra props opaque until they're actually needed to be drilled through

[cephalization]

No more gutter, line numbers, or line highlight by default

[cephalization]

Light mode looks "unhighlighted" for some reason - probably need a different theme?

Correct. Highlighting is determined by setting a semantic tag type and then the theme is meant to handle the actual coloring. We have no theme set on light mode, similar to the other CodeMirror editor. I'm happy to choose one but feel free to pick one as well and I'll add it

[cephalization]

I think there's some very minor syntax issues e.g. raw {{}}

Mustache surprisingly has more parsing quirks than f-string. I'll spend a bit more time refining it but I'll have to be careful not to rabbit hole on it, I keep nerd sniping myself into optimization and tweaking on this

[cephalization]

Alright I've fixed all of the parsing issues I could find for both langs, and implemented \ escaping and fstring {{escape}} as well as mustache {{{ escape }}}.

The final parse "issue" that I will leave unresolved for now is {test {value}} The highlighter stops at the second to last brace, and the emitted variable name is test {value

[cephalization]

Light mode theme "github"