Merge pull request #93 from estruyf/poc/animations

v1.1.0

Author: estruyf

.vscode/settings.json

@@ -15,4 +15,7 @@
     "demoTime.previousEnabled": true,
     "demoTime.showClock": true,
     "demoTime.timer": 10,
+    "exportall.config.relExclusion": [
+        "/src/preview/webcomponents/BaseShapeComponent.ts"
+    ],
 }

package-lock.json

@@ -602,6 +602,7 @@
     "glob": "^10.3.10",
     "handlebars": "^4.7.8",
     "jsonc-parser": "^3.3.1",
+    "mermaid": "^11.6.0",
     "mlly": "^1.7.4",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
@@ -622,6 +623,7 @@
     "ts-loader": "^9.5.1",
     "tsup": "^8.0.1",
     "typescript": "^5.2.2",
+    "uuid": "^11.1.0",
     "vfile-matter": "^5.0.0",
     "vscrui": "^0.2.0-beta.1229608",
     "webpack": "^5.97.1",

package.json

@@ -13,6 +13,7 @@ export interface IMarkdownProps {
   filePath?: string;
   content?: string;
   vsCodeTheme: any;
+  isDarkTheme: boolean;
   webviewUrl: string | null;
   updateTheme: (theme: string) => void;
   updateLayout: (layout: string) => void;
@@ -23,6 +24,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
   filePath,
   content,
   vsCodeTheme,
+  isDarkTheme,
   webviewUrl,
   updateTheme,
   updateLayout,
@@ -140,9 +142,9 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
   React.useEffect(() => {
     if (content && content !== prevContent) {
       // Passing the theme here as it could be that the theme has been updated
-      setMarkdown(twoColumnFormatting(content), [[rehypePrettyCode, { theme: vsCodeTheme ? vsCodeTheme : {} }]]);
+      setMarkdown(twoColumnFormatting(content), [[rehypePrettyCode, { theme: vsCodeTheme ? vsCodeTheme : {} }]], isDarkTheme);
     }
-  }, [content, vsCodeTheme]);
+  }, [content, vsCodeTheme, isDarkTheme]);
 
   if (!isReady) {
     return null;
@@ -152,21 +154,17 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     return null;
   }
 
-  if (template) {
-    return (
-      <>
-        {customTheme && <link href={customTheme} rel="stylesheet" />}
-
-        <div key={filePath} className={`slide__content__custom ${transition || ""}`} dangerouslySetInnerHTML={{ __html: template }} />
-      </>
-    );
-  }
-
   return (
     <>
       {customTheme && <link href={customTheme} rel="stylesheet" />}
 
-      <div key={filePath} className={`slide__content__inner ${transition || ""}`}>{markdown}</div>
+      {
+        template ? (
+          <div key={filePath} className={`slide__content__custom ${transition || ""}`} dangerouslySetInnerHTML={{ __html: template }} />
+        ) : (
+          <div key={filePath} className={`slide__content__inner ${transition || ""}`}>{markdown}</div>
+        )
+      }
     </>
   );
 };

src/preview/components/Markdown.tsx

@@ -27,7 +27,7 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
   const slideRef = React.useRef<HTMLDivElement>(null);
   const [mousePosition, setMousePosition] = React.useState<{ x: number; y: number } | null>(null);
   const { cursorVisible, resetCursorTimeout } = useCursor();
