How to Type Text After Adding Annotation in React Image Editor

This article explains how to type text immediately after adding a text annotation in the React Image Editor component.

Type Text After Adding Annotation

To allow users to start typing immediately after adding a text annotation, you can programmatically trigger the text editing mode and focus the text area. This is achieved by listening to the shapeChange event and checking if the current shape is of type ‘Text’. If the shape is valid and the action is not ‘apply’, the enableTextEditing() method is called to activate the text editing mode.
A simulated click on the text area (image-editor_textArea) ensures that the input field is focused, allowing the user to start typing without any additional interaction. A short delay using setTimeout ensures the DOM is ready before executing these actions.

Code Snippet

const shapeChange = (args) => {
   setTimeout(() => {
     const settings = args?.currentShapeSettings;
     if (
       settings?.type === 'Text' &&
       settings?.id &&
       args?.name === 'shapeChange' &&
       args?.action !== 'apply'
     ) {
       imgObj.current.enableTextEditing();
       document.getElementById('image-editor_textArea')?.click();
     }
   }, 100);
 };
 return (
   <div className="control-pane">
             <ImageEditorComponent
               id="image-editor"
               ref={imgObj}
               shapeChange={shapeChange}
             ></ImageEditorComponent>
   </div>
 ); 

Output

Sample

Live Sample on StackBlitz

Conclusion

I hope you enjoyed learning about how to type text after adding Annotation in React Image Editor.

You can refer to our React Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Image Editor Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Image Editor and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!