webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

MD Editor: Worked to improve/fix positioning code

Browse Source 
Still pending testing. Old logic did not work when lines would wrap, so
changing things to a character/line measuring technique.
Fixed some other isues too while testing shortcuts.
This commit is contained in:
Dan Brown
2025-07-22 16:42:47 +01:00
parent d55db06c01
commit 6621d55f3d
6 changed files with 108 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/markdown/actions.ts
View File

@ -236,7 +236,7 @@ export class Actions {
if (lineStart === newStart) {
const newLineContent = lineContent.replace(`${newStart} `, '');
const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length);
this.editor.input.spliceText(selectionRange.from, selectionRange.to, newLineContent, {from: selectFrom});
this.editor.input.spliceText(lineRange.from, lineRange.to, newLineContent, {from: selectFrom});
return;
}
@ -353,8 +353,8 @@ export class Actions {
* Fetch and insert the template of the given ID.
* The page-relative position provided can be used to determine insert location if possible.
*/
async insertTemplate(templateId: string, posX: number, posY: number): Promise<void> {
const cursorPos = this.editor.input.coordsToSelection(posX, posY).from;
async insertTemplate(templateId: string, event: MouseEvent): Promise<void> {
const cursorPos = this.editor.input.eventToPosition(event).from;
const responseData = (await window.$http.get(`/templates/${templateId}`)).data as {markdown: string, html: string};
const content = responseData.markdown || responseData.html;
this.editor.input.spliceText(cursorPos, cursorPos, content, {from: cursorPos});
@ -364,8 +364,8 @@ export class Actions {
* Insert multiple images from the clipboard from an event at the provided
* screen coordinates (Typically form a paste event).
*/
insertClipboardImages(images: File[], posX: number, posY: number): void {
const cursorPos = this.editor.input.coordsToSelection(posX, posY).from;
insertClipboardImages(images: File[], event: MouseEvent): void {
const cursorPos = this.editor.input.eventToPosition(event).from;
for (const image of images) {
this.uploadImage(image, cursorPos);
}

4
resources/js/markdown/dom-handlers.ts
View File

@ -25,7 +25,7 @@ export function getMarkdownDomEventHandlers(editor: MarkdownEditor): MarkdownEdi
const templateId = event.dataTransfer.getData('bookstack/template');
if (templateId) {
event.preventDefault();
editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
editor.actions.insertTemplate(templateId, event);
}
const clipboard = new Clipboard(event.dataTransfer);
@ -33,7 +33,7 @@ export function getMarkdownDomEventHandlers(editor: MarkdownEditor): MarkdownEdi
if (clipboardImages.length > 0) {
event.stopPropagation();
event.preventDefault();
editor.actions.insertClipboardImages(clipboardImages, event.pageX, event.pageY);
editor.actions.insertClipboardImages(clipboardImages, event);
}
},
// Handle dragover event to allow as drop-target in chrome

2
resources/js/markdown/index.mts
View File

@ -62,7 +62,7 @@ export async function init(config: MarkdownEditorConfig): Promise<MarkdownEditor
editor.input.teardown();
editor.input = newInput;
});
// window.devinput = editor.input;
window.devinput = editor.input;
listenToCommonEvents(editor);

4
resources/js/markdown/inputs/codemirror.ts
View File

@ -72,8 +72,8 @@ export class CodemirrorInput implements MarkdownEditorInput {
return this.cm.state.doc.lineAt(index).text;
}
coordsToSelection(x: number, y: number): MarkdownEditorInputSelection {
const cursorPos = this.cm.posAtCoords({x, y}, false);
eventToPosition(event: MouseEvent): MarkdownEditorInputSelection {
const cursorPos = this.cm.posAtCoords({x: event.screenX, y: event.screenY}, false);
return {from: cursorPos, to: cursorPos};
}

4
resources/js/markdown/inputs/interface.ts
View File

@ -65,9 +65,9 @@ export interface MarkdownEditorInput {
getLineRangeFromPosition(position: number): MarkdownEditorInputSelection;
/**
* Convert the given screen coords to a selection position within the input.
* Convert the given event position to a selection position within the input.
*/
coordsToSelection(x: number, y: number): MarkdownEditorInputSelection;
eventToPosition(event: MouseEvent): MarkdownEditorInputSelection;
/**
* Search and return a line range which includes the provided text.

103
resources/js/markdown/inputs/textarea.ts
View File

@ -11,6 +11,8 @@ export class TextareaInput implements MarkdownEditorInput {
protected onChange: () => void;
protected eventController = new AbortController();
protected textSizeCache: {x: number; y: number}|null = null;
constructor(
input: HTMLTextAreaElement,
shortcuts: MarkdownEditorShortcutMap,
@ -25,6 +27,8 @@ export class TextareaInput implements MarkdownEditorInput {
this.onKeyDown = this.onKeyDown.bind(this);
this.configureListeners();
// TODO - Undo/Redo
this.input.style.removeProperty("display");
}
@ -45,15 +49,24 @@ export class TextareaInput implements MarkdownEditorInput {
this.input.addEventListener('input', () => {
this.onChange();
}, {signal: this.eventController.signal});
this.input.addEventListener('click', (event: MouseEvent) => {
const x = event.clientX;
const y = event.clientY;
const range = this.eventToPosition(event);
const text = this.getText().split('');
console.log(range, text.slice(0, 20));
});
}
onKeyDown(e: KeyboardEvent) {
const isApple = navigator.platform.startsWith("Mac") || navigator.platform === "iPhone";
const key = e.key.length > 1 ? e.key : e.key.toLowerCase();
const keyParts = [
e.shiftKey ? 'Shift' : null,
isApple && e.metaKey ? 'Mod' : null,
!isApple && e.ctrlKey ? 'Mod' : null,
e.key,
key,
];
const keyString = keyParts.filter(Boolean).join('-');
@ -65,10 +78,37 @@ export class TextareaInput implements MarkdownEditorInput {
appendText(text: string): void {
this.input.value += `\n${text}`;
this.input.dispatchEvent(new Event('input'));
}
coordsToSelection(x: number, y: number): MarkdownEditorInputSelection {
// TODO
eventToPosition(event: MouseEvent): MarkdownEditorInputSelection {
const eventCoords = this.mouseEventToTextRelativeCoords(event);
const textSize = this.measureTextSize();
const lineWidth = this.measureLineCharCount(textSize.x);
const lines = this.getText().split('\n');
// TODO - Check this
let currY = 0;
let currPos = 0;
for (const line of lines) {
let linePos = 0;
const wrapCount = Math.max(Math.ceil(line.length / lineWidth), 1);
for (let i = 0; i < wrapCount; i++) {
currY += textSize.y;
if (currY > eventCoords.y) {
const targetX = Math.floor(eventCoords.x / textSize.x);
const maxPos = Math.min(currPos + linePos + targetX, currPos + line.length);
return {from: maxPos, to: maxPos};
}
linePos += lineWidth;
}
currPos += line.length + 1;
}
return this.getSelection();
}
@ -81,11 +121,11 @@ export class TextareaInput implements MarkdownEditorInput {
let lineStart = 0;
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const newEnd = lineStart + line.length + 1;
if (position < newEnd) {
return {from: lineStart, to: newEnd};
const lineEnd = lineStart + line.length;
if (position <= lineEnd) {
return {from: lineStart, to: lineEnd};
}
lineStart = newEnd;
lineStart = lineEnd + 1;
}
return {from: 0, to: 0};
@ -140,6 +180,7 @@ export class TextareaInput implements MarkdownEditorInput {
setText(text: string, selection?: MarkdownEditorInputSelection): void {
this.input.value = text;
this.input.dispatchEvent(new Event('input'));
if (selection) {
this.setSelection(selection, false);
}
@ -154,4 +195,52 @@ export class TextareaInput implements MarkdownEditorInput {
this.setSelection(newSelection, false);
}
}
protected measureTextSize(): {x: number; y: number} {
if (this.textSizeCache) {
return this.textSizeCache;
}
const el = document.createElement("div");
el.textContent = `a\nb`;
const inputStyles = window.getComputedStyle(this.input)
el.style.font = inputStyles.font;
el.style.lineHeight = inputStyles.lineHeight;
el.style.padding = '0px';
el.style.display = 'inline-block';
el.style.visibility = 'hidden';
el.style.position = 'absolute';
el.style.whiteSpace = 'pre';
this.input.after(el);
const bounds = el.getBoundingClientRect();
el.remove();
this.textSizeCache = {
x: bounds.width,
y: bounds.height / 2,
};
return this.textSizeCache;
}
protected measureLineCharCount(textWidth: number): number {
const inputStyles = window.getComputedStyle(this.input);
const paddingLeft = Number(inputStyles.paddingLeft.replace('px', ''));
const paddingRight = Number(inputStyles.paddingRight.replace('px', ''));
const width = Number(inputStyles.width.replace('px', ''));
const textSpace = width - (paddingLeft + paddingRight);
return Math.floor(textSpace / textWidth);
}
protected mouseEventToTextRelativeCoords(event: MouseEvent): {x: number; y: number} {
const inputBounds = this.input.getBoundingClientRect();
const inputStyles = window.getComputedStyle(this.input);
const paddingTop = Number(inputStyles.paddingTop.replace('px', ''));
const paddingLeft = Number(inputStyles.paddingLeft.replace('px', ''));
const xPos = Math.max(event.clientX - (inputBounds.left + paddingLeft), 0);
const yPos = Math.max((event.clientY - (inputBounds.top + paddingTop)) + this.input.scrollTop, 0);
return {x: xPos, y: yPos};
}
}