diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/client/util/RichTextSchema.tsx | 11 | ||||
| -rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 42 |
3 files changed, 52 insertions, 3 deletions
diff --git a/package.json b/package.json index 51d1bab5d..48848277b 100644 --- a/package.json +++ b/package.json @@ -153,8 +153,10 @@ "passport-local": "^1.0.0", "pdfjs-dist": "^2.0.943", "probe-image-size": "^4.0.0", + "prosemirror": "^0.11.1", "prosemirror-commands": "^1.0.7", "prosemirror-example-setup": "^1.0.1", + "prosemirror-find-replace": "^0.9.0", "prosemirror-history": "^1.0.4", "prosemirror-keymap": "^1.0.1", "prosemirror-model": "^1.7.0", diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 64fdc6f30..9197a3b6f 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -282,7 +282,7 @@ export const marks: { [index: string]: MarkSpec } = { }, highlight: { - parseDOM: [{ style: 'background: #d9dbdd' }], + parseDOM: [{ style: 'color: blue' }], toDOM() { return ['span', { style: 'color: blue' @@ -290,6 +290,15 @@ export const marks: { [index: string]: MarkSpec } = { } }, + search_highlight: { + parseDOM: [{ style: 'background: yellow' }], + toDOM() { + return ['span', { + style: 'background: yellow' + }]; + } + }, + // :: MarkSpec Code font mark. Represented as a `<code>` element. code: { diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 4ef76ee50..5c1324d7d 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -53,6 +53,7 @@ export class TooltipTextMenu { private listTypeToIcon: Map<NodeType, string>; private fontSizeIndicator: HTMLSpanElement = document.createElement("span"); private link: HTMLAnchorElement; + //private wrapper: HTMLDivElement; private linkEditor?: HTMLDivElement; private linkText?: HTMLDivElement; @@ -70,6 +71,7 @@ export class TooltipTextMenu { this.view = view; this.state = view.state; this.editorProps = editorProps; + //this.wrapper = document.createElement("div"); this.tooltip = document.createElement("div"); this.tooltip.className = "tooltipMenu"; this.dragElement(this.tooltip); @@ -151,8 +153,6 @@ export class TooltipTextMenu { this.tooltip.appendChild(this.createStar().render(this.view).dom); - - this.updateListItemDropdown(":", this.listTypeBtnDom); this.update(view, undefined); @@ -194,6 +194,7 @@ export class TooltipTextMenu { // if present, the header is where you move the DIV from: elmnt.onmousedown = dragMouseDown; } + const self = this; function dragMouseDown(e: any) { e = e || window.event; @@ -217,12 +218,15 @@ export class TooltipTextMenu { // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + self.highlightSearchTerms(["hello", "there"]); } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; + //self.highlightSearchTerms(self.state, ["hello"]); + self.unhighlightSearchTerms(); } } @@ -614,6 +618,38 @@ export class TooltipTextMenu { return found; } + highlightSearchTerms = (terms: String[]) => { + const doc = this.view.state.doc; + const mark = this.view.state.schema.mark(this.view.state.schema.marks.search_highlight); + doc.nodesBetween(0, doc.content.size, (node: ProsNode, pos: number, parent: ProsNode, index: number) => { + if (node.isLeaf && node.isText && node.text) { + let nodeText: String = node.text; + let tokens = nodeText.split(" "); + let start = pos; + tokens.forEach((word) => { + if (terms.includes(word)) { + this.view.dispatch(this.view.state.tr.addMark(start, start + word.length, mark).removeStoredMark(mark)); + } + else { + start += word.length + 1; + } + }); + } + }); + } + + unhighlightSearchTerms = () => { + const doc = this.view.state.doc; + const mark = this.view.state.schema.mark(this.view.state.schema.marks.search_highlight); + doc.nodesBetween(0, doc.content.size, (node: ProsNode, pos: number, parent: ProsNode, index: number) => { + if (node.isLeaf && node.isText && node.text) { + if (node.marks.includes(mark)) { + this.view.dispatch(this.view.state.tr.removeMark(pos, pos + node.nodeSize, mark)); + } + } + }); + } + //updates the tooltip menu when the selection changes update(view: EditorView, lastState: EditorState | undefined) { let state = view.state; @@ -677,6 +713,8 @@ export class TooltipTextMenu { } this.view.dispatch(this.view.state.tr.setStoredMarks(this._activeMarks)); this.updateLinkMenu(); + //this.highlightSearchTerms(["hello", "there"]); + //this.unhighlightSearchTerms(); } //finds all active marks on selection in given group |