aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/RichTextSchema.tsx33
-rw-r--r--src/client/util/TooltipTextMenu.tsx168
2 files changed, 110 insertions, 91 deletions
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<any>, 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<any>): 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(); }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 10:44:32 +0000