mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 03:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

redesigned app settings and switch to rust crypto (#1988)

Browse source 
* rework general settings

* account settings - WIP

* add missing key prop

* add object url hook

* extract wide modal styles

* profile settings and image editor - WIP

* add outline style to upload card

* remove file param from bind upload atom hook

* add compact variant to upload card

* add  compact upload card renderer

* add option to update profile avatar

* add option to change profile displayname

* allow displayname change based on capabilities check

* rearrange settings components into folders

* add system notification settings

* add initial page param in settings

* convert account data hook to typescript

* add push rule hook

* add notification mode hook

* add notification mode switcher component

* add all messages notification settings options

* add special messages notification settings

* add keyword notifications

* add ignored users section

* improve ignore user list strings

* add about settings

* add access token option in about settings

* add developer tools settings

* add expand button to account data dev tool option

* update folds

* fix editable active element textarea check

* do not close dialog when editable element in focus

* add text area plugins

* add text area intent handler hook

* add newline intent mod in text area

* add next line hotkey in text area intent hook

* add syntax error position dom utility function

* add account data editor

* add button to send new account data in dev tools

* improve custom emoji plugin

* add more custom emojis hooks

* add text util css

* add word break in setting tile title and description

* emojis and sticker user settings - WIP

* view image packs from settings

* emoji pack editing - WIP

* add option to edit pack meta

* change saved changes message

* add image edit and delete controls

* add option to upload pack images and apply changes

* fix state event type when updating image pack

* lazy load pack image tile img

* hide upload image button when user can not edit pack

* add option to add or remove global image packs

* upgrade to rust crypto (#2168)

* update matrix js sdk

* remove dead code

* use rust crypto

* update setPowerLevel usage

* fix types

* fix deprecated isRoomEncrypted method uses

* fix deprecated room.currentState uses

* fix deprecated import/export room keys func

* fix merge issues in image pack file

* fix remaining issues in image pack file

* start indexedDBStore

* update package lock and vite-plugin-top-level-await

* user session settings - WIP

* add useAsync hook

* add password stage uia

* add uia flow matrix error hook

* add UIA action component

* add options to delete sessions

* add sso uia stage

* fix SSO stage complete error

* encryption - WIP

* update user settings encryption terminology

* add default variant to password input

* use password input in uia password stage

* add options for local backup in user settings

* remove typo in import local backup password input label

* online backup - WIP

* fix uia sso action

* move access token settings from about to developer tools

* merge encryption tab into sessions and rename it to devices

* add device placeholder tile

* add logout dialog

* add logout button for current device

* move other devices in component

* render unverified device verification tile

* add learn more section for current device verification

* add device verification status badge

* add info card component

* add index file for password input component

* add types for secret storage

* add component to access secret storage key

* manual verification - WIP

* update matrix-js-sdk to v35

* add manual verification

* use react query for device list

* show unverified tab on sidebar

* fix device list updates

* add session key details to current device

* render restore encryption backup

* fix loading state of restore backup

* fix unverified tab settings closes after verification

* key backup tile - WIP

* fix unverified tab badge

* rename session key to device key in device tile

* improve backup restore functionality

* fix restore button enabled after layout reload during restoring backup

* update backup info on status change

* add backup disconnection failures

* add device verification using sas

* restore backup after verification

* show option to logout on startup error screen

* fix key backup hook update on decryption key cached

* add option to enable device verification

* add device verification reset dialog

* add logout button in settings drawer

* add encrypted message lost on logout

* fix backup restore never finish with 0 keys

* fix setup dialog hides when enabling device verification

* show backup details in menu

* update setup device verification body copy

* replace deprecated method

* fix displayname appear as mxid in settings

* remove old refactored codes

* fix types
This commit is contained in:
Ajay Bura 2025-02-10 16:49:47 +11:00 • committed by GitHub
parent f5d68fcc22
commit 56b754153a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
196 changed files with 14171 additions and 8403 deletions
Download patch file Download diff file Expand all files Collapse all files

303
src/app/plugins/custom-emoji.ts
View file

@ -1,303 +0,0 @@
import { IImageInfo, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
import { AccountDataEvent } from '../../types/matrix/accountData';
import { getAccountData, getStateEvents } from '../utils/room';
import { StateEvent } from '../../types/matrix/room';
// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
export type PackEventIdToUnknown = Record<string, unknown>;
export type EmoteRoomIdToPackEvents = Record<string, PackEventIdToUnknown>;
export type EmoteRoomsContent = {
rooms?: EmoteRoomIdToPackEvents;
};
export enum PackUsage {
Emoticon = 'emoticon',
Sticker = 'sticker',
}
export type PackImage = {
url: string;
body?: string;
usage?: PackUsage[];
info?: IImageInfo;
};
export type PackImages = Record<string, PackImage>;
export type PackMeta = {
display_name?: string;
avatar_url?: string;
attribution?: string;
usage?: PackUsage[];
};
export type ExtendedPackImage = PackImage & {
shortcode: string;
};
export type PackContent = {
pack?: PackMeta;
images?: PackImages;
};
export class ImagePack {
public id: string;
public content: PackContent;
public displayName?: string;
public avatarUrl?: string;
public usage?: PackUsage[];
public attribution?: string;
public images: Map<string, ExtendedPackImage>;
public emoticons: ExtendedPackImage[];
public stickers: ExtendedPackImage[];
static parsePack(eventId: string, packContent: PackContent) {
if (!eventId || typeof packContent?.images !== 'object') {
return undefined;
}
return new ImagePack(eventId, packContent);
}
constructor(eventId: string, content: PackContent) {
this.id = eventId;
this.content = JSON.parse(JSON.stringify(content));
this.images = new Map();
this.emoticons = [];
this.stickers = [];
this.applyPackMeta(content);
this.applyImages(content);
}
applyPackMeta(content: PackContent) {
const pack = content.pack ?? {};
this.displayName = pack.display_name;
this.avatarUrl = pack.avatar_url;
this.usage = pack.usage ?? [PackUsage.Emoticon, PackUsage.Sticker];
this.attribution = pack.attribution;
}
applyImages(content: PackContent) {
this.images = new Map();
this.emoticons = [];
this.stickers = [];
if (!content.images) return;
Object.entries(content.images).forEach(([shortcode, data]) => {
const { url } = data;
const body = data.body ?? shortcode;
const usage = data.usage ?? this.usage;
const { info } = data;
if (!url) return;
const image: ExtendedPackImage = {
shortcode,
url,
body,
usage,
info,
};
this.images.set(shortcode, image);
if (usage && usage.includes(PackUsage.Emoticon)) {
this.emoticons.push(image);
}
if (usage && usage.includes(PackUsage.Sticker)) {
this.stickers.push(image);
}
});
}
getImages() {
return this.images;
}
getEmojis() {
return this.emoticons;
}
getStickers() {
return this.stickers;
}
getImagesFor(usage: PackUsage) {
if (usage === PackUsage.Emoticon) return this.getEmojis();
if (usage === PackUsage.Sticker) return this.getStickers();
return this.getEmojis();
}
getContent() {
return this.content;
}
getPackAvatarUrl(usage: PackUsage): string | undefined {
return this.avatarUrl || this.getImagesFor(usage)[0].url;
}
private updatePackProperty<K extends keyof PackMeta>(property: K, value: PackMeta[K]) {
if (this.content.pack === undefined) {
this.content.pack = {};
}
this.content.pack[property] = value;
this.applyPackMeta(this.content);
}
setAvatarUrl(avatarUrl?: string) {
this.updatePackProperty('avatar_url', avatarUrl);
}
setDisplayName(displayName?: string) {
this.updatePackProperty('display_name', displayName);
}
setAttribution(attribution?: string) {
this.updatePackProperty('attribution', attribution);
}
setUsage(usage?: PackUsage[]) {
this.updatePackProperty('usage', usage);
}
addImage(key: string, imgContent: PackImage) {
this.content.images = {
[key]: imgContent,
...this.content.images,
};
this.applyImages(this.content);
}
removeImage(key: string) {
if (!this.content.images) return;
if (this.content.images[key] === undefined) return;
delete this.content.images[key];
this.applyImages(this.content);
}
updateImageKey(key: string, newKey: string) {
const { images } = this.content;
if (!images) return;
if (images[key] === undefined) return;
const copyImages: PackImages = {};
Object.keys(images).forEach((imgKey) => {
copyImages[imgKey === key ? newKey : imgKey] = images[imgKey];
});
this.content.images = copyImages;
this.applyImages(this.content);
}
private updateImageProperty<K extends keyof PackImage>(
key: string,
property: K,
value: PackImage[K]
) {
if (!this.content.images) return;
if (this.content.images[key] === undefined) return;
this.content.images[key][property] = value;
this.applyImages(this.content);
}
setImageUrl(key: string, url: string) {
this.updateImageProperty(key, 'url', url);
}
setImageBody(key: string, body?: string) {
this.updateImageProperty(key, 'body', body);
}
setImageInfo(key: string, info?: IImageInfo) {
this.updateImageProperty(key, 'info', info);
}
setImageUsage(key: string, usage?: PackUsage[]) {
this.updateImageProperty(key, 'usage', usage);
}
}
export function packEventsToImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
const packId = packEvent?.getId();
const content = packEvent?.getContent() as PackContent | undefined;
if (!packId || !content) return imagePacks;
const pack = ImagePack.parsePack(packId, content);
if (pack) {
imagePacks.push(pack);
}
return imagePacks;
}, []);
}
export function getRoomImagePacks(room: Room): ImagePack[] {
const dataEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
return packEventsToImagePacks(dataEvents);
}
export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
| EmoteRoomsContent
| undefined;
if (typeof emoteRoomsContent !== 'object') return [];
const { rooms } = emoteRoomsContent;
if (typeof rooms !== 'object') return [];
const roomIds = Object.keys(rooms);
const packs = roomIds.flatMap((roomId) => {
if (typeof rooms[roomId] !== 'object') return [];
const room = mx.getRoom(roomId);
if (!room) return [];
const packEventIdToUnknown = rooms[roomId];
const roomPacks = getStateEvents(room, StateEvent.PoniesRoomEmotes);
const globalPacks = roomPacks.filter((mE) => {
const packKey = mE.getStateKey();
if (typeof packKey === 'string') return !!packEventIdToUnknown[packKey];
return false;
});
return packEventsToImagePacks(globalPacks);
});
return packs;
}
export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
const userPackContent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes)?.getContent() as
| PackContent
| undefined;
const userId = mx.getUserId();
if (!userPackContent || !userId) {
return undefined;
}
const userImagePack = ImagePack.parsePack(userId, userPackContent);
return userImagePack;
}
/**
* @param {MatrixClient} mx Provide if you want to include user personal/global pack
* @param {Room[]} rooms Provide rooms if you want to include rooms pack
* @returns {ImagePack[]} packs
*/
export function getRelevantPacks(mx?: MatrixClient, rooms?: Room[]): ImagePack[] {
const userPack = mx && getUserImagePack(mx);
const userPacks = userPack ? [userPack] : [];
const globalPacks = mx ? getGlobalImagePacks(mx) : [];
const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
return userPacks.concat(
globalPacks,
roomsPack.filter((pack) => !globalPackIds.has(pack.id))
);
}

