@progress/kendo-react-editor/dialogs/FindReplace.js

React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),R=require("@progress/kendo-react-buttons"),B=require("@progress/kendo-react-dialogs"),k=require("@progress/kendo-react-layout"),w=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),j=require("../config/toolsSettings.js"),P=require("../tools/utils.js"),d=require("@progress/kendo-editor-common"),M=require("@progress/kendo-react-common"),x=require("@progress/kendo-react-inputs"),S=require("@progress/kendo-react-form"),K=require("@progress/kendo-react-labels"),F=require("@progress/kendo-svg-icons");function U(f){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const e in f)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(f,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>f[e]})}}return s.default=f,Object.freeze(s)}const a=U(A),_=13,V=27,H=j.EditorToolsSettings.findAndReplace;let N=class extends a.Component{constructor(s){super(s),this.onTabSelect=e=>{this.setState({selectedTab:e.selected})},this.onClose=()=>{const e=this.props.view,t=e.state,c=t.tr.setSelection(d.TextSelection.create(t.doc,t.selection.from,t.selection.to));e.updateState(t.apply(c)),e.focus(),this.props.onClose.call(void 0)},this.matchesMessage=e=>{const t=this.state.matches,c=this.state.nextMatch;let o=0,i=0;if(t&&c){const n=t.findIndex(r=>r.eq(c));o=n===-1?t.length:n+1,i=t.length}return P.formatString(e,o,i)},this.onFindNext=()=>{this.onFind()},this.onFindPrev=()=>{this.onFind(!0)},this.onFind=(e=!1)=>{const t=this.props.view,{searchText:c,matchCase:o,matchCyclic:i,matchWord:n,useRegExp:r}=this.state,h={text:c,matchWord:n,matchCase:o,useRegExp:r,backward:e,matchCyclic:i},m=d.find(t.state,h);if(m){const u=t.state.tr.setSelection(m);u.scrollIntoView(),t.updateState(t.state.apply(u)),this.setState({nextMatch:m})}},this.onReplace=()=>{const e=this.props.view,t=e.state.selection,{replaceText:c}=this.state;if(!t.empty){const o=t.from,i=o+c.length,n=d.replace(t,c,e.state.tr);n.setSelection(d.TextSelection.create(n.doc,o,i)),n.scrollIntoView(),e.dispatch(n),this.setNextState({})}},this.onReplaceAll=()=>{const e=this.props.view,{searchText:t,replaceText:c,matchCase:o,matchWord:i,useRegExp:n}=this.state,r={text:t,matchWord:i,matchCase:o,useRegExp:n},h=d.replaceAll(e.state,c,r);h&&e.dispatch(h),this.setNextState({})},this.onKeyDown=e=>{e.keyCode===_?this.onFindNext():e.keyCode===V&&this.onClose()},this.onMatchCaseChecked=e=>this.setNextState({matchCase:e.value}),this.onMatchWordChecked=e=>this.setNextState({matchWord:e.value}),this.onMatchCyclicChecked=e=>this.setNextState({matchCyclic:e.value}),this.onUseRegExpChecked=e=>this.setNextState({useRegExp:e.value}),this.onSearchChange=e=>this.setNextState({searchText:e.target.value}),this.onReplaceChange=e=>this.setNextState({replaceText:e.target.value}),this.setNextState=e=>{const t={...this.state,...e,matches:void 0,nextMatch:void 0,error:void 0},c=this.props.view;if(t.searchText){const{searchText:o,matchWord:i,matchCase:n,useRegExp:r,matchCyclic:h}=t,m={text:o,matchWord:i,matchCase:n,useRegExp:r},u=c.state.selection;let g=[];try{g=d.findAll(c.state.doc,m)}catch(p){p instanceof SyntaxError&&(t.error=this.settings.messages.findReplaceInvalidRegExp),this.setState(t);return}const C=p=>!p&&g[0]||g.find(E=>E.from>=u.from)||h&&g[0]||void 0;this.setState(p=>({...t,matches:g,nextMatch:C(p.searchText)}))}else this.setState(t)},this.state={selectedTab:0,searchText:d.selectedLineTextOnly(s.view.state),replaceText:"",matchCase:!1,matchWord:!1,matchCyclic:!1,useRegExp:!1}}get settings(){return this.props.settings||H}componentDidUpdate(s,e){const t=this.props.view,{matches:c=[],nextMatch:o}=this.state;if(e.nextMatch!==o){const i=t.state,n=i.tr,r=[];c.forEach(h=>{r.push({from:h.from,to:h.to,attrs:{class:o&&h.eq(o)?"k-text-selected":"k-text-highlighted"}})}),n.setMeta(d.textHighlightKey,r),n.setSelection(o||d.TextSelection.create(i.doc,i.selection.from)),t.dispatch(n)}}render(){const s=w.provideLocalizationService(this),{findReplaceDialogTitle:e,findReplaceTabFind:t,findReplaceTabReplace:c,findReplaceFindWhat:o,findReplaceReplaceWith:i,findReplaceReplace:n,findReplaceReplaceAll:r,findReplaceMatchCase:h,findReplaceMatchWord:m,findReplaceMatchCyclic:u,findReplaceUseRegExp:g,findReplacePrevMatch:C,findReplaceNextMatch:p,findReplaceMatches:E}=this.settings.messages,{matchCase:W,matchWord:L,matchCyclic:q,useRegExp:I,searchText:D,replaceText:O,nextMatch:v}=this.state,b=a.createElement("div",{className:"k-search-options"},a.createElement("span",null,a.createElement(x.Checkbox,{id:"match-case",checked:W,onChange:this.onMatchCaseChecked,label:s.toLanguageString(h,l.messages[h])})),a.createElement("span",null,a.createElement(x.Checkbox,{id:"match-whole",checked:L,onChange:this.onMatchWordChecked,label:s.toLanguageString(m,l.messages[m])})),a.createElement("span",null,a.createElement(x.Checkbox,{id:"match-cyclic",checked:q,onChange:this.onMatchCyclicChecked,label:s.toLanguageString(u,l.messages[u])})),a.createElement("span",null,a.createElement(x.Checkbox,{id:"regular-expression",checked:I,onChange:this.onUseRegExpChecked,label:s.toLanguageString(g,l.messages[g])}))),y=a.createElement("div",{className:"k-matches-container"},a.createElement(R.Button,{fillMode:"flat",themeColor:"primary",onClick:this.onFindPrev},a.createElement(M.IconWrap,{name:"chevron-left",icon:F.chevronLeftIcon}),s.toLanguageString(C,l.messages[C])),a.createElement("span",null,this.matchesMessage(s.toLanguageString(E,l.messages[E]))),a.createElement(R.Button,{fillMode:"flat",themeColor:"primary",onClick:this.onFindNext},s.toLanguageString(p,l.messages[p]),a.createElement(M.IconWrap,{name:"chevron-right",icon:F.chevronRightIcon}))),T=a.createElement(S.Form,{render:()=>a.createElement(S.FormElement,{horizontal:!0},a.createElement(S.FieldWrapper,null,a.createElement("label",{htmlFor:"findWhat",className:"k-form-label"},s.toLanguageString(o,l.messages[o])),a.createElement("div",{className:"k-form-field-wrap"},a.createElement(x.Input,{id:"findWhat",type:"text",value:D,onChange:this.onSearchChange,onFocus:this.onSearchChange,onKeyDown:this.onKeyDown,autoFocus:!0}),this.state.error&&a.createElement(K.Error,null,s.toLanguageString(this.state.error,l.messages[this.state.error])))))}),z=a.createElement(S.Form,{render:()=>a.createElement(S.FormElement,{horizontal:!0},a.createElement(S.FieldWrapper,null,a.createElement("label",{htmlFor:"replaceWith",className:"k-form-label"},s.toLanguageString(i,l.messages[i])),a.createElement("div",{className:"k-form-field-wrap"},a.createElement(x.Input,{id:"replaceWith",type:"text",value:O,onChange:this.onReplaceChange}))))});return a.createElement(B.Window,{title:s.toLanguageString(e,l.messages[e]),onClose:this.onClose,style:{width:"auto",height:"auto",userSelect:"none"},resizable:!1,minimizeButton:()=>null,maximizeButton:()=>null},a.createElement(k.TabStrip,{selected:this.state.selectedTab,className:"k-editor-find-replace",onSelect:this.onTabSelect,animation:!1},a.createElement(k.TabStripTab,{title:s.toLanguageString(t,l.messages[t])},T,b,y),a.createElement(k.TabStripTab,{title:s.toLanguageString(c,l.messages[c])},T,z,a.createElement("div",{className:"k-actions k-hstack k-justify-content-end"},a.createElement(R.Button,{disabled:!v,onClick:this.onReplace},s.toLanguageString(n,l.messages[n])),a.createElement(R.Button,{disabled:!v,onClick:this.onReplaceAll},s.toLanguageString(r,l.messages[r]))),b,y)))}};w.registerForLocalization(N);exports.FindAndReplaceDialog=N;