fix: paste markdown (#5235)

Async in html paste broke markdown because await was missing in onPaste.

Author: TrySound

apps/builder/app/shared/copy-paste/init-copy-paste.ts

@@ -5,8 +5,8 @@ import {
 } from "../nano-states";
 import { instanceText, instanceJson } from "./plugin-instance";
 import { html } from "./plugin-html";
-import * as markdown from "./plugin-markdown";
-import * as webflow from "./plugin-webflow/plugin-webflow";
+import { markdown } from "./plugin-markdown";
+import { webflow } from "./plugin-webflow/plugin-webflow";
 import { builderApi } from "../builder-api";
 
 const isTextEditing = (event: ClipboardEvent) => {
@@ -64,6 +64,7 @@ const validateClipboardEvent = (event: ClipboardEvent) => {
 };
 
 export type Plugin = {
+  name: string;
   mimeType: string;
   onCopy?: () => undefined | string;
   onCut?: () => undefined | string;
@@ -109,7 +110,7 @@ const initPlugins = ({
     }
   };
 
-  const handlePaste = (event: ClipboardEvent) => {
+  const handlePaste = async (event: ClipboardEvent) => {
     if (validateClipboardEvent(event) === false) {
       return;
     }
@@ -118,7 +119,7 @@ const initPlugins = ({
       // this shouldn't matter, but just in case
       event.preventDefault();
       const data = event.clipboardData?.getData(mimeType).trim();
-      if (data && onPaste?.(data)) {
+      if (data && (await onPaste?.(data))) {
         break;
       }
     }

apps/builder/app/shared/copy-paste/plugin-html.ts

@@ -4,10 +4,12 @@ import { denormalizeSrcProps } from "./asset-upload";
 import type { Plugin } from "./init-copy-paste";
 
 export const html: Plugin = {
+  name: "html",
   mimeType: "text/plain",
   onPaste: async (html: string) => {
     let fragment = generateFragmentFromHtml(html);
     fragment = await denormalizeSrcProps(fragment);
-    return insertWebstudioFragmentAt(fragment);
+    const result = insertWebstudioFragmentAt(fragment);
+    return result;
   },
 };

apps/builder/app/shared/copy-paste/plugin-instance.ts

@@ -225,13 +225,15 @@ const onCut = () => {
 };
 
 export const instanceText: Plugin = {
+  name: "instance-text",
   mimeType: "text/plain",
   onCopy,
   onCut,
   onPaste,
 };
 
 export const instanceJson: Plugin = {
+  name: "instance-json",
   mimeType: "application/json",
   onPaste,
 };

apps/builder/app/shared/copy-paste/plugin-markdown.ts

@@ -3,8 +3,7 @@ import { micromark } from "micromark";
 import { insertWebstudioFragmentAt } from "../instance-utils";
 import { denormalizeSrcProps } from "./asset-upload";
 import { generateFragmentFromHtml } from "../html";
-
-export const mimeType = "text/plain";
+import type { Plugin } from "./init-copy-paste";
 
 const parse = (clipboardData: string) => {
   const html = micromark(clipboardData, "utf-8", {
@@ -23,13 +22,17 @@ const parse = (clipboardData: string) => {
   return fragment;
 };
 
-export const onPaste = async (clipboardData: string) => {
-  let fragment = parse(clipboardData);
-  if (fragment === undefined) {
-    return false;
-  }
-  fragment = await denormalizeSrcProps(fragment);
-  return insertWebstudioFragmentAt(fragment);
+export const markdown: Plugin = {
+  name: "markdown",
+  mimeType: "text/plain",
+  onPaste: async (clipboardData: string) => {
+    let fragment = parse(clipboardData);
+    if (fragment === undefined) {
+      return false;
+    }
+    fragment = await denormalizeSrcProps(fragment);
+    return insertWebstudioFragmentAt(fragment);
+  },
 };
 
 export const __testing__ = {

apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.ts

@@ -19,11 +19,10 @@ import { builderApi } from "~/shared/builder-api";
 import { denormalizeSrcProps } from "../asset-upload";
 import { nanoHash } from "~/shared/nano-hash";
 import { findAvailableVariables } from "~/shared/data-variables";
+import type { Plugin } from "../init-copy-paste";
 
 const { toast } = builderApi;
 
-export const mimeType = "application/json";
-
 const toWebstudioFragment = async (wfData: WfData) => {
   const fragment: WebstudioFragment = {
     children: [],
@@ -165,7 +164,7 @@ const parse = (clipboardData: string) => {
   console.error(result.error.message);
 };
 
-export const onPaste = async (clipboardData: string) => {
+const onPaste = async (clipboardData: string) => {
   const project = $project.get();
   const wfData = parse(clipboardData);
   if (wfData === undefined || project === undefined) {
@@ -211,6 +210,12 @@ export const onPaste = async (clipboardData: string) => {
   return true;
 };
 
+export const webflow: Plugin = {
+  name: "webflow",
+  mimeType: "application/json",
+  onPaste,
+};
+
 export const __testing__ = {
   toWebstudioFragment,
 };