feat: add examples/templates when adding a new tab

Author: LuLaValva

src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts

@@ -0,0 +1,70 @@
+export default [
+  {
+    name: "counter",
+    content: `/**
+ * This component leverages Marko's controllable pattern!
+ *
+ * To hoist the value out when using it, you can optionally
+ * bind a value like this:
+ * \`\`\`
+ * <let/myCount=0>
+ * <counter value:=myCount/>
+ * \`\`\`
+ */
+
+<let/count:=input.value>
+<button onClick() { count++ }>
+  \${count}
+</button>
+`,
+  },
+  {
+    name: "let-localstorage",
+    content: `/**
+ * This can be used just like any other \`<let>\` tag, except
+ * the value is synced over \`localStorage\` so it stays
+ * constant after a page reload!
+ * 
+ * Just add a \`key=\` attribute:
+ * \`\`\`
+ * <let-localstorage/count=0 key="my-count"/>
+ * \`\`\`
+ */
+
+<let/internalValue=input.value>
+
+<script>
+  const existingValue = localStorage.getItem(input.key);
+  if (existingValue) {
+    internalValue = JSON.parse(existingValue);
+  }
+  const handleStorageChange = (e) => {
+    if (e.key === input.key) {
+      internalValue = JSON.parse(e.newValue ?? "");
+    }
+  };
+  window.addEventListener(
+    "local-storage-update",
+    (e) => handleStorageChange(e.detail),
+    {
+      signal: $signal,
+    },
+  );
+</script>
+
+<return=internalValue valueChange(newValue) {
+  const stringified = JSON.stringify(newValue);
+  localStorage.setItem(input.key, stringified);
+  window.dispatchEvent(
+    new CustomEvent("local-storage-update", {
+      detail: {
+        key: input.key,
+        newValue: stringified,
+        storageArea: localStorage,
+      },
+    }),
+  );
+}>
+`,
+  },
+];

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko

@@ -1,6 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import type { File } from "app/util/workspace";
 import * as styles from "./tabs.style.module.scss";
+import EXAMPLE_TEMPLATES from "./examples"
 export interface Input {
   files: File[];
   filesChange: (files: File[]) => void;
@@ -10,53 +11,53 @@ export interface Input {
 
 let/tabs:=input.files
 let/selected:=input.selected
+let/editingIndex=-1
 
 div class=styles.tabs
   div class=styles.files
     for|tab, i| of=tabs
       const/isSelected=selected === i
       const/isEditable=i !== 0
-      let/editing=false valueChange=(isEditable ? undefined : () => {})
+      const/isEditing=editingIndex === i
 
       div
         ,aria-selected=isSelected && "true"
         ,tabindex=0
         ,role="button"
         ,onClick() {
-          if (isSelected) {
-            editing = true;
-          } else {
+          if (isSelected && !isEditing) {
+            editingIndex = i;
+          } else if (!isEditing) {
             selected = i;
           }
         }
         ,onKeyPress(e, el) {
           if (e.target === el && (e.key === " " || e.key === "Enter")) {
-            if (isSelected) {
-              editing = true;
-            } else {
+            if (isSelected && !isEditing) {
+              editingIndex = i;
+            } else if (!isEditing) {
               selected = i;
             }
           }
         }
         ,class=styles.tab
-        if=editing
+        if=isEditing
           let/length=(tab.path.length)
           input/$input
             ,value=tab.path
             ,size=length
-            ,onInput() {
-              length = $input().value.length;
+            ,onInput(_, el) {
+              length = el.value.length;
             }
-            ,onBlur() {
-              tabs = tabs.toSpliced(i, 1, { ...tab, path: $input().value });
-              editing = false;
+            ,onBlur(_, el) {
+              tabs = tabs.toSpliced(i, 1, { ...tab, path: el.value });
+              editingIndex = -1;
             }
             ,onKeyPress(e) {
               if (e.key === "Enter") {
-                $input().blur();
-                editing = false;
+                document.querySelector<HTMLElement>(".cm-content")?.focus();
               } else if (e.key === "Escape") {
-                editing = false;
+                editingIndex = -1;
               }
             }
           script --
@@ -77,21 +78,53 @@ div class=styles.tabs
             ,class=styles.close
             -- ×
 
+  id/popoverId
+  
   button
     ,title="Add file"
-    ,onClick() {
-      let filename = prompt(
-        "What filename (extension optional)?",
-        tabs.some((tab) => tab.path === "Tag.marko")
-          ? `Tag${tabs.length}`
-          : "Tag",
-      );
+    ,popovertarget=popoverId
+    ,class=styles.add
+    ,onClick(_, btn) {
+      const { top, right } = btn.getBoundingClientRect();
+      $popover().style.top = `${top}px`;
+      $popover().style.right = `${innerWidth - right}px`;
+    }
+    fa-icon=faPlus
 
-      if (filename) {
-        if (!filename.includes(".")) filename += ".marko";
-        tabs = [...tabs, { path: filename, content: "" }];
-        selected = tabs.length - 1;
+  div/$popover
+    ,id=popoverId
+    ,class=styles.popover
+    ,popover
+    ,role="menu"
+    ,onFocusOut(e) {
+      if (!$popover().contains(e.relatedTarget as Node)) {
+        $popover().hidePopover();
       }
     }
-    ,class=styles.add
-    fa-icon=faPlus
+    
+    button
+      ,role="menuitem"
+      ,autofocus
+      ,onClick() {
+        const newIndex = tabs.length;
+        tabs = [...tabs, { 
+          path: `Tag${tabs.filter(t => /^Tag\d*\.marko$/.test(t.path)).length || ""}.marko`, 
+          content: "" 
+        }];
+        selected = newIndex;
+        editingIndex = newIndex;
+      }
+      ,class=styles.templateButton
+      -- Blank
+    
+    for|template| of=EXAMPLE_TEMPLATES
+      if=!tabs.some(({ path }) => path === template.name + ".marko")
+        button
+          ,role="menuitem"
+          ,onClick() {
+            selected = tabs.length;
+            tabs = [...tabs, { path: template.name + ".marko", content: template.content }];
+            document.querySelector<HTMLElement>(".cm-content")?.focus();
+          }
+          ,class=styles.templateButton
+          -- ${`<${template.name}>`}

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss

@@ -43,10 +43,9 @@
   color: var(--color-blue);
   background-color: var(--color-gray-dim);
   align-items: center;
-  border: 1px solid transparent;
+
   &:hover {
     background-color: var(--color-gray-alt-dim);
-    // color: var(--color-gray-dim);
   }
 
   svg {
@@ -56,3 +55,24 @@
     }
   }
 }
+
+.popover {
+  inset: unset;
+  max-width: 95vw;
+  background-color: var(--color-gray-alt-dim);
+  border: 1px solid var(--color-gray-alt);
+  border-radius: 0.25rem;
+}
+
+.templateButton {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  background-color: transparent;
+  border: none;
+  text-align: left;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-gray-dim);
+  }
+}