JavaScript Smart Paste Button

Overview

The JavaScript Smart Paste Button is an AI-powered enhancement of Syncfusion’s Button component, enabling intelligent clipboard pasting with contextual accuracy and proper formatting to boost productivity.

AI-enhanced clipboard

The Smart Paste Button scans clipboard content before pasting to ensure relevance to the current context, eliminating manual formatting. It automatically detects form fields (<input>, <select>, <textarea>) within your <form> elements and generates descriptions from associated <label> tags, name attributes, or nearby text.

Annotating form fields

Enhance AI precision by customizing form component attributes, allowing you to provide specific instructions for the language model. This results in more accurate and context-aware field values.

```html
<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123." />

<textarea data-smartpaste-description="The job description should begin with the job title in all caps, followed by a paragraph of text."></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />
```

Inherited features

Since it’s built on top of Syncfusion’s JavaScript Button component, the Smart Paste Button inherits all the features of the Button component, including predefined styles, icons, and customizable styling.

Built-in themes

The JavaScript Smart Paste Button control supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by overriding SASS variables or using the Theme Studio application.

• Theme Studio application

Other supported frameworks

The Smart Paste Button control is also available in Blazor, React, Angular, and Vue frameworks. Check out the different Smart Paste Button platforms from the links below:

• Blazor Smart Paste Button

• React Smart Paste Button

• Angular Smart Paste Button

• Vue Smart Paste Button

Web accessibility

• Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Bases UI element visuals, such as foreground color, background color, line spacing, text, and images, on WCAG 2.0 standards.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

JavaScript Smart Paste Button code example

Get started with the JavaScript Smart Paste Button (HTML5 Button) using just a few lines of HTML and TS code, as demonstrated below. Also explore our JavaScript Smart Paste Button example that shows you how to render and configure the Smart Paste Button in JavaScript.

<div>
    <!--Element which is going to render-->
    <button id="smart-paste">Smart Paste</button>
</div>

import { SmartPasteButton } from '@syncfusion/ej2-buttons';

// Initialize SmartPasteButton control.
let button: SmartPasteButton = new SmartPasteButton({
  content: 'Smart Paste',
  iconCss: "e-icons e-paste",
  aiAssistHandler: serverAIRequest
});
// Render initialized SmartPasteButton.
button.appendTo('#smart-paste');