Add \includegraphics support

Author: anj1

docs/.vitepress/theme/components/LtxPlayground.vue

@@ -50,11 +50,22 @@ let generator: HtmlGenerator | null = null
 
 function getGenerator() {
   if (typeof document === 'undefined') return null // SSR
+
+  let img_url;
+  if (typeof window === 'undefined'){
+    img_url = '';
+  } else {
+    img_url = window.location.origin + '/img/baboon.jpg';
+  }
+
   if (!generator) {
     generator = new HtmlGenerator({
       hyphenate: true,
       languagePatterns: en,
-      styles: ['css/error.css']
+      styles: ['css/error.css'],
+      image_urls: {
+        'baboon.jpg': img_url
+      }
     })
   }
   return generator

docs/public/img/baboon.jpg

@@ -6,6 +6,8 @@
 \usepackage{calc,pict2e,picture}
 \usepackage{textgreek,textcomp,gensymb,stix}
 
+\usepackage{graphicx}
+
 \setcounter{secnumdepth}{2}
 
 \title{\LaTeX.js Showcase}
@@ -721,6 +723,19 @@ \subsection{An advice}
     \textsl{\textsf{beautiful} it bec\large o\Large m\LARGE e\huge s}.
 \end{center}
 
+\section{Image Support Test}
+
+This is a test of the new image feature.
+The LaTeX code requests \texttt{\textbackslash includegraphics\{image.png\}}. The generator is initialized with a map:
+\texttt{ \{ ‘image.png': ‘https://image/url' \}}.
+
+The result should be the image below:
+
+\begin{center}
+\includegraphics[width=200pt]{baboon.jpg}
+\end{center}
+
+If you see this text but no image, something is wrong.
 
 \appendix
 

docs/showcase.tex

@@ -107,12 +107,15 @@ export class HtmlGenerator extends Generator
 
     img:                "img"
 
-    image:              (width, height, url) ~> ~>
+    image:             (width, height, path) ~> ~>
+                            url = @_options.image_urls?[path] or path
                             el = create @img
-                            el.src = url
-                            el.height = height
-                            el.width = width
-
+                            el.setAttribute "src", url
+                            if width?
+                                el.style.width = if width.value? then width.value else String width
+                            if height?
+                                el.style.height = if height.value? then height.value else String height
+                            el
                             return el
 
     picture:            ~> create @inline, "picture"
@@ -137,15 +140,17 @@ export class HtmlGenerator extends Generator
     #  - hyphenate: boolean, enable or disable automatic hyphenation
     #  - languagePatterns: language patterns object to use for hyphenation if it is enabled (default en)
     #    TODO: infer language from LaTeX preamble and load hypenation patterns automatically
-    #  - styles: array with additional CSS stylesheets
-    #  - precision: precision of numbers in CSS and SVG
+    #  - styles: array with additional CSS stylesheets
+    #  - precision: precision of numbers in CSS and SVG
+    #  - image_urls: a dict mapping image paths (from \includegraphics) to actual image URLs
     (options) ->
         @_options = Object.assign {
             documentClass: "article"
             styles: []
             hyphenate: true
             languagePatterns: h-en
             precision: 3
+            image_urls: {}
         }, options
 
         if @_options.hyphenate
@@ -393,8 +398,9 @@ export class HtmlGenerator extends Generator
         f = document.createDocumentFragment!
         appendChildren f, children
 
-    createImage: (width, height, url) ->
-        @create @image(width, height, url)
+
+    createImage: (width, height, path) ->
+        @create @image(width, height, path)
 
     createPicture: (size, offset, content) ->
         # canvas