From 12b71961ae33e6b3b2dfe5669b090f35a5ebbc40 Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Mon, 11 Nov 2024 18:11:31 +0800
Subject: [PATCH 1/6] add a text replacement feature to the find_widget

---
 src/public/app/widgets/find.js              | 78 +++++++++++++++------
 src/public/app/widgets/find_in_text.js      | 17 ++++-
 src/public/translations/en/translation.json |  8 ++-
 3 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/src/public/app/widgets/find.js b/src/public/app/widgets/find.js
index 5c24c36fa..93527ff85 100644
--- a/src/public/app/widgets/find.js
+++ b/src/public/app/widgets/find.js
@@ -5,6 +5,7 @@
 
 import { t } from "../services/i18n.js";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import attributeService from "../services/attributes.js";
 import FindInText from "./find_in_text.js";
 import FindInCode from "./find_in_code.js";
 import FindInHtml from "./find_in_html.js";
@@ -16,27 +17,26 @@ const waitForEnter = (findWidgetDelayMillis < 0);
 // the focusout handler is called with relatedTarget equal to the label instead
 // of undefined. It's -1 instead of > 0, so they don't tabstop
 const TPL = `
-<div style="contain: none;">
+<div class='find-replace-widget' style="contain: none; border-top: 1px solid var(--main-border-color);">
     <style>
-        .find-widget-box {
-            padding: 10px;
-            border-top: 1px solid var(--main-border-color); 
+        .find-widget-box, .replace-widget-box {
+            padding: 2px 10px 2px 10px;
             align-items: center;
         }
         
-        .find-widget-box > * {
+        .find-widget-box > *, .replace-widget-box > *{
             margin-right: 15px;
         }
         
-        .find-widget-box {
+        .find-widget-box, .replace-widget-box {
             display: flex;
         }
-        
+
         .find-widget-found-wrapper {
             font-weight: bold;
         }
         
-        .find-widget-search-term-input-group {
+        .find-widget-search-term-input-group, .replace-widget-replacetext-input {
             max-width: 300px;
         }
         
@@ -47,19 +47,23 @@ const TPL = `
 
     <div class="find-widget-box">
         <div class="input-group find-widget-search-term-input-group">
-            <input type="text" class="form-control find-widget-search-term-input">
+            <input type="text" class="form-control find-widget-search-term-input" placeholder="${t('find.find_placeholder')}">
             <button class="btn btn-outline-secondary bx bxs-chevron-up find-widget-previous-button" type="button"></button>
             <button class="btn btn-outline-secondary bx bxs-chevron-down find-widget-next-button" type="button"></button>
         </div>
         
         <div class="form-check">
-            <input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox"> 
-            <label tabIndex="-1" class="form-check-label">${t('find.case_sensitive')}</label>
+            <label tabIndex="-1" class="form-check-label">
+                <input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox"> 
+                ${t('find.case_sensitive')}
+            </label>
         </div>
 
         <div class="form-check">
-            <input type="checkbox" class="form-check-input find-widget-match-words-checkbox">
-            <label tabIndex="-1" class="form-check-label">${t('find.match_words')}</label>
+            <label tabIndex="-1" class="form-check-label">
+                <input type="checkbox" class="form-check-input find-widget-match-words-checkbox">
+                ${t('find.match_words')}
+            </label>
         </div>
         
         <div class="find-widget-found-wrapper">
