feat: sheet parser for drop-paste feature

Author: hongjr03

editors/vscode/package.json

@@ -1172,6 +1172,7 @@
     "test": "rimraf test-dist/ && tsc -p tsconfig.test.json && node test-dist/test/runTests.js"
   },
   "dependencies": {
+    "cheerio": "^1.0.0",
     "cpr": "^3.0.1",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "node-fetch": "^3.3.2",

editors/vscode/src/features/drop-paste.ts

@@ -15,6 +15,7 @@ import {
   typstPasteUriEditKind,
   Schemes,
 } from "./drop-paste.def";
+import { convertHtmlToTypst } from "./html-table-converter";
 
 export function dragAndDropActivate(context: vscode.ExtensionContext) {
   context.subscriptions.push(
@@ -58,7 +59,7 @@ class DropOrPasteContext<A extends DropPasteAction> {
     private context: vscode.DocumentPasteEditContext | undefined,
     private document: vscode.TextDocument,
     private token: vscode.CancellationToken,
-  ) {}
+  ) { }
 
   private readonly _yieldTo = [
     vscode.DocumentDropOrPasteEditKind.Text,
@@ -90,6 +91,19 @@ class DropOrPasteContext<A extends DropPasteAction> {
     dataTransfer: vscode.DataTransfer,
   ): Promise<boolean> {
     {
+      const htmlData = await dataTransfer.get("text/html")?.asString();
+      if (htmlData) {
+        const snippet = await convertHtmlToTypst(htmlData);
+        const additionalEdits = new vscode.WorkspaceEdit();
+        additionalEdits.replace(this.document.uri, ranges[0], snippet);
+        this.resolved.push({
+          snippet: new vscode.SnippetString(""),
+          additionalEdits,
+          yieldTo: [],
+        });
+        return this.wrapRangeAsLinkContent();
+      }
+
       const mediaFiles = await this.takeMediaFiles(dataTransfer);
       if (mediaFiles) {
         const edit = await this.handleMediaFiles(ranges, mediaFiles);
@@ -595,7 +609,7 @@ export class UriList {
 
   constructor(
     public readonly entries: ReadonlyArray<{ readonly uri: vscode.Uri; readonly str: string }>,
-  ) {}
+  ) { }
 }
 
 function coalesce<T>(array: ReadonlyArray<T | undefined | null>): T[] {

editors/vscode/src/features/html-table-converter.ts

@@ -0,0 +1,41 @@
+import * as cheerio from 'cheerio';
+
+export async function convertHtmlToTypst(html: string): Promise<string> {
+    const $ = cheerio.load(html);
+    const table = $('table').first();
+    if (!table.length) {
+        throw new Error('Table element not found. Please check the HTML content.');
+    }
+
+    const rows = table.find('tr');
+    if (!rows.length) {
+        throw new Error('No tr tag found in the table.');
+    }
+
+    const firstRow = rows.first();
+    const firstRowCells = firstRow.find('td, th');
+    const columnCount = firstRowCells.toArray().reduce((count, cell) => {
+        const colspanAttr = $(cell).attr('colspan');
+        return count + (Number(colspanAttr) || 1);
+    }, 0);
+
+    let out = `#table(\n  columns: ${columnCount},\n`;
+
+    rows.each((_, rowElem) => {
+        out += '  ';
+        const row = $(rowElem);
+        const cells = row.find('td, th');
+        cells.each((_, cellElem) => {
+            const cell = $(cellElem);
+            const rowspan = Number(cell.attr('rowspan')) || 1;
+            const colspan = Number(cell.attr('colspan')) || 1;
+            const spanOpts =
+                `${rowspan > 1 ? `rowspan: ${rowspan}, ` : ''}${colspan > 1 ? `colspan: ${colspan}, ` : ''}`;
+            const content = cell.text().trim();
+            out += spanOpts ? `table.cell(${spanOpts})[${content}], ` : `[${content}], `;
+        });
+        out += '\n';
+    });
+
+    return out + ')';
+}

yarn.lock

@@ -1298,7 +1298,7 @@ cheerio-select@^2.1.0:
     domhandler "^5.0.3"
     domutils "^3.0.1"
 
-cheerio@^1.0.0-rc.9:
+cheerio@^1.0.0, cheerio@^1.0.0-rc.9:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0.tgz#1ede4895a82f26e8af71009f961a9b8cb60d6a81"
   integrity sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==