mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-12 01:01:32 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

search result highlighted strings, do not add op to recipe on escape

Browse source
This commit is contained in:
Robin Scholtes 2023-08-07 16:42:06 +12:00
parent 85fff21068
commit f176a1106a
14 changed files with 108 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/web/components/c-category-li.mjs
View file

@ -64,7 +64,7 @@ export class CCategoryLi extends HTMLElement {
const opList = new COperationList(
this.app,
this.category.ops,
this.category.ops.map( op => [op]),
this.includeOpLiStarIcon,
false,
true
@ -81,7 +81,6 @@ export class CCategoryLi extends HTMLElement {
buildListItem() {
const li = document.createElement("li");
li.classList.add("panel");
li.classList.add("category");
return li;

86
src/web/components/c-operation-li.mjs
View file

@ -1,5 +1,4 @@
import url from "url";
import HTMLIngredient from "../HTMLIngredient.mjs";
/**
* c(ustom element)-operation-li ( list item )
@ -8,6 +7,7 @@ import HTMLIngredient from "../HTMLIngredient.mjs";
* @param {string} name - The name of the operation
* @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the right side of the operation
* @param {Boolean} includeStarIcon - Include the left side 'star' icon to favourite an operation easily
* @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold) in operation name
*/
export class COperationLi extends HTMLElement {
constructor(
@ -15,6 +15,7 @@ export class COperationLi extends HTMLElement {
name,
icon,
includeStarIcon,
charIndicesToHighlight = []
) {
super();
@ -22,6 +23,7 @@ export class COperationLi extends HTMLElement {
this.name = name;
this.icon = icon;
this.includeStarIcon = includeStarIcon;
this.charIndicesToHighlight = charIndicesToHighlight;
this.config = this.app.operations[name];
@ -54,7 +56,8 @@ export class COperationLi extends HTMLElement {
* @param {Event} e
*/
handleDoubleClick(e) {
if (e.target === this.querySelector("li")) {
// Span contains operation title (highlighted or not)
if (e.target === this.querySelector("li") || e.target === this.querySelector("span")) {
this.app.manager.recipe.addOperation(this.name);
}
}
@ -169,6 +172,8 @@ export class COperationLi extends HTMLElement {
buildListItem() {
const li = document.createElement("li");
li.appendChild( this.buildOperationName() );
li.setAttribute("data-name", this.name);
li.classList.add("operation");
@ -176,7 +181,6 @@ export class COperationLi extends HTMLElement {
li.classList.add("favourite");
}
li.textContent = this.name;
if (this.config.description){
let dataContent = this.config.description;
@ -193,7 +197,6 @@ export class COperationLi extends HTMLElement {
li.setAttribute("data-boundary", "viewport");
li.setAttribute("data-content", dataContent);
}
return li;
}
@ -248,59 +251,62 @@ export class COperationLi extends HTMLElement {
* with constructor arguments for sortable and cloneable lists
*/
cloneNode() {
const { app, name, icon, includeStarIcon } = this;
return new COperationLi( app, name, icon, includeStarIcon );
const { app, name, icon, includeStarIcon, charIndicesToHighlight } = this;
return new COperationLi( app, name, icon, includeStarIcon, charIndicesToHighlight );
}
/**
* Highlights searched strings in the name and description of the operation.
*
* @param {[[number]]} nameIdxs - Indexes of the search strings in the operation name [[start, length]]
* @param {[[number]]} descIdxs - Indexes of the search strings in the operation description [[start, length]]
*/
highlightSearchStrings(nameIdxs, descIdxs) {
if (nameIdxs.length && typeof nameIdxs[0][0] === "number") {
buildOperationName() {
const span = document.createElement('span');
if (this.charIndicesToHighlight.length) {
let opName = "",
pos = 0;
nameIdxs.forEach(idxs => {
this.charIndicesToHighlight.forEach(idxs => {
const [start, length] = idxs;
if (typeof start !== "number") return;
opName += this.name.slice(pos, start) + "<b>" +
this.name.slice(start, start + length) + "</b>";
opName += this.name.slice(pos, start) + "<strong>" +
this.name.slice(start, start + length) + "</strong>";
pos = start + length;
});
opName += this.name.slice(pos, this.name.length);
this.name = opName;
span.innerHTML = opName;
} else {
span.innerText = this.name;
}
if (this.description && descIdxs.length && descIdxs[0][0] >= 0) {
// Find HTML tag offsets
const re = /<[^>]+>/g;
let match;
while ((match = re.exec(this.description))) {
// If the search string occurs within an HTML tag, return without highlighting it.
const inHTMLTag = descIdxs.reduce((acc, idxs) => {
const start = idxs[0];
return start >= match.index && start <= (match.index + match[0].length);
}, false);
return span;
if (inHTMLTag) return;
}
let desc = "",
pos = 0;
descIdxs.forEach(idxs => {
const [start, length] = idxs;
desc += this.description.slice(pos, start) + "<b><u>" +
this.description.slice(start, start + length) + "</u></b>";
pos = start + length;
});
desc += this.description.slice(pos, this.description.length);
this.description = desc;
}
// if (this.description && descIdxs.length && descIdxs[0][0] >= 0) {
// // Find HTML tag offsets
// const re = /<[^>]+>/g;
// let match;
// while ((match = re.exec(this.description))) {
// // If the search string occurs within an HTML tag, return without highlighting it.
// const inHTMLTag = descIdxs.reduce((acc, idxs) => {
// const start = idxs[0];
// return start >= match.index && start <= (match.index + match[0].length);
// }, false);
//
// if (inHTMLTag) return;
// }
//
// let desc = "",
// pos = 0;
//
// descIdxs.forEach(idxs => {
// const [start, length] = idxs;
// desc += this.description.slice(pos, start) + "<b><u>" +
// this.description.slice(start, start + length) + "</u></b>";
// pos = start + length;
// });
// desc += this.description.slice(pos, this.description.length);
// this.description = desc;
// }
}
}

11
src/web/components/c-operation-list.mjs
View file

@ -5,14 +5,14 @@ import Sortable from "sortablejs";
* c(ustom element)-operation-list
*
* @param {App} app - The main view object for CyberChef
* @param {string[]} opNames - A list of operation names
* @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
* @param {boolean} includeStarIcon - optionally add the 'star' icon to the left of the operation
* @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
*/
export class COperationList extends HTMLElement {
constructor(
app,
opNames,
operations,
includeStarIcon,
isSortable = false,
isCloneable = true,
@ -21,7 +21,7 @@ export class COperationList extends HTMLElement {
super();
this.app = app;
this.opNames = opNames;
this.operations = operations;
this.includeStarIcon = includeStarIcon;
this.isSortable = isSortable;
this.isCloneable = isCloneable;
@ -35,7 +35,7 @@ export class COperationList extends HTMLElement {
const ul = document.createElement("ul");
ul.classList.add("op-list");
this.opNames.forEach((opName => {
this.operations.forEach((([opName, charIndicesToHighlight]) => {
const cOpLi = new COperationLi(
this.app,
opName,
@ -43,7 +43,8 @@ export class COperationList extends HTMLElement {
class: this.icon ? this.icon.class : "check-icon",
innerText: this.icon ? this.icon.innerText : "check"
},
this.includeStarIcon
this.includeStarIcon,
charIndicesToHighlight
);
ul.appendChild(cOpLi);