Merge branch 'develop' into sirius_patch_2

2025-08-10 02:02:29 +08:00 · 2024-11-17 12:15:29 +08:00 · 2024-11-17 12:15:29 +08:00 · 46823d28e8
commit 46823d28e8
parent 616d7117db 3ff75b14e9
12 changed files with 209 additions and 50 deletions
--- a/src/public/app/services/link.js
+++ b/src/public/app/services/link.js
@ -254,8 +254,15 @@ function goToLinkExt(evt, hrefLink, $link) {
                window.open(hrefLink, '_blank');
            } else if (hrefLink.toLowerCase().startsWith('file:') && utils.isElectron()) {
                const electron = utils.dynamicRequire('electron');
-
                electron.shell.openPath(hrefLink);
+            } else {
+                // Enable protocols supported by CKEditor 5 to be clickable. 
+                // Refer to `allowedProtocols` in https://github.com/TriliumNext/trilium-ckeditor5/blob/main/packages/ckeditor5-build-balloon-block/src/ckeditor.ts.
+                // Adding `:` to these links might be safer.
+                const otherAllowedProtocols = ['mailto:', 'tel:', 'sms:', 'sftp:', 'smb:', 'slack:', 'zotero:'];
+                if (otherAllowedProtocols.some(protocol => hrefLink.toLowerCase().startsWith(protocol))){
+                    window.open(hrefLink, '_blank');
+                }
            }
        }
    }
--- 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();
            }
@ -142,13 +158,25 @@ export default class FindWidget extends NoteContextAwareWidget {
        }

        this.handler = await this.getHandler();
+        
+        const isReadOnly = await this.noteContext.isReadOnly();

-        const selectedText = window.getSelection().toString() || "";
-
-        this.$findBox.show();
+        let selectedText = '';
+        if (this.note.type === 'code' && !isReadOnly){
+            const codeEditor = await this.noteContext.getCodeEditor();
+            selectedText = codeEditor.getSelection();
+        }else{
+            selectedText = window.getSelection().toString() || "";
+        }
+        this.$widget.show();
        this.$input.focus();
+        if (['text', 'code'].includes(this.note.type) && !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 +282,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 +296,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();
        }
    }
 }
--- a/src/public/app/widgets/find_in_code.js
+++ b/src/public/app/widgets/find_in_code.js
@ -170,4 +170,55 @@ 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();
+            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) {
+        if (!this.findResult || this.findResult.length===0){
+            return;
+        }
+        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 = [];
+    }
 }
--- a/src/public/app/widgets/find_in_text.js
+++ b/src/public/app/widgets/find_in_text.js
@ -21,6 +21,7 @@ export default class FindInText {
        const findAndReplaceEditing = textEditor.plugins.get('FindAndReplaceEditing');
        findAndReplaceEditing.state.clear(model);
        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
@ -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 !== undefined && this.editingState.highlightedResult !== null) {
+            const textEditor = await this.getTextEditor();
+            textEditor.execute('replace', replaceText, this.editingState.highlightedResult);
+        }
+    }
+
+    async replaceAll(replaceText) {
+        if (this.editingState !== undefined  && this.editingState.results.length > 0) {
+            const textEditor = await this.getTextEditor();
+            textEditor.execute('replaceAll', replaceText, this.editingState.results);
+        }
+    }
 }
--- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
+++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@ -60,7 +60,7 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
            show: await this.#shouldDisplay(),
            activate: true,
            title: t("classic_editor_toolbar.title"),
-            icon: "bx bx-edit-alt"
+            icon: "bx bx-text"
        };
    }

--- a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
@ -2,6 +2,8 @@ import OptionsWidget from "../options_widget.js";
 import utils from "../../../../services/utils.js";
 import { t } from "../../../../services/i18n.js";

+const MIN_VALUE = 640;
+
 const TPL = `
 <div class="options-section">
    <h4>${t("max_content_width.title")}</h4>
@ -11,7 +13,7 @@ const TPL = `
    <div class="form-group row">
        <div class="col-6">
            <label>${t("max_content_width.max_width_label")}</label>
-            <input type="number" min="200" step="10" class="max-content-width form-control options-number-input">
+            <input type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
        </div>
    </div>
    
@ -34,6 +36,6 @@ export default class MaxContentWidthOptions extends OptionsWidget {
    }

    async optionsLoaded(options) {
-        this.$maxContentWidth.val(options.maxContentWidth);
+        this.$maxContentWidth.val(Math.max(MIN_VALUE, options.maxContentWidth));
    }
 }
