Customize the Find and Replace component from the Editor

[Youniss]

Hello,

We are using the Find and Replace component from the Editor and we would like to have a supplementary feature.

When the "Find and Replace" dialog is already open, we would like to click on the "Find and Replace" button in the Editor toolbar to close it.

The goal would be to close and re-open the dialog even if the user has moved it outside the visible part of the screen.

We have looked for ways to achieve this, but it doesn't seem possible to customize the "Find and Replace" button.

Do you plan on implementing a way to customize the "Find and Replace" component in the future?

Regards

[Konstantin Dikov]

Hi Youniss,

It is possible to customize the FindAndReplace component, but changing the click behavior of the tool icon will not be possible, because the click is handled internally for changing the opened state of the FindAndReplaceDialog:

export interface FindAndReplaceProps extends BasicToolProps, ButtonProps {}

interface FindAndReplaceState {
    showDialog: boolean;
}

const settings = EditorToolsSettings.findAndReplace;

/**
 * @hidden
 */
export class FindAndReplace extends React.Component<FindAndReplaceProps, FindAndReplaceState> {
    /**
     * @hidden
     */
    state = { showDialog: false };

    /**
     * @hidden
     */
    render() {
        const { view, ...buttonProps } = this.props;
        const { props } = settings;
        const localization: LocalizationService = provideLocalizationService(this);
        const titleKey = settings.messages.findReplaceToolTitle;
        const disabled = !view;

        return [
            <Button
                onClick={disabled ? undefined : this.onOpen}
                aria-disabled={disabled ? true : undefined}
                {...onDownPreventDefault}
                title={localization.toLanguageString(titleKey, (messages as any)[titleKey])}
                key="tool"
                {...props}
                {...buttonProps}
                className={classNames(buttonProps.className, props.className, { 'k-disabled': disabled })}
            />,
            this.state.showDialog && view && (
                <FindAndReplaceDialog view={view} onClose={this.onClose} dir={buttonProps.dir} key="dialog" />
            )
        ];
    }

    private onClose = () => this.setState({ showDialog: false });
    private onOpen = () => this.setState({ showDialog: true });
}

registerForLocalization(FindAndReplace);

However, you can try wrapping the FindAndReplace in a span element and handling its click event, you can find the close button of the FindAndReplaceDialog and click it programmatically:

• https://stackblitz.com/edit/react-txpshg-iaypwe?file=app%2Fapp.jsx

For adding a feature request, you can use our feedback portal:

• https://feedback.telerik.com/kendo-react-ui

 

Regards,
Konstantin Dikov
Progress Telerik