Smart.Editor Find and Replace
JavaScriptJavaScriptAngularAngularVueVueReactReact

Editor for React

React version of this topic (compatible with React 19+). Keep the same configuration logic from JavaScript and pass it as component props.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import React, { useMemo, useRef } from 'react';
import { Editor } from 'smart-webcomponents-react/editor';
import 'smart-webcomponents-react/source/styles/smart.default.css';

export default function App() {
  const componentRef = useRef(null);
  const componentProps = useMemo(() => ({
    // Copy this topic's JavaScript configuration here.
  }), []);

  return <Editor ref={componentRef} {...componentProps}></Editor>;
}

Use componentRef.current for API methods in this topic.

Editor Find and Replace

Smart.Editor toolbar has many actions that can modify the content. Some of the them are more complex and offer greater capabilities. Such is the Find and Replace feature.

The Find and Replace toolbar actions triggers a dialog window that allows to search for a specific text inside Editor's content. The matches found are displayed inside a list box and can be replaced by another string also defined by the user in a separate text box.

The text matches are highlighted inside the Editor and the user can navigate between the matches via the dialog window.

By default the matching criteria is case insensitive. However there's an additional option to match the case of the search string.

Here's an example:

Editor Find and Replace

The find and replace dialog is triggered by clicking on the the appropriate action inside the Toolbar.

The Find and Replace feature is available only when the editMode is set to HTML (default).

Editor Search Bar

An additional Search bar is also available for users who want to quickly find the desired text inside the Editor's content section.

The search bar is enabled by default and can be triggered via a keyboard combination: Control + F only when the Editor's content section is focused.

The Search bar feature is only avaialble for editMode HTML.

The Search bar is case insensitive and can be disabled via the disableSearchBar.

Here's an example:

Editor Find & Replace

The findAndReplaceTimeout property determines the timeout before the search criteria is applied and the results are displayed. The property is used for both find and replace and search bar features.

For AI tooling

Developer Quick Reference

Topic: editor-find-and-replace   Component: Editor   Framework: React

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: React 19+   API access pattern: const componentRef = useRef(null) + componentRef.current.method()

Lifecycle guidance: Use useMemo for large config objects and call imperative API through componentRef.current after first render.

Common pitfalls:

  • Recreating columns/dataSource objects on every render can reset component state.
  • Calling API methods before ref is available causes runtime errors.
  • Mixing controlled and imperative updates without sync can lead to stale UI.

Validation checklist:

  • Keep config objects memoized when possible.
  • Guard API calls with ref existence checks.
  • Verify CSS theme import is present once per app.