vzcode 2.3.0 → 2.4.0

package/src/client/CodeEditor/rainbowBrackets.ts

@@ -0,0 +1,122 @@
+import {
+  EditorView,
+  Decoration,
+  ViewPlugin,
+} from '@codemirror/view';
+
+function generateColors() {
+  return ['red', 'orange', 'yellow', 'green'];
+}
+
+let isRainbowEnabled = true;
+
+export const toggleRainbowBrackets = (enabled: boolean) => {
+  isRainbowEnabled = enabled;
+};
+
+const rainbowBracketsPlugin = ViewPlugin.fromClass(
+  class {
+    decorations;
+
+    constructor(view) {
+      this.decorations = this.getBracketDecorations(view);
+    }
+
+    update(update) {
+      if (
+        update.docChanged ||
+        update.selectionSet ||
+        update.viewportChanged
+      ) {
+        this.decorations = this.getBracketDecorations(
+          update.view,
+        );
+      }
+    }
+
+    getBracketDecorations(view) {
+      const { doc } = view.state;
+      const decorations = [];
+      const stack = [];
+      const colors = generateColors();
+
+      for (let pos = 0; pos < doc.length; pos += 1) {
+        const char = doc.sliceString(pos, pos + 1);
+        if (char === '(' || char === '[' || char === '{') {
+          stack.push({ type: char, from: pos });
+        } else if (
+          char === ')' ||
+          char === ']' ||
+          char === '}'
+        ) {
+          const open = stack.pop();
+          if (
+            open &&
+            open.type === this.getMatchingBracket(char)
+          ) {
+            const color =
+              colors[stack.length % colors.length];
+            const bracketClass = isRainbowEnabled
+              ? `rainbow-bracket-${color}`
+              : `default-bracket`;
+
+            decorations.push(
+              Decoration.mark({
+                class: bracketClass,
+              }).range(open.from, open.from + 1),
+              Decoration.mark({
+                class: bracketClass,
+              }).range(pos, pos + 1),
+            );
+          }
+        }
+      }
+
+      decorations.sort(
+        (a, b) =>
+          a.from - b.from || a.startSide - b.startSide,
+      );
+
+      return Decoration.set(decorations);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getMatchingBracket(closingBracket) {
+      switch (closingBracket) {
+        case ')':
+          return '(';
+        case ']':
+          return '[';
+        case '}':
+          return '{';
+        default:
+          return null;
+      }
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+export default function rainbowBrackets() {
+  return [
+    rainbowBracketsPlugin,
+    EditorView.baseTheme({
+      '.rainbow-bracket-red': { color: 'white' },
+      '.rainbow-bracket-red > span': { color: 'white' },
+      '.rainbow-bracket-orange': { color: '#FFFFB2' },
+      '.rainbow-bracket-orange > span': {
+        color: '#FFFFB2',
+      },
+      '.rainbow-bracket-yellow': { color: '#FFB2DA' },
+      '.rainbow-bracket-yellow > span': {
+        color: '#FFB2DA',
+      },
+      '.rainbow-bracket-green': { color: '#B2FFB2' },
+      '.rainbow-bracket-green > span': { color: '#B2FFB2' },
+      '.default-bracket': { color: 'currentColor' },
+      '.default-bracket > span': { color: 'currentColor' },
+    }),
+  ];
+}

package/src/client/CodeEditor/style.scss

@@ -0,0 +1,156 @@
+.vz-code-editor {
+  flex: 1;
+  display: flex;
+  font-family: var(--vzcode-font-family);
+  overflow-x: auto;
+
+  .cm-editor {
+    flex: 1;
+    width: 100%;
+  }
+
+  .cm-scroller {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+  }
+
+  .remote-cursor-username {
+    transition: opacity 1s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+
+  .cm-tooltip-lint {
+    max-width: 500px;
+  }
+
+  /* Style the completion tooltip container */
+  .cm-tooltip.cm-tooltip-autocomplete {
+    border: 1px solid #888;
+    background-color: #1f2022;
+  }
+
+  /* Style the individual completion items */
+  .cm-tooltip-autocomplete .cm-completionLabel {
+    color: #bdc7dc;
+  }
+
+  /* Style the selected completion item */
+  .cm-tooltip-autocomplete
+    .cm-completionLabel
+    .cm-completion-active {
+    background-color: #0077cc;
+    color: white;
+  }
+
+  .cm-line {
+    font-family: var(--vzcode-font-family);
+  }
+
+  .tooltip_hover_circle {
+    color: white;
+    text-align: center;
+    position: fixed;
+    background-color: black;
+    padding: 5px;
+    border-radius: 5px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .tooltip_hover_circle strong {
+    font-size: 14px;
+  }
+
+  .tooltip_hover_circle div {
+    font-size: 12px;
+  }
+
+  .cm-panel.cm-search {
+    padding: 5px;
+    position: relative;
+    background-color: var(--vh-color-neutral-01);
+    border-radius: 6px;
+    color: var(--vh-color-neutral-04);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  }
+
+  .cm-panels {
+    background-color: #333338;
+    color: var(--vh-color-neutral-04);
+    border: 2px solid var(--vh-color-neutral-02);
+    border-radius: 6px;
+  }
+
+  .cm-textfield {
+    background-color: var(--vh-color-neutral-01);
+    color: #efe7dc;
+    border: 1px solid var(--vh-color-neutral-04);
+    padding: 8px;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+
+  .cm-button {
+    background-color: var(--vh-color-neutral-01);
+    border: 1px solid #193350;
+    color: var(--vh-color-neutral-04);
+    border: 1px solid var(--vh-color-neutral-04);
+    border-radius: 5px;
+    padding: 6px 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .cm-button:hover {
+    background-color: #50c878;
+    color: #ffffff;
+    transform: scale(1.1);
+  }
+
+  .cm-button:active {
+    background-color: #202e46;
+    transform: scale(0.95);
+  }
+
+  .cm-searchMatch {
+    background-color: rgba(255, 255, 0, 0.5);
+    border-radius: 2px;
+  }
+
+  .cm-searchMatch-selected {
+    background-color: rgba(255, 140, 0, 0.5);
+    border: 2px solid #ff8800;
+    border-radius: 2px;
+  }
+  .cm-panel.cm-search [name='close'] {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    background-color: var(--vh-color-neutral-01);
+    color: var(--vh-color-neutral-04);
+    border: none;
+    font: inherit;
+    padding: 4px 8px;
+    margin: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .cm-panel.cm-search [name='close']:hover {
+    background-color: var(--vh-color-caution-01);
+    color: #ffffff;
+  }
+
+  .cm-panel.cm-search [name='close']:active {
+    background-color: var(--vh-color-caution-02);
+    transform: scale(0.95);
+  }
+}

package/src/client/CodeEditor/typescriptExtension/worker.ts

@@ -0,0 +1,32 @@
+import {
+  createDefaultMapFromCDN,
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+} from '@typescript/vfs';
+import ts from 'typescript';
+import * as Comlink from 'comlink';
+
+// When importing this module, typescript says that it "cannot find the module or its corresponding type declarations"
+// However, when this file is used as a web worker, no error occurs.
+// As a result, this error is suppressed to avoid future confusion.
+// @ts-expect-error
+import { createWorker } from '@valtown/codemirror-ts/worker';
+
+Comlink.expose(
+  createWorker(async function () {
+    const fsMap = await createDefaultMapFromCDN(
+      { target: ts.ScriptTarget.ES2022 },
+      '3.7.3',
+      false,
+      ts,
+    );
+    const system = createSystem(fsMap);
+    const compilerOpts = {};
+    return createVirtualTypeScriptEnvironment(
+      system,
+      [],
+      ts,
+      compilerOpts,
+    );
+  }),
+);

package/src/client/CodeErrorOverlay/index.tsx

@@ -0,0 +1,77 @@
+import { useState, useCallback, useEffect } from 'react';
+import { VizContent } from '@vizhub/viz-types';
+import { CloseSVG } from '../Icons';
+import './style.scss';
+
+const enableErrorDismiss = true;
+
+export const CodeErrorOverlay = ({
+  errorMessage,
+  content,
+}: {
+  errorMessage: string | null;
+  content: VizContent;
+}) => {
+  // console.log(
+  //   'errorMessage in CodeErrorOverlay: ',
+  //   errorMessage,
+  // );
+  const [isOverlayVisible, setIsOverlayVisible] =
+    useState(true);
+
+  // If errorMessage changes, set the overlay to be visible
+  useEffect(() => {
+    if (errorMessage !== null) {
+      setIsOverlayVisible(true);
+    }
+  }, [errorMessage]);
+
+  // If the content changes, set the overlay to be not visible.
+  // Removed because it was interfering in the case of
+  // server-side build errors on page load.
+  // useEffect(() => {
+  //   setIsOverlayVisible(false);
+  // }, [content]);
+
+  // Set the visibility state to false when the button is clicked
+  const handleCloseClick = useCallback(() => {
+    setIsOverlayVisible(false);
+  }, []);
+
+  // If the user presses the escape key, close the overlay.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleCloseClick();
+      }
+    };
+    document.addEventListener(
+      'keydown',
+      handleKeyDown,
+      true,
+    );
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      document.removeEventListener(
+        'keydown',
+        handleKeyDown,
+        true,
+      );
+    };
+  }, [handleCloseClick]);
+
+  return isOverlayVisible && errorMessage !== null ? (
+    <div className="vz-code-error-overlay">
+      <pre>{errorMessage}</pre>
+      {enableErrorDismiss ? (
+        <i
+          className="icon-button icon-button-dark error-dismiss-button"
+          onClick={handleCloseClick}
+        >
+          <CloseSVG />
+        </i>
+      ) : null}
+    </div>
+  ) : null;
+};

package/src/client/CodeErrorOverlay/style.scss

@@ -0,0 +1,33 @@
+.vz-code-error-overlay {
+  color: var(--vh-color-neutral-04);
+  background: var(--vh-color-neutral-01);
+  opacity: 0.9;
+  border-left: 4px solid var(--vh-color-warning-01);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 12px;
+  /* Right padding is so that the wrapped text
+     doesn't overlap with the .error-dismiss-button */
+  padding: 14px 38px 14px 16px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+
+  /* Style the monospace font */
+  pre {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+    margin: 0;
+
+    /* Wrap long lines */
+    white-space: pre-wrap;
+  }
+
+  /* Customize the dismiss button style */
+  .error-dismiss-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+}

package/src/client/Fonts/fonts.ts

@@ -0,0 +1,8 @@
+export const fonts = [
+  'Roboto Mono',
+  'Inconsolata',
+  'Source Code Pro',
+  'Ubuntu Mono',
+  'JetBrains Mono',
+  'Fira Code',
+];

package/src/client/Icons/AdjustmentSVG.tsx

@@ -0,0 +1,19 @@
+//From Hero Icons
+export const AdjustmentSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="size-6"
+    width={32}
+    height={32}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
+    />
+  </svg>
+);

package/src/client/Icons/BugSVG.tsx

@@ -0,0 +1,20 @@
+// From Heroicons
+export const BugSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/CloseSVG.tsx

@@ -0,0 +1,19 @@
+export const CloseSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M6 18L18 6M6 6L18 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/CssSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const CssSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M4.192 3.143h15.615l-1.42 16.034-6.404 1.812-6.369-1.813L4.192 3.143zM16.9 6.424l-9.8-.002.158 1.949 7.529.002-.189 2.02H9.66l.179 1.913h4.597l-.272 2.62-2.164.598-2.197-.603-.141-1.569h-1.94l.216 2.867L12 17.484l3.995-1.137.905-9.923z" />
+    </svg>
+  );
+};

package/src/client/Icons/DirectoryArrowSVG.tsx

@@ -0,0 +1,19 @@
+export const DirectoryArrowSVG = ({
+  height = 16,
+  fill = 'currentcolor',
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox={'4 4 16 16'}
+  >
+    <path
+      stroke={fill}
+      fill="none"
+      d="M8 17l9-5-9-5v10z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

package/src/client/Icons/EditSVG.tsx

@@ -0,0 +1,19 @@
+export const EditSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/FileSVG.tsx

@@ -0,0 +1,19 @@
+export const FileSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/FolderSVG.tsx

@@ -0,0 +1,20 @@
+// From Heroicons
+export const FolderSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/GearSVG.tsx

@@ -0,0 +1,16 @@
+export const GearSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+  >
+    <path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" />
+    <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+  </svg>
+);

package/src/client/Icons/HtmlSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const HtmlSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M4.136 3.012h15.729l-1.431 16.15-6.451 1.826-6.414-1.826-1.433-16.15zm5.266 7.302l-.173-2.035 7.533.002.173-1.963-9.87-.002.522 5.998h6.835l-.243 2.566-2.179.602-2.214-.605-.141-1.58H7.691l.247 3.123L12 17.506l4.028-1.08.558-6.111H9.402v-.001z" />
+    </svg>
+  );
+};

