feat(plugin): Add LizardTypst for real-time Typst rendering

sdkjs-plugins/content/lizardtypst/3rd-Party.txt

@@ -0,0 +1,8 @@
+This plugin uses the following third-party libraries, which are included in the plugin's vendor directory:
+
+- **@myriaddreamin/typst.ts**: https://github.com/Myriad-Dreamin/typst.ts
+  - License: MIT
+- **@myriaddreamin/typst-ts-web-compiler**: https://github.com/Myriad-Dreamin/typst.ts
+  - License: MIT
+- **@myriaddreamin/typst-ts-renderer**: https://github.com/Myriad-Dreamin/typst.ts
+  - License: MIT

sdkjs-plugins/content/lizardtypst/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 0.1.0 (2025-12-17)
+
+- Initial release
+- Allows inserting Typst mathematical formulas as SVG images
+- Real-time rendering preview
+- History of Typst code changes
+- Added store configuration and assets
+- Added localization support
+- Updated plugin structure to meet marketplace requirements

sdkjs-plugins/content/lizardtypst/README.md

@@ -0,0 +1,39 @@
+# LizardTypst Plugin
+
+A simple plugin for ONLYOFFICE that allows you to insert Typst mathematical formulas as high-quality SVG images, powered by the `typst.ts` library.
+
+This plugin is compatible with [self-hosted](https://github.com/ONLYOFFICE/DocumentServer) and [desktop](https://github.com/ONLYOFFICE/DesktopEditors) versions of ONLYOFFICE editors. It can be added to ONLYOFFICE instances manually.
+
+## Motivation
+
+The LizardTypst plugin draws inspiration from the existing **Iguana LaTeX** plugin. Our goal is to provide a modern and accessible solution for Typst users by leveraging the benefits of Typst directly within ONLYOFFICE, without requiring complex local setups.
+
+## Features
+
+- **Real-time Rendering**: See a live preview of the rendered Typst formula as you type. This provides an immediate and interactive editing experience.
+- **No Local Installation Required**: Unlike solutions that depend on server-side rendering or local LaTeX/Typst installations, LizardTypst utilizes `typst.ts` to compile Typst code directly in your browser. This means you don't need any additional software installed on your machine to use the plugin.
+- **SVG-based Rendering**: Inserts formulas as scalable vector graphics, ensuring high quality at any zoom level.
+
+## Powered By
+
+This plugin leverages the power of [typst.ts](https://github.com/myriaddreamin/typst.ts), a powerful TypeScript library for compiling and rendering Typst code directly in the browser using WebAssembly.
+
+## Vendored Dependencies
+
+This plugin uses a vendored (self-hosted) version of `typst.ts` to ensure offline functionality.
+- **`@myriaddreamin/typst.ts`**: `0.6.1-rc5`
+
+## How to use
+
+1. Go to the **Plugins** tab in the ONLYOFFICE editor.
+2. Click on the **LizardTypst** icon to open the plugin window.
+3. Enter your Typst code in the input area on the left. A preview will be generated on the right.
+4. Once you are satisfied with the result, click the **Insert** button to place the image into your document.
+
+## How to install
+
+Detailed instructions for plugin installation can be found in the official [ONLYOFFICE API documentation](https://api.onlyoffice.com/docs/plugin-and-macros/tutorials/installing/onlyoffice-docs-on-premises/).
+
+## User feedback and support
+
+To ask questions and share feedback, please use the **Issues** section in the repository where this plugin is located.

sdkjs-plugins/content/lizardtypst/build.bat

@@ -0,0 +1,9 @@
+@echo off
+set PLUGIN_NAME=lizardtypst
+echo Building %PLUGIN_NAME%.plugin...
+if not exist deploy mkdir deploy
+if exist deploy\%PLUGIN_NAME%.plugin del deploy\%PLUGIN_NAME%.plugin
+powershell -Command "Compress-Archive -Path config.json,index.html,README.md,CHANGELOG.md,scripts,resources,translations -DestinationPath deploy\%PLUGIN_NAME%.zip -Force"
+move /Y deploy\%PLUGIN_NAME%.zip deploy\%PLUGIN_NAME%.plugin >nul
+echo Done! Created deploy\%PLUGIN_NAME%.plugin
+dir deploy\%PLUGIN_NAME%.plugin | find "%PLUGIN_NAME%"

sdkjs-plugins/content/lizardtypst/config.json

@@ -0,0 +1,82 @@
+{
+  "name": "LizardTypst",
+  "nameLocale": {
+    "cs-CS": "LizardTypst",
+    "de-DE": "LizardTypst",
+    "en-US": "LizardTypst",
+    "en-ES": "LizardTypst",
+    "fr-FR": "LizardTypst",
+    "it-IT": "LizardTypst",
+    "ja-JA": "LizardTypst",
+    "pt-BR": "LizardTypst",
+    "ru-RU": "LizardTypst",
+    "zh-ZH": "LizardTypst"
+  },
+  "guid": "asc.{F8B5E3A1-9C7D-4E2F-A1B3-5D8E9F0A1C2D}",
+  "version": "0.1.0",
+  "minVersion": "8.2.0",
+  "variations": [
+    {
+      "description": "Insert Typst mathematical formulas as SVG",
+      "descriptionLocale": {
+        "cs-CS": "Insert Typst mathematical formulas as SVG",
+        "de-DE": "Einfügen von mathematischen Typst-Formeln als SVG",
+        "en-US": "Insert Typst mathematical formulas as SVG",
+        "en-ES": "Insert Typst mathematical formulas as SVG",
+        "fr-FR": "Insérer des formules mathématiques Typst sous forme de SVG",
+        "it-IT": "Inserisci le formule matematiche di Typst come SVG",
+        "ja-JA": "Typstの数学をSVGとして挿入",
+        "pt-BR": "Inserir fórmulas matemáticas Typst como SVG",
+        "ru-RU": "Вставляйте математические формулы Typst в виде SVG",
+        "zh-ZH": "将 Typst数学公式作为SVG插入"
+      },
+      "url": "index.html",
+      "icons": "resources/%theme-type%(dark|light)/%scale%(default).%extension%(png)",
+      "icons2": [
+        {
+          "style": "light",
+          "100%": { "normal": "resources/light/icon.png" },
+          "125%": { "normal": "resources/light/icon@1.25x.png" },
+          "150%": { "normal": "resources/light/icon@1.5x.png" },
+          "175%": { "normal": "resources/light/icon@1.75x.png" },
+          "200%": { "normal": "resources/light/icon@2x.png" }
+        },
+        {
+          "style": "dark",
+          "100%": { "normal": "resources/dark/icon.png" },
+          "125%": { "normal": "resources/dark/icon@1.25x.png" },
+          "150%": { "normal": "resources/dark/icon@1.5x.png" },
+          "175%": { "normal": "resources/dark/icon@1.75x.png" },
+          "200%": { "normal": "resources/dark/icon@2x.png" }
+        }
+      ],
+      "isViewer": false,
+      "EditorsSupport": ["slide"],
+      "isVisual": true,
+      "isModal": true,
+      "initDataType": "text",
+      "buttons": [
+        { "text": "Insert", "primary": true },
+        { "text": "Cancel", "primary": false }
+      ],
+      "size": [800, 600],
+      "store": {
+        "background": {
+          "light": "#F5F5F5",
+          "dark": "#444444"
+        },
+        "screenshots": [
+          "resources/store/screenshots/screenshot1.png",
+          "resources/store/screenshots/screenshot2.png",
+          "resources/store/screenshots/screenshot3.png",
+          "resources/store/screenshots/screenshot4.png"
+        ],
+        "icons": {
+          "light": "resources/store/icons",
+          "dark": "resources/store/icons"
+        },
+        "categories": ["specAbilities", "work"]
+      }
+    }
+  ]
+}

sdkjs-plugins/content/lizardtypst/index.html

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Typst Math</title>
+        <script src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
+        <script src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
+        <link
+            rel="stylesheet"
+            href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css"
+        />
+        <script
+            type="module"
+            src="scripts/vendor/all-in-one-lite.bundle.js"
+            id="typst"
+        ></script>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family: Arial, sans-serif;
+                padding: 20px;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .panel {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+            }
+
+            #preview-panel {
+                flex: 2;
+            }
+
+            label {
+                font-weight: bold;
+                margin-bottom: 8px;
+                display: block;
+            }
+
+            #input {
+                flex: 1;
+                font-family: monospace;
+                padding: 10px;
+                border: 1px solid #ccc;
+                resize: none;
+            }
+
+            #preview {
+                width: 100%; /* Fill width of parent */
+                height: 300px; /* Constant height */
+                border: 1px solid #ccc;
+                padding: 20px;
+                background: #f9f9f9;
+                overflow: auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            #preview svg {
+                width: 100%;
+                height: 100%;
+                object-fit: contain; /* Maintain aspect ratio within fixed dimensions */
+            }
+
+            #error {
+                color: red;
+                padding: 10px;
+                visibility: hidden; /* Use visibility instead of display to reserve space */
+            }
+
+            /* Custom Dropdown Styles */
+            #history-container {
+                margin-bottom: 15px;
+                position: relative;
+            }
+
+            .custom-dropdown-list {
+                display: none;
+                position: absolute;
+                background-color: #f9f9f9;
+                min-width: 100%;
+                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+                z-index: 1;
+                max-height: 200px;
+                overflow-y: auto;
+                border: 1px solid #ddd;
+            }
+
+            .custom-dropdown-list div {
+                color: black;
+                padding: 8px 12px;
+                text-decoration: none;
+                display: block;
+                cursor: pointer;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .custom-dropdown-list div:hover {
+                background-color: #f1f1f1;
+            }
+
+            .custom-dropdown-header {
+                padding: 8px 12px;
+                border: 1px solid #ccc;
+                background-color: #fff;
+                color: black;
+                cursor: pointer;
+            }
+
+            /* Tooltip Styles */
+            #preview-tooltip {
+                display: none;
+                position: fixed;
+                border: 1px solid #ccc;
+                background-color: white;
+                padding: 10px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+                z-index: 1000;
+                max-width: 300px;
+                max-height: 300px;
+                pointer-events: none; /* So it doesn't interfere with mouse events */
+            }
+            #preview-tooltip svg {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="error"></div>
+        <div id="history-container"></div>
+        <div class="panel">
+            <label for="input">Typst Code:</label>
+            <textarea id="input"></textarea>
+        </div>
+        <div class="panel" id="preview-panel">
+            <label>Preview:</label>
+            <div id="preview">Type formula to preview...</div>
+        </div>
+        <div id="preview-tooltip"></div>
+        <script src="scripts/renderer.js"></script>
+        <script src="scripts/slide-inserter.js"></script>
+        <script src="scripts/history.js"></script>
+        <script src="scripts/ui.js"></script>
+        <script src="scripts/script.js"></script>
+    </body>
+</html>