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

import { toastError } from "../error/toast-error";
import {
  $authTokenPermissions,
  $textEditingInstanceSelector,
} from "../nano-states";
import { instanceText, instanceJson } from "./plugin-instance";
import {
  pageText,
  copyFolderData,
  copyPageData,
  copyTemplateData,
  handlePastePage,
} from "./plugin-page";
import { html } from "./plugin-html";
import { jsx } from "./plugin-jsx";
import { markdown } from "./plugin-markdown";
import { webflow } from "./plugin-webflow/plugin-webflow";
import { designTokens } from "./plugin-design-tokens";
import { builderApi } from "../builder-api";
import { readClipboardText } from "../clipboard";
import { $selectedInstance } from "../nano-states";
import { $dataSources, $instances, $resources } from "../sync/data-stores";
import { serverSyncStore } from "../sync/sync-stores";
import { findAvailableVariables } from "@webstudio-is/project-build/runtime";
import { validateDataVariableName } from "~/builder/shared/data-variable-utils";
import {
  deserializeVariable,
  isVariableClipboardData,
} from "./variable-clipboard";

const isTextEditing = (event: ClipboardEvent) => {
  // Text is edited on the Canvas using the default Canvas text editor settings.
  if ($textEditingInstanceSelector.get() != null) {
    return true;
  }

  // Text is edited inside an input, textarea, or contenteditable (i.e. codemirror editor) field.
  if (
    event.target instanceof HTMLInputElement ||
    event.target instanceof HTMLTextAreaElement ||
    (event.target instanceof HTMLElement &&
      event.target.closest("[contenteditable]"))
  ) {
    return true;
  }

  return false;
};

/**
 *
 * # Note:
 * validateClipboardEvent determines when to use default copy/paste behavior or if a WebStudio instance will be copied, pasted, or cut.
 * # How to test:
 * 1. Focus on an input in the style panel (width, style source) or name input in settings. Select the text, then copy and paste any instance in the Navigator tree or on the Canvas.
 * 2. Edit text in a paragraph on the Canvas. Select text (single or multiple lines), then press Cmd+X. The paragraph should not be deleted.
 * 3. Select CSS preview text, then select an instance in the Navigator. Press Cmd+C, then Cmd+V.
 **/
const validateClipboardEvent = (event: ClipboardEvent) => {
  if (event.clipboardData === null) {
    return false;
  }

  if (isTextEditing(event)) {
    return false;
  }

  // Allows native selection of text in the Builder panels, such as CSS preview.
  if (event.type === "copy") {
    const isInBuilderContext = window.self === window.top;
    const selection = window.getSelection();

    if (isInBuilderContext && selection && selection.isCollapsed === false) {
      return false;
    }
  }

  return validateCopyPermission();
};

const validateCopyPermission = () => {
  if ($authTokenPermissions.get().canCopy === false) {
    toastError("Copying has been disabled by the project owner");
    return false;
  }
  return true;
};

export type Plugin = {
  name: string;
  mimeType: string;
  onCopy?: () => undefined | string | Promise<undefined | string>;
  // Delete the source only after writeClipboard confirms the data was saved.
  onCut?: (
    writeClipboard: (data: string) => Promise<boolean>
  ) => undefined | Promise<undefined | string>;
  onPaste?: (data: string) => PasteResult | Promise<PasteResult>;
};

export type PasteResult =
  | { success: true; data: { handled: false } }
  | { success: true; data: { handled: true } }
  | { success: false; error: string };

export const pasteIgnored: PasteResult = {
  success: true,
  data: { handled: false },
};

export const pasteHandled: PasteResult = {
  success: true,
  data: { handled: true },
};

const isPasteHandled = (result: PasteResult) =>
  result.success === false || result.data.handled;

const reportPasteResult = (result: PasteResult) => {
  if (result.success === false) {
    builderApi.toast.error(result.error);
  }
};

const textMimeType = "text/plain";

