[Copilot]

Converts cliparea.jsx to TypeScript to enforce compile-time prop validation and improve code maintainability.

Changes

Type definitions added:

• ClipAreaProps - All component props with explicit types for clipboard operation callbacks
• ClipboardData - Structure for clipboard data with MIME type keys
• ClipAreaListeners - Event handler types for DOM events

Component updates:

• Class members annotated with access modifiers and types
• Method signatures include explicit return types
• Event handlers typed with DOM event types (MouseEvent, ClipboardEvent, KeyboardEvent)
• Browser compatibility handling via type assertions for legacy window.clipboardData

Example:

interface ClipAreaProps {
  formats: string[];
  focused: () => boolean;
  onCopy: () => Promise<ClipboardData | null | undefined>;
  onCut: () => Promise<ClipboardData | null | undefined>;
  onPaste: (data: ClipboardItem[] | ClipboardData, isSmarts?: boolean) => Promise<void>;
  onLegacyCut: () => ClipboardData | null | undefined;
  onLegacyPaste: (data: ClipboardData, isSmarts?: boolean) => void;
  target?: HTMLElement;
}

Removed type suppression in AppClipArea.tsx as it's no longer needed with proper TypeScript definitions.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor: Variables are missing in props validation (let's rewrite JS to TS) 16</issue_title>
<issue_description>Problem: Variables are missing in props validation
React components should validate prop types

Why is this an issue?
In JavaScript, props are typically passed as plain objects, which can lead to errors and confusion when working with components that have specific prop requirements. However, it lacks of type safety and clarity when passing props to components in a codebase.

By defining types for component props, developers can enforce type safety and provide clear documentation for the expected props of a component. This helps catch potential errors at compile-time. It also improves code maintainability by making it easier to understand how components should be used and what props they accept.

How can I fix it?
Let re-write the entire file on TypeScript and define types for all props.

Problem locations:
packages/ketcher-react/src/script/ui/component/cliparea/cliparea.jsx</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refactor: Variables are missing in props validation (let's rewrite JS to TS) 16 #8624

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.