From 0a6c03f109254e36556482e75fa5fb14491d1626 Mon Sep 17 00:00:00 2001 From: ab Date: Thu, 13 Jun 2019 12:03:39 -0400 Subject: demo --- src/client/util/RichTextSchema.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 61ca4af5e..c0225f1f9 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -259,7 +259,7 @@ export const marks: { [index: string]: MarkSpec } = { toDOM() { return ['span', { style: 'color: blue' - }] + }]; } }, @@ -461,6 +461,7 @@ export class SummarizedView { this._collapsed.style.position = "relative"; this._collapsed.style.width = "40px"; this._collapsed.style.height = "20px"; + let self = this; this._collapsed.onpointerdown = function (e: any) { console.log("star pressed!"); if (node.attrs.visibility) { @@ -469,16 +470,19 @@ export class SummarizedView { let y = getPos(); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1 + node.attrs.oldtextlen))); view.dispatch(view.state.tr.deleteSelection(view.state, () => { })); - //this._collapsed.textContent = "㊀"; + self._collapsed.textContent = "㊉"; } else { node.attrs.visibility = !node.attrs.visibility; console.log("content is invisible"); let y = getPos(); + console.log(y); let mark = view.state.schema.mark(view.state.schema.marks.underline); console.log("PASTING " + node.attrs.oldtext.toString()); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); - view.dispatch(view.state.tr.replaceSelection(node.attrs.oldtext).addMark(view.state.selection.from, view.state.selection.from + node.attrs.oldtextlen, mark)); - //this._collapsed.textContent = "㊉"; + const from = view.state.selection.from; + view.dispatch(view.state.tr.replaceSelection(node.attrs.oldtext).addMark(from, from + node.attrs.oldtextlen, mark)); + //view.dispatch(view.state.tr.setSelection(view.state.doc, from + node.attrs.oldtextlen + 1, from + node.attrs.oldtextlen + 1)); + self._collapsed.textContent = "㊀"; } e.preventDefault(); e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 552e7b558f6627d91471ca1ee33d3505a94a3a86 Mon Sep 17 00:00:00 2001 From: ab Date: Thu, 13 Jun 2019 16:07:03 -0400 Subject: highlighting --- src/client/util/RichTextSchema.tsx | 18 ++++++++++++++---- src/client/util/TooltipTextMenu.scss | 8 ++++---- src/client/util/TooltipTextMenu.tsx | 6 +++--- 3 files changed, 21 insertions(+), 11 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index c0225f1f9..789f3e0cf 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -5,6 +5,7 @@ import { redo, undo } from 'prosemirror-history'; import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list'; import { EditorState, Transaction, NodeSelection, TextSelection, Selection, } from "prosemirror-state"; import { EditorView, } from "prosemirror-view"; +import { View } from '@react-pdf/renderer'; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; @@ -254,11 +255,11 @@ export const marks: { [index: string]: MarkSpec } = { toDOM: () => ['sup'] }, - collapse: { - parseDOM: [{ style: 'color: blue' }], + highlight: { + parseDOM: [{ style: 'background: #9aa8a4' }], toDOM() { return ['span', { - style: 'color: blue' + style: 'background: #9aa8a4' }]; } }, @@ -453,6 +454,7 @@ export class ImageResizeView { export class SummarizedView { // TODO: highlight text that is summarized. to find end of region, walk along mark _collapsed: HTMLElement; + _view: any; constructor(node: any, view: any, getPos: any) { this._collapsed = document.createElement("span"); this._collapsed.textContent = "㊉"; @@ -462,6 +464,7 @@ export class SummarizedView { this._collapsed.style.width = "40px"; this._collapsed.style.height = "20px"; let self = this; + this._view = view; this._collapsed.onpointerdown = function (e: any) { console.log("star pressed!"); if (node.attrs.visibility) { @@ -471,17 +474,19 @@ export class SummarizedView { view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1 + node.attrs.oldtextlen))); view.dispatch(view.state.tr.deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; + self.updateSummarizedText(); } else { node.attrs.visibility = !node.attrs.visibility; console.log("content is invisible"); let y = getPos(); console.log(y); - let mark = view.state.schema.mark(view.state.schema.marks.underline); + let mark = view.state.schema.mark(view.state.schema.marks.highlight); console.log("PASTING " + node.attrs.oldtext.toString()); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); const from = view.state.selection.from; view.dispatch(view.state.tr.replaceSelection(node.attrs.oldtext).addMark(from, from + node.attrs.oldtextlen, mark)); //view.dispatch(view.state.tr.setSelection(view.state.doc, from + node.attrs.oldtextlen + 1, from + node.attrs.oldtextlen + 1)); + view.dispatch(view.state.tr.removeStoredMark(mark)); self._collapsed.textContent = "㊀"; } e.preventDefault(); @@ -493,6 +498,11 @@ export class SummarizedView { selectNode() { } + updateSummarizedText(mark?: any) { + console.log(this._view.state.doc.marks); + console.log(this._view.state.doc.childCount); + } + deselectNode() { } } diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index af449071e..676411535 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -235,7 +235,7 @@ .tooltipMenu { position: absolute; z-index: 50; - background: whitesmoke; + background: black; border: 1px solid silver; border-radius: 15px; padding: 2px 10px; @@ -308,8 +308,8 @@ } .summarize{ margin-left: 15px; - color: black; + color: white; height: 20px; - background-color: white; + // background-color: white; text-align: center; - } + } \ No newline at end of file diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 7d4d5566c..f3f27335f 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -179,13 +179,13 @@ export class TooltipTextMenu { this.linkText.style.whiteSpace = "nowrap"; this.linkText.style.width = "150px"; this.linkText.style.overflow = "hidden"; - this.linkText.style.color = "black"; + this.linkText.style.color = "white"; this.linkText.onpointerdown = (e: PointerEvent) => { e.stopPropagation(); }; let linkBtn = document.createElement("div"); linkBtn.textContent = ">>"; linkBtn.style.width = "10px"; linkBtn.style.height = "10px"; - linkBtn.style.color = "black"; + linkBtn.style.color = "white"; linkBtn.style.cssFloat = "left"; linkBtn.onpointerdown = (e: PointerEvent) => { let node = this.view.state.selection.$from.nodeAfter; @@ -382,7 +382,7 @@ export class TooltipTextMenu { span.className = name + " menuicon"; span.title = title; span.textContent = text; - span.style.color = "black"; + span.style.color = "white"; return span; } -- cgit v1.2.3-70-g09d2 From c22feda3d2df8f6814c0837ea18ad293975ae2e4 Mon Sep 17 00:00:00 2001 From: ab Date: Fri, 14 Jun 2019 17:20:46 -0400 Subject: f this --- src/client/util/RichTextSchema.tsx | 41 +++++++++++++++++++++++++----------- src/client/util/TooltipTextMenu.scss | 2 +- src/client/util/TooltipTextMenu.tsx | 4 ++-- 3 files changed, 32 insertions(+), 15 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 789f3e0cf..8c56a32e8 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType, Slice } from "prosemirror-model"; +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType, Slice, Mark } from "prosemirror-model"; import { joinUp, lift, setBlockType, toggleMark, wrapIn, selectNodeForward, deleteSelection } from 'prosemirror-commands'; import { redo, undo } from 'prosemirror-history'; import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list'; @@ -90,7 +90,7 @@ export const nodes: { [index: string]: NodeSpec } = { inline: true, attrs: { visibility: { default: false }, - oldtext: { default: undefined }, + text: { default: undefined }, oldtextslice: { default: undefined }, oldtextlen: { default: 0 } @@ -256,10 +256,10 @@ export const marks: { [index: string]: MarkSpec } = { }, highlight: { - parseDOM: [{ style: 'background: #9aa8a4' }], + parseDOM: [{ style: 'background: #d9dbdd' }], toDOM() { return ['span', { - style: 'background: #9aa8a4' + style: 'background: #d9dbdd' }]; } }, @@ -471,20 +471,23 @@ export class SummarizedView { node.attrs.visibility = !node.attrs.visibility; console.log("content is visible"); let y = getPos(); - view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1 + node.attrs.oldtextlen))); + 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); + node.attrs.text = newSelection.content(); + view.dispatch(view.state.tr.setSelection(newSelection)); view.dispatch(view.state.tr.deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; - self.updateSummarizedText(); } else { node.attrs.visibility = !node.attrs.visibility; console.log("content is invisible"); let y = getPos(); console.log(y); let mark = view.state.schema.mark(view.state.schema.marks.highlight); - console.log("PASTING " + node.attrs.oldtext.toString()); + console.log("PASTING " + node.attrs.text.toString()); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); const from = view.state.selection.from; - view.dispatch(view.state.tr.replaceSelection(node.attrs.oldtext).addMark(from, from + node.attrs.oldtextlen, mark)); + view.dispatch(view.state.tr.replaceSelection(node.attrs.text).addMark(from, from + node.attrs.oldtextlen, mark)); //view.dispatch(view.state.tr.setSelection(view.state.doc, from + node.attrs.oldtextlen + 1, from + node.attrs.oldtextlen + 1)); view.dispatch(view.state.tr.removeStoredMark(mark)); self._collapsed.textContent = "㊀"; @@ -498,9 +501,23 @@ export class SummarizedView { selectNode() { } - updateSummarizedText(mark?: any) { - console.log(this._view.state.doc.marks); - console.log(this._view.state.doc.childCount); + updateSummarizedText(start?: any, mark?: any) { + let $start = this._view.state.doc.resolve(start); + let first_startPos = $start.start(), endPos = first_startPos; + while ($start.nodeAfter !== null) { + let startIndex = $start.index(), endIndex = $start.indexAfter(); + while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; + while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; + let startPos = $start.start(), endPos = startPos; + for (let i = 0; i < endIndex; i++) { + let size = $start.parent.child(i).nodeSize; + console.log($start.parent.child(i).childCount); + if (i < startIndex) startPos += size; + endPos += size; + } + $start = this._view.state.doc.resolve(start + (endPos - startPos) + 1); + } + return { from: first_startPos, to: endPos }; } deselectNode() { @@ -524,4 +541,4 @@ schema.nodeFromJSON = (json: any) => { node.attrs.oldtext = Slice.fromJSON(schema, node.attrs.oldtextslice); } return node; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index 676411535..c10a61558 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -235,7 +235,7 @@ .tooltipMenu { position: absolute; z-index: 50; - background: black; + background: #121721; border: 1px solid silver; border-radius: 15px; padding: 2px 10px; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index f3f27335f..b8ca299dd 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -273,9 +273,9 @@ export class TooltipTextMenu { insertStar(state: EditorState, dispatch: any) { console.log("creating star..."); - let newNode = schema.nodes.star.create({ visibility: false, oldtext: state.selection.content(), oldtextslice: state.selection.content().toJSON(), oldtextlen: state.selection.to - state.selection.from }); + let newNode = schema.nodes.star.create({ visibility: false, text: state.selection.content(), oldtextslice: state.selection.content().toJSON(), oldtextlen: state.selection.to - state.selection.from }); if (dispatch) { - console.log(newNode.attrs.oldtext.toString()); + console.log(newNode.attrs.text.toString()); dispatch(state.tr.replaceSelectionWith(newNode)); } return true; -- cgit v1.2.3-70-g09d2 From 01330e3c72828094077e718c8c8d08acf8e81a77 Mon Sep 17 00:00:00 2001 From: ab Date: Mon, 17 Jun 2019 14:55:56 -0400 Subject: nodesBetween showing some promise... --- src/client/util/RichTextSchema.tsx | 39 ++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 8c56a32e8..b130ace2a 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType, Slice, Mark } from "prosemirror-model"; +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType, Slice, Mark, Node } from "prosemirror-model"; import { joinUp, lift, setBlockType, toggleMark, wrapIn, selectNodeForward, deleteSelection } from 'prosemirror-commands'; import { redo, undo } from 'prosemirror-history'; import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list'; @@ -503,19 +503,30 @@ export class SummarizedView { updateSummarizedText(start?: any, mark?: any) { let $start = this._view.state.doc.resolve(start); - let first_startPos = $start.start(), endPos = first_startPos; - while ($start.nodeAfter !== null) { - let startIndex = $start.index(), endIndex = $start.indexAfter(); - while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; - while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; - let startPos = $start.start(), endPos = startPos; - for (let i = 0; i < endIndex; i++) { - let size = $start.parent.child(i).nodeSize; - console.log($start.parent.child(i).childCount); - if (i < startIndex) startPos += size; - endPos += size; - } - $start = this._view.state.doc.resolve(start + (endPos - startPos) + 1); + let first_startPos = $start.start();//, endPos = first_startPos; + let startIndex = $start.index(), endIndex = $start.indexAfter(); + let nodeAfter = $start.nodeAfter; + while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; + while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; + let startPos = $start.start(), endPos = startPos; + for (let i = 0; i < endIndex; i++) { + let size = $start.parent.child(i).nodeSize; + console.log($start.parent.child(i).childCount); + if (i < startIndex) startPos += size; + endPos += size; + } + for (let i: number = start + 1; i < this._view.state.doc.nodeSize - 1; i++) { + console.log("ITER:", i); + this._view.state.doc.nodesBetween(start, i, (node: Node, pos: number, parent: Node, index: number) => { + if (node === undefined || parent === undefined) { + console.log('undefined dawg'); + return false; + } + if (node.isLeaf) { + console.log(node.textContent); + console.log(node.marks); + } + }); } return { from: first_startPos, to: endPos }; } -- cgit v1.2.3-70-g09d2 From c2da1676379817fb977a7233fadfb96ab67dc16f Mon Sep 17 00:00:00 2001 From: ab Date: Tue, 18 Jun 2019 13:20:47 -0400 Subject: highlighting using nodesbetween, still some index bugs --- src/client/util/RichTextSchema.tsx | 47 +++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 19 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index b130ace2a..391a4fa04 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -503,32 +503,41 @@ export class SummarizedView { updateSummarizedText(start?: any, mark?: any) { let $start = this._view.state.doc.resolve(start); - let first_startPos = $start.start();//, endPos = first_startPos; - let startIndex = $start.index(), endIndex = $start.indexAfter(); - let nodeAfter = $start.nodeAfter; - while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; - while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; - let startPos = $start.start(), endPos = startPos; - for (let i = 0; i < endIndex; i++) { - let size = $start.parent.child(i).nodeSize; - console.log($start.parent.child(i).childCount); - if (i < startIndex) startPos += size; - endPos += size; - } + let endPos = start; + //let first_startPos = $start.start(), endPos = first_startPos; + // let startIndex = $start.index(), endIndex = $start.indexAfter(); + // let nodeAfter = $start.nodeAfter; + // while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; + // while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; + // let startPos = $start.start(), endPos = startPos; + // for (let i = 0; i < endIndex; i++) { + // let size = $start.parent.child(i).nodeSize; + // console.log($start.parent.child(i).childCount); + // if (i < startIndex) startPos += size; + // endPos += size; + // } + let _mark = this._view.state.schema.mark(this._view.state.schema.marks.highlight); + // first_startPos = start; + // endPos = first_startPos; + let visited = new Set(); for (let i: number = start + 1; i < this._view.state.doc.nodeSize - 1; i++) { console.log("ITER:", i); this._view.state.doc.nodesBetween(start, i, (node: Node, pos: number, parent: Node, index: number) => { - if (node === undefined || parent === undefined) { - console.log('undefined dawg'); - return false; - } if (node.isLeaf) { - console.log(node.textContent); - console.log(node.marks); + if (node.marks.includes(_mark) && !visited.has(node)) { + visited.add(node); + //endPos += node.nodeSize + 1; + endPos = i + node.nodeSize - 1; + console.log("node contains mark!"); + } + else { } + } }); } - return { from: first_startPos, to: endPos }; + console.log(start); + console.log(endPos); + return { from: start, to: endPos }; } deselectNode() { -- cgit v1.2.3-70-g09d2 From 73b3304d0865fc34ad1f21af2bbca20a3eca8a8a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 23 Jun 2019 14:08:08 -0400 Subject: fixed issues with summarizing blocks --- src/client/util/RichTextSchema.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 60481f1f9..820d17a14 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -501,8 +501,7 @@ export class SummarizedView { let length = to - from; let newSelection = TextSelection.create(view.state.doc, y + 1, y + 1 + length); node.attrs.text = newSelection.content(); - view.dispatch(view.state.tr.setSelection(newSelection)); - view.dispatch(view.state.tr.deleteSelection(view.state, () => { })); + view.dispatch(view.state.tr.setSelection(newSelection).deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; } else { node.attrs.visibility = !node.attrs.visibility; @@ -513,9 +512,8 @@ export class SummarizedView { console.log("PASTING " + node.attrs.text.toString()); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); const from = view.state.selection.from; - view.dispatch(view.state.tr.replaceSelection(node.attrs.text).addMark(from, from + node.attrs.oldtextlen, mark)); - //view.dispatch(view.state.tr.setSelection(view.state.doc, from + node.attrs.oldtextlen + 1, from + node.attrs.oldtextlen + 1)); - view.dispatch(view.state.tr.removeStoredMark(mark)); + let size = node.attrs.text.size; + view.dispatch(view.state.tr.replaceSelection(node.attrs.text).addMark(from, from + size, mark).removeStoredMark(mark)); self._collapsed.textContent = "㊀"; } e.preventDefault(); @@ -548,16 +546,16 @@ export class SummarizedView { let visited = new Set(); for (let i: number = start + 1; i < this._view.state.doc.nodeSize - 1; i++) { console.log("ITER:", i); + let skip = false; this._view.state.doc.nodesBetween(start, i, (node: Node, pos: number, parent: Node, index: number) => { - if (node.isLeaf) { - if (node.marks.includes(_mark) && !visited.has(node)) { + if (node.isLeaf && !visited.has(node) && !skip) { + if (node.marks.includes(_mark)) { visited.add(node); //endPos += node.nodeSize + 1; endPos = i + node.nodeSize - 1; console.log("node contains mark!"); } - else { } - + else skip = true; } }); } -- cgit v1.2.3-70-g09d2 From 818d3a367648f7dbb279e13aa197ffbae412fbd0 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 23 Jun 2019 21:14:34 -0400 Subject: added arbitrary font size mark --- src/client/util/RichTextSchema.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 820d17a14..f3f6655af 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -350,6 +350,16 @@ export const marks: { [index: string]: MarkSpec } = { /** FONT SIZES */ + pFontSize: { + attrs: { + fontSize: { default: 10 } + }, + inclusive: false, + parseDOM: [{ style: 'font-size: 10px;' }], + toDOM: (node) => ['span', { + style: `font-size: ${node.attrs.fontSize}px;` + }] + }, p10: { parseDOM: [{ style: 'font-size: 10px;' }], -- cgit v1.2.3-70-g09d2 From 4270bd26e1b28f429ca11e43504b1a39a0a77baa Mon Sep 17 00:00:00 2001 From: ab Date: Mon, 24 Jun 2019 16:11:29 -0400 Subject: idrk --- src/client/util/RichTextSchema.tsx | 33 ++----- src/client/util/TooltipTextMenu.tsx | 168 ++++++++++++++++++++++-------------- 2 files changed, 110 insertions(+), 91 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index f3f6655af..936dcbfd6 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -91,8 +91,8 @@ export const nodes: { [index: string]: NodeSpec } = { attrs: { visibility: { default: false }, text: { default: undefined }, - oldtextslice: { default: undefined }, - oldtextlen: { default: 0 } + textslice: { default: undefined }, + textlen: { default: 0 } }, group: "inline", @@ -495,31 +495,26 @@ export class SummarizedView { this._collapsed = document.createElement("span"); this._collapsed.textContent = "㊉"; this._collapsed.style.opacity = "0.5"; - // this._collapsed.style.background = "yellow"; this._collapsed.style.position = "relative"; this._collapsed.style.width = "40px"; this._collapsed.style.height = "20px"; let self = this; this._view = view; this._collapsed.onpointerdown = function (e: any) { - console.log("star pressed!"); if (node.attrs.visibility) { node.attrs.visibility = !node.attrs.visibility; - console.log("content is visible"); let y = getPos(); 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(); view.dispatch(view.state.tr.setSelection(newSelection).deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; } else { node.attrs.visibility = !node.attrs.visibility; - console.log("content is invisible"); let y = getPos(); - console.log(y); let mark = view.state.schema.mark(view.state.schema.marks.highlight); - console.log("PASTING " + node.attrs.text.toString()); view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1))); const from = view.state.selection.from; let size = node.attrs.text.size; @@ -538,39 +533,21 @@ export class SummarizedView { updateSummarizedText(start?: any, mark?: any) { let $start = this._view.state.doc.resolve(start); let endPos = start; - //let first_startPos = $start.start(), endPos = first_startPos; - // let startIndex = $start.index(), endIndex = $start.indexAfter(); - // let nodeAfter = $start.nodeAfter; - // while (startIndex > 0 && mark.isInSet($start.parent.child(startIndex - 1).marks)) startIndex--; - // while (endIndex < $start.parent.childCount && mark.isInSet($start.parent.child(endIndex).marks)) endIndex++; - // let startPos = $start.start(), endPos = startPos; - // for (let i = 0; i < endIndex; i++) { - // let size = $start.parent.child(i).nodeSize; - // console.log($start.parent.child(i).childCount); - // if (i < startIndex) startPos += size; - // endPos += size; - // } + let _mark = this._view.state.schema.mark(this._view.state.schema.marks.highlight); - // first_startPos = start; - // endPos = first_startPos; let visited = new Set(); for (let i: number = start + 1; i < this._view.state.doc.nodeSize - 1; i++) { - console.log("ITER:", i); let skip = false; this._view.state.doc.nodesBetween(start, i, (node: Node, pos: number, parent: Node, index: number) => { if (node.isLeaf && !visited.has(node) && !skip) { if (node.marks.includes(_mark)) { visited.add(node); - //endPos += node.nodeSize + 1; endPos = i + node.nodeSize - 1; - console.log("node contains mark!"); } else skip = true; } }); } - console.log(start); - console.log(endPos); return { from: start, to: endPos }; } @@ -592,7 +569,7 @@ const fromJson = schema.nodeFromJSON; schema.nodeFromJSON = (json: any) => { let node = fromJson(json); if (json.type === "star") { - node.attrs.oldtext = Slice.fromJSON(schema, node.attrs.oldtextslice); + node.attrs.text = Slice.fromJSON(schema, node.attrs.textslice); } return node; }; \ No newline at end of file diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index c9216199b..c42d5fab8 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -6,7 +6,7 @@ import { keymap } from "prosemirror-keymap"; import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; -import { Schema, NodeType, MarkType, Mark } from "prosemirror-model"; +import { Schema, NodeType, MarkType, Mark, ResolvedPos } from "prosemirror-model"; import { Node as ProsNode } from "prosemirror-model" import React = require("react"); import "./TooltipTextMenu.scss"; @@ -32,6 +32,7 @@ import { Id } from "../../new_fields/FieldSymbols"; import { Utils } from "../../Utils"; import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; import { text } from "body-parser"; +import { type } from "os"; // import { wrap } from "module"; const SVG = "http://www.w3.org/2000/svg"; @@ -61,6 +62,8 @@ export class TooltipTextMenu { private fontStyleDom?: Node; private listTypeBtnDom?: Node; + private _activeMarks: Mark[] = []; + constructor(view: EditorView, editorProps: FieldViewProps & FormattedTextBoxProps) { this.view = view; this.state = view.state; @@ -123,6 +126,7 @@ export class TooltipTextMenu { this.fontSizeToNum.set(schema.marks.p32, 32); this.fontSizeToNum.set(schema.marks.p48, 48); this.fontSizeToNum.set(schema.marks.p72, 72); + //this.fontSizeToNum.set(schema.marks.pFontSize,schema.marks.pFontSize.) this.fontSizes = Array.from(this.fontSizeToNum.keys()); //list types @@ -282,8 +286,20 @@ export class TooltipTextMenu { } insertStar(state: EditorState, dispatch: any) { - console.log("creating star..."); - let newNode = schema.nodes.star.create({ visibility: false, text: state.selection.content(), oldtextslice: state.selection.content().toJSON(), oldtextlen: state.selection.to - state.selection.from }); + if (state.selection.empty) { + let mark = state.schema.mark(state.schema.marks.highlight) + if (this._activeMarks.includes(mark)) { + const ind = this._activeMarks.indexOf(mark); + this._activeMarks.splice(ind, 1); + } + else { + this._activeMarks.push(mark); + } + dispatch(state.tr.insertText(" ").setStoredMarks(this._activeMarks)); + //dispatch(state.tr.setStoredMarks(this._activeMarks)); + return true; + } + let newNode = schema.nodes.star.create({ visibility: false, text: state.selection.content(), textslice: state.selection.content().toJSON(), textlen: state.selection.to - state.selection.from }); if (dispatch) { //console.log(newNode.attrs.text.toString()); dispatch(state.tr.replaceSelectionWith(newNode)); @@ -315,7 +331,7 @@ export class TooltipTextMenu { } //for a specific grouping of marks (passed in), remove all and apply the passed-in one to the selected text - changeToMarkInGroup(markType: MarkType, view: EditorView, fontMarks: MarkType[]) { + changeToMarkInGroup = (markType: MarkType, view: EditorView, fontMarks: MarkType[]) => { let { empty, $cursor, ranges } = view.state.selection as TextSelection; let state = view.state; let dispatch = view.dispatch; @@ -341,7 +357,18 @@ export class TooltipTextMenu { } } } - }); //actually apply font + }); + // fontsize + // if (markType.name[0] === 'p') { + // let size = this.fontSizeToNum.get(markType); + // if (size) { this.updateFontSizeDropdown(String(size) + " pt"); } + // } + // else { + // let fontName = this.fontStylesToName.get(markType); + // if (fontName) { this.updateFontStyleDropdown(fontName); } + // } + //this.update(view, undefined); + //actually apply font return toggleMark(markType)(view.state, view.dispatch, view); } @@ -529,53 +556,46 @@ export class TooltipTextMenu { // Otherwise, reposition it and update its content //this.tooltip.style.display = ""; let { from, to } = state.selection; - let start = view.coordsAtPos(from), end = view.coordsAtPos(to); - // The box in which the tooltip is positioned, to use as base - //let box = this.tooltip.offsetParent!.getBoundingClientRect(); - // Find a center-ish x position from the selection endpoints (when - // crossing lines, end may be more to the left) - let left = Math.max((start.left + end.left) / 2, start.left + 3); - //this.tooltip.style.left = (left - box.left) * this.editorProps.ScreenToLocalTransform().Scale + "px"; - let width = Math.abs(start.left - end.left) / 2 * this.editorProps.ScreenToLocalTransform().Scale; - let mid = Math.min(start.left, end.left) + width; - - //this.tooltip.style.width = 225 + "px"; - // this.tooltip.style.bottom = (box.bottom - start.top) * this.editorProps.ScreenToLocalTransform().Scale + "px"; - // this.tooltip.style.top = "-100px"; - //this.tooltip.style.height = "100px"; - - // let transform = this.editorProps.ScreenToLocalTransform(); - // this.tooltip.style.width = `${225 / transform.Scale}px`; - // Utils //UPDATE LIST ITEM DROPDOWN this.listTypeBtnDom = this.updateListItemDropdown(":", this.listTypeBtnDom!); + //this._activeMarks = []; //UPDATE FONT STYLE DROPDOWN let activeStyles = this.activeMarksOnSelection(this.fontStyles); - if (activeStyles.length === 1) { - // if we want to update something somewhere with active font name - let fontName = this.fontStylesToName.get(activeStyles[0]); - if (fontName) { this.updateFontStyleDropdown(fontName); } - } else if (activeStyles.length === 0) { - //crimson on default - this.updateFontStyleDropdown("Crimson Text"); - } else { - this.updateFontStyleDropdown("Various"); + if (activeStyles !== undefined) { + // activeStyles.forEach((markType) => { + // this._activeMarks.push(this.view.state.schema.mark(markType)); + // }); + if (activeStyles.length === 1) { + // if we want to update something somewhere with active font name + let fontName = this.fontStylesToName.get(activeStyles[0]); + if (fontName) { this.updateFontStyleDropdown(fontName); } + } else if (activeStyles.length === 0) { + //crimson on default + this.updateFontStyleDropdown("Crimson Text"); + } else { + this.updateFontStyleDropdown("Various"); + } } //UPDATE FONT SIZE DROPDOWN let activeSizes = this.activeMarksOnSelection(this.fontSizes); - if (activeSizes.length === 1) { //if there's only one active font size - let size = this.fontSizeToNum.get(activeSizes[0]); - if (size) { this.updateFontSizeDropdown(String(size) + " pt"); } - } else if (activeSizes.length === 0) { - //should be 14 on default - this.updateFontSizeDropdown("14 pt"); - } else { //multiple font sizes selected - this.updateFontSizeDropdown("Various"); + if (activeSizes !== undefined) { + if (activeSizes.length === 1) { //if there's only one active font size + // activeSizes.forEach((markType) => { + // this._activeMarks.push(this.view.state.schema.mark(markType)); + // }); + let size = this.fontSizeToNum.get(activeSizes[0]); + if (size) { this.updateFontSizeDropdown(String(size) + " pt"); } + } else if (activeSizes.length === 0) { + //should be 14 on default + this.updateFontSizeDropdown("14 pt"); + } else { //multiple font sizes selected + this.updateFontSizeDropdown("Various"); + } } - + this.view.dispatch(this.view.state.tr.setStoredMarks(this._activeMarks)); this.updateLinkMenu(); } @@ -599,34 +619,56 @@ export class TooltipTextMenu { }); } else { - let pos = this.view.state.selection.$from; - let ref_node: ProsNode; - if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) { - ref_node = pos.nodeAfter; - } - else if (pos.nodeBefore !== null && pos.nodeBefore !== undefined) { - ref_node = pos.nodeBefore; - } - else { - return []; - } - let text_node_type: NodeType; - if (ref_node.isText) { - text_node_type = ref_node.type; + const pos = this.view.state.selection.$from; + const ref_node: ProsNode = this.reference_node(pos); + if (ref_node !== null && ref_node !== this.view.state.doc) { + let text_node_type: NodeType; + if (ref_node.isText) { + text_node_type = ref_node.type; + } + else { + return []; + } + + this._activeMarks = ref_node.marks; + + activeMarks = markGroup.filter(mark_type => { + if (dispatch) { + let mark = state.schema.mark(mark_type); + return ref_node.marks.includes(mark); + } + return false; + }); + return activeMarks; } else { return []; } - activeMarks = markGroup.filter(mark_type => { - if (dispatch) { - let mark = state.schema.mark(mark_type); - return ref_node.marks.includes(mark); - } - return false; - }); } - return activeMarks; + } + + reference_node(pos: ResolvedPos): ProsNode { + let ref_node: ProsNode = this.view.state.doc; + if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) { + ref_node = pos.nodeAfter; + } + else if (pos.nodeBefore !== null && pos.nodeBefore !== undefined) { + ref_node = pos.nodeBefore; + } + else if (pos.pos > 0) { + let skip = false; + for (let i: number = pos.pos - 1; i > 0; i--) { + this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode, pos: number, parent: ProsNode, index: number) => { + if (node.isLeaf && !skip) { + ref_node = node; + skip = true; + } + + }); + } + } + return ref_node; } destroy() { this.tooltip.remove(); } -- cgit v1.2.3-70-g09d2 From c2c04325e0f29c01cd5ab0617d17a62183a53611 Mon Sep 17 00:00:00 2001 From: ab Date: Tue, 25 Jun 2019 14:00:42 -0400 Subject: fixed most stuff, still the zooming and focus bugs --- src/client/util/RichTextSchema.tsx | 1 + src/client/util/TooltipTextMenu.tsx | 54 ++++++++++------------ .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- 3 files changed, 26 insertions(+), 31 deletions(-) (limited to 'src/client/util/RichTextSchema.tsx') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 936dcbfd6..63c879d67 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -509,6 +509,7 @@ export class SummarizedView { 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(); view.dispatch(view.state.tr.setSelection(newSelection).deleteSelection(view.state, () => { })); self._collapsed.textContent = "㊉"; } else { diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index c42d5fab8..d08048e21 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -84,7 +84,7 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough", "Strikethrough") }, { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript", "Superscript") }, { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript", "Subscript") }, - { command: deleteSelection, dom: this.icon("C", 'collapse', 'Collapse') } + { command: toggleMark(schema.marks.highlight), dom: this.icon("H", 'blue', 'Blue') } // { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, // { command: wrapInList(schema.nodes.ordered_list), dom: this.icon("1)", "bullets") }, // { command: lift, dom: this.icon("<", "lift") }, @@ -144,6 +144,8 @@ export class TooltipTextMenu { this.tooltip.appendChild(this.createStar().render(this.view).dom); + this.updateListItemDropdown(":", this.listTypeBtnDom); + this.update(view, undefined); //view.dom.parentNode!.parentNode!.insertBefore(this.tooltip, view.dom.parentNode); @@ -166,12 +168,15 @@ export class TooltipTextMenu { fontSizeBtns.push(this.dropdownMarkBtn(String(number), "color: black; width: 50px;", mark, this.view, this.changeToMarkInGroup, this.fontSizes)); }); - if (this.fontSizeDom) { this.tooltip.removeChild(this.fontSizeDom); } - this.fontSizeDom = (new Dropdown(cut(fontSizeBtns), { + let newfontSizeDom = (new Dropdown(cut(fontSizeBtns), { label: label, css: "color:black; min-width: 60px; padding-left: 5px; margin-right: 0;" }) as MenuItem).render(this.view).dom; - this.tooltip.appendChild(this.fontSizeDom); + if (this.fontSizeDom) { this.tooltip.replaceChild(newfontSizeDom, this.fontSizeDom); } + else { + this.tooltip.appendChild(newfontSizeDom); + } + this.fontSizeDom = newfontSizeDom; } //label of dropdown will change to given label @@ -185,13 +190,16 @@ export class TooltipTextMenu { fontBtns.push(this.dropdownMarkBtn(name, "color: black; font-family: " + name + ", sans-serif; width: 125px;", mark, this.view, this.changeToMarkInGroup, this.fontStyles)); }); - if (this.fontStyleDom) { this.tooltip.removeChild(this.fontStyleDom); } - this.fontStyleDom = (new Dropdown(cut(fontBtns), { + let newfontStyleDom = (new Dropdown(cut(fontBtns), { label: label, css: "color:black; width: 125px; margin-left: -3px; padding-left: 2px;" }) as MenuItem).render(this.view).dom; + if (this.fontStyleDom) { this.tooltip.replaceChild(newfontStyleDom, this.fontStyleDom); } + else { + this.tooltip.appendChild(newfontStyleDom); + } + this.fontStyleDom = newfontStyleDom; - this.tooltip.appendChild(this.fontStyleDom); } updateLinkMenu() { @@ -286,19 +294,6 @@ export class TooltipTextMenu { } insertStar(state: EditorState, dispatch: any) { - if (state.selection.empty) { - let mark = state.schema.mark(state.schema.marks.highlight) - if (this._activeMarks.includes(mark)) { - const ind = this._activeMarks.indexOf(mark); - this._activeMarks.splice(ind, 1); - } - else { - this._activeMarks.push(mark); - } - dispatch(state.tr.insertText(" ").setStoredMarks(this._activeMarks)); - //dispatch(state.tr.setStoredMarks(this._activeMarks)); - return true; - } let newNode = schema.nodes.star.create({ visibility: false, text: state.selection.content(), textslice: state.selection.content().toJSON(), textlen: state.selection.to - state.selection.from }); if (dispatch) { //console.log(newNode.attrs.text.toString()); @@ -359,15 +354,14 @@ export class TooltipTextMenu { } }); // fontsize - // if (markType.name[0] === 'p') { - // let size = this.fontSizeToNum.get(markType); - // if (size) { this.updateFontSizeDropdown(String(size) + " pt"); } - // } - // else { - // let fontName = this.fontStylesToName.get(markType); - // if (fontName) { this.updateFontStyleDropdown(fontName); } - // } - //this.update(view, undefined); + if (markType.name[0] === 'p') { + let size = this.fontSizeToNum.get(markType); + if (size) { this.updateFontSizeDropdown(String(size) + " pt"); } + } + else { + let fontName = this.fontStylesToName.get(markType); + if (fontName) { this.updateFontStyleDropdown(fontName); } + } //actually apply font return toggleMark(markType)(view.state, view.dispatch, view); } @@ -558,7 +552,7 @@ export class TooltipTextMenu { let { from, to } = state.selection; //UPDATE LIST ITEM DROPDOWN - this.listTypeBtnDom = this.updateListItemDropdown(":", this.listTypeBtnDom!); + //this.listTypeBtnDom = this.updateListItemDropdown(":", this.listTypeBtnDom!); //this._activeMarks = []; //UPDATE FONT STYLE DROPDOWN diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 796ff029c..d2a6ceafa 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -95,7 +95,7 @@ export class MarqueeView extends React.Component } }); } else if (!e.ctrlKey) { - let newBox = Docs.TextDocument({ width: 200, height: 50, x: x, y: y, title: "-typed text-" }); + let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" }); newBox.proto!.autoHeight = true; this.props.addLiveTextDocument(newBox); } -- cgit v1.2.3-70-g09d2