✨ 选中字数 https://github.com/siyuan-note/siyuan/issues/4932

app/src/assets/scss/base.scss

@@ -247,6 +247,11 @@ progressLoading: 400
     overflow: hidden;
   }
 
+  &__counter {
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+
   #barDock {
     .b3-menu__item:hover {
       background-color: var(--b3-list-hover);

app/src/layout/status.ts

@@ -0,0 +1,137 @@
+import {getAllDocks} from "./getAll";
+import {updateHotkeyTip} from "../protyle/util/compatibility";
+import {exportLayout, getDockByType, resizeTabs} from "./util";
+import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {fetchPost} from "../util/fetch";
+import {mountHelp} from "../util/mount";
+/// #if !BROWSER
+import {getCurrentWindow} from "@electron/remote";
+/// #endif
+
+export const initStatus = () => {
+    const allDocks = getAllDocks();
+    let menuHTML = "";
+    allDocks.forEach(item => {
+        menuHTML += `<button class="b3-menu__item" data-type="${item.type}"><svg class="b3-menu__icon""><use xlink:href="#${item.icon}"></use></svg><span class="b3-menu__label">${window.siyuan.languages[item.hotkeyLangId]}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.general[item.hotkeyLangId].custom)}</span></button>`;
+    });
+    document.getElementById("status").innerHTML = `<div id="barDock" class="toolbar__item b3-tooltips b3-tooltips__e${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.config.uiLayout.hideDock ? window.siyuan.languages.showDock : window.siyuan.languages.hideDock}">
+    <svg>
+        <use xlink:href="#${window.siyuan.config.uiLayout.hideDock ? "iconDock" : "iconHideDock"}"></use>
+    </svg>
+    <div class="b3-menu fn__none" style="bottom: 21px;left: 4px">
+        ${menuHTML}
+    </div>
+</div>
+<div class="status__msg"></div>
+<div class="fn__flex-1"></div>
+<div class="status__counter"></div>
+<div id="barFeedback" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.feedback}">
+    <svg><use xlink:href="#iconHeart"></use></svg>
+</div>
+<div id="barLock" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.lockScreen} ${updateHotkeyTip(window.siyuan.config.keymap.general.lockScreen.custom)}">
+    <svg><use xlink:href="#iconLock"></use></svg>
+</div>
+<div id="barDebug" class="toolbar__item b3-tooltips b3-tooltips__nw fn__none" aria-label="${window.siyuan.languages.debug}">
+    <svg>
+        <use xlink:href="#iconBug"></use>
+    </svg>
+</div>
+<div id="barHelp" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.help}">
+    <svg><use xlink:href="#iconHelp"></use></svg>
+</div>`;
+    const dockElement = document.getElementById("barDock");
+    dockElement.addEventListener("mousemove", () => {
+        dockElement.querySelector(".b3-menu").classList.remove("fn__none");
+    });
+    dockElement.addEventListener("mouseleave", () => {
+        dockElement.querySelector(".b3-menu").classList.add("fn__none");
+    });
+    /// #if !BROWSER
+    document.querySelector("#barDebug").classList.remove("fn__none");
+    /// #endif
+    document.querySelector("#status").addEventListener("click", (event) => {
+        let target = event.target as HTMLElement;
+        while (target.id !== "status") {
+            if (target.id === "barDock") {
+                const useElement = target.firstElementChild.firstElementChild;
+                const dockIsShow = useElement.getAttribute("xlink:href") === "#iconHideDock";
+                if (dockIsShow) {
+                    useElement.setAttribute("xlink:href", "#iconDock");
+                    target.setAttribute("aria-label", window.siyuan.languages.showDock);
+                } else {
+                    useElement.setAttribute("xlink:href", "#iconHideDock");
+                    target.setAttribute("aria-label", window.siyuan.languages.hideDock);
+                }
+                document.querySelectorAll(".dock").forEach(item => {
+                    if (dockIsShow) {
+                        if (item.querySelector(".dock__item")) {
+                            item.classList.add("fn__none");
+                        }
+                    } else {
+                        if (item.querySelector(".dock__item")) {
+                            item.classList.remove("fn__none");
+                        }
+                    }
+                });
+                resizeTabs();
+                target.querySelector(".b3-menu").classList.add("fn__none");
+                event.stopPropagation();
+                break;
+            } else if (target.classList.contains("b3-menu__item")) {
+                const type = target.getAttribute("data-type") as TDockType;
+                getDockByType(type).toggleModel(type);
+                if (type === "file" && getSelection().rangeCount > 0) {
+                    const range = getSelection().getRangeAt(0);
+                    const wysiwygElement = hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true);
+                    if (wysiwygElement) {
+                        wysiwygElement.blur();
+                    }
+                }
+                target.parentElement.classList.add("fn__none");
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barLock") {
+                exportLayout(false, () => {
+                    fetchPost("/api/system/logoutAuth", {}, () => {
+                        window.location.href = "/";
+                    });
+                });
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barHelp") {
+                mountHelp();
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barDebug") {
+                /// #if !BROWSER
+                getCurrentWindow().webContents.openDevTools({mode: "bottom"});
+                /// #endif
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barFeedback") {
+                if ("zh_CN" === window.siyuan.config.lang) {
+                    window.open("https://ld246.com/article/1649901726096");
+                } else {
+                    window.open("https://github.com/siyuan-note/siyuan/issues");
+                }
+                event.stopPropagation();
+                break;
+            }
+            target = target.parentElement;
+        }
+    });
+    if (window.siyuan.config.appearance.hideStatusBar) {
+        document.getElementById("status").classList.add("fn__none");
+    }
+};
+
+export const countSelectWord = (range: Range) => {
+    const selectText = range.toString();
+    if (selectText) {
+        fetchPost("/api/block/getContentWordCount", {"content": range.toString()}, (response) => {
+            document.querySelector("#status .status__counter").innerHTML = `<span class="ft__on-surface">${window.siyuan.languages.blockRuneCount}</span> ${response.data.runeCount}<span class="ft__on-surface">${window.siyuan.languages.blockWordCount}</span> ${response.data.wordCount}`;
+        })
+    } else {
+        document.querySelector("#status .status__counter").innerHTML = "";
+    }
+}

app/src/protyle/util/selection.ts

@@ -1,5 +1,6 @@
 import {getContenteditableElement, getNextBlock, getPreviousBlock, hasPreviousSibling} from "../wysiwyg/getBlock";
 import {hasClosestByMatchTag} from "./hasClosest";
+import {countSelectWord} from "../../layout/status";
 
 const selectIsEditor = (editor: Element, range?: Range) => {
     if (!range) {
@@ -26,6 +27,7 @@ export const selectAll = (protyle: IProtyle, nodeElement: Element, range: Range)
                     range.setStart(cellElement.firstChild, 0);
                     range.setEndAfter(cellElement.lastChild);
                     protyle.toolbar.render(protyle, range);
+                    countSelectWord(range);
                     return true;
                 }
             }
@@ -68,6 +70,7 @@ export const selectAll = (protyle: IProtyle, nodeElement: Element, range: Range)
                     }
                 }
                 protyle.toolbar.render(protyle, range);