78
src/app/plugins/custom-emoji/ImagePack.ts Normal file
View file

@ -0,0 +1,78 @@
import { MatrixEvent } from 'matrix-js-sdk';
import { PackAddress } from './PackAddress';
import { PackImageReader } from './PackImageReader';
import { PackImagesReader } from './PackImagesReader';
import { PackMetaReader } from './PackMetaReader';
import { ImageUsage, PackContent } from './types';
export class ImagePack {
public readonly id: string;
public readonly deleted: boolean;
public readonly address: PackAddress | undefined;
public readonly meta: PackMetaReader;
public readonly images: PackImagesReader;
private emoticonMemo: PackImageReader[] | undefined;
private stickerMemo: PackImageReader[] | undefined;
constructor(id: string, content: PackContent, address: PackAddress | undefined) {
this.id = id;
this.address = address;
this.deleted = content.pack === undefined && content.images === undefined;
this.meta = new PackMetaReader(content.pack ?? {});
this.images = new PackImagesReader(content.images ?? {});
}
static fromMatrixEvent(id: string, matrixEvent: MatrixEvent) {
const roomId = matrixEvent.getRoomId();
const stateKey = matrixEvent.getStateKey();
const address =
roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
const content = matrixEvent.getContent<PackContent>();
const imagePack: ImagePack = new ImagePack(id, content, address);
return imagePack;
}
public getImages(usage: ImageUsage): PackImageReader[] {
if (usage === ImageUsage.Emoticon && this.emoticonMemo) {
return this.emoticonMemo;
}
if (usage === ImageUsage.Sticker && this.stickerMemo) {
return this.stickerMemo;
}
const images = Array.from(this.images.collection.values()).filter((image) => {
const usg = image.usage ?? this.meta.usage;
return usg.includes(usage);
});
if (usage === ImageUsage.Emoticon) {
this.emoticonMemo = images;
}
if (usage === ImageUsage.Sticker) {
this.stickerMemo = images;
}
return images;
}
public getAvatarUrl(usage: ImageUsage): string | undefined {
if (this.meta.avatar) return this.meta.avatar;
const images = this.getImages(usage);
const firstImage = images[0];
if (firstImage) return firstImage.url;
return undefined;
}
}

