From 6b75bc82b0e254966a4b45deae76d298164bcd1e Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sat, 21 Dec 2024 18:27:52 +0530 Subject: [PATCH] add text area plugins --- src/app/plugins/text-area/Cursor.ts | 27 ++++++ src/app/plugins/text-area/Operations.ts | 7 ++ src/app/plugins/text-area/TextArea.ts | 58 ++++++++++++ .../plugins/text-area/TextAreaOperations.ts | 34 +++++++ src/app/plugins/text-area/TextUtils.ts | 5 + src/app/plugins/text-area/index.ts | 6 ++ src/app/plugins/text-area/mods/Intent.ts | 92 +++++++++++++++++++ src/app/plugins/text-area/mods/index.ts | 1 + src/app/plugins/text-area/type.ts | 1 + 9 files changed, 231 insertions(+) create mode 100644 src/app/plugins/text-area/Cursor.ts create mode 100644 src/app/plugins/text-area/Operations.ts create mode 100644 src/app/plugins/text-area/TextArea.ts create mode 100644 src/app/plugins/text-area/TextAreaOperations.ts create mode 100644 src/app/plugins/text-area/TextUtils.ts create mode 100644 src/app/plugins/text-area/index.ts create mode 100644 src/app/plugins/text-area/mods/Intent.ts create mode 100644 src/app/plugins/text-area/mods/index.ts create mode 100644 src/app/plugins/text-area/type.ts diff --git a/src/app/plugins/text-area/Cursor.ts b/src/app/plugins/text-area/Cursor.ts new file mode 100644 index 00000000..8a2098e2 --- /dev/null +++ b/src/app/plugins/text-area/Cursor.ts @@ -0,0 +1,27 @@ +export type CursorDirection = 'forward' | 'backward' | 'none'; + +export class Cursor { + public readonly start: number; + + public readonly end: number; + + public readonly direction: CursorDirection; + + constructor(start: number, end: number, direction: CursorDirection) { + this.start = start; + this.end = end; + this.direction = direction; + } + + static fromTextAreaElement(element: HTMLTextAreaElement) { + return new Cursor(element.selectionStart, element.selectionEnd, element.selectionDirection); + } + + public get selection() { + return this.start !== this.end; + } + + public get length() { + return this.end - this.start; + } +} diff --git a/src/app/plugins/text-area/Operations.ts b/src/app/plugins/text-area/Operations.ts new file mode 100644 index 00000000..a4c813ad --- /dev/null +++ b/src/app/plugins/text-area/Operations.ts @@ -0,0 +1,7 @@ +import { Cursor } from './Cursor'; + +export interface Operations { + select(cursor: Cursor): void; + deselect(cursor: Cursor): void; + insert(cursor: Cursor, text: string): Cursor; +} diff --git a/src/app/plugins/text-area/TextArea.ts b/src/app/plugins/text-area/TextArea.ts new file mode 100644 index 00000000..2e8a0855 --- /dev/null +++ b/src/app/plugins/text-area/TextArea.ts @@ -0,0 +1,58 @@ +import { Cursor } from './Cursor'; +import { GetTarget } from './type'; + +export class TextArea { + private readonly getTarget: GetTarget; + + constructor(getTarget: GetTarget) { + this.getTarget = getTarget; + } + + get target() { + return this.getTarget(); + } + + public selection(cursor: Cursor): string { + return this.target.value.substring(cursor.start, cursor.end); + } + + public lineBeginIndex(cursor: Cursor): number { + const beforeValue = this.target.value.substring(0, cursor.start); + const lineEndIndex = beforeValue.lastIndexOf('\n'); + return lineEndIndex + 1; + } + + public lineEndIndex(cursor: Cursor): number { + const afterValue = this.target.value.substring(cursor.end); + const lineEndIndex = afterValue.indexOf('\n'); + return cursor.end + (lineEndIndex === -1 ? afterValue.length : lineEndIndex); + } + + public cursorLines(cursor: Cursor): Cursor { + const lineBeginIndex = this.lineBeginIndex(cursor); + const lineEndIndex = this.lineEndIndex(cursor); + + const linesCursor = new Cursor(lineBeginIndex, lineEndIndex, 'none'); + return linesCursor; + } + + public prevLine(cursor: Cursor): Cursor | undefined { + const currentLineIndex = this.lineBeginIndex(cursor); + const prevIndex = currentLineIndex - 1; + + if (prevIndex < 0) return undefined; + + const lineCursor = this.cursorLines(new Cursor(prevIndex, prevIndex, 'none')); + return lineCursor; + } + + public nextLine(cursor: Cursor): Cursor | undefined { + const currentLineIndex = this.lineEndIndex(cursor); + const nextIndex = currentLineIndex + 1; + + if (nextIndex > this.target.value.length) return undefined; + + const lineCursor = this.cursorLines(new Cursor(nextIndex, nextIndex, 'none')); + return lineCursor; + } +} diff --git a/src/app/plugins/text-area/TextAreaOperations.ts b/src/app/plugins/text-area/TextAreaOperations.ts new file mode 100644 index 00000000..3bc1b4f8 --- /dev/null +++ b/src/app/plugins/text-area/TextAreaOperations.ts @@ -0,0 +1,34 @@ +import { Cursor } from './Cursor'; +import { Operations } from './Operations'; +import { GetTarget } from './type'; + +export class TextAreaOperations implements Operations { + private readonly getTarget: GetTarget; + + constructor(getTarget: GetTarget) { + this.getTarget = getTarget; + } + + get target() { + return this.getTarget(); + } + + public select(cursor: Cursor) { + this.target.setSelectionRange(cursor.start, cursor.end, cursor.direction); + } + + public deselect(cursor: Cursor) { + if (cursor.direction === 'backward') { + this.target.setSelectionRange(cursor.start, cursor.start, 'none'); + return; + } + this.target.setSelectionRange(cursor.end, cursor.end, 'none'); + } + + public insert(cursor: Cursor, text: string): Cursor { + const { value } = this.target; + this.target.value = `${value.substring(0, cursor.start)}${text}${value.substring(cursor.end)}`; + + return new Cursor(cursor.start, cursor.start + text.length, cursor.direction); + } +} diff --git a/src/app/plugins/text-area/TextUtils.ts b/src/app/plugins/text-area/TextUtils.ts new file mode 100644 index 00000000..43d05837 --- /dev/null +++ b/src/app/plugins/text-area/TextUtils.ts @@ -0,0 +1,5 @@ +export class TextUtils { + static multiline(str: string) { + return str.indexOf('\n') !== -1; + } +} diff --git a/src/app/plugins/text-area/index.ts b/src/app/plugins/text-area/index.ts new file mode 100644 index 00000000..b99ebf59 --- /dev/null +++ b/src/app/plugins/text-area/index.ts @@ -0,0 +1,6 @@ +export * from './Cursor'; +export * from './mods'; +export * from './Operations'; +export * from './TextArea'; +export * from './TextAreaOperations'; +export * from './TextUtils'; diff --git a/src/app/plugins/text-area/mods/Intent.ts b/src/app/plugins/text-area/mods/Intent.ts new file mode 100644 index 00000000..62c50176 --- /dev/null +++ b/src/app/plugins/text-area/mods/Intent.ts @@ -0,0 +1,92 @@ +import { Cursor } from '../Cursor'; +import { Operations } from '../Operations'; +import { TextArea } from '../TextArea'; + +export class Intent { + public readonly textArea: TextArea; + + public readonly operations: Operations; + + public readonly size: number; + + public readonly str: string; + + private intentReg: RegExp; + + constructor(size: number, textArea: TextArea, operations: Operations) { + this.textArea = textArea; + this.operations = operations; + this.size = size; + this.intentReg = /^\s*/; + + this.str = ''; + for (let i = 0; i < size; i += 1) this.str += ' '; + } + + private lineIntent(cursor: Cursor): string { + const lines = this.textArea.cursorLines(cursor); + const selection = this.textArea.selection(lines); + const match = selection.match(this.intentReg); + if (!match) return ''; + return match[0]; + } + + public moveForward(cursor: Cursor): Cursor { + const linesCursor = this.textArea.cursorLines(cursor); + + const selection = this.textArea.selection(linesCursor); + const lines = selection.split('\n'); + + const intentLines = lines.map((line) => `${this.str}${line}`); + this.operations.insert(linesCursor, intentLines.join('\n')); + + const addedIntentLength = lines.length * this.str.length; + return new Cursor( + cursor.start === linesCursor.start ? cursor.start : cursor.start + this.str.length, + cursor.end + addedIntentLength, + cursor.direction + ); + } + + public moveBackward(cursor: Cursor): Cursor { + const linesCursor = this.textArea.cursorLines(cursor); + + const selection = this.textArea.selection(linesCursor); + const lines = selection.split('\n'); + + const intentLines = lines.map((line) => { + if (line.startsWith(this.str)) return line.substring(this.str.length); + return line.replace(this.intentReg, ''); + }); + const intentCursor = this.operations.insert(linesCursor, intentLines.join('\n')); + + const firstLineTrimLength = lines[0].length - intentLines[0].length; + const lastLine = this.textArea.cursorLines( + new Cursor(intentCursor.end, intentCursor.end, 'none') + ); + + const start = Math.max(cursor.start - firstLineTrimLength, linesCursor.start); + const trimmedContentLength = linesCursor.length - intentCursor.length; + const end = Math.max(lastLine.start, cursor.end - trimmedContentLength); + return new Cursor(start, end, cursor.direction); + } + + public addNextLine(cursor: Cursor): Cursor { + const lineIntent = this.lineIntent(cursor); + const line = `\n${lineIntent}`; + + const insertCursor = this.operations.insert(cursor, line); + return new Cursor(insertCursor.end, insertCursor.end, 'none'); + } + + public addPreviousLine(cursor: Cursor): Cursor { + const lineIntent = this.lineIntent(cursor); + const line = `\n${lineIntent}`; + + const prevLine = this.textArea.prevLine(cursor); + const insertIndex = prevLine?.end ?? 0; + const lineCursor = new Cursor(insertIndex, insertIndex, 'none'); + const insertCursor = this.operations.insert(lineCursor, line); + return new Cursor(insertCursor.end, insertCursor.end, 'none'); + } +} diff --git a/src/app/plugins/text-area/mods/index.ts b/src/app/plugins/text-area/mods/index.ts new file mode 100644 index 00000000..7e1f4aa7 --- /dev/null +++ b/src/app/plugins/text-area/mods/index.ts @@ -0,0 +1 @@ +export * from './Intent'; diff --git a/src/app/plugins/text-area/type.ts b/src/app/plugins/text-area/type.ts new file mode 100644 index 00000000..1ce38ae6 --- /dev/null +++ b/src/app/plugins/text-area/type.ts @@ -0,0 +1 @@ +export type GetTarget = () => HTMLTextAreaElement;