feat: sheet parser for drop-paste feature

Author: hongjr03

editors/vscode/package.json

@@ -1155,6 +1155,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

@@ -1202,7 +1202,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==
@@ -3675,8 +3675,16 @@ stoppable@^1.1.0:
   resolved "https://registry.yarnpkg.com/stoppable/-/stoppable-1.1.0.tgz#32da568e83ea488b08e4d7ea2c3bcc9d75015d5b"
   integrity sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3745,8 +3753,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4224,8 +4238,16 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==