-  const { vsCodeTheme } = useTheme();
+  const { vsCodeTheme, isDarkTheme } = useTheme();
   const { scale } = useScale(ref, slideRef);
 
   const messageListener = (message: MessageEvent<EventData<any>>) => {
@@ -110,6 +110,7 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
                       filePath={crntFilePath}
                       content={content}
                       vsCodeTheme={vsCodeTheme}
+                      isDarkTheme={isDarkTheme}
                       webviewUrl={webviewUrl}
                       updateTheme={setTheme}
                       updateLayout={setLayout}

src/preview/components/MarkdownPreview.tsx

@@ -20,6 +20,7 @@ export type UseRemarkOptions = {
 
 export const useRemark = ({
   onError = () => { },
+  // rehypePlugins = [[rehypeMermaid, { strategy: "inline-svg" }]],
   rehypePlugins = [],
   rehypeReactOptions,
   remarkParseOptions,
@@ -31,7 +32,7 @@ export const useRemark = ({
     reactContent: ReactElement | null,
     metadata: SlideMetadata | null,
   }>,
-  setMarkdown: (source: string, customPlugins?: PluggableList) => void,
+  setMarkdown: (source: string, customPlugins?: PluggableList, isDark?: boolean) => void,
   getMarkdown: (contents: string) => string,
   getFrontMatter: (contents: string) => string,
   matter: null | SlideMetadata,
@@ -44,27 +45,28 @@ export const useRemark = ({
    *
    * @param source - The Markdown source string to process.
    * @param customPlugins - An optional list of custom plugins to extend the processing pipeline.
+   * @param isDark - A boolean indicating if the dark mode is enabled.
    * @returns An object containing:
    * - `reactContent`: The processed React element representation of the Markdown content.
    * - `metadata`: Extracted frontmatter metadata from the Markdown file, if available.
    * 
    * @throws Will call the `onError` handler if an error occurs during processing.
    */
-  const processMarkdown = async (source: string, customPlugins?: PluggableList): Promise<{
+  const processMarkdown = async (source: string, customPlugins?: PluggableList, isDark?: boolean): Promise<{
     reactContent: ReactElement | null,
     metadata: SlideMetadata | null,
   }> => {
     try {
-      const vfile = await transformMarkdown(source, remarkParseOptions, remarRehypeOptions, remarkPlugins, [...rehypePlugins, ...(customPlugins || [])], rehypeReactOptions);
+      const vfile = await transformMarkdown(source, remarkParseOptions, remarRehypeOptions, remarkPlugins, [...rehypePlugins, ...(customPlugins || [])], rehypeReactOptions, { isWebComponent: true, isDark });
       return vfile;
     } catch (err) {
       onError(err as Error);
       return { reactContent: null, metadata: null };
     }
   };
 
-  const setMarkdownSource = useCallback((source: string, customPlugins?: PluggableList) => {
-    processMarkdown(source, customPlugins).then(({ reactContent, metadata }) => {
+  const setMarkdownSource = useCallback((source: string, customPlugins?: PluggableList, isDark?: boolean) => {
+    processMarkdown(source, customPlugins, isDark).then(({ reactContent, metadata }) => {
       setReactContent(reactContent);
       setMetadata(metadata);
     });

src/preview/hooks/useRemark.tsx

@@ -3,9 +3,10 @@ import { useState, useEffect } from 'react';
 import { WebViewMessages } from '../../constants';
 import { usePrevious } from './usePrevious';
 
-export default function useTheme(options?: any) {
+export default function useTheme() {
   const [theme, setTheme] = useState('');
   const prevTheme = usePrevious(theme);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
   const [vsCodeTheme, setVsCodeTheme] = useState('');
 
   const getThemeName = () => {
@@ -17,16 +18,18 @@ export default function useTheme(options?: any) {
   });
 
   const getVsCodeTheme = () => {
+    const themeType = document.body.getAttribute(`data-vscode-theme-kind`);
+    setIsDarkTheme(themeType?.includes('dark') || false);
 
     messageHandler.request<any | null>(WebViewMessages.toVscode.getTheme, getThemeName()).then((theme) => {
       if (theme === null) {
         // Check if light or dark theme
-        const elm = document.body.getAttribute(`data-vscode-theme-kind`);
-        if (elm === 'vscode-light') {
+        const themeType = document.body.getAttribute(`data-vscode-theme-kind`);
+        if (themeType === 'vscode-light') {
           setVsCodeTheme("github-light");
-        } else if (elm === 'vscode-dark') {
+        } else if (themeType === 'vscode-dark') {
           setVsCodeTheme("github-dark");
-        } else if (elm === 'vscode-high-contrast') {
+        } else if (themeType === 'vscode-high-contrast') {
           setVsCodeTheme("github-dark-high-contrast");
         } else {
           setVsCodeTheme("github-light-high-contrast");
@@ -53,6 +56,7 @@ export default function useTheme(options?: any) {
   }, []);
 
   return {
-    vsCodeTheme
+    vsCodeTheme,
+    isDarkTheme
   };
 }

src/preview/hooks/useTheme.tsx

@@ -9,10 +9,7 @@ import './themes/unnamed.css';
 import './themes/monomi.css';
 import './themes/quantum.css';
 import './themes/frost.css';
-import './webcomponents/Show';
-import './webcomponents/Arrow';
-import './webcomponents/Rectangle';
-import './webcomponents/Circle';
+import './webcomponents';
 
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;

src/preview/index.tsx

@@ -84,8 +84,7 @@ class ArrowComponent extends BaseShapeComponent {
           height="540"
           style={{
             position: 'absolute',
-            top: 0,
-            left: 0,
+            inset: 0,
             pointerEvents: 'none'
           }}
         >

src/preview/webcomponents/Arrow.tsx

@@ -0,0 +1,112 @@
+import mermaid, { RenderResult } from 'mermaid';
+import * as React from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { htmlDecode } from '../../utils/htmlDecode';
+import { v4 as uuidv4 } from "uuid";
+
+export interface MermaidProps {
+  graphData?: string;
+  id: string;
+  dark: boolean;
+}
+
+export const Mermaid: React.FC<MermaidProps> = ({ graphData, id, dark }) => {
+  const [element, setElement] = useState<HTMLDivElement>();
+  const [render_result, setRenderResult] = useState<RenderResult>();
+
+  const updateDiagramRef = useCallback((elem: HTMLDivElement) => {
+    if (!elem) {
+      return;
+    }
+    setElement(elem);
+  }, []);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: true,
+      logLevel: 5,
+      darkMode: dark,
+      theme: dark ? 'dark' : 'default',
+    });
+  }, [dark]);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+    if (!render_result?.svg) {
+      return;
+    }
+
+    element.innerHTML = render_result.svg;
+    render_result.bindFunctions?.(element);
+  }, [element, render_result]);
+
+  useEffect(() => {
+    if (graphData?.length === 0) {
+      return;
+    }
+
+    (async () => {
+      try {
+        const rr = await mermaid.render(`${id}-svg`, graphData as string);
+        setRenderResult(rr);
+      } catch (e: any) {
+        console.log(`Error rendering mermaid diagram: ${(e as Error).message}`,);
+      }
+    })();
+  }, [graphData]);
+
+  return (
+    <div
+      ref={updateDiagramRef}
+      id={id}
+    />
+  );
+};
+
+export class MermaidComponent extends HTMLElement {
+  private root: ShadowRoot | null = null;
+  private rootElm: Root | null = null;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.root = this.attachShadow({ mode: 'open' });
+    const mountPoint = document.createElement('div');
+    this.root.appendChild(mountPoint);
+    this.rootElm = createRoot(mountPoint);
+    this.renderComponent();
+  }
+
+  renderComponent() {
+    if (this.rootElm) {
+      const id = this.getAttribute('id') || uuidv4();
+      const code = this.getAttribute('code') || '';
+      const dark = this.hasAttribute('dark');
+
+      this.rootElm.render(
+        <Mermaid graphData={htmlDecode(code)} id={id} dark={dark} />
+      );
+    }
+  }
+
+  attributeChangedCallback() {
+    this.renderComponent();
+  }
+
+  static get observedAttributes() {
+    return ['id', 'code', 'dark'];
+  }
+
+  disconnectedCallback() {
+    if (this.rootElm) {
+      this.rootElm.unmount();
+    }
+  }
+}
+
+customElements.define('dt-mermaid', MermaidComponent);