package/src/client/Icons/JavaScriptSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const JavaScriptSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M3 3h18v18H3V3zm16.525 13.707c-.131-.821-.666-1.511-2.252-2.155-.552-.259-1.165-.438-1.349-.854-.068-.248-.078-.382-.034-.529.113-.484.687-.629 1.137-.495.293.09.563.315.732.676.775-.507.775-.507 1.316-.844-.203-.314-.304-.451-.439-.586-.473-.528-1.103-.798-2.126-.775l-.528.067c-.507.124-.991.395-1.283.754-.855.968-.608 2.655.427 3.354 1.023.765 2.521.933 2.712 1.653.18.878-.652 1.159-1.475 1.058-.607-.136-.945-.439-1.316-1.002l-1.372.788c.157.359.337.517.607.832 1.305 1.316 4.568 1.249 5.153-.754.021-.067.18-.528.056-1.237l.034.049zm-6.737-5.434h-1.686c0 1.453-.007 2.898-.007 4.354 0 .924.047 1.772-.104 2.033-.247.517-.886.451-1.175.359-.297-.146-.448-.349-.623-.641-.047-.078-.082-.146-.095-.146l-1.368.844c.229.473.563.879.994 1.137.641.383 1.502.507 2.404.305.588-.17 1.095-.519 1.358-1.059.384-.697.302-1.553.299-2.509.008-1.541 0-3.083 0-4.635l.003-.042z" />
+    </svg>
+  );
+};

package/src/client/Icons/JsonSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const JsonSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M5 3h2v2H5v5a2 2 0 01-2 2 2 2 0 012 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 00-2-2H0v-2h1a2 2 0 002-2V5a2 2 0 012-2m14 0a2 2 0 012 2v4a2 2 0 002 2h1v2h-1a2 2 0 00-2 2v4a2 2 0 01-2 2h-2v-2h2v-5a2 2 0 012-2 2 2 0 01-2-2V5h-2V3h2m-7 12a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m-4 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m8 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1z" />
+    </svg>
+  );
+};

package/src/client/Icons/MarkdownSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const MarkdownSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35 1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35-1.92-2.35H4.89v6.38h1.92M19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28L19.69 12z" />
+    </svg>
+  );
+};