Fixes #110 rich text paste

deno.lock

@@ -7,9 +7,12 @@
     "https://cdn.jsdelivr.net/gh/hexagon/croner@4/src/pattern.js": "d3851d7fa4ac7924ee88c52d4c2cbc116bb1db2ba9f1ddfde1a1ceb43b252fe5",
     "https://cdn.jsdelivr.net/gh/hexagon/croner@4/src/tz.js": "571924b447ae5b5e4417d4d927c7b81b16d5b9ba7262b714ec4c67a7be2495ff",
     "https://cdn.skypack.dev/-/@guyplusplus/turndown-plugin-gfm@v1.0.7-1pclU4qPmBDDAEF7mMiO/dist=es2019,mode=imports/optimized/@guyplusplus/turndown-plugin-gfm.js": "6b3da979a47d01025fb45e51a48d3abbb49a04cf50ce9fc4fab490662179eb46",
+    "https://cdn.skypack.dev/-/@joplin/turndown-plugin-gfm@v1.0.45-L6MsMZF7C7qnOgh4rjyE/dist=es2019,mode=imports/optimized/@joplin/turndown-plugin-gfm.js": "a463330992575824d6f3325594a1b8c220867d55f79ff6f4e07d3fd0aac6115c",
     "https://cdn.skypack.dev/-/turndown-plugin-gfm@v1.0.2-weEbQCj1BIFDzbi2rPor/dist=es2019,mode=imports/optimized/turndown-plugin-gfm.js": "2ab734ad251538cb26981a341bd0b28995dafead4b7b50428119a612ab6aa0af",
     "https://cdn.skypack.dev/-/turndown@v7.1.1-VIg5Mi398SyAWes2nQHX/dist=es2019,mode=imports/optimized/turndown.js": "ad4113f3456cf3b5d9a99cc9b1e33cc46852e93509787cf2f860cc29b854b7e5",
     "https://cdn.skypack.dev/@guyplusplus/turndown-plugin-gfm@1.0.7": "ad462076bd61d90c17e4f82f595ff071f6143c750da73f1ee583021654f76707",
+    "https://cdn.skypack.dev/@joplin/turndown-plugin-gfm": "da6a05ebfb1c9940f7cfb6f1dff4f8b62e9e0febf91ec2cbcff41f587928a0a9",
+    "https://cdn.skypack.dev/@joplin/turndown-plugin-gfm@1.0.45": "da6a05ebfb1c9940f7cfb6f1dff4f8b62e9e0febf91ec2cbcff41f587928a0a9",
     "https://cdn.skypack.dev/turndown-plugin-gfm@1.0.2": "d2b1e4fc582c730067046f2803a6802e6ffb791fcee9290a271df547660315d7",
     "https://cdn.skypack.dev/turndown@7.1.1": "ed362a5826027fe3de4748e649837d3b6d677c6036abe471bdbf7640ce5edfaf",
     "https://deno.land/std@0.131.0/_deno_unstable.ts": "23a1a36928f1b6d3b0170aaa67de09af12aa998525f608ff7331b9fb364cbde6",

web/editor_paste.ts

@@ -3,6 +3,30 @@ import { safeRun } from "../plugos/util.ts";
 import { maximumAttachmentSize } from "../common/types.ts";
 import { Editor } from "./editor.tsx";
 
+// We use turndown to convert HTML to Markdown
+import TurndownService from "https://cdn.skypack.dev/turndown@7.1.1";
+
+// With tables and task notation as well
+import {
+  tables,
+  taskListItems,
+} from "https://cdn.skypack.dev/@joplin/turndown-plugin-gfm@1.0.45";
+const turndownService = new TurndownService({
+  hr: "---",
+  codeBlockStyle: "fenced",
+  headingStyle: "atx",
+  emDelimiter: "*",
+  bulletListMarker: "*", // Duh!
+  strongDelimiter: "**",
+  linkStyle: "inlined",
+});
+turndownService.use(taskListItems);
+turndownService.use(tables);
+
+function striptHtmlComments(s: string): string {
+  return s.replace(/<!--[\s\S]*?-->/g, "");
+}
+
 const urlRegexp =
   /^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
 
@@ -68,6 +92,28 @@ export function attachmentExtension(editor: Editor) {
     },
     paste: (event: ClipboardEvent) => {
       const payload = [...event.clipboardData!.items];
+      const richText = event.clipboardData?.getData("text/html");
+      if (richText) {
+        const markdown = striptHtmlComments(turndownService.turndown(richText))
+          .trim();
+        const view = editor.editorView!;
+        const selection = view.state.selection.main;
+        console.log("Rich text", markdown);
+        view.dispatch({
+          changes: [
+            {
+              from: selection.from,
+              to: selection.to,
+              insert: markdown,
+            },
+          ],
+          selection: {
+            anchor: selection.from + markdown.length,
+          },
+          scrollIntoView: true,
+        });
+        return true;
+      }
       if (!payload.length || payload.length === 0) {
         return false;
       }

website/CHANGELOG.md

@@ -3,6 +3,12 @@ release.
 
 ---
 
+## 0.1.5
+
+* Rich text paste: paste content from web pages, google docs, including tables and SB will make a best effort to convert it to Markdown. Implemented using [turndown](https://github.com/mixmark-io/turndown). Probably can use some tweaking, but it's something.
+
+---
+
 ## 0.1.4
 
 * Breaking change (for those who used it): the named anchor syntax has changed from `@anchorname` to `$anchorname`. This is to avoid conflicts with potentialy future use of `@` for other purposes (like mentioning people). Linking to an anchor still uses the `[[page@anchorname]]` syntax. So, you create an anchor $likethis you can then reference it [[@likethis]].