wip
This commit is contained in:
evilchili
parent
2bbb0ba25f
commit
9748d12ede
|
|
@ -146,75 +146,3 @@
|
|||
#ribbit.vim-insert {
|
||||
border-left: 3px solid #4f4;
|
||||
}
|
||||
/*
|
||||
* ribbit-core.css — functional editor styles. Always load this.
|
||||
* These styles control editor state visibility and behavior.
|
||||
* They should not be overridden by themes.
|
||||
*/
|
||||
|
||||
#ribbit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ribbit.loaded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#ribbit.edit {
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#ribbit.wysiwyg .md {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.ribbit-editing::before,
|
||||
.ribbit-editing::after {
|
||||
opacity: 0.3;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
[data-speculative]::before,
|
||||
[data-speculative]::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
#ribbit.wysiwyg strong.ribbit-editing::before,
|
||||
#ribbit.wysiwyg strong.ribbit-editing::after {
|
||||
content: "**";
|
||||
}
|
||||
|
||||
#ribbit.wysiwyg em.ribbit-editing::before,
|
||||
#ribbit.wysiwyg em.ribbit-editing::after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
#ribbit.wysiwyg code.ribbit-editing::before,
|
||||
#ribbit.wysiwyg code.ribbit-editing::after {
|
||||
content: "\`";
|
||||
}
|
||||
|
||||
#ribbit.wysiwyg h1.ribbit-editing::before { content: "# "; font-size: 0.5em; }
|
||||
#ribbit.wysiwyg h2.ribbit-editing::before { content: "## "; font-size: 0.5em; }
|
||||
#ribbit.wysiwyg h3.ribbit-editing::before { content: "### "; font-size: 0.5em; }
|
||||
#ribbit.wysiwyg h4.ribbit-editing::before { content: "#### "; font-size: 0.5em; }
|
||||
#ribbit.wysiwyg h5.ribbit-editing::before { content: "##### "; font-size: 0.5em; }
|
||||
#ribbit.wysiwyg h6.ribbit-editing::before { content: "###### "; font-size: 0.5em; }
|
||||
|
||||
#ribbit.wysiwyg blockquote.ribbit-editing::before {
|
||||
content: "> ";
|
||||
}
|
||||
|
||||
#ribbit.vim-normal {
|
||||
cursor: default;
|
||||
caret-color: transparent;
|
||||
border-left: 3px solid #4af;
|
||||
}
|
||||
|
||||
#ribbit.vim-insert {
|
||||
border-left: 3px solid #4f4;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
337
src/ts/vim.ts
337
src/ts/vim.ts
|
|
@ -1,337 +0,0 @@
|
|||
/*
|
||||
* vim.ts — vim keybinding handler for ribbit source edit mode.
|
||||
*
|
||||
* Two modes: normal and insert. Activated in source (edit) mode only.
|
||||
* Esc enters normal mode, i/a/o/O enter insert mode.
|
||||
*
|
||||
* Normal mode commands:
|
||||
* h/j/k/l — cursor movement
|
||||
* w/b — word forward/back
|
||||
* 0/$ — line start/end
|
||||
* gg/G — document start/end
|
||||
* i — insert before cursor
|
||||
* a — insert after cursor
|
||||
* o — new line below, insert
|
||||
* O — new line above, insert
|
||||
* x — delete char under cursor
|
||||
* dd — delete line
|
||||
* u — undo
|
||||
* Ctrl+r — redo
|
||||
*/
|
||||
|
||||
type VimMode = 'normal' | 'insert';
|
||||
|
||||
/** Direction constants for cursor movement to avoid magic strings. */
|
||||
const DIRECTION = {
|
||||
LEFT: 'left' as const,
|
||||
RIGHT: 'right' as const,
|
||||
UP: 'up' as const,
|
||||
DOWN: 'down' as const,
|
||||
};
|
||||
|
||||
/** Selection API direction mappings. */
|
||||
const SELECTION_DIRECTION = {
|
||||
BACKWARD: 'backward' as const,
|
||||
FORWARD: 'forward' as const,
|
||||
};
|
||||
|
||||
/** Selection API granularity mappings. */
|
||||
const SELECTION_GRANULARITY = {
|
||||
CHARACTER: 'character' as const,
|
||||
LINE: 'line' as const,
|
||||
WORD: 'word' as const,
|
||||
LINE_BOUNDARY: 'lineboundary' as const,
|
||||
};
|
||||
|
||||
/** Regex to match digit keys for count prefix accumulation. */
|
||||
const DIGIT_PATTERN = /^[0-9]$/;
|
||||
|
||||
/** Default repeat count when no count prefix is given. */
|
||||
const DEFAULT_REPEAT_COUNT = '1';
|
||||
|
||||
/** Radix for parsing count prefix strings. */
|
||||
const DECIMAL_RADIX = 10;
|
||||
|
||||
/**
|
||||
* Handles vim-style keybindings in ribbit's source edit mode.
|
||||
*
|
||||
* Supports normal and insert modes with standard vim motions,
|
||||
* editing commands, and count prefixes.
|
||||
*
|
||||
* @example
|
||||
* const vim = new VimHandler((mode) => {
|
||||
* statusBar.textContent = mode;
|
||||
* });
|
||||
* vim.attach(editorElement);
|
||||
*/
|
||||
export class VimHandler {
|
||||
mode: VimMode;
|
||||
private element: HTMLElement | null;
|
||||
private listener: ((event: KeyboardEvent) => void) | null;
|
||||
private pending: string;
|
||||
private count: string;
|
||||
private onModeChange: (mode: VimMode) => void;
|
||||
|
||||
constructor(onModeChange: (mode: VimMode) => void) {
|
||||
this.mode = 'insert';
|
||||
this.element = null;
|
||||
this.listener = null;
|
||||
this.pending = '';
|
||||
this.count = '';
|
||||
this.onModeChange = onModeChange;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind vim keybindings to a DOM element.
|
||||
*
|
||||
* @example
|
||||
* vim.attach(document.getElementById('editor'));
|
||||
*/
|
||||
attach(element: HTMLElement): void {
|
||||
this.detach();
|
||||
this.element = element;
|
||||
this.pending = '';
|
||||
this.listener = (event: KeyboardEvent) => this.handleKey(event);
|
||||
this.element.addEventListener('keydown', this.listener);
|
||||
this.setMode('insert');
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove vim keybindings from the current element.
|
||||
*
|
||||
* @example
|
||||
* vim.detach();
|
||||
*/
|
||||
detach(): void {
|
||||
if (this.element && this.listener) {
|
||||
this.element.removeEventListener('keydown', this.listener);
|
||||
this.element.classList.remove('vim-normal', 'vim-insert');
|
||||
}
|
||||
this.element = null;
|
||||
this.listener = null;
|
||||
this.mode = 'insert';
|
||||
this.pending = '';
|
||||
}
|
||||
|
||||
private setMode(mode: VimMode): void {
|
||||
this.mode = mode;
|
||||
this.pending = '';
|
||||
this.count = '';
|
||||
this.onModeChange(mode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Routes keystrokes to insert-mode or normal-mode handling.
|
||||
* Insert mode only intercepts Escape; normal mode handles
|
||||
* all vim commands and suppresses default text input.
|
||||
*/
|
||||
private handleKey(event: KeyboardEvent): void {
|
||||
if (this.mode === 'insert') {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
this.setMode('normal');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Suppress default text input in normal mode
|
||||
event.preventDefault();
|
||||
|
||||
if (event.ctrlKey) {
|
||||
if (event.key === 'r') {
|
||||
document.execCommand('redo');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const key = event.key;
|
||||
|
||||
// Accumulate count prefix — 0 as first char is line-start, not count
|
||||
if (DIGIT_PATTERN.test(key) && (this.count || key !== '0')) {
|
||||
this.count += key;
|
||||
return;
|
||||
}
|
||||
|
||||
const repeat = parseInt(this.count || DEFAULT_REPEAT_COUNT, DECIMAL_RADIX);
|
||||
this.count = '';
|
||||
|
||||
if (this.pending) {
|
||||
const combo = this.pending + key;
|
||||
this.pending = '';
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.handlePending(combo);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.dispatchNormalKey(key, repeat);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatches a normal-mode key to the appropriate command.
|
||||
* Separated from handleKey to keep nesting shallow.
|
||||
*/
|
||||
private dispatchNormalKey(key: string, repeat: number): void {
|
||||
switch (key) {
|
||||
case 'i':
|
||||
this.setMode('insert');
|
||||
break;
|
||||
case 'a':
|
||||
this.moveCursor(DIRECTION.RIGHT);
|
||||
this.setMode('insert');
|
||||
break;
|
||||
case 'o':
|
||||
this.endOfLine();
|
||||
this.insertNewline();
|
||||
this.setMode('insert');
|
||||
break;
|
||||
case 'O':
|
||||
this.startOfLine();
|
||||
this.insertNewline();
|
||||
this.moveCursor(DIRECTION.UP);
|
||||
this.setMode('insert');
|
||||
break;
|
||||
|
||||
case 'h':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.moveCursor(DIRECTION.LEFT);
|
||||
}
|
||||
break;
|
||||
case 'j':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.moveCursor(DIRECTION.DOWN);
|
||||
}
|
||||
break;
|
||||
case 'k':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.moveCursor(DIRECTION.UP);
|
||||
}
|
||||
break;
|
||||
case 'l':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.moveCursor(DIRECTION.RIGHT);
|
||||
}
|
||||
break;
|
||||
case 'w':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.wordForward();
|
||||
}
|
||||
break;
|
||||
case 'b':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.wordBack();
|
||||
}
|
||||
break;
|
||||
case '0':
|
||||
this.startOfLine();
|
||||
break;
|
||||
case '$':
|
||||
this.endOfLine();
|
||||
break;
|
||||
case 'G':
|
||||
this.endOfDocument();
|
||||
break;
|
||||
|
||||
case 'x':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
this.deleteChar();
|
||||
}
|
||||
break;
|
||||
case 'u':
|
||||
for (let step = 0; step < repeat; step++) {
|
||||
document.execCommand('undo');
|
||||
}
|
||||
break;
|
||||
|
||||
// Two-char commands — preserve count for the second key
|
||||
case 'd':
|
||||
case 'g':
|
||||
this.pending = key;
|
||||
if (repeat > 1) {
|
||||
this.count = String(repeat);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private handlePending(combo: string): void {
|
||||
switch (combo) {
|
||||
case 'dd':
|
||||
this.deleteLine();
|
||||
break;
|
||||
case 'gg':
|
||||
this.startOfDocument();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private moveCursor(direction: 'left' | 'right' | 'up' | 'down'): void {
|
||||
const selection = window.getSelection();
|
||||
if (!selection) {
|
||||
return;
|
||||
}
|
||||
const selectionDirection = (direction === DIRECTION.LEFT || direction === DIRECTION.UP)
|
||||
? SELECTION_DIRECTION.BACKWARD
|
||||
: SELECTION_DIRECTION.FORWARD;
|
||||
const granularity = (direction === DIRECTION.UP || direction === DIRECTION.DOWN)
|
||||
? SELECTION_GRANULARITY.LINE
|
||||
: SELECTION_GRANULARITY.CHARACTER;
|
||||
selection.modify('move', selectionDirection, granularity);
|
||||
}
|
||||
|
||||
private wordForward(): void {
|
||||
window.getSelection()?.modify('move', SELECTION_DIRECTION.FORWARD, SELECTION_GRANULARITY.WORD);
|
||||
}
|
||||
|
||||
private wordBack(): void {
|
||||
window.getSelection()?.modify('move', SELECTION_DIRECTION.BACKWARD, SELECTION_GRANULARITY.WORD);
|
||||
}
|
||||
|
||||
private startOfLine(): void {
|
||||
window.getSelection()?.modify('move', SELECTION_DIRECTION.BACKWARD, SELECTION_GRANULARITY.LINE_BOUNDARY);
|
||||
}
|
||||
|
||||
private endOfLine(): void {
|
||||
window.getSelection()?.modify('move', SELECTION_DIRECTION.FORWARD, SELECTION_GRANULARITY.LINE_BOUNDARY);
|
||||
}
|
||||
|
||||
private startOfDocument(): void {
|
||||
const selection = window.getSelection();
|
||||
if (!selection || !this.element) {
|
||||
return;
|
||||
}
|
||||
const range = document.createRange();
|
||||
range.setStart(this.element, 0);
|
||||
range.collapse(true);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
|
||||
private endOfDocument(): void {
|
||||
const selection = window.getSelection();
|
||||
if (!selection || !this.element) {
|
||||
return;
|
||||
}
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(this.element);
|
||||
range.collapse(false);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
|
||||
private deleteChar(): void {
|
||||
document.execCommand('forwardDelete');
|
||||
}
|
||||
|
||||
private deleteLine(): void {
|
||||
this.startOfLine();
|
||||
window.getSelection()?.modify('extend', SELECTION_DIRECTION.FORWARD, SELECTION_GRANULARITY.LINE_BOUNDARY);
|
||||
document.execCommand('delete');
|
||||
// Remove the trailing newline left after deleting line content
|
||||
document.execCommand('forwardDelete');
|
||||
}
|
||||
|
||||
private insertNewline(): void {
|
||||
document.execCommand('insertLineBreak');
|
||||
}
|
||||
}
|
||||
|
|
@ -107,14 +107,6 @@ describe('RibbitEditor modes', () => {
|
|||
expect(editor.element.contentEditable).toBe('true');
|
||||
});
|
||||
|
||||
it('switches to edit', () => {
|
||||
const editor = new lib.Editor({});
|
||||
editor.run();
|
||||
editor.wysiwyg();
|
||||
editor.edit();
|
||||
expect(editor.getState()).toBe('edit');
|
||||
});
|
||||
|
||||
it('switches back to view', () => {
|
||||
const editor = new lib.Editor({});
|
||||
editor.run();
|
||||
|
|
@ -135,25 +127,10 @@ describe('RibbitEditor modes', () => {
|
|||
});
|
||||
editor.run();
|
||||
editor.wysiwyg();
|
||||
editor.edit();
|
||||
editor.view();
|
||||
expect(modes).toEqual(['view', 'wysiwyg', 'edit', 'view']);
|
||||
});
|
||||
|
||||
it('sourceMode disabled blocks edit', () => {
|
||||
resetDOM();
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'no-source',
|
||||
themes: [{
|
||||
name: 'no-source',
|
||||
features: { sourceMode: false },
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.wysiwyg();
|
||||
editor.edit();
|
||||
expect(editor.getState()).toBe('wysiwyg');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ThemeManager', () => {
|
||||
|
|
@ -229,7 +206,6 @@ describe('defaultTheme', () => {
|
|||
it('has correct shape', () => {
|
||||
expect(lib.defaultTheme.name).toBe('ribbit-default');
|
||||
expect(lib.defaultTheme.tags).toBeDefined();
|
||||
expect(lib.defaultTheme.features.sourceMode).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -252,17 +228,28 @@ describe('Utility functions', () => {
|
|||
});
|
||||
|
||||
describe('Editor htmlToMarkdown', () => {
|
||||
beforeEach(() => resetDOM());
|
||||
|
||||
it('converts strong', () => {
|
||||
it('returns markdown in view state', () => {
|
||||
resetDOM('**bold**');
|
||||
const editor = new lib.Editor({});
|
||||
console.log(editor.getMarkdown());
|
||||
editor.run();
|
||||
expect(editor.htmlToMarkdown('<strong>bold</strong>')).toBe('**bold**');
|
||||
console.log(editor.getMarkdown());
|
||||
expect(editor.getMarkdown()).toBe('**bold**');
|
||||
});
|
||||
|
||||
it('converts em', () => {
|
||||
it('returns markdown in wysiwyg state', () => {
|
||||
resetDOM('**bold**');
|
||||
const editor = new lib.Editor({});
|
||||
editor.run();
|
||||
expect(editor.htmlToMarkdown('<em>italic</em>')).toBe('*italic*');
|
||||
editor.wysiwyg();
|
||||
expect(editor.getMarkdown()).toBe('**bold**');
|
||||
});
|
||||
|
||||
it('round-trips inline formatting', () => {
|
||||
resetDOM('hello **world** and *italic*');
|
||||
const editor = new lib.Editor({});
|
||||
editor.run();
|
||||
editor.wysiwyg();
|
||||
expect(editor.getMarkdown()).toBe('hello **world** and *italic*');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
150
test/vim.test.ts
150
test/vim.test.ts
|
|
@ -1,150 +0,0 @@
|
|||
import { ribbit, resetDOM } from './setup';
|
||||
|
||||
const lib = ribbit();
|
||||
|
||||
describe('VimHandler', () => {
|
||||
beforeEach(() => resetDOM('hello world'));
|
||||
|
||||
it('starts in insert mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.edit();
|
||||
expect(editor.element.classList.contains('vim-insert')).toBe(true);
|
||||
});
|
||||
|
||||
it('Esc enters normal mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.edit();
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
expect(editor.element.classList.contains('vim-normal')).toBe(true);
|
||||
expect(editor.element.classList.contains('vim-insert')).toBe(false);
|
||||
});
|
||||
|
||||
it('i returns to insert mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.edit();
|
||||
// Enter normal mode
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
// Back to insert
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'i' }));
|
||||
expect(editor.element.classList.contains('vim-insert')).toBe(true);
|
||||
expect(editor.element.classList.contains('vim-normal')).toBe(false);
|
||||
});
|
||||
|
||||
it('disables toolbar in normal mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
autoToolbar: false,
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.toolbar.render();
|
||||
editor.edit();
|
||||
editor.toolbar.enable();
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
const bold = editor.toolbar.buttons.get('bold');
|
||||
expect(bold?.element?.classList.contains('disabled')).toBe(true);
|
||||
});
|
||||
|
||||
it('re-enables toolbar in insert mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
autoToolbar: false,
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.toolbar.render();
|
||||
editor.edit();
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'i' }));
|
||||
const bold = editor.toolbar.buttons.get('bold');
|
||||
expect(bold?.element?.classList.contains('disabled')).toBe(false);
|
||||
});
|
||||
|
||||
it('detaches when leaving edit mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.edit();
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
expect(editor.element.classList.contains('vim-normal')).toBe(true);
|
||||
editor.wysiwyg();
|
||||
// vim classes should be gone after mode switch
|
||||
expect(editor.element.classList.contains('vim-normal')).toBe(false);
|
||||
expect(editor.element.classList.contains('vim-insert')).toBe(false);
|
||||
});
|
||||
|
||||
it('only activates in edit mode', () => {
|
||||
const editor = new lib.Editor({
|
||||
currentTheme: 'vim',
|
||||
themes: [{
|
||||
name: 'vim',
|
||||
features: {
|
||||
sourceMode: true,
|
||||
vim: true,
|
||||
},
|
||||
tags: lib.defaultTags,
|
||||
}],
|
||||
});
|
||||
editor.run();
|
||||
editor.wysiwyg();
|
||||
// Esc in wysiwyg should not add vim classes
|
||||
editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
expect(editor.element.classList.contains('vim-normal')).toBe(false);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user