10
src/app/plugins/custom-emoji/PackAddress.ts Normal file
View file

@ -0,0 +1,10 @@
export class PackAddress {
public readonly roomId: string;
public readonly stateKey: string;
constructor(roomId: string, stateKey: string) {
this.roomId = roomId;
this.stateKey = stateKey;
}
}

52
src/app/plugins/custom-emoji/PackImageReader.ts Normal file
View file

@ -0,0 +1,52 @@
import { IImageInfo } from '../../../types/matrix/common';
import { ImageUsage, PackImage } from './types';
export class PackImageReader {
public readonly shortcode: string;
public readonly url: string;
private readonly image: Omit<PackImage, 'url'>;
constructor(shortcode: string, url: string, image: Omit<PackImage, 'url'>) {
this.shortcode = shortcode;
this.url = url;
this.image = image;
}
static fromPackImage(shortcode: string, image: PackImage): PackImageReader | undefined {
const { url } = image;
if (typeof url !== 'string') return undefined;
return new PackImageReader(shortcode, url, image);
}
get body(): string | undefined {
const { body } = this.image;
return typeof body === 'string' ? body : undefined;
}
get info(): IImageInfo | undefined {
return this.image.info;
}
get usage(): ImageUsage[] | undefined {
const usg = this.image.usage;
if (!Array.isArray(usg)) return undefined;
const knownUsage = usg.filter((u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker);
return knownUsage.length > 0 ? knownUsage : undefined;
}
get content(): PackImage {
return {
url: this.url,
body: this.image.body,
usage: this.image.usage,
info: this.image.info,
};
}
}

28
src/app/plugins/custom-emoji/PackImagesReader.ts Normal file
View file

@ -0,0 +1,28 @@
import { PackImageReader } from './PackImageReader';
import { PackImages } from './types';
export class PackImagesReader {
private readonly rawImages: PackImages;
private shortcodeToImages: Map<string, PackImageReader> | undefined;
constructor(images: PackImages) {
this.rawImages = images;
}
get collection(): Map<string, PackImageReader> {
if (this.shortcodeToImages) return this.shortcodeToImages;
const shortcodeToImages: Map<string, PackImageReader> = new Map();
Object.entries(this.rawImages).forEach(([shortcode, image]) => {
const imageReader = PackImageReader.fromPackImage(shortcode, image);
if (imageReader) {
shortcodeToImages.set(shortcode, imageReader);
}
});
this.shortcodeToImages = shortcodeToImages;
return this.shortcodeToImages;
}
}

45
src/app/plugins/custom-emoji/PackMetaReader.ts Normal file
View file

@ -0,0 +1,45 @@
import { PackMeta, ImageUsage } from './types';
export class PackMetaReader {
private readonly meta: PackMeta;
public readonly fallbackUsage: ImageUsage[] = [ImageUsage.Emoticon, ImageUsage.Sticker];
constructor(meta: PackMeta) {
this.meta = meta;
}
get name(): string | undefined {
const displayName = this.meta.display_name;
if (typeof displayName === 'string') return displayName;
return undefined;
}
get avatar(): string | undefined {
const avatarURL = this.meta.avatar_url;
if (typeof avatarURL === 'string') return avatarURL;
return undefined;
}
get attribution(): string | undefined {
const { attribution } = this.meta;
if (typeof this.meta.attribution === 'string') return attribution;
return undefined;
}
get usage(): ImageUsage[] {
if (!Array.isArray(this.meta.usage)) return this.fallbackUsage;
const knownUsage = this.meta.usage.filter(
(u) => u === ImageUsage.Emoticon || u === ImageUsage.Sticker
);
if (knownUsage.length === 0) return this.fallbackUsage;
return knownUsage;
}
get content(): PackMeta {
return this.meta;
}
}

7
src/app/plugins/custom-emoji/index.ts Normal file
View file

@ -0,0 +1,7 @@
export * from './PackAddress';
export * from './PackMetaReader';
export * from './PackImageReader';
export * from './PackImagesReader';
export * from './ImagePack';
export * from './types';
export * from './utils';

41
src/app/plugins/custom-emoji/types.ts Normal file
View file

@ -0,0 +1,41 @@
import { IImageInfo } from '../../../types/matrix/common';
// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
/**
* im.ponies.emote_rooms content
*/
export type PackStateKeyToObject = Record<string, object>;
export type RoomIdToStateKey = Record<string, PackStateKeyToObject>;
export type EmoteRoomsContent = {
rooms?: RoomIdToStateKey;
};
/**
* Pack
*/
export enum ImageUsage {
Emoticon = 'emoticon',
Sticker = 'sticker',
}
export type PackImage = {
url: string;
body?: string;
usage?: ImageUsage[];
info?: IImageInfo;
};
export type PackImages = Record<string, PackImage>;
export type PackMeta = {
display_name?: string;
avatar_url?: string;
attribution?: string;
usage?: ImageUsage[];
};
export type PackContent = {
pack?: PackMeta;
images?: PackImages;
};

88
src/app/plugins/custom-emoji/utils.ts Normal file
View file

@ -0,0 +1,88 @@
import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
import { ImagePack } from './ImagePack';
import { EmoteRoomsContent, ImageUsage } from './types';
import { StateEvent } from '../../../types/matrix/room';
import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
import { AccountDataEvent } from '../../../types/matrix/accountData';
import { PackMetaReader } from './PackMetaReader';
import { PackAddress } from './PackAddress';
export function packAddressEqual(a1?: PackAddress, a2?: PackAddress): boolean {
if (!a1 && !a2) return true;
if (!a1 || !a2) return false;
return a1.roomId === a2.roomId && a1.stateKey === a2.stateKey;
}
export function imageUsageEqual(u1: ImageUsage[], u2: ImageUsage[]) {
return u1.length === u2.length && u1.every((u) => u2.includes(u));
}
export function packMetaEqual(a: PackMetaReader, b: PackMetaReader): boolean {
return (
a.name === b.name &&
a.avatar === b.avatar &&
a.attribution === b.attribution &&
imageUsageEqual(a.usage, b.usage)
);
}
export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
const packId = packEvent.getId();
if (!packId) return imagePacks;
imagePacks.push(ImagePack.fromMatrixEvent(packId, packEvent));
return imagePacks;
}, []);
}
export function getRoomImagePack(room: Room, stateKey: string): ImagePack | undefined {
const packEvent = getStateEvent(room, StateEvent.PoniesRoomEmotes, stateKey);
if (!packEvent) return undefined;
const packId = packEvent.getId();
if (!packId) return undefined;
return ImagePack.fromMatrixEvent(packId, packEvent);
}
export function getRoomImagePacks(room: Room): ImagePack[] {
const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
return makeImagePacks(packEvents);
}
export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
| EmoteRoomsContent
| undefined;
if (typeof emoteRoomsContent !== 'object') return [];
const { rooms: roomIdToPackInfo } = emoteRoomsContent;
if (typeof roomIdToPackInfo !== 'object') return [];
const roomIds = Object.keys(roomIdToPackInfo);
const packs = roomIds.flatMap((roomId) => {
if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
const room = mx.getRoom(roomId);
if (!room) return [];
const packStateKeyToUnknown = roomIdToPackInfo[roomId];
const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
const globalPackEvents = packEvents.filter((mE) => {
const stateKey = mE.getStateKey();
if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
return false;
});
return makeImagePacks(globalPackEvents);
});
return packs;
}
export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
const packEvent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes);
const userId = mx.getUserId();
if (!packEvent || !userId) {
return undefined;
}
const userImagePack = ImagePack.fromMatrixEvent(userId, packEvent);
return userImagePack;
}

