Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 60be06e

Browse files
RafaelGBRafaelGB
committed
textarea on editor
1 parent d6dd0df commit 60be06e

File tree

12 files changed

+77
-60
lines changed

12 files changed

+77
-60
lines changed

‎src/cdm/EditorModel.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { DatabaseView } from "DatabaseView";
2+
import { AllHTMLAttributes, DetailedHTMLProps } from "react";
3+
4+
export interface MarkdownEditorProps
5+
extends DetailedHTMLProps<AllHTMLAttributes<HTMLTextAreaElement>, any> {
6+
onEnter: (e: KeyboardEvent) => void;
7+
onEscape: (e: KeyboardEvent) => void;
8+
view: DatabaseView;
9+
}

‎src/components/cellTypes/Editor/MarkdownEditor.tsx‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import { DatabaseView } from "DatabaseView";
2-
import React, {
3-
AllHTMLAttributes,
4-
DetailedHTMLProps,
5-
forwardRef,
6-
Ref,
7-
useEffect,
8-
} from "react";
1+
import React, { forwardRef, Ref, useEffect } from "react";
92
import { useAutocompleteInputProps } from "components/cellTypes/Editor/autocomplete";
103
import {
114
autoPairBracketsCommands,
@@ -16,17 +9,11 @@ import {
169
unpairMarkdown,
1710
} from "components/cellTypes/Editor/commands";
1811
import { EMITTERS_GROUPS } from "helpers/Constants";
19-
20-
interface MarkdownEditorProps
21-
extends DetailedHTMLProps<AllHTMLAttributes<HTMLInputElement>, any> {
22-
onEnter: (e: KeyboardEvent) => void;
23-
onEscape: (e: KeyboardEvent) => void;
24-
view: DatabaseView;
25-
}
12+
import { MarkdownEditorProps } from "cdm/EditorModel";
2613

2714
export const MarkdownEditor = forwardRef(function MarkdownEditor(
2815
{ onEnter, onEscape, view, ...inputProps }: MarkdownEditorProps,
29-
ref: Ref<HTMLInputElement>
16+
ref: Ref<HTMLTextAreaElement>
3017
) {
3118
const shouldAutoPairMarkdown = (app.vault as any).getConfig(
3219
"autoPairMarkdown"
@@ -46,17 +33,17 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
4633
onEscape,
4734
onKeyDown: (e) => {
4835
if (e.key === "Backspace") {
49-
const handledBrackets = unpairBrackets(e.target as HTMLInputElement);
36+
const handledBrackets = unpairBrackets(e.target as HTMLTextAreaElement);
5037
if (handledBrackets) return handledBrackets;
5138

52-
return unpairMarkdown(e.target as HTMLInputElement);
39+
return unpairMarkdown(e.target as HTMLTextAreaElement);
5340
}
5441

5542
if (e.key === "Tab") {
5643
e.preventDefault();
5744

5845
return handleTab(
59-
e.target as HTMLInputElement,
46+
e.target as HTMLTextAreaElement,
6047
e.shiftKey,
6148
shouldUseTab,
6249
tabWidth
@@ -66,7 +53,7 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
6653
if (shouldAutoPairMarkdown) {
6754
const command = autoPairMarkdownCommands[e.key];
6855
if (command) {
69-
const handled = command(e.target as HTMLInputElement);
56+
const handled = command(e.target as HTMLTextAreaElement);
7057
if (handled) {
7158
e.preventDefault();
7259
return true;
@@ -81,7 +68,7 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
8168

8269
const command = autoPairBracketsCommands[e.key];
8370
if (command) {
84-
const handled = command(e.target as HTMLInputElement);
71+
const handled = command(e.target as HTMLTextAreaElement);
8572
if (handled) {
8673
e.preventDefault();
8774
return true;
@@ -111,11 +98,10 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
11198
}, [view]);
11299

113100
return (
114-
<input
115-
rows={1}
101+
<textarea
116102
{...inputProps}
117103
{...autocompleteProps}
118-
ref={(c: HTMLInputElement) => {
104+
ref={(c: HTMLTextAreaElement) => {
119105
autocompleteProps.ref.current = c;
120106

121107
if (ref && typeof ref === "function") {

‎src/components/cellTypes/Editor/autocomplete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
import { InputEditor } from "components/cellTypes/Editor/textcomplete/textcomplete-input";
2020

2121
export interface ConstructAutocompleteParams {
22-
inputRef: RefObject<HTMLInputElement>;
22+
inputRef: RefObject<HTMLTextAreaElement>;
2323
isAutocompleteVisibleRef: RefObject<boolean>;
2424
view: DatabaseView;
2525
}
@@ -126,7 +126,7 @@ export function useAutocompleteInputProps({
126126
view,
127127
}: UseAutocompleteInputPropsParams) {
128128
const isAutocompleteVisibleRef = useRef<boolean>(false);
129-
const inputRef = useRef<HTMLInputElement>();
129+
const inputRef = useRef<HTMLTextAreaElement>();
130130
const { onCompositionStart, onCompositionEnd, getShouldIMEBlockAction } =
131131
useIMEInputProps();
132132

‎src/components/cellTypes/Editor/commands.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -250,39 +250,39 @@ function removeBullet(str: string) {
250250
return unbulleted;
251251
}
252252

253-
export const commands: Record<string, (ta: HTMLInputElement) => void> = {
254-
'editor:toggle-bold': (input: HTMLInputElement) => {
253+
export const commands: Record<string, (ta: HTMLTextAreaElement) => void> = {
254+
'editor:toggle-bold': (input: HTMLTextAreaElement) => {
255255
toggleWrappingFormattingCommand(input, isBoldedRegEx, unBold, '**');
256256
},
257-
'editor:toggle-code': (input: HTMLInputElement) => {
257+
'editor:toggle-code': (input: HTMLTextAreaElement) => {
258258
toggleWrappingFormattingCommand(input, isCodeRegEx, unCode, '`');
259259
},
260-
'editor:toggle-italics': (input: HTMLInputElement) => {
260+
'editor:toggle-italics': (input: HTMLTextAreaElement) => {
261261
toggleWrappingFormattingCommand(
262262
input,
263263
isItalicizedRegEx,
264264
unItalicize,
265265
'*'
266266
);
267267
},
268-
'editor:toggle-highlight': (input: HTMLInputElement) => {
268+
'editor:toggle-highlight': (input: HTMLTextAreaElement) => {
269269
toggleWrappingFormattingCommand(
270270
input,
271271
isHighlightedRegEx,
272272
unHighlight,
273273
'=='
274274
);
275275
},
276-
'editor:toggle-strikethrough': (input: HTMLInputElement) => {
276+
'editor:toggle-strikethrough': (input: HTMLTextAreaElement) => {
277277
toggleWrappingFormattingCommand(input, isStrikedRegEx, unStrike, '~~');
278278
},
279-
'editor:toggle-blockquote': (input: HTMLInputElement) => {
279+
'editor:toggle-blockquote': (input: HTMLTextAreaElement) => {
280280
toggleLineFormatting(input, isQuoted, applyQuote, removeQuote);
281281
},
282-
'editor:toggle-bullet-list': (input: HTMLInputElement) => {
282+
'editor:toggle-bullet-list': (input: HTMLTextAreaElement) => {
283283
toggleLineFormatting(input, isBulleted, applyBullet, removeBullet);
284284
},
285-
'editor:toggle-numbered-list': (input: HTMLInputElement) => {
285+
'editor:toggle-numbered-list': (input: HTMLTextAreaElement) => {
286286
toggleLineFormatting(
287287
input,
288288
isOrderedList,
@@ -291,7 +291,7 @@ export const commands: Record<string, (ta: HTMLInputElement) => void> = {
291291
);
292292
},
293293

294-
'editor:toggle-checklist-status': (input: HTMLInputElement) => {
294+
'editor:toggle-checklist-status': (input: HTMLTextAreaElement) => {
295295
const state = getStateFromInput(input);
296296
const isEmptySelection = state.selection.end === state.selection.start;
297297

@@ -347,7 +347,7 @@ export const commands: Record<string, (ta: HTMLInputElement) => void> = {
347347

348348
export const autoPairBracketsCommands: Record<
349349
string,
350-
(ta: HTMLInputElement) => boolean
350+
(ta: HTMLTextAreaElement) => boolean
351351
> = {
352352
'(': (input) => applyWrappingFormatting(input, '(', ')', false),
353353
'[': (input) => applyWrappingFormatting(input, '[', ']', false, true),
@@ -358,7 +358,7 @@ export const autoPairBracketsCommands: Record<
358358

359359
export const autoPairMarkdownCommands: Record<
360360
string,
361-
(ta: HTMLInputElement) => boolean
361+
(ta: HTMLTextAreaElement) => boolean
362362
> = {
363363
'*': (input) => applyWrappingFormatting(input, '*', '*', false),
364364
_: (input) => applyWrappingFormatting(input, '_', '_', false),
@@ -385,8 +385,8 @@ const pairMap: Record<string, string> = {
385385
};
386386

387387
export function unpair(
388-
input: HTMLInputElement,
389-
commandList: Record<string, (ta: HTMLInputElement) => boolean>
388+
input: HTMLTextAreaElement,
389+
commandList: Record<string, (ta: HTMLTextAreaElement) => boolean>
390390
) {
391391
const state = getStateFromInput(input);
392392

@@ -412,11 +412,11 @@ export function unpair(
412412
}
413413
}
414414

415-
export function unpairBrackets(input: HTMLInputElement) {
415+
export function unpairBrackets(input: HTMLTextAreaElement) {
416416
return unpair(input, autoPairBracketsCommands);
417417
}
418418

419-
export function unpairMarkdown(input: HTMLInputElement) {
419+
export function unpairMarkdown(input: HTMLTextAreaElement) {
420420
return unpair(input, autoPairMarkdownCommands);
421421
}
422422

@@ -448,7 +448,7 @@ function removeTab(str: string, useTab: boolean, tabWidth: number) {
448448
}
449449

450450
export function handleTab(
451-
input: HTMLInputElement,
451+
input: HTMLTextAreaElement,
452452
isShiftPressed: boolean,
453453
useTab: boolean,
454454
tabWidth: number
@@ -492,7 +492,7 @@ export function handleTab(
492492
return true;
493493
}
494494

495-
export function handleNewLine(input: HTMLInputElement) {
495+
export function handleNewLine(input: HTMLTextAreaElement) {
496496
const initialState = getStateFromInput(input);
497497

498498
if (initialState.selection.start !== initialState.selection.end) {

‎src/components/cellTypes/Editor/helpers.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export function getBreaksNeededForEmptyLineAfter(
167167
return isInLastLine ? 0 : neededBreaks;
168168
}
169169

170-
export function getStateFromInput(input: HTMLInputElement): TextState {
170+
export function getStateFromInput(input: HTMLTextAreaElement): TextState {
171171
return {
172172
selection: {
173173
start: input.selectionStart,
@@ -181,13 +181,13 @@ export function getStateFromInput(input: HTMLInputElement): TextState {
181181
};
182182
}
183183

184-
export function replaceSelection(input: HTMLInputElement, text: string) {
184+
export function replaceSelection(input: HTMLTextAreaElement, text: string) {
185185
insertTextAtCursor(input, text);
186186
return getStateFromInput(input);
187187
}
188188

189189
export function setSelectionRange(
190-
input: HTMLInputElement,
190+
input: HTMLTextAreaElement,
191191
selection: TextRange
192192
): TextState {
193193
input.focus();
@@ -197,7 +197,7 @@ export function setSelectionRange(
197197
}
198198

199199
export function toggleWrappingFormattingCommand(
200-
input: HTMLInputElement,
200+
input: HTMLTextAreaElement,
201201
isApplied: RegExp,
202202
unApply: (s: string) => string,
203203
formatting: string
@@ -238,7 +238,7 @@ export function toggleWrappingFormattingCommand(
238238
}
239239

240240
export function applyWrappingFormatting(
241-
input: HTMLInputElement,
241+
input: HTMLTextAreaElement,
242242
before: string,
243243
after: string,
244244
requireSelection?: boolean,
@@ -283,7 +283,7 @@ export function applyWrappingFormatting(
283283
}
284284

285285
export function toggleLineFormatting(
286-
input: HTMLInputElement,
286+
input: HTMLTextAreaElement,
287287
isApplied: RegExp,
288288
apply: (s: string) => string,
289289
remove: (s: string) => string

‎src/components/cellTypes/Editor/insertTextAtCursor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
let browserSupportsTextareaTextNodes: undefined | boolean;
22

3-
function canManipulateViaTextNodes(input: HTMLInputElement) {
3+
function canManipulateViaTextNodes(input: HTMLTextAreaElement) {
44
if (input.nodeName !== 'TEXTAREA') {
55
return false;
66
}
@@ -14,7 +14,7 @@ function canManipulateViaTextNodes(input: HTMLInputElement) {
1414
return browserSupportsTextareaTextNodes;
1515
}
1616

17-
export function insertTextAtCursor(input: HTMLInputElement, text: string) {
17+
export function insertTextAtCursor(input: HTMLTextAreaElement, text: string) {
1818
// Most of the used APIs only work with the field selected
1919
input.focus();
2020

‎src/components/cellTypes/Editor/textcomplete/textcomplete-input/InputEditor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { calculateElementOffset, getLineHeightPx } from 'components/cellTypes/Editor/textcomplete/textcomplete-utils';
1111

1212
export class InputEditor extends Editor {
13-
constructor(private readonly el: HTMLInputElement) {
13+
constructor(private readonly el: HTMLTextAreaElement) {
1414
super();
1515
this.startListening();
1616
}

‎src/components/cellTypes/Editor/textcomplete/textcomplete-input/textareaCaret.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const properties = [
4444
];
4545

4646
export function getCaretCoordinates(
47-
element: HTMLInputElement,
47+
element: HTMLTextAreaElement,
4848
position: number
4949
) {
5050
const doc = element.doc;

‎src/components/cellTypes/Editor/textcomplete/undate/update.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export function update(
2-
el: HTMLInputElement,
2+
el: HTMLTextAreaElement,
33
headToCursor: string,
44
cursorToTail?: string
55
) {

‎src/components/cellTypes/Editor/textcomplete/undate/wrapCursor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { update } from 'components/cellTypes/Editor/textcomplete/undate/update';
22

33
export function wrapCursor(
4-
el: HTMLInputElement,
4+
el: HTMLTextAreaElement,
55
before: string,
66
after?: string
77
) {

0 commit comments

Comments
 (0)