Make tab links an explicit action with custom markdown directive

Resolves #88

Author: mikesir87

components/interface/client/package-lock.json

@@ -25,6 +25,7 @@
     "rehype-github-alerts": "^4.1.1",
     "rehype-mermaid": "^3.0.0",
     "rehype-raw": "^7.0.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "sass": "^1.89.2"
   },

components/interface/client/package.json

@@ -1,4 +1,4 @@
-import { createContext, use, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 const TabContext = createContext([]);
 
@@ -7,16 +7,17 @@ export function TabContextProvider({ children }) {
   const [activeTab, setActiveTab] = useState(null);
 
   const addTab = useCallback(
-    (url) => {
-      setTabs((prevTabs) => [...prevTabs, url]);
+    (url, title) => {
+      if (!title) title = url;
+      setTabs((prevTabs) => [...prevTabs, { url, title }]);
       setActiveTab(url);
     },
     [setTabs, setActiveTab],
   );
 
   const removeTab = useCallback(
     (url) => {
-      setTabs((prevTabs) => prevTabs.filter((tab) => tab !== url));
+      setTabs((prevTabs) => prevTabs.filter((tab) => tab.url !== url));
       setActiveTab((prevActiveTab) =>
         prevActiveTab === url ? null : prevActiveTab,
       );
@@ -25,10 +26,12 @@ export function TabContextProvider({ children }) {
   );
 
   const displayLink = useCallback(
-    (url) => {
+    (url, title) => {
+      if (!title) title = url;
+
       setTabs((prevTabs) => {
-        if (!prevTabs.includes(url)) {
-          return [...prevTabs, url];
+        if (!prevTabs.find((tab) => tab.url === url)) {
+          return [...prevTabs, { url, title }];
         }
         return prevTabs;
       });

components/interface/client/src/TabContext.jsx

@@ -1,53 +1,33 @@
 import { IdePlaceholder } from "./IdePlaceholder";
 import { useTabs } from "../../TabContext";
-import Nav from "react-bootstrap/Nav";
-import Button from "react-bootstrap/Button";
 import "./ExternalContentPanel.scss";
-
-function getTabTitle(url) {
-  if (url === "http://localhost:8085") return "VS Code";
-  return url;
-}
+import { ExternalTabs } from "./ExternalTabs";
+import { useRef } from "react";
 
 export function ExternalContentPanel() {
   const { tabs, setActiveTab, activeTab, addTab, removeTab } = useTabs();
+  const iframeRef = useRef();
 
   return (
     <div className="d-flex flex-fill flex-column">
       <div className="p-3 pt-2 pb-0 bg-secondary-subtle">
-        <Nav
-          variant="tabs"
-          activeKey={activeTab}
-          onSelect={(selectedKey) => setActiveTab(selectedKey)}
-          id="external-content-tabs"
-        >
-          {tabs.map((tab) => (
-            <Nav.Item key={tab} className="me-2 ms-2">
-              <Nav.Link eventKey={tab} className="p-1 ps-3 pe-1">
-                <span className="me-3">{getTabTitle(tab)}</span>
-
-                {!tab.endsWith("localhost:8085") && (
-                  <Button
-                    size="sm"
-                    variant="default"
-                    className="rounded-circle p-1 pt-0 pb-0"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      removeTab(tab);
-                    }}
-                  >
-                    &times;
-                  </Button>
-                )}
-              </Nav.Link>
-            </Nav.Item>
-          ))}
-        </Nav>
+        <ExternalTabs
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          tabs={tabs}
+          onTabRemoval={removeTab}
+        />
       </div>
       {activeTab ? (
-        <iframe style={{ flex: 1, border: "none" }} src={activeTab} />
+        <iframe
+          ref={iframeRef}
+          style={{ flex: 1, border: "none" }}
+          src={activeTab}
+        />
       ) : (
-        <IdePlaceholder onLaunch={() => addTab("http://localhost:8085")} />
+        <IdePlaceholder
+          onLaunch={() => addTab("http://localhost:8085", "Workspace")}
+        />
       )}
     </div>
   );

components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.jsx

@@ -9,5 +9,10 @@
       background-color: var(--bs-secondary);
       color: var(--bs-white);
     }
+
+    span {
+      position: relative;
+      top: 1px;
+    }
   }
 }

components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.scss

@@ -0,0 +1,49 @@
+import Nav from "react-bootstrap/Nav";
+import Button from "react-bootstrap/Button";
+
+export function ExternalTabs({
+  activeTab,
+  setActiveTab,
+  tabs,
+  onTabRemoval,
+  onRefreshClick,
+}) {
+  return (
+    <Nav
+      variant="tabs"
+      activeKey={activeTab}
+      onSelect={(selectedKey) => setActiveTab(selectedKey)}
+      id="external-content-tabs"
+    >
+      {tabs.map((tab) => (
+        <Nav.Item key={tab.url} className="me-2 ms-2">
+          <Nav.Link
+            eventKey={tab.url}
+            href={tab.url}
+            className="p-1 ps-3 pe-1"
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <span className="me-3">{tab.title}</span>
+
+            {!tab.title !== "Workspace" && (
+              <Button
+                size="sm"
+                variant="default"
+                className="rounded-circle p-1 pt-0 pb-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onTabRemoval(tab.url);
+                }}
+              >
+                <span className="material-symbols-outlined">close</span>
+              </Button>
+            )}
+          </Nav.Link>
+        </Nav.Item>
+      ))}
+    </Nav>
+  );
+}

components/interface/client/src/components/ExternalContentPanel/ExternalTabs.jsx

@@ -2,23 +2,32 @@ import { MarkdownHooks } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeMermaid from "rehype-mermaid";
+import remarkDirective from "remark-directive";
 import { rehypeGithubAlerts } from "rehype-github-alerts";
 import { CodeBlock } from "./CodeBlock";
 import { remarkCodeIndexer } from "./codeIndexer";
 import { ExternalLink } from "./ExternalLink";
 import { RenderedImage } from "./RenderedImage";
 import { RenderedSvg } from "./RenderedSvg";
+import { tabDirective } from "./reactDirective";
+import { TabLink } from "./TabLink";
 
 export function MarkdownRenderer({ children }) {
   return (
     <MarkdownHooks
-      remarkPlugins={[remarkGfm, remarkCodeIndexer]}
+      remarkPlugins={[
+        remarkGfm,
+        remarkCodeIndexer,
+        remarkDirective,
+        tabDirective,
+      ]}
       rehypePlugins={[rehypeRaw, rehypeMermaid, rehypeGithubAlerts]}
       components={{
         code: CodeBlock,
         a: ExternalLink,
         img: RenderedImage,
         svg: RenderedSvg,
+        tablink: TabLink,
       }}
     >
       {children}

components/interface/client/src/components/WorkshopPanel/markdown/MarkdownRenderer.jsx

@@ -0,0 +1,18 @@
+import { useTabs } from "../../../TabContext";
+
+export function TabLink({ href, title, children }) {
+  const { displayLink } = useTabs();
+
+  return (
+    <a
+      href={href}
+      title={title}
+      onClick={(e) => {
+        e.preventDefault();
+        displayLink(href, title);
+      }}
+    >
+      {children}
+    </a>
+  );
+}

components/interface/client/src/components/WorkshopPanel/markdown/TabLink.jsx

@@ -0,0 +1,38 @@
+// import {h} from 'hastscript'
+import { visit } from "unist-util-visit";
+
+/**
+ * Works with the remark-directive plugin to transform custom directives into
+ * components that can be used by react-markdown.
+ *
+ * To support a custom directive, simply define the React component and add it
+ * to the components prop of MarkdownRenderer. The name of the component must
+ * match the name of the directive.
+ *
+ * @returns
+ */
+export function tabDirective() {
+  /**
+   * @param {Root} tree
+   *   Tree.
+   * @returns {undefined}
+   *   Nothing.
+   */
+  return (tree) => {
+    visit(
+      tree,
+      ["textDirective", "leafDirective", "containerDirective"],
+      (node) => {
+        const data = node.data || (node.data = {});
+
+        // This is what's supposed to work. But "h" was not a function?
+        // const { properties } = h(node.name, node.attributes);
+
+        data.hName = node.name;
+        data.hProperties = {
+          ...node.attributes,
+        };
+      },
+    );
+  };
+}

components/interface/client/src/components/WorkshopPanel/markdown/reactDirective.js

@@ -74,4 +74,16 @@ To add a "Save file" button, use the `save-as=path/to/file.txt` metadata.
 If a user clicks this "Save file" button, a `compose.yaml` file will be created with the following content.
 
 - If the file already exists, the contents will be replaced with what is provided in the code block.
-- All required directories leading up to the file will automatically be created
+- All required directories leading up to the file will automatically be created
+
+
+
+## Links
+
+By default, all links are configured to open new browser tabs when clicked.
+
+If you want to add another tab to the right-hand panel, you can use the following directive:
+
+    ::tabLink[Link text]{href="http://localhost:3000" title="Tab title"}
+
+This will render a link with the visible text of "Link text" pointing to "http://localhost:3000". When clicked, a new tab will be created with the title of "Tab title".