1
src/app/plugins/react-prism/ReactPrism.tsx
View file

@ -16,7 +16,6 @@ import 'prismjs/components/prism-java';
import 'prismjs/components/prism-python';
import './ReactPrism.css';
// we apply theme in client/state/settings.js
// using classNames .prism-dark .prism-light from ReactPrism.css
export default function ReactPrism({

27
src/app/plugins/text-area/Cursor.ts Normal file
View file

@ -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;
}
}

7
src/app/plugins/text-area/Operations.ts Normal file
View file

@ -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;
}

58
src/app/plugins/text-area/TextArea.ts Normal file
View file

@ -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;
}
}

34
src/app/plugins/text-area/TextAreaOperations.ts Normal file
View file

@ -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);
}
}

5
src/app/plugins/text-area/TextUtils.ts Normal file
View file

@ -0,0 +1,5 @@
export class TextUtils {
static multiline(str: string) {
return str.indexOf('\n') !== -1;
}
}

6
src/app/plugins/text-area/index.ts Normal file
View file

@ -0,0 +1,6 @@
export * from './Cursor';
export * from './mods';
export * from './Operations';
export * from './TextArea';
export * from './TextAreaOperations';
export * from './TextUtils';

102
src/app/plugins/text-area/mods/Intent.ts Normal file
View file

@ -0,0 +1,102 @@
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 addNewLine(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 addNextLine(cursor: Cursor): Cursor {
const lineIntent = this.lineIntent(cursor);
const line = `\n${lineIntent}`;
const currentLine = this.textArea.cursorLines(cursor);
const lineCursor = new Cursor(currentLine.end, currentLine.end, 'none');
const insertCursor = this.operations.insert(lineCursor, 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');
}
}

1
src/app/plugins/text-area/mods/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './Intent';

1
src/app/plugins/text-area/type.ts Normal file
View file

@ -0,0 +1 @@
export type GetTarget = () => HTMLTextAreaElement;