+                countSelectWord(range);
                 return true;
             }
         }

app/src/protyle/wysiwyg/index.ts

@@ -54,6 +54,7 @@ import {MenuItem} from "../../menus/Menu";
 import {fetchPost} from "../../util/fetch";
 import {onGet} from "../util/onGet";
 import {setTableAlign} from "../util/table";
+import {countSelectWord} from "../../layout/status";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -1266,6 +1267,7 @@ export class WYSIWYG {
             if ((event.shiftKey || isCtrl(event)) && !event.isComposing && range.toString() !== "") {
                 // 工具栏
                 protyle.toolbar.render(protyle, range, event);
+                countSelectWord(range);
             }
 
             if (event.eventPhase !== 3 && !event.shiftKey && (event.key.indexOf("Arrow") > -1 || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown") && !event.isComposing) {
@@ -1277,6 +1279,7 @@ export class WYSIWYG {
                     }
                     this.setEmptyOutline(protyle, nodeElement);
                 }
+                countSelectWord(range);
                 event.stopPropagation();
             }
         });
@@ -1705,6 +1708,7 @@ export class WYSIWYG {
                 } else {
                     hideElements(["toolbar"], protyle);
                 }
+                countSelectWord(range);
                 pushBack(protyle, newRange);
             }, isMobile() ? 520 : 0); // Android 双击慢了出不来
 

app/src/util/onGetConfig.ts

@@ -21,9 +21,8 @@ import {focusByRange} from "../protyle/util/selection";
 import {exitSiYuan} from "../dialog/processSystem";
 import {openSetting} from "../config";
 import {getSearch} from "./functions";
-import {getAllDocks} from "../layout/getAll";
-import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {openHistory} from "./history";
+import {initStatus} from "../layout/status";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -156,122 +155,6 @@ export const onGetConfig = () => {
     }
 };
 
