codeblock: add backtick code fence notation for creating a code block with specific language

Author: progrium

lib/com/codeblock.tsx

@@ -38,10 +38,17 @@ export let defaultExecutor: CodeExecutor = {
 export class CodeBlock {
   code: string;
   language: string;
+  detectLanguage: boolean;
 
-  constructor() {
+  constructor(language?: string) {
     this.code = "";
     this.language = "";
+    this.detectLanguage = true;
+
+    if (language) {
+      this.language = language;
+      this.detectLanguage = false;
+    }
   }
 
   childrenView() {
@@ -70,17 +77,17 @@ export class CodeBlock {
 
   static initialize(workbench: Workbench) {
     workbench.commands.registerCommand({
-      id: "make-code-snippet",
-      title: "Make Code Snippet",
+      id: "make-code-block",
+      title: "Make Code Block",
       when: (ctx: Context) => {
         if (!ctx.node) return false;
         if (ctx.node.raw.Rel === "Fields") return false;
         if (ctx.node.parent && ctx.node.parent.hasComponent(Document))
           return false;
         return true;
       },
-      action: (ctx: Context) => {
-        const com = new CodeBlock();
+      action: (ctx: Context, language?: string) => {
+        const com = new CodeBlock(language);
         if (ctx?.node) {
           ctx.node.addComponent(com);
           ctx.node.changed();
@@ -110,9 +117,12 @@ const CodeEditor = {
       editor.textContent = editor.textContent;
       //@ts-ignore
       window.hljs.highlightBlock(editor);
-      snippet.language =
+
+      if (snippet.detectLanguage) {
         //@ts-ignore
-        window.hljs.highlightAuto(editor.textContent).language || "";
+        snippet.language = window.hljs.highlightAuto(editor.textContent).language || "";
+      }
+      
     });
     dom.jarEditor.updateCode(snippet.code);
     dom.jarEditor.onUpdate((code) => {

lib/ui/outline.tsx

@@ -3,11 +3,13 @@ import { Workbench, Path } from "../workbench/mod.ts";
 import { objectCall, componentsWith, objectHas } from "../model/hooks.ts";
 import { NodeEditor } from "./node/editor.tsx";
 
+// bunch of components I wish weren't direct dependencies
 import { Checkbox } from "../com/checkbox.tsx";
 import { Document } from "../com/document.tsx";
-import { getNodeView } from "../view/views.ts";
-
 import { Tag } from "../com/tag.tsx";
+import { CodeBlock } from "../com/codeblock.tsx";
+
+import { getNodeView } from "../view/views.ts";
 
 export interface Attrs {
   path: Path;
@@ -149,6 +151,18 @@ export const OutlineNode: m.Component<Attrs, State> = {
       case "Enter":
         e.preventDefault();
         if (e.ctrlKey || e.shiftKey || e.metaKey || e.altKey) return;
+        
+        // first check if node should become a code block
+        // todo: this should be a hook or some loose coupled system
+        if (e.target.value.startsWith("```") && !node.hasComponent(CodeBlock)) {
+          const lang = e.target.value.slice(3);
+          if (lang) {
+            workbench.executeCommand("make-code-block", {node, path}, lang);
+            e.stopPropagation();
+            return;
+          }
+        }
+
         // cursor at end of text
         if (e.target.selectionStart === e.target.value.length) {
           if (node.childCount > 0 && workbench.workspace.getExpanded(path.head, node)) {