aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss241
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx27
2 files changed, 42 insertions, 226 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index ab4a08d62..984d51791 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -31,8 +31,8 @@
flex-direction: row;
.formattedTextBox-dictation {
- height: 20px;
- width: 20px;
+ height: 12px;
+ width: 10px;
top: 0px;
left: 0px;
position: absolute;
@@ -219,218 +219,27 @@ footnote::after {
padding-left: 0px;
}
- .decimal1-ol {
- counter-reset: deci1;
-
- p {
- display: inline
- }
-
- ;
- font-size: 18;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal2-ol {
- counter-reset: deci2;
-
- p {
- display: inline
- }
-
- ;
- font-size: 14;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal3-ol {
- counter-reset: deci3;
-
- p {
- display: inline
- }
-
- ;
- font-size: 12;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal4-ol {
- counter-reset: deci4;
-
- p {
- display: inline
- }
-
- ;
- font-size: 10;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal5-ol {
- counter-reset: deci5;
-
- p {
- display: inline
- }
-
- ;
- font-size: 10;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal6-ol {
- counter-reset: deci6;
-
- p {
- display: inline
- }
-
- ;
- font-size: 10;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .decimal7-ol {
- counter-reset: deci7;
-
- p {
- display: inline
- }
-
- ;
- font-size: 10;
-
- ul,
- ol {
- padding-left: 30px;
- }
- }
-
- .upper-alpha-ol {
- counter-reset: ualph;
-
- p {
- display: inline
- }
-
- ;
- font-size: 18;
- }
-
- .lower-roman-ol {
- counter-reset: lroman;
-
- p {
- display: inline
- }
-
- ;
- font-size: 14;
- }
-
- .lower-alpha-ol {
- counter-reset: lalpha;
-
- p {
- display: inline
- }
-
- ;
- font-size: 10;
- }
-
- .decimal1:before {
- content: counter(deci1) ". ";
- counter-increment: deci1;
- display: inline-block;
- min-width: 30;
- }
-
- .decimal2:before {
- content: counter(deci1) "."counter(deci2) ". ";
- counter-increment: deci2;
- display: inline-block;
- min-width: 35
- }
-
- .decimal3:before {
- content: counter(deci1) "."counter(deci2) "."counter(deci3) ". ";
- counter-increment: deci3;
- display: inline-block;
- min-width: 35
- }
-
- .decimal4:before {
- content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". ";
- counter-increment: deci4;
- display: inline-block;
- min-width: 40
- }
-
- .decimal5:before {
- content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". ";
- counter-increment: deci5;
- display: inline-block;
- min-width: 40
- }
-
- .decimal6:before {
- content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". ";
- counter-increment: deci6;
- display: inline-block;
- min-width: 45
- }
-
- .decimal7:before {
- content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". ";
- counter-increment: deci7;
- display: inline-block;
- min-width: 50
- }
-
- .upper-alpha:before {
- content: counter(deci1) "."counter(ualph, upper-alpha) ". ";
- counter-increment: ualph;
- display: inline-block;
- min-width: 35
- }
-
- .lower-roman:before {
- content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) ". ";
- counter-increment: lroman;
- display: inline-block;
- min-width: 50
- }
-
- .lower-alpha:before {
- content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) "."counter(lalpha, lower-alpha) ". ";
- counter-increment: lalpha;
- display: inline-block;
- min-width: 35
- }
+ .decimal1-ol { counter-reset: deci1; p { display: inline }; ul, ol { padding-left: 30px; } }
+ .decimal2-ol { counter-reset: deci2; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+ .decimal3-ol { counter-reset: deci3; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+ .decimal4-ol { counter-reset: deci4; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+ .decimal5-ol { counter-reset: deci5; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+ .decimal6-ol { counter-reset: deci6; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+ .decimal7-ol { counter-reset: deci7; p { display: inline }; font-size: smaller; ul, ol { padding-left: 30px; } }
+
+ .upper-alpha-ol { counter-reset: ualph; p { display: inline}; font-size: smaller; }
+ .lower-roman-ol { counter-reset: lroman; p { display: inline}; font-size: smaller; }
+ .lower-alpha-ol { counter-reset: lalpha; p { display: inline}; font-size: smaller; }
+
+ .decimal1:before { counter-increment: deci1; display: inline-block; content: counter(deci1) ". "; }
+ .decimal2:before { counter-increment: deci2; display: inline-block; content: counter(deci1) "."counter(deci2) ". "; }
+ .decimal3:before { counter-increment: deci3; display: inline-block; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
+ .decimal4:before { counter-increment: deci4; display: inline-block; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
+ .decimal5:before { counter-increment: deci5; display: inline-block; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
+ .decimal6:before { counter-increment: deci5; display: inline-block; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
+ .decimal7:before { counter-increment: deci5; display: inline-block; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+
+ .upper-alpha:before { counter-increment: ualph; display: inline-block; content: counter(deci1) "."counter(ualph, upper-alpha) ". "; }
+ .lower-roman:before { counter-increment: lroman; display: inline-block; content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) ". "; }
+ .lower-alpha:before { counter-increment: lalpha; display: inline-block; content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) "."counter(lalpha, lower-alpha) ". "; }
} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index bad912944..876f390d9 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -919,24 +919,30 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
}
// this hackiness handles clicking on the list item bullets to do expand/collapse. the bullets are ::before pseudo elements so there's no real way to hit test against them.
- hitBulletTargets(x: number, y: number, offsetX: number, select: boolean = false) {
+ hitBulletTargets(x: number, y: number, offsetX: number, select: boolean, highlightOnly = false) {
clearStyleSheetRules(FormattedTextBox._bulletStyleSheet);
if (this.props.isSelected(true) && offsetX < 40) {
let pos = this._editorView!.posAtCoords({ left: x, top: y });
if (pos && pos.pos > 0) {
let node = this._editorView!.state.doc.nodeAt(pos.pos);
- let node2 = node && node.type === schema.nodes.paragraph ? this._editorView!.state.doc.nodeAt(pos.pos - 1) : undefined;
- if (node === this._nodeClicked && node2 && (node2.type === schema.nodes.ordered_list || node2.type === schema.nodes.list_item)) {
+ let node2 = node?.type === schema.nodes.paragraph ? this._editorView!.state.doc.nodeAt(pos.pos - 1) : undefined;
+ if ((node === this._nodeClicked || highlightOnly) && (node2?.type === schema.nodes.ordered_list || node2?.type === schema.nodes.list_item)) {
let hit = this._editorView!.domAtPos(pos.pos).node as any; // let beforeEle = document.querySelector("." + hit.className) as Element;
let before = hit ? window.getComputedStyle(hit, ':before') : undefined;
let beforeWidth = before ? Number(before.getPropertyValue('width').replace("px", "")) : undefined;
- if (beforeWidth && offsetX < beforeWidth) {
+ if (beforeWidth && offsetX < beforeWidth * .9) {
let ol = this._editorView!.state.doc.nodeAt(pos.pos - 2) ? this._editorView!.state.doc.nodeAt(pos.pos - 2) : undefined;
- if (ol && ol.type === schema.nodes.ordered_list && select) {
- this._editorView!.dispatch(this._editorView!.state.tr.setSelection(new NodeSelection(this._editorView!.state.doc.resolve(pos.pos - 2))));
- addStyleSheetRule(FormattedTextBox._bulletStyleSheet, hit.className + ":before", { background: "gray" });
+ if (ol?.type === schema.nodes.ordered_list && select) {
+ if (!highlightOnly) {
+ this._editorView!.dispatch(this._editorView!.state.tr.setSelection(new NodeSelection(this._editorView!.state.doc.resolve(pos.pos - 2))));
+ }
+ addStyleSheetRule(FormattedTextBox._bulletStyleSheet, hit.className + ":before", { background: "lightgray" });
} else {
- this._editorView!.dispatch(this._editorView!.state.tr.setNodeMarkup(pos.pos - 1, node2.type, { ...node2.attrs, visibility: !node2.attrs.visibility }));
+ if (highlightOnly) {
+ addStyleSheetRule(FormattedTextBox._bulletStyleSheet, hit.className + ":before", { background: "lightgray" });
+ } else {
+ this._editorView!.dispatch(this._editorView!.state.tr.setNodeMarkup(pos.pos - 1, node2.type, { ...node2.attrs, visibility: !node2.attrs.visibility }));
+ }
}
}
}
@@ -1045,6 +1051,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
onKeyDown={this.onKeyPress}
onFocus={this.onFocused}
onClick={this.onClick}
+ onPointerMove={e => this.hitBulletTargets(e.clientX, e.clientY, e.nativeEvent.offsetX, e.shiftKey, true)}
onBlur={this.onBlur}
onPointerUp={this.onPointerUp}
onPointerDown={this.onPointerDown}
@@ -1062,10 +1069,10 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
<div className={"formattedTextBox-sidebar" + (InkingControl.Instance.selectedTool !== InkTool.None ? "-inking" : "")}
style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${StrCast(this.extensionDoc?.backgroundColor, "transparent")}` }}>
<CollectionFreeFormView {...this.props}
- PanelHeight={() => this.props.PanelHeight()}
+ PanelHeight={this.props.PanelHeight}
PanelWidth={() => this.sidebarWidth}
annotationsKey={this.annotationsKey}
- isAnnotationOverlay={true}
+ isAnnotationOverlay={false}
focus={this.props.focus}
isSelected={this.props.isSelected}
select={emptyFunction}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 00:49:58 +0000