const variableClipboard: Plugin = {
  name: "variable",
  mimeType: textMimeType,
  onPaste: (text) => {
    if (isVariableClipboardData(text) === false) {
      return pasteIgnored;
    }
    const instance = $selectedInstance.get();
    if (!instance) {
      return pasteHandled;
    }
    try {
      const copied = deserializeVariable(
        text,
        instance.id,
        new Map(
          findAvailableVariables({
            startingInstanceId: instance.id,
            instances: $instances.get(),
            dataSources: $dataSources.get(),
          }).map((variable) => [variable.id, variable])
        )
      );
      const originalName = copied.variable.name;
      let suffix = 2;
      let error = validateDataVariableName(
        copied.variable.name,
        undefined,
        instance.id
      );
      while (error?.type === "duplicate") {
        copied.variable.name = `${originalName} ${suffix++}`;
        error = validateDataVariableName(
          copied.variable.name,
          undefined,
          instance.id
        );
      }
      if (error) {
        return { success: false, error: error.message };
      }
      if (copied.resource) {
        copied.resource.name = copied.variable.name;
      }
      serverSyncStore.createTransaction(
        [$dataSources, $resources],
        (dataSources, resources) => {
          dataSources.set(copied.variable.id, copied.variable);
          if (copied.resource) {
            resources.set(copied.resource.id, copied.resource);
          }
        }
      );
      return pasteHandled;
    } catch (error) {
      return {
        success: false,
        error:
          error instanceof Error ? error.message : "Unable to paste variable",
      };
    }
  },
};

const readClipboardData = (
  mimeTypes: Array<string>,
  clipboardData: null | DataTransfer
) => {
  const dataByMimeType = new Map<string, string>();
  for (const mimeType of mimeTypes) {
    if (dataByMimeType.has(mimeType) === false) {
      dataByMimeType.set(
        mimeType,
        clipboardData?.getData(mimeType).trim() ?? ""
      );
    }
  }
  return dataByMimeType;
};

let pasteClipboardText: undefined | ((text: string) => Promise<void>);

const registerPasteClipboardText = (
  handler: (text: string) => Promise<void>,
  signal: AbortSignal
) => {
  pasteClipboardText = handler;
  signal.addEventListener("abort", () => {
    if (pasteClipboardText === handler) {
      pasteClipboardText = undefined;
    }
  });
};

const validatePasteCommand = () => {
  if ($textEditingInstanceSelector.get() != null) {
    return false;
  }
  return validateCopyPermission();
};

const initPlugins = ({
  plugins,
  signal,
}: {
  plugins: Array<Plugin>;
  signal: AbortSignal;
}) => {
  const handleCopy = (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }

    for (const { mimeType, onCopy } of plugins) {
      const data = onCopy?.();

      if (data instanceof Promise) {
        event.preventDefault();
        void data
          .then((value) => {
            if (value !== undefined) {
              event.clipboardData?.setData(mimeType, value);
            }
            return writeClipboardText(value);
          })
          .catch(() =>
            builderApi.toast.error(
              "Could not prepare the selected content for copying."
            )
          );
        break;
      }
      if (data) {
        // must prevent default, otherwise setData() will not work
        event.preventDefault();
        event.clipboardData?.setData(mimeType, data);
        break;
      }
    }
  };

  const handleCut = (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }
    for (const { onCut } of plugins) {
      const operation = onCut?.(writeClipboardText);
      if (operation !== undefined) {
        event.preventDefault();
        operation.catch(() => {
          builderApi.toast.error("Could not cut the selected content.");
        });
        break;
      }
    }
  };

  const pasteData = async (dataByMimeType: Map<string, string>) => {
    for (const { mimeType, onPaste } of plugins) {
      if (onPaste === undefined) {
        continue;
      }
      const data = dataByMimeType.get(mimeType);
      if (data === undefined || data === "") {
        continue;
      }
      const result = await onPaste(data);
      if (isPasteHandled(result)) {
        reportPasteResult(result);
        break;
      }
    }
  };

  const handlePaste = async (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }
    event.preventDefault();
    await pasteData(
      readClipboardData(
        plugins.map((plugin) => plugin.mimeType),
        event.clipboardData
      )
    );
  };

  const handlePasteText = async (text: string) => {
    if (validatePasteCommand() === false) {
      return;
    }
    await pasteData(new Map([[textMimeType, text.trim()]]));
  };

  document.addEventListener("copy", handleCopy, { signal });
  document.addEventListener("cut", handleCut, { signal });
  // Capture is required so we get the element before content-editable removes it
  // This way we can detect when we are inside content-editable and ignore the event
  document.addEventListener("paste", handlePaste, { capture: true, signal });
  registerPasteClipboardText(handlePasteText, signal);
};