@@ -72,6 +76,12 @@ const TPL = `
         
         <div class="find-widget-close-button"><button class="btn icon-action bx bx-x"></button></div>
     </div>
+
+    <div class="replace-widget-box" style='display: none'>
+        <input type="text" class="form-control replace-widget-replacetext-input" placeholder="${t('find.replace_placeholder')}">
+        <button class="btn btn-sm replace-widget-replaceall-button" type="button">${t('find.replace_all')}</button>
+        <button class="btn btn-sm  replace-widget-replace-button" type="button">${t('find.replace')}</button>
+    </div>
 </div>`;
 
 export default class FindWidget extends NoteContextAwareWidget {
@@ -93,8 +103,7 @@ export default class FindWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$findBox = this.$widget.find('.find-widget-box');
-        this.$findBox.hide();
+        this.$widget.hide();
         this.$input = this.$widget.find('.find-widget-search-term-input');
         this.$currentFound = this.$widget.find('.find-widget-current-found');
         this.$totalFound = this.$widget.find('.find-widget-total-found');
@@ -109,6 +118,13 @@ export default class FindWidget extends NoteContextAwareWidget {
         this.$closeButton = this.$widget.find(".find-widget-close-button");
         this.$closeButton.on("click", () => this.closeSearch());
 
+        this.$replaceWidgetBox = this.$widget.find(".replace-widget-box");
+        this.$replaceTextInput = this.$widget.find(".replace-widget-replacetext-input");
+        this.$replaceAllButton = this.$widget.find(".replace-widget-replaceall-button");
+        this.$replaceAllButton.on("click", () => this.replaceAll());
+        this.$replaceButton = this.$widget.find(".replace-widget-replace-button");
+        this.$replaceButton.on("click", () => this.replace());
+
         this.$input.keydown(async e => {
             if ((e.metaKey || e.ctrlKey) && (e.key === 'F' || e.key === 'f')) {
                 // If ctrl+f is pressed when the findbox is shown, select the
@@ -121,7 +137,7 @@ export default class FindWidget extends NoteContextAwareWidget {
             }
         });
 
-        this.$findBox.keydown(async e => {
+        this.$widget.keydown(async e => {
             if (e.key === 'Escape') {
                 await this.closeSearch();
             }
@@ -145,10 +161,16 @@ export default class FindWidget extends NoteContextAwareWidget {
 
         const selectedText = window.getSelection().toString() || "";
 
-        this.$findBox.show();
+        this.$widget.show();
         this.$input.focus();
+        const isReadOnly = await this.noteContext.isReadOnly();
+        if (this.note.type === 'text' && !isReadOnly) {
+            this.$replaceWidgetBox.show();
+        }else{
+            this.$replaceWidgetBox.hide();
+        }
 
-        const isAlreadyVisible = this.$findBox.is(":visible");
+        const isAlreadyVisible = this.$widget.is(":visible");
 
         if (isAlreadyVisible) {
             if (selectedText) {
@@ -254,8 +276,8 @@ export default class FindWidget extends NoteContextAwareWidget {
     }
 
     async closeSearch() {
-        if (this.$findBox.is(":visible")) {
-            this.$findBox.hide();
+        if (this.$widget.is(":visible")) {
+            this.$widget.hide();
 
             // Restore any state, if there's a current occurrence clear markers
             // and scroll to and select the last occurrence
@@ -268,13 +290,27 @@ export default class FindWidget extends NoteContextAwareWidget {
         }
     }
 
+    async replace() {
+        const replaceText = this.$replaceTextInput.val();
+        await this.handler.replace(replaceText);
+    }
+
+    async replaceAll() {
+        const replaceText = this.$replaceTextInput.val();
+        await this.handler.replaceAll(replaceText);
+    }
+
     isEnabled() {
         return super.isEnabled() && ['text', 'code', 'render'].includes(this.note.type);
     }
 
-    async entitiesReloadedEvent({loadResults}) {
+    async entitiesReloadedEvent({ loadResults }) {
         if (loadResults.isNoteContentReloaded(this.noteId)) {
             this.$totalFound.text("?")
+        } else if (loadResults.getAttributeRows().find(attr => attr.type === 'label'
+            && (attr.name.toLowerCase().includes('readonly'))
+            && attributeService.isAffecting(attr, this.note))) {
+            this.closeSearch();
         }
     }
 }
diff --git a/src/public/app/widgets/find_in_text.js b/src/public/app/widgets/find_in_text.js
index 87a507c75..2b1a12200 100644
--- a/src/public/app/widgets/find_in_text.js
+++ b/src/public/app/widgets/find_in_text.js
@@ -20,6 +20,7 @@ export default class FindInText {
         // Clear
         const findAndReplaceEditing = textEditor.plugins.get('FindAndReplaceEditing');
         findAndReplaceEditing.state.clear(model);
+        this.editingState = findAndReplaceEditing.state;
         findAndReplaceEditing.stop();
         if (searchTerm !== "") {
             // Parameters are callback/text, options.matchCase=false, options.wholeWords=false
@@ -29,7 +30,7 @@ export default class FindInText {
             // let re = new RegExp(searchTerm, 'gi');
             // let m = text.match(re);
             // totalFound = m ? m.length : 0;
-            const options = { "matchCase" : matchCase, "wholeWords" : wholeWord };
+            const options = { "matchCase": matchCase, "wholeWords": wholeWord };
             findResult = textEditor.execute('find', searchTerm, options);
             totalFound = findResult.results.length;
             // Find the result beyond the cursor
@@ -102,4 +103,18 @@ export default class FindInText {
 
         textEditor.focus();
     }
+
+    async replace(replaceText) {
+        if (this.editingState.highlightedResult !== null) {
+            const textEditor = await this.getTextEditor();
+            textEditor.execute('replace', replaceText, this.editingState.highlightedResult);
+        }
+    }
+
+    async replaceAll(replaceText) {
+        if (this.editingState.results.length > 0) {
+            const textEditor = await this.getTextEditor();
+            textEditor.execute('replaceAll', replaceText, this.editingState.results);
+        }
+    }
 }
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index 77c0bee36..6bff3a25f 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1378,8 +1378,12 @@
   },
   "open-help-page": "Open help page",
   "find": {
-    "case_sensitive": "case sensitive",
-    "match_words": "match words"
+    "case_sensitive": "Case sensitive",
+    "match_words": "Match words",
+    "find_placeholder":"Find in text...",
+    "replace_placeholder":"Replace with...",
+    "replace": "Replace",
+    "replace_all": "Replace all"
   },
   "highlights_list_2": {
     "title": "Highlights List",

From 0aef04cea17ca6fcb4cf37734f6d59469758f320 Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Mon, 11 Nov 2024 18:19:19 +0800
Subject: [PATCH 2/6] add a text replacement feature to the find_widget

---
 src/public/app/widgets/find_in_text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/public/app/widgets/find_in_text.js b/src/public/app/widgets/find_in_text.js
index 2b1a12200..369eb736a 100644
--- a/src/public/app/widgets/find_in_text.js
+++ b/src/public/app/widgets/find_in_text.js
@@ -20,8 +20,8 @@ export default class FindInText {
         // Clear
         const findAndReplaceEditing = textEditor.plugins.get('FindAndReplaceEditing');
         findAndReplaceEditing.state.clear(model);
-        this.editingState = findAndReplaceEditing.state;
         findAndReplaceEditing.stop();
+        this.editingState = findAndReplaceEditing.state;
         if (searchTerm !== "") {
             // Parameters are callback/text, options.matchCase=false, options.wholeWords=false
             // See https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/findcommand.js#L44

From 2d9376a05c1a7ce8a895e2516700888ade04942c Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Mon, 11 Nov 2024 18:59:03 +0800
Subject: [PATCH 3/6] add a text replacement feature to the find_widget

---
 src/public/app/widgets/find_in_text.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/public/app/widgets/find_in_text.js b/src/public/app/widgets/find_in_text.js
index 369eb736a..a3f142d4f 100644
--- a/src/public/app/widgets/find_in_text.js
+++ b/src/public/app/widgets/find_in_text.js
@@ -105,14 +105,14 @@ export default class FindInText {
     }
 
     async replace(replaceText) {
-        if (this.editingState.highlightedResult !== null) {
+        if (this.editingState !== undefined && this.editingState.highlightedResult !== null) {
             const textEditor = await this.getTextEditor();
             textEditor.execute('replace', replaceText, this.editingState.highlightedResult);
         }
     }
 
     async replaceAll(replaceText) {
-        if (this.editingState.results.length > 0) {
+        if (this.editingState !== undefined  && this.editingState.results.length > 0) {
             const textEditor = await this.getTextEditor();
             textEditor.execute('replaceAll', replaceText, this.editingState.results);
         }

From 8893e9d4d5ee442551f32ce0d1f75fff28d39d8b Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Mon, 11 Nov 2024 22:57:24 +0800
Subject: [PATCH 4/6] add replacement feature for code note

---
 src/public/app/widgets/find.js         |  2 +-
 src/public/app/widgets/find_in_code.js | 44 ++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/find.js b/src/public/app/widgets/find.js
index 93527ff85..5e0258998 100644
--- a/src/public/app/widgets/find.js
+++ b/src/public/app/widgets/find.js
@@ -164,7 +164,7 @@ export default class FindWidget extends NoteContextAwareWidget {
         this.$widget.show();
         this.$input.focus();
         const isReadOnly = await this.noteContext.isReadOnly();
-        if (this.note.type === 'text' && !isReadOnly) {
+        if (['text', 'code'].includes(this.note.type) && !isReadOnly) {
             this.$replaceWidgetBox.show();
         }else{
             this.$replaceWidgetBox.hide();
diff --git a/src/public/app/widgets/find_in_code.js b/src/public/app/widgets/find_in_code.js
index 40308bae6..66052ee02 100644
--- a/src/public/app/widgets/find_in_code.js
+++ b/src/public/app/widgets/find_in_code.js
@@ -170,4 +170,48 @@ export default class FindInCode {
 
         codeEditor.focus();
     }
+    async replace(replaceText) {
+        let currentFound = -1;
+        this.findResult.forEach((marker, index) => {
+            const pos = marker.find();
+            if (pos) {
+                if (marker.className === FIND_RESULT_SELECTED_CSS_CLASSNAME) {
+                    currentFound = index;
+                    return;
+                }
+            }
+        });
+        if (currentFound >= 0) {
+            let marker = this.findResult[currentFound];
+            let pos = marker.find();
+            const codeEditor = await this.getCodeEditor();
+            const doc = codeEditor.doc;
+            doc.replaceRange(replaceText, pos.from, pos.to);
+            marker.clear();
+
+            let nextFound;
+            if (currentFound === this.findResult.length - 1) {
+                nextFound = 0;
+            } else {
+                nextFound = currentFound;
+            }
+            this.findResult.splice(currentFound, 1);
+            if (this.findResult.length > 0) {
+                this.findNext(0, nextFound, nextFound);
+            }
+        }
+    }
+    async replaceAll(replaceText) {
+        const codeEditor = await this.getCodeEditor();
+        const doc = codeEditor.doc;
+        codeEditor.operation(() => {
+            for (let currentFound = 0; currentFound < this.findResult.length; currentFound++) {
+                let marker = this.findResult[currentFound];
+                let pos = marker.find();
+                doc.replaceRange(replaceText, pos.from, pos.to);
+                marker.clear();
+            }
+        });
+        this.findResult = [];
+    }
 }

From 497c24ee1e9201be0aa93306028014de85948c1b Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Mon, 11 Nov 2024 23:13:26 +0800
Subject: [PATCH 5/6] Fix the bug that code can't get the selected text

---
 src/public/app/widgets/find.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/public/app/widgets/find.js b/src/public/app/widgets/find.js
index 5e0258998..a68711a17 100644
--- a/src/public/app/widgets/find.js
+++ b/src/public/app/widgets/find.js
@@ -159,8 +159,13 @@ export default class FindWidget extends NoteContextAwareWidget {
 
         this.handler = await this.getHandler();
 
-        const selectedText = window.getSelection().toString() || "";
-
+        let selectedText = '';
+        if (this.note.type === 'code'){
+            const codeEditor = await this.noteContext.getCodeEditor();
+            selectedText = codeEditor.getSelection();
+        }else{
+            selectedText = window.getSelection().toString() || "";
+        }
         this.$widget.show();
         this.$input.focus();
         const isReadOnly = await this.noteContext.isReadOnly();

From a0c6d695b0c85f8cc0735d45ff7f48eeee283d8f Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Tue, 12 Nov 2024 10:56:54 +0800
Subject: [PATCH 6/6] Fix find_widget bugs

---
 src/public/app/widgets/find.js                        | 5 +++--
 src/public/app/widgets/find_in_code.js                | 7 +++++++
 src/public/app/widgets/type_widgets/read_only_code.js | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/public/app/widgets/find.js b/src/public/app/widgets/find.js
index a68711a17..a3c9124c2 100644
--- a/src/public/app/widgets/find.js
+++ b/src/public/app/widgets/find.js
@@ -158,9 +158,11 @@ export default class FindWidget extends NoteContextAwareWidget {
         }
 
         this.handler = await this.getHandler();
+        
+        const isReadOnly = await this.noteContext.isReadOnly();
 
         let selectedText = '';
-        if (this.note.type === 'code'){
+        if (this.note.type === 'code' && !isReadOnly){
             const codeEditor = await this.noteContext.getCodeEditor();
             selectedText = codeEditor.getSelection();
         }else{
@@ -168,7 +170,6 @@ export default class FindWidget extends NoteContextAwareWidget {
         }
         this.$widget.show();
         this.$input.focus();
-        const isReadOnly = await this.noteContext.isReadOnly();
         if (['text', 'code'].includes(this.note.type) && !isReadOnly) {
             this.$replaceWidgetBox.show();
         }else{
diff --git a/src/public/app/widgets/find_in_code.js b/src/public/app/widgets/find_in_code.js
index 66052ee02..672e0c9b8 100644
--- a/src/public/app/widgets/find_in_code.js
+++ b/src/public/app/widgets/find_in_code.js
@@ -171,6 +171,10 @@ export default class FindInCode {
         codeEditor.focus();
     }
     async replace(replaceText) {
+        // this.findResult may be undefined and null
+        if (!this.findResult || this.findResult.length===0){
+            return;
+        }
         let currentFound = -1;
         this.findResult.forEach((marker, index) => {
             const pos = marker.find();
@@ -202,6 +206,9 @@ export default class FindInCode {
         }
     }
     async replaceAll(replaceText) {
+        if (!this.findResult || this.findResult.length===0){
+            return;
+        }
         const codeEditor = await this.getCodeEditor();
         const doc = codeEditor.doc;
         codeEditor.operation(() => {
diff --git a/src/public/app/widgets/type_widgets/read_only_code.js b/src/public/app/widgets/type_widgets/read_only_code.js
index 72e2e05e5..6a45259dd 100644
--- a/src/public/app/widgets/type_widgets/read_only_code.js
+++ b/src/public/app/widgets/type_widgets/read_only_code.js
@@ -51,7 +51,7 @@ export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
 
         await this.initialized;
 
-        resolve(this.$content);
+        resolve(this.$editor);
     }
 
     format(html) {