com: drop depreacted Page component, add initial CodeBlock and InlineFrame components

Author: progrium

lib/com/codeblock.tsx

@@ -0,0 +1,95 @@
+import { component } from "../model/components.ts";
+import { Node } from "../model/mod.ts";
+
+
+export interface CodeExecutor {
+  // executes the source and returns an output string.
+  // exceptions in execution should be caught and returned as a string.
+  execute(source: string, options: ExecuteOptions): string;
+}
+
+export interface ExecuteOptions {
+  language: string;
+}
+
+// defaultExecutor can be replaced with an external service, etc
+export let defaultExecutor: CodeExecutor = {
+  execute: (source: string, options: ExecuteOptions): string => {
+    if (options.language !== "javascript") {
+      return `Unsupported language: ${options.language}`;
+    }
+    return JSON.stringify(window.eval(source));
+  }
+}
+
+
+
+@component
+export class CodeBlock {
+  code: string;
+
+  constructor() {
+    this.code = "";
+  }
+
+  childrenView() {
+    return CodeEditor;
+  }
+
+  handleIcon(collapsed: boolean = false): any {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="node-bullet">
+        <polyline points="16 18 22 12 16 6"></polyline>
+        <polyline points="8 6 2 12 8 18"></polyline>
+      </svg>
+    );
+  }
+
+  static initialize(workbench: Workbench) {
+    workbench.commands.registerCommand({
+      id: "make-code-snippet",
+      title: "Make Code Snippet",
+      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();
+        ctx.node.addComponent(com);
+        ctx.node.changed();
+        workbench.workspace.setExpanded(ctx.path.head, ctx.path.node, true);
+      }
+    });
+  }
+
+}
+
+
+const CodeEditor = {
+  oncreate({dom, attrs: {path}}) {
+    const snippet = path.node.getComponent(CodeBlock);
+    dom.jarEditor = new window.CodeJar(dom, (editor) => {
+      // highlight.js does not trim old tags,
+      // let's do it by this hack.
+      editor.textContent = editor.textContent;
+      window.hljs.highlightBlock(editor);
+    });
+    dom.jarEditor.updateCode(snippet.code);
+    dom.jarEditor.onUpdate(code => {
+      snippet.code = code;
+      path.node.changed();
+    });
+  },
+
+  view({attrs: {workbench, path}}) {
+    // this cancels the keydown on the outline node
+    // so you can use arrow keys normally
+    const onkeydown = (e) => e.stopPropagation();
+    
+    return (
+      <div class="code-editor" onkeydown={onkeydown}></div>
+    )
+  }
+}

lib/com/iframe.tsx

@@ -0,0 +1,63 @@
+import { component } from "../model/components.ts";
+import { Node } from "../model/mod.ts";
+
+@component
+export class InlineFrame {
+  url: string;
+
+  constructor() {
+    this.url = "https://example.com";
+  }
+
+  childrenView() {
+    return InlineFrameView;
+  }
+  handleIcon(collapsed: boolean = false): any {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="node-bullet">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="2" y1="12" x2="22" y2="12"></line>
+        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+      </svg>
+    );
+  }
+
+
+  static initialize(workbench: Workbench) {
+    workbench.commands.registerCommand({
+      id: "make-iframe",
+      title: "Make Inline Frame",
+      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 frame = new InlineFrame();
+        if (ctx.node.name.startsWith("http://") ||
+            ctx.node.name.startsWith("https://")) {
+          frame.url = ctx.node.name;
+          ctx.node.addComponent(frame);
+          workbench.defocus();
+          ctx.node.name = ctx.node.name.replaceAll("https://", "").replaceAll("http://");
+          workbench.workspace.setExpanded(ctx.path.head, ctx.node, true);
+          workbench.focus(ctx.path);
+        }
+        
+      }
+    });
+  }
+
+}
+
+const InlineFrameView = {
+  view({attrs: {path}}) {
+    const iframe = path.node.getComponent(InlineFrame);
+    return (
+      <div class="iframe-view">
+        <iframe src={iframe.url} style={{width: "100%", height: "500px", border: "0", marginLeft: "-0.5rem"}}></iframe>
+      </div>
+    )
+  }
+}

lib/com/page.tsx

@@ -19,9 +19,10 @@
 import { Path, Workbench } from "./workbench/mod.ts";
 import { App } from "./ui/app.tsx";
 import { Backend } from "./backend/mod.ts";
+import { CodeBlock } from "./com/codeblock.tsx";
+import { InlineFrame } from "./com/iframe.tsx";
 import { SmartNode } from "./com/smartnode.tsx";
 import { Checkbox } from "./com/checkbox.tsx";
-import { Page } from "./com/page.tsx";
 import { TextField } from "./com/textfield.tsx";
 import { Clock } from "./com/clock.tsx";
 import { Tag } from "./com/tag.tsx";
@@ -56,13 +57,14 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
   [
     Clock,
     TextField,
-    Page,
     Document,
     Checkbox,
     Tag,
     Template,
     SmartNode,
     Description,
+    InlineFrame,
+    CodeBlock,
   ].forEach(com => {
     if (com.initialize) {
       com.initialize(workbench);

lib/mod.ts

@@ -1,6 +1,5 @@
 import { OutlineEditor } from "./outline.tsx";
 import { NodeEditor } from "./node/editor.tsx";
-import { Page } from "../com/page.tsx";
 
 export const Panel = {
   view({ attrs }) {
@@ -24,10 +23,6 @@ export const Panel = {
       workbench.panels = [path];
       workbench.context.path = path;
     }
-    const editMarkdown = (e) => {
-      node.getComponent(Page).markdown = e.target.value;
-      node.changed();
-    }
     function calcHeight(value = "") {
       let numberOfLineBreaks = (value.match(/\n/g) || []).length;
       // min-height + lines x line-height + padding + border
@@ -64,20 +59,6 @@ export const Panel = {
         <div class="title-node" oncontextmenu={(e) => workbench.showMenu(e, { node, path })} data-menu="node">
           <NodeEditor workbench={workbench} path={path} disallowEmpty={true} />
         </div>
-        {(node.hasComponent(Page)) ?
-          <textarea oninput={editMarkdown}
-            value={node.getComponent(Page).markdown}
-            placeholder="Enter Markdown text here"
-            style={{
-              marginLeft: "var(--padding)",
-              padding: "var(--padding)",
-              outline: "0",
-              height: `${calcHeight(node.getComponent(Page).markdown)}px`,
-              border: "0",
-            }}>
-            {node.getComponent(Page).markdown}
-          </textarea>
-          : null}
         <OutlineEditor workbench={workbench} path={path.sub()} alwaysShowNew={true} />
       </div>
     </div>