aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/RichTextMenu.scss9
-rw-r--r--src/client/util/RichTextMenu.tsx35
-rw-r--r--src/client/views/AntimodeMenu.scss9
-rw-r--r--src/client/views/AntimodeMenu.tsx10
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx5
5 files changed, 51 insertions, 17 deletions
diff --git a/src/client/util/RichTextMenu.scss b/src/client/util/RichTextMenu.scss
index 85d2765e3..5a57f4b98 100644
--- a/src/client/util/RichTextMenu.scss
+++ b/src/client/util/RichTextMenu.scss
@@ -20,6 +20,7 @@
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
min-width: 150px;
padding: 5px;
+ font-size: 12px;
button {
background-color: #323232;
@@ -27,6 +28,7 @@
border-radius: 1px;
padding: 6px;
margin: 5px 0;
+ font-size: 12px;
&:hover {
background-color: black;
@@ -78,8 +80,11 @@ select {
background-color: #323232;
color: white;
border: 1px solid black;
- border-top: none;
- border-bottom: none;
+ // border-top: none;
+ // border-bottom: none;
+ font-size: 12px;
+ height: 100%;
+ margin-right: 3px;
&:focus,
&:hover {
diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx
index 8c373b818..4538a77d6 100644
--- a/src/client/util/RichTextMenu.tsx
+++ b/src/client/util/RichTextMenu.tsx
@@ -29,7 +29,7 @@ library.add(faBold, faItalic, faUnderline, faStrikethrough, faSuperscript, faSub
@observer
export default class RichTextMenu extends AntimodeMenu {
static Instance: RichTextMenu;
- @observable private isVisible: boolean = false;
+ public overDropdown: boolean = false; // kind of hacky way to prevent selects not being selectable
private view?: EditorView;
private editorProps: FieldViewProps & FormattedTextBoxProps | undefined;
@@ -73,7 +73,6 @@ export default class RichTextMenu extends AntimodeMenu {
}
this.view = view;
const state = view.state;
- this.isVisible = true;
// DocumentDecorations.Instance.showTextBar();
props && (this.editorProps = props);
// Don't do anything if the document/selection didn't change
@@ -179,14 +178,19 @@ export default class RichTextMenu extends AntimodeMenu {
});
const self = this;
- function onChange(val: string) {
+ function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
+ e.stopPropagation();
+ e.preventDefault();
+ console.log("on change marks");
options.forEach(({ label, mark, command }) => {
- if (val === label) {
+ if (e.target.value === label) {
self.view && mark && command(mark, self.view);
}
});
}
- return <select onChange={e => onChange(e.target.value)}>{items}</select>;
+ function onPointerEnter() { self.overDropdown = true; }
+ function onPointerLeave() { self.overDropdown = false; }
+ return <select onChange={onChange} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>{items}</select>;
}
createNodesDropdown(activeOption: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean }[]): JSX.Element {
@@ -209,7 +213,9 @@ export default class RichTextMenu extends AntimodeMenu {
}
});
}
- return <select onChange={e => onChange(e.target.value)}>{items}</select>;
+ function onPointerEnter() { self.overDropdown = true; }
+ function onPointerLeave() { self.overDropdown = false; }
+ return <select onChange={e => onChange(e.target.value)} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>{items}</select>;
}
changeFontSize = (mark: Mark, view: EditorView) => {
@@ -274,8 +280,7 @@ export default class RichTextMenu extends AntimodeMenu {
return true;
}
- @action
- toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; }
+ @action toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; }
createBrushButton() {
const self = this;
@@ -648,9 +653,6 @@ export default class RichTextMenu extends AntimodeMenu {
}
render() {
- // if (!this.isVisible) return <></>;
- SelectionManager.SelectedDocuments()
- // if (this.Pinned || )
const fontSizeOptions = [
{ mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize },
@@ -689,7 +691,7 @@ export default class RichTextMenu extends AntimodeMenu {
{ node: undefined, title: "Set list type", label: "Remove", command: this.changeListType },
];
- const buttons = [
+ const row1 = <div className="antimodeMenu-row">{[
this.createButton("bold", "Bold", toggleMark(schema.marks.strong)),
this.createButton("italic", "Italic", toggleMark(schema.marks.em)),
this.createButton("underline", "Underline", toggleMark(schema.marks.underline)),
@@ -701,11 +703,18 @@ export default class RichTextMenu extends AntimodeMenu {
this.createLinkButton(),
this.createBrushButton(),
this.createButton("indent", "Summarize", undefined, this.insertSummarizer),
+ ]}</div>
+
+ const row2 = <div className="antimodeMenu-row">{[
this.createMarksDropdown(this.activeFontSize, fontSizeOptions),
this.createMarksDropdown(this.activeFontFamily, fontFamilyOptions),
this.createNodesDropdown(this.activeListType, listTypeOptions),
+ ]}</div>
+
+ const buttons = [
+ row1, row2
];
- return this.getElement(buttons);
+ return this.getElementWithRows(buttons, 2);
}
} \ No newline at end of file
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index a45f3346a..f78b1dbfb 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -8,6 +8,15 @@
// overflow: hidden;
display: flex;
+ &.with-rows {
+ flex-direction: column
+ }
+
+ .antimodeMenu-row {
+ display: flex;
+ height: 35px;
+ }
+
.antimodeMenu-button {
background-color: transparent;
width: 35px;
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 2e9d29ef9..713a8a189 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -125,4 +125,14 @@ export default abstract class AntimodeMenu extends React.Component {
</div>
);
}
+
+ protected getElementWithRows(rows: JSX.Element[], numRows: number) {
+ return (
+ <div className="antimodeMenu-cont with-rows" onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} onContextMenu={this.handleContextMenu}
+ style={{ left: this._left, top: this._top, opacity: this._opacity, transition: this._transition, transitionDelay: this._transitionDelay, height: 35 * numRows + "px" }}>
+ {rows}
+ <div className="antimodeMenu-dragger" onPointerDown={this.dragStart} style={{ width: this.Pinned ? "20px" : "0px" }} />
+ </div>
+ );
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 7d48a0859..7291d2e8e 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -913,7 +913,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
keeplocation && setTimeout(() => this._editorView?.dispatch(this._editorView?.state.tr.setSelection(TextSelection.create(this._editorView.state.doc, pos))));
// jump rich text menu to this textbox
- this._ref.current && RichTextMenu.Instance.jumpTo(this._ref.current.getBoundingClientRect().x, this._ref.current?.getBoundingClientRect().y - 70);
+ this._ref.current && RichTextMenu.Instance.jumpTo(this._ref.current.getBoundingClientRect().x, this._ref.current?.getBoundingClientRect().y - 105);
}
onPointerWheel = (e: React.WheelEvent): void => {
// if a text note is not selected and scrollable, this prevents us from being able to scroll and zoom out at the same time
@@ -1053,6 +1053,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
});
}
onBlur = (e: any) => {
+ console.log("formated blur");
//DictationManager.Controls.stop(false);
if (this._undoTyping) {
this._undoTyping.end();
@@ -1061,7 +1062,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
this.doLinkOnDeselect();
// move the richtextmenu offscreen
- if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.jumpTo(-300, -300);
+ if (!RichTextMenu.Instance.Pinned && !RichTextMenu.Instance.overDropdown) RichTextMenu.Instance.jumpTo(-300, -300);
}
_lastTimedMark: Mark | undefined = undefined;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 15:32:47 +0000