--- a/src/public/app/widgets/type_widgets/options/text_notes/editor.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
@ -6,25 +6,37 @@ const TPL = `
 <div class="options-section">
    <h4>${t("editing.editor_type.label")}</h4>
    
-    <select class="editor-type-select form-select">
-        <option value="ckeditor-balloon">${t("editing.editor_type.floating")}</option>
-        <option value="ckeditor-classic">${t("editing.editor_type.fixed")}</option>
-    </select>
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-balloon" />
+            <strong>${t("editing.editor_type.floating.title")}</strong>
+            - ${t("editing.editor_type.floating.description")}
+        </label>
+    </div>
+
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-classic" />
+            <strong>${t("editing.editor_type.fixed.title")}</strong>
+            - ${t("editing.editor_type.fixed.description")}
+        </label>
+    </div>
+
 </div>`;

 export default class EditorOptions extends OptionsWidget {
    doRender() {
        this.$widget = $(TPL);
        this.$body = $("body");
-        this.$editorType = this.$widget.find(".editor-type-select");
-        this.$editorType.on('change', async () => {
-            const newEditorType = this.$editorType.val();
+        this.$widget.find(`input[name="editor-type"]`).on('change', async () => {
+            const newEditorType = this.$widget.find(`input[name="editor-type"]:checked`).val();
            await this.updateOption('textNoteEditorType', newEditorType);
            utils.reloadFrontendApp("editor type change");
        });
    }

    async optionsLoaded(options) {
-        this.$editorType.val(options.textNoteEditorType);
+        this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`)
+                    .prop("checked", "true");
    }
 }
--- 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) {
--- 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",
@ -1518,8 +1522,14 @@
  "editing": {
    "editor_type": {
      "label": "Formatting toolbar",
-      "floating": "Floating (editing tools appear near the cursor)",
-      "fixed": "Fixed (editing tools appear in the \"Formatting\" ribbon tab)"
+      "floating": {
+        "title": "Floating",
+        "description": "editing tools appear near the cursor;"
+      },
+      "fixed": {
+        "title": "Fixed",
+        "description": "editing tools appear in the \"Formatting\" ribbon tab."
+      }
    }
  }
 }
--- a/src/public/translations/es/translation.json
+++ b/src/public/translations/es/translation.json
@ -1378,8 +1378,12 @@
  },
  "open-help-page": "Abrir página de ayuda",
  "find": {
-    "case_sensitive": "distingue entre mayúsculas y minúsculas",
-    "match_words": "coincidir palabras"
+    "case_sensitive": "Distingue entre mayúsculas y minúsculas",
+    "match_words": "Coincidir palabras",
+    "find_placeholder": "Encontrar en texto...",
+    "replace_placeholder": "Reemplazar con...",
+    "replace": "Reemplazar",
+    "replace_all": "Reemplazar todo"
  },
  "highlights_list_2": {
    "title": "Lista de destacados",
@ -1518,8 +1522,14 @@
  "editing": {
    "editor_type": {
      "label": "Barra de herramientas de formato",
-      "floating": "Flotante (las herramientas de edición aparecen cerca del cursor)",
-      "fixed": "Fijo (las herramientas de edición aparecen en la pestaña de la cinta \"Formato\")"
+      "floating": {
+        "title": "Flotante",
+        "description": "las herramientas de edición aparecen cerca del cursor;"
+      },
+      "fixed": {
+        "title": "Fijo",
+        "description": "las herramientas de edición aparecen en la pestaña de la cinta \"Formato\")."
+      }
    }
  }
 }
--- a/src/public/translations/ro/translation.json
+++ b/src/public/translations/ro/translation.json
@ -1349,7 +1349,11 @@
  "open-help-page": "Deschide pagina de informații",
  "find": {
    "match_words": "doar cuvinte întregi",
-    "case_sensitive": "ține cont de majuscule"
+    "case_sensitive": "ține cont de majuscule",
+    "replace_all": "Înlocuiește totul",
+    "replace_placeholder": "Înlocuiește cu...",
+    "replace": "Înlocuiește",
+    "find_placeholder": "Căutați în text..."
  },
  "highlights_list_2": {
    "options": "Setări",
@ -1514,9 +1518,15 @@
  },
  "editing": {
    "editor_type": {
-      "fixed": "Editor cu bară fixă (uneltele de editare vor apărea în tab-ul „Formatare” din panglică)",
-      "floating": "Editor cu bară flotantă (uneltele de editare vor apărea lângă cursor)",
-      "label": "Bară de formatare"
+      "label": "Bară de formatare",
+      "floating": {
+        "title": "Editor cu bară flotantă",
+        "description": "uneltele de editare vor apărea lângă cursor."
+      },
+      "fixed": {
+        "title": "Editor cu bară fixă",
+        "description": "uneltele de editare vor apărea în tab-ul „Formatare” din panglică;"
+      }
    }
  },
  "editor": {
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@ -42,7 +42,7 @@ function index(req: Request, res: Response) {
        isDev: env.isDev(),
        isMainWindow: !req.query.extraWindow,
        isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
-        maxContentWidth: parseInt(options.maxContentWidth),
+        maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
        triliumVersion: packageJson.version,
        assetPath: assetPath,
        appPath: appPath