github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-14 12:51:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(cursor): cursor text being hidden when at start of line

Browse source 
Addiotionally, the cursor's font was not defined and therefore was styled in the browser's default font

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Erik Michelson 2023-03-24 17:57:42 +01:00
parent 3dbc07d25a
commit 336e621bc4
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts
View file

@ -18,7 +18,8 @@ export class RemoteCursorMarker implements LayerMarker {
private top: number, private top: number,
private height: number, private height: number,
private name: string, private name: string,
private styleIndex: number private styleIndex: number,
private viewWidth: number
) {} ) {}
draw(): HTMLElement { draw(): HTMLElement {
@ -37,7 +38,11 @@ export class RemoteCursorMarker implements LayerMarker {
element.style.top = `${this.top}px` element.style.top = `${this.top}px`
element.style.height = `${this.height}px` element.style.height = `${this.height}px`
element.style.setProperty('--name', `"${this.name}"`) element.style.setProperty('--name', `"${this.name}"`)
element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)}` const cursorOnRightSide = this.left > this.viewWidth / 2
const cursorOnDownSide = this.top < 20
element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)} ${
cursorOnRightSide ? styles.right : ''
} ${cursorOnDownSide ? styles.down : ''}`
} }
eq(other: RemoteCursorMarker): boolean { eq(other: RemoteCursorMarker): boolean {
@ -66,7 +71,8 @@ export class RemoteCursorMarker implements LayerMarker {
absolutePosition.top - baseTop, absolutePosition.top - baseTop,
absolutePosition.bottom - absolutePosition.top, absolutePosition.bottom - absolutePosition.top,
displayName, displayName,
styleIndex styleIndex,
rect.width
) )
] ]
} }

26
frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss
View file

@ -6,33 +6,51 @@
.cursorLayer { .cursorLayer {
--color: #868686; --color: #868686;
.cursor { .cursor {
border-left: 2px solid var(--color); border-left: 2px solid var(--color);
box-sizing: content-box; box-sizing: content-box;
& {
@import "../../../../../../global-styles/variables.module.scss";
font-family: $font-family-base;
}
&:hover { &:hover {
&:before { &:before {
opacity: 1 opacity: 1
} }
} }
&:before { &:before {
content: var(--name); content: var(--name);
font-size: 0.8em; font-size: 0.8em;
background: var(--color); background: var(--color);
position: absolute; position: absolute;
top: -1.2em; bottom: 1.5em;
right: 2px;
color: white; color: white;
padding: 2px 5px; padding: 0 5px;
height: 20px;
opacity: 0; opacity: 0;
transition: opacity 0.1s; transition: opacity 0.1s;
white-space: nowrap; white-space: nowrap;
left: -2px;
}
&.down:before {
bottom: auto;
top: 1.5em;
}
&.right:before {
left: auto;
right: 0;
} }
} }
} }
.selectionLayer { .selectionLayer {
--color: #868686; --color: #868686;
.cursor { .cursor {
background-color: var(--color); background-color: var(--color);
opacity: 0.5; opacity: 0.5;