diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index e5c440cdc..cd5bb1912 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -44,7 +44,7 @@ import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import SharedInfoWidget from "../widgets/shared_info.js";
import FindWidget from "../widgets/find.js";
import TocWidget from "../widgets/toc.js";
-import HighlightedTextWidget from "../widgets/highlighted_text.js";
+import HighlightsListWidget from "../widgets/highlights_list.js";
import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
import AboutDialog from "../widgets/dialogs/about.js";
import HelpDialog from "../widgets/dialogs/help.js";
@@ -185,7 +185,7 @@ export default class DesktopLayout {
)
.child(new RightPaneContainer()
.child(new TocWidget())
- .child(new HighlightedTextWidget())
+ .child(new HighlightsListWidget())
.child(...this.customWidgets.get('right-pane'))
)
)
diff --git a/src/public/app/widgets/highlighted_text.js b/src/public/app/widgets/highlights_list.js
similarity index 51%
rename from src/public/app/widgets/highlighted_text.js
rename to src/public/app/widgets/highlights_list.js
index daced39d4..4e88e9e45 100644
--- a/src/public/app/widgets/highlighted_text.js
+++ b/src/public/app/widgets/highlights_list.js
@@ -1,7 +1,7 @@
/**
* Widget: Show highlighted text in the right pane
*
- * By design there's no support for nonsensical or malformed constructs:
+ * By design, there's no support for nonsensical or malformed constructs:
* - For example, if there is a formula in the middle of the highlighted text, the two ends of the formula will be regarded as two entries
*/
@@ -10,20 +10,20 @@ import RightPanelWidget from "./right_panel_widget.js";
import options from "../services/options.js";
import OnClickButtonWidget from "./buttons/onclick_button.js";
-const TPL = `
+const TPL = `
-
+
`;
-export default class HighlightedTextWidget extends RightPanelWidget {
+export default class HighlightsListWidget extends RightPanelWidget {
constructor() {
super();
@@ -67,38 +67,38 @@ export default class HighlightedTextWidget extends RightPanelWidget {
async doRenderBody() {
this.$body.empty().append($(TPL));
- this.$hlt = this.$body.find('.highlighted-text');
- this.$body.find('.highlighted-text-widget').append(this.closeHltButton.render());
+ this.$highlightsList = this.$body.find('.highlists-list');
+ this.$body.find('.highlists-list-widget').append(this.closeHltButton.render());
}
async refreshWithNote(note) {
- /*The reason for adding highlightedTextPreviousVisible is to record whether the previous state of the highlightedText is hidden or displayed,
- * and then let it be displayed/hidden at the initial time.
- * If there is no such value, when the right panel needs to display toc but not highlighttext, every time the note content is changed,
- * highlighttext Widget will appear and then close immediately, because getHlt function will consume time*/
- if (this.noteContext.viewScope.highlightedTextPreviousVisible == true) {
+ /* The reason for adding highlightedTextPreviousVisible is to record whether the previous state
+ of the highlightedText is hidden or displayed, and then let it be displayed/hidden at the initial time.
+ If there is no such value, when the right panel needs to display toc but not highlighttext,
+ every time the note content is changed, highlighttext Widget will appear and then close immediately,
+ because getHlt function will consume time */
+ if (this.noteContext.viewScope.highlightedTextPreviousVisible) {
this.toggleInt(true);
} else {
this.toggleInt(false);
}
- const hltLabel = note.getLabel('hideHighlightWidget');
const optionsHlt = JSON.parse(options.get('highlightedText'));
- if (hltLabel?.value == "" || hltLabel?.value === "true" || optionsHlt == "") {
+ if (note.isLabelTruthy('hideHighlightWidget') || !optionsHlt) {
this.toggleInt(false);
this.triggerCommand("reEvaluateRightPaneVisibility");
return;
}
- let $hlt = "", hltLiCount = -1;
+ let $highlightsList = "", hltLiCount = -1;
// Check for type text unconditionally in case alwaysShowWidget is set
if (this.note.type === 'text') {
- const { content } = await note.getNoteComplement();
- ({ $hlt, hltLiCount } = await this.getHlt(content, optionsHlt));
+ const {content} = await note.getNoteComplement();
+ ({$highlightsList, hltLiCount} = this.getHighlightList(content, optionsHlt));
}
- this.$hlt.html($hlt);
- if ([undefined, "false"].includes(hltLabel?.value) && hltLiCount > 0) {
+ this.$highlightsList.empty().append($highlightsList);
+ if (hltLiCount > 0) {
this.toggleInt(true);
this.noteContext.viewScope.highlightedTextPreviousVisible = true;
} else {
@@ -109,12 +109,9 @@ export default class HighlightedTextWidget extends RightPanelWidget {
this.triggerCommand("reEvaluateRightPaneVisibility");
}
- /**
- * Builds a table of helight text.
- */
- getHlt(html, optionsHlt) {
+ getHighlightList(content, optionsHlt) {
// matches a span containing background-color
- const regex1 = /]*style\s*=\s*[^>]*background-color:[^>]*?>[\s\S]*?<\/span>/gi;
+ const regex1 = /]*style\s*=\s*[^>]*background-color:[^>]*?>[\s\S]*?<\/span>/gi;
// matches a span containing color
const regex2 = /]*style\s*=\s*[^>]*[^-]color:[^>]*?>[\s\S]*?<\/span>/gi;
// match italics
@@ -125,97 +122,103 @@ export default class HighlightedTextWidget extends RightPanelWidget {
const regex5 = /[\s\S]*?<\/u>/g;
// Possible values in optionsHlt: '["bold","italic","underline","color","bgColor"]'
// element priority: span>i>strong>u
- let findSubStr="", combinedRegexStr = "";
- if (optionsHlt.indexOf("bgColor") >= 0){
- findSubStr+=`,span[style*="background-color"]`;
- combinedRegexStr+=`|${regex1.source}`;
+ let findSubStr = "", combinedRegexStr = "";
+ if (optionsHlt.includes("bgColor")) {
+ findSubStr += `,span[style*="background-color"]`;
+ combinedRegexStr += `|${regex1.source}`;
}
- if (optionsHlt.indexOf("color") >= 0){
- findSubStr+=`,span[style*="color"]`;
- combinedRegexStr+=`|${regex2.source}`;
+ if (optionsHlt.includes("color")) {
+ findSubStr += `,span[style*="color"]`;
+ combinedRegexStr += `|${regex2.source}`;
}
- if (optionsHlt.indexOf("italic") >= 0){
- findSubStr+=`,i`;
- combinedRegexStr+=`|${regex3.source}`;
+ if (optionsHlt.includes("italic")) {
+ findSubStr += `,i`;
+ combinedRegexStr += `|${regex3.source}`;
}
- if (optionsHlt.indexOf("bold") >= 0){
- findSubStr+=`,strong`;
- combinedRegexStr+=`|${regex4.source}`;
+ if (optionsHlt.indexOf("bold")) {
+ findSubStr += `,strong`;
+ combinedRegexStr += `|${regex4.source}`;
}
- if (optionsHlt.indexOf("underline") >= 0){
- findSubStr+=`,u`;
- combinedRegexStr+=`|${regex5.source}`;
+ if (optionsHlt.includes("underline")) {
+ findSubStr += `,u`;
+ combinedRegexStr += `|${regex5.source}`;
}
findSubStr = findSubStr.substring(1)
combinedRegexStr = `(` + combinedRegexStr.substring(1) + `)`;
const combinedRegex = new RegExp(combinedRegexStr, 'gi');
- let $hlt = $("");
+ const $highlightsList = $("");
let prevEndIndex = -1, hltLiCount = 0;
- for (let match = null, hltIndex=0; ((match = combinedRegex.exec(html)) !== null); hltIndex++) {
- var subHtml = match[0];
+ for (let match = null, hltIndex = 0; ((match = combinedRegex.exec(content)) !== null); hltIndex++) {
+ const subHtml = match[0];
const startIndex = match.index;
const endIndex = combinedRegex.lastIndex;
- if (prevEndIndex != -1 && startIndex === prevEndIndex) {
- //If the previous element is connected to this element in HTML, then concatenate them into one.
- $hlt.children().last().append(subHtml);
+ if (prevEndIndex !== -1 && startIndex === prevEndIndex) {
+ // If the previous element is connected to this element in HTML, then concatenate them into one.
+ $highlightsList.children().last().append(subHtml);
} else {
- //hide li if its text content is empty
- if ([...subHtml.matchAll(/(?<=^|>)[^><]+?(?=<|$)/g)].map(matchTmp => matchTmp[0]).join('').trim() != ""){
- var $li = $('