diff options
| -rw-r--r-- | src/client/util/ProsemirrorExampleTransfer.ts | 4 | ||||
| -rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 74 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 4 |
3 files changed, 57 insertions, 25 deletions
diff --git a/src/client/util/ProsemirrorExampleTransfer.ts b/src/client/util/ProsemirrorExampleTransfer.ts index fa9e2e5af..c38f84551 100644 --- a/src/client/util/ProsemirrorExampleTransfer.ts +++ b/src/client/util/ProsemirrorExampleTransfer.ts @@ -47,6 +47,10 @@ export default function buildKeymap<S extends Schema<any>>(schema: S, mapKeys?: bind("Mod-i", toggleMark(type)); bind("Mod-I", toggleMark(type)); } + if (type = schema.marks.underline) { + bind("Mod-u", toggleMark(type)); + bind("Mod-U", toggleMark(type)); + } if (type = schema.marks.code) { bind("Mod-`", toggleMark(type)); } diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index b3b7848e8..1d6a239b9 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -1,4 +1,4 @@ -import { action } from "mobx"; +import { action, observable, observe } from "mobx"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowUp, faTag, faPlus } from '@fortawesome/free-solid-svg-icons'; import { Dropdown, MenuItem, icons, } from "prosemirror-menu"; //no import css @@ -59,6 +59,10 @@ export class TooltipTextMenu { private _marksToDoms: Map<Mark, HTMLSpanElement> = new Map(); + @observable + private _storedMarks: Mark<any>[] | null | undefined; + + constructor(view: EditorView, editorProps: FieldViewProps & FormattedTextBoxProps) { this.view = view; this.editorProps = editorProps; @@ -67,7 +71,8 @@ export class TooltipTextMenu { this.tooltip.className = "tooltipMenu"; this.dragElement(this.tooltip); - this.dragElement(this.tooltip); + this._storedMarks = this.view.state.storedMarks; + // this.createCollapse(); // if (this._collapseBtn) { // this.tooltip.appendChild(this._collapseBtn.render(this.view).dom); @@ -111,10 +116,10 @@ export class TooltipTextMenu { if (dom.contains(e.target as Node)) { e.stopPropagation(); command(view.state, view.dispatch, view); - if (this.view.state.selection.empty) { - if (dom.style.color === "white") { dom.style.color = "greenyellow"; } - else { dom.style.color = "white"; } - } + // if (this.view.state.selection.empty) { + // if (dom.style.color === "white") { dom.style.color = "greenyellow"; } + // else { dom.style.color = "white"; } + // } } }); @@ -520,20 +525,23 @@ export class TooltipTextMenu { } else { let { from, to, $from } = this.view.state.selection; - if ($from && $from.nodeAfter && this._brushdom) { - if (this._brushMarks && to - from > 0) { - this.view.dispatch(this.view.state.tr.removeMark(from, to)); - this._brushMarks.forEach((mark: Mark) => { - const markType = mark.type; - this.changeToMarkInGroup(markType, this.view, []); - - }); + if (this._brushdom) { + if (!this.view.state.selection.empty && $from && $from.nodeAfter) { + if (this._brushMarks && to - from > 0) { + this.view.dispatch(this.view.state.tr.removeMark(from, to)); + this._brushMarks.forEach((mark: Mark) => { + const markType = mark.type; + this.changeToMarkInGroup(markType, this.view, []); + + }); + } + } + else { + const newbrush = this.createBrush(false).render(this.view).dom; + this.tooltip.replaceChild(newbrush, this._brushdom); + this._brushdom = newbrush; + this._brushIsEmpty = !this._brushIsEmpty; } - - const newbrush = this.createBrush(false).render(this.view).dom; - this.tooltip.replaceChild(newbrush, this._brushdom); - this._brushdom = newbrush; - this._brushIsEmpty = !this._brushIsEmpty; } } @@ -709,6 +717,15 @@ export class TooltipTextMenu { return found; } + reset_mark_doms() { + let iterator = this._marksToDoms.values(); + let next = iterator.next(); + while (!next.done) { + next.value.style.color = "white"; + next = iterator.next(); + } + } + //updates the tooltip menu when the selection changes update(view: EditorView, lastState: EditorState | undefined) { let state = view.state; @@ -716,12 +733,7 @@ export class TooltipTextMenu { if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) return; - let iterator = this._marksToDoms.values(); - let next = iterator.next(); - while (!next.done) { - next.value.style.color = "white"; - next = iterator.next(); - } + this.reset_mark_doms(); // Hide the tooltip if the selection is empty if (state.selection.empty) { @@ -765,6 +777,18 @@ export class TooltipTextMenu { } } this.view.dispatch(this.view.state.tr.setStoredMarks(this._activeMarks)); + this.update_mark_doms(); + } + + public mark_key_pressed(marks: Mark<any>[]) { + if (this.view.state.selection.empty) { + if (marks) this._activeMarks = marks; + this.update_mark_doms(); + } + } + + update_mark_doms() { + this.reset_mark_doms(); this._activeMarks.forEach((mark) => { if (this._marksToDoms.has(mark)) { let dom = this._marksToDoms.get(mark); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 524500f35..665a941e6 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -145,6 +145,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (this._editorView) { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); + if (state.selection.empty && FormattedTextBox._toolTipTextMenu) { + const marks = tx.storedMarks; + if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); } + } this._applyingChange = true; const fieldkey = "preview"; if (Object.keys(this.dataDoc).indexOf(fieldkey) !== -1) { |