export const initCopyPaste = ({ signal }: { signal: AbortSignal }) => {
  initPlugins({
    plugins: [
      variableClipboard,
      pageText,
      instanceJson,
      instanceText,
      designTokens,
      jsx,
      html,
      markdown,
      webflow,
    ],
    signal,
  });
};

export const initCopyPasteForContentEditMode = ({
  signal,
}: {
  signal: AbortSignal;
}) => {
  const showUnsupportedCopyMessage = () => {
    builderApi.toast.info("This selection cannot be copied here.");
  };

  const showUnsupportedPasteMessage = () => {
    builderApi.toast.info("This clipboard data cannot be pasted here.");
  };

  const showCutDesignModeOnlyMessage = () => {
    builderApi.toast.info("Cutting is allowed in design mode only.");
  };

  const handleCopy = (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }
    const data = instanceText.onCopy?.();
    if (data instanceof Promise) {
      event.preventDefault();
      void data
        .then((value) => {
          if (value !== undefined) {
            event.clipboardData?.setData(instanceText.mimeType, value);
          }
          return writeClipboardText(value);
        })
        .catch(() => undefined);
      return;
    }
    if (data) {
      event.preventDefault();
      event.clipboardData?.setData(instanceText.mimeType, data);
      return;
    }
    showUnsupportedCopyMessage();
  };

  const handlePaste = async (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }
    const dataByMimeType = readClipboardData(
      [instanceJson.mimeType, instanceText.mimeType],
      event.clipboardData
    );
    const jsonData = dataByMimeType.get(instanceJson.mimeType);
    if (jsonData) {
      event.preventDefault();
      const result = await instanceJson.onPaste(jsonData);
      if (isPasteHandled(result)) {
        reportPasteResult(result);
        return;
      }
      showUnsupportedPasteMessage();
      return;
    }
    const textData = dataByMimeType.get(instanceText.mimeType);
    if (textData) {
      event.preventDefault();
      const result = await instanceText.onPaste(textData);
      if (isPasteHandled(result)) {
        reportPasteResult(result);
        return;
      }
      showUnsupportedPasteMessage();
      return;
    }
    showUnsupportedPasteMessage();
  };

  const handlePasteText = async (text: string) => {
    if (validatePasteCommand() === false) {
      return;
    }
    const textData = text.trim();
    if (textData === "") {
      showUnsupportedPasteMessage();
      return;
    }
    const result = await instanceText.onPaste(textData);
    if (isPasteHandled(result)) {
      reportPasteResult(result);
      return;
    }
    showUnsupportedPasteMessage();
  };

  const handleCut = (event: ClipboardEvent) => {
    if (validateClipboardEvent(event) === false) {
      return;
    }
    showCutDesignModeOnlyMessage();
  };

  document.addEventListener("copy", handleCopy, { signal });
  document.addEventListener("cut", handleCut, { signal });
  // Capture is required so we get the element before content-editable removes it
  // This way we can detect when we are inside content-editable and ignore the event
  document.addEventListener("paste", handlePaste, {
    capture: true,
    signal,
  });
  registerPasteClipboardText(handlePasteText, signal);
};

const writeClipboardText = async (
  data: string | undefined | Promise<string | undefined>
) => {
  data = await data;
  if (data && validateCopyPermission()) {
    await navigator.clipboard.writeText(data);
    return true;
  }
  return false;
};

// Public API for programmatic copy/paste/cut operations
export const copyInstance = () => {
  return writeClipboardText(instanceText.onCopy?.());
};

export const copyPage = (pageId: string) => {
  return writeClipboardText(copyPageData(pageId));
};

export const copyFolder = (folderId: string) => {
  return writeClipboardText(copyFolderData(folderId));
};

export const copyTemplate = (templateId: string) => {
  return writeClipboardText(copyTemplateData(templateId));
};

export const pastePage = async (targetFolderId?: string) => {
  const text = await readClipboardText();
  if (text === undefined) {
    return false;
  }
  const result = await handlePastePage(text, targetFolderId);
  reportPasteResult(result);
  return isPasteHandled(result);
};

export const emitPaste = async () => {
  const text = await readClipboardText();
  if (text === undefined) {
    return;
  }
  await pasteClipboardText?.(text);
};

export const cutInstance = async () => {
  await instanceText.onCut?.(writeClipboardText);
};