From 8e6caaf2a4f9f5c9777719a85dcacf4922830c04 Mon Sep 17 00:00:00 2001 From: ab Date: Fri, 28 Jun 2019 14:59:40 -0400 Subject: yeet --- src/client/util/RichTextSchema.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 63c879d67..64fdc6f30 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -493,28 +493,39 @@ export class SummarizedView { _view: any; constructor(node: any, view: any, getPos: any) { this._collapsed = document.createElement("span"); - this._collapsed.textContent = "㊉"; + this._collapsed.textContent = node.attrs.visibility ? "㊀" : "㊉"; this._collapsed.style.opacity = "0.5"; this._collapsed.style.position = "relative"; this._collapsed.style.width = "40px"; this._collapsed.style.height = "20px"; let self = this; this._view = view; + const js = node.toJSON; + node.toJSON = function () { + + return js.apply(this, arguments); + }; this._collapsed.onpointerdown = function (e: any) { if (node.attrs.visibility) { - node.attrs.visibility = !node.attrs.visibility; + // node.attrs.visibility = !node.attrs.visibility; let y = getPos(); + const attrs = { ...node.attrs }; + attrs.visibility = !attrs.visibility; let { from, to } = self.updateSummarizedText(y + 1, view.state.schema.marks.highlight); let length = to - from; let newSelection = TextSelection.create(view.state.doc, y + 1, y + 1 + length); // update attrs of node - node.attrs.text = newSelection.content(); - node.attrs.textslice = newSelection.content().toJSON(); + attrs.text = newSelection.content(); + attrs.textslice = newSelection.content().toJSON(); + view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); view.dispatch(view.state.tr.setSelection(newSelection).deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; } else { - node.attrs.visibility = !node.attrs.visibility; + // node.attrs.visibility = !node.attrs.visibility; let y = getPos(); + const attrs = { ...node.attrs }; + attrs.visibility = !attrs.visibility; + view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); let mark = view.state.schema.mark(view.state.schema.marks.highlight); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); const from = view.state.selection.from; -- cgit v1.2.3-70-g09d2 From 4f8b7cecea3ceed6861c38bde9ce03c9c46e2d09 Mon Sep 17 00:00:00 2001 From: ab Date: Mon, 1 Jul 2019 15:40:34 -0400 Subject: highlighting --- package.json | 2 ++ src/client/util/RichTextSchema.tsx | 11 +++++++++- src/client/util/TooltipTextMenu.tsx | 42 +++++++++++++++++++++++++++++++++++-- 3 files changed, 52 insertions(+), 3 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') 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 `` 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; 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 -- cgit v1.2.3-70-g09d2