-const initStatus = () => {
-    const allDocks = getAllDocks();
-    let menuHTML = "";
-    allDocks.forEach(item => {
-        menuHTML += `<button class="b3-menu__item" data-type="${item.type}"><svg class="b3-menu__icon""><use xlink:href="#${item.icon}"></use></svg><span class="b3-menu__label">${window.siyuan.languages[item.hotkeyLangId]}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.general[item.hotkeyLangId].custom)}</span></button>`;
-    });
-    document.getElementById("status").innerHTML = `<div id="barDock" class="toolbar__item b3-tooltips b3-tooltips__e${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.config.uiLayout.hideDock ? window.siyuan.languages.showDock : window.siyuan.languages.hideDock}">
-    <svg>
-        <use xlink:href="#${window.siyuan.config.uiLayout.hideDock ? "iconDock" : "iconHideDock"}"></use>
-    </svg>
-    <div class="b3-menu fn__none" style="bottom: 21px;left: 4px">
-        ${menuHTML}
-    </div>
-</div>
-<div class="status__msg"></div>
-<div class="fn__flex-1"></div>
-<div id="barFeedback" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.feedback}">
-    <svg><use xlink:href="#iconHeart"></use></svg>
-</div>
-<div id="barLock" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.lockScreen} ${updateHotkeyTip(window.siyuan.config.keymap.general.lockScreen.custom)}">
-    <svg><use xlink:href="#iconLock"></use></svg>
-</div>
-<div id="barDebug" class="toolbar__item b3-tooltips b3-tooltips__nw fn__none" aria-label="${window.siyuan.languages.debug}">
-    <svg>
-        <use xlink:href="#iconBug"></use>
-    </svg>
-</div>
-<div id="barHelp" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.help}">
-    <svg><use xlink:href="#iconHelp"></use></svg>
-</div>`;
-    const dockElement = document.getElementById("barDock");
-    dockElement.addEventListener("mousemove", () => {
-        dockElement.querySelector(".b3-menu").classList.remove("fn__none");
-    });
-    dockElement.addEventListener("mouseleave", () => {
-        dockElement.querySelector(".b3-menu").classList.add("fn__none");
-    });
-    /// #if !BROWSER
-    document.querySelector("#barDebug").classList.remove("fn__none");
-    /// #endif
-    document.querySelector("#status").addEventListener("click", (event) => {
-        let target = event.target as HTMLElement;
-        while (target.id !== "status") {
-            if (target.id === "barDock") {
-                const useElement = target.firstElementChild.firstElementChild;
-                const dockIsShow = useElement.getAttribute("xlink:href") === "#iconHideDock";
-                if (dockIsShow) {
-                    useElement.setAttribute("xlink:href", "#iconDock");
-                    target.setAttribute("aria-label", window.siyuan.languages.showDock);
-                } else {
-                    useElement.setAttribute("xlink:href", "#iconHideDock");
-                    target.setAttribute("aria-label", window.siyuan.languages.hideDock);
-                }
-                document.querySelectorAll(".dock").forEach(item => {
-                    if (dockIsShow) {
-                        if (item.querySelector(".dock__item")) {
-                            item.classList.add("fn__none");
-                        }
-                    } else {
-                        if (item.querySelector(".dock__item")) {
-                            item.classList.remove("fn__none");
-                        }
-                    }
-                });
-                resizeTabs();
-                target.querySelector(".b3-menu").classList.add("fn__none");
-                event.stopPropagation();
-                break;
-            } else if (target.classList.contains("b3-menu__item")) {
-                const type = target.getAttribute("data-type") as TDockType;
-                getDockByType(type).toggleModel(type);
-                if (type === "file" && getSelection().rangeCount > 0) {
-                    const range = getSelection().getRangeAt(0);
-                    const wysiwygElement = hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true);
-                    if (wysiwygElement) {
-                        wysiwygElement.blur();
-                    }
-                }
-                target.parentElement.classList.add("fn__none");
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barLock") {
-                exportLayout(false, () => {
-                    fetchPost("/api/system/logoutAuth", {}, () => {
-                        window.location.href = "/";
-                    });
-                });
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barHelp") {
-                mountHelp();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barDebug") {
-                /// #if !BROWSER
-                getCurrentWindow().webContents.openDevTools({mode: "bottom"});
-                /// #endif
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barFeedback") {
-                if ("zh_CN" === window.siyuan.config.lang) {
-                    window.open("https://ld246.com/article/1649901726096");
-                } else {
-                    window.open("https://github.com/siyuan-note/siyuan/issues");
-                }
-                event.stopPropagation();
-                break;
-            }
-            target = target.parentElement;
-        }
-    });
-    if (window.siyuan.config.appearance.hideStatusBar) {
-        document.getElementById("status").classList.add("fn__none");
-    }
-};
-
 const initBar = () => {
     document.querySelector(".toolbar").innerHTML = `<div id="toolbarVIP" class="fn__flex"></div>
 <div id="barDailyNote" data-menu="true" aria-label="${window.siyuan.languages.dailyNote} ${updateHotkeyTip(window.siyuan.config.keymap.general.dailyNote.custom)}" class="toolbar__item b3-tooltips b3-tooltips__se${window.siyuan.config.readonly ? " fn__none" : ""}">