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

import { gfm, gfmHtml } from "micromark-extension-gfm";
import { micromark } from "micromark";
import { insertWebstudioFragmentAt } from "../instance-utils/insert";
import { denormalizeSrcProps } from "./asset-upload";
import { generateFragmentFromHtml } from "../html";
import type { Plugin } from "./copy-paste";
import { builderApi } from "../builder-api";
import { breakpointPasteLimitWarning } from "@webstudio-is/project-build/runtime/breakpoints";

const parse = (clipboardData: string) => {
  const html = micromark(clipboardData, "utf-8", {
    extensions: [gfm()],
    htmlExtensions: [gfmHtml()],
  });
  const { skippedSelectors: _skipped, ...fragment } =
    generateFragmentFromHtml(html);
  const instances = new Map(fragment.instances.map((item) => [item.id, item]));
  for (const instance of fragment.instances) {
    if (instance.tag === "img") {
      delete instance.tag;
      instance.component = "Image";
    }
  }
  fragment.instances = Array.from(instances.values());
  return fragment;
};

const handlePasteMarkdown = async (clipboardData: string) => {
  let fragment = parse(clipboardData);
  if (fragment === undefined) {
    return false;
  }
  fragment = await denormalizeSrcProps(fragment);
  return insertWebstudioFragmentAt(fragment, undefined, undefined, {
    onBreakpointLimitMerge: () => {
      builderApi.toast.warn(breakpointPasteLimitWarning);
    },
  });
};

export const markdown: Plugin = {
  name: "markdown",
  mimeType: "text/plain",
  onPaste: handlePasteMarkdown,
};

export const __testing__ = {
  parse,
};