ink-mini-code-editor 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/demo.d.ts +1 -0
- package/build/demo.js +47 -0
- package/build/demo.js.map +1 -0
- package/build/index.d.ts +11 -1
- package/build/index.js +57 -3
- package/build/index.js.map +1 -1
- package/package.json +2 -2
- package/readme.md +23 -0
package/build/demo.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/build/demo.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { render, Box, Text } from 'ink';
|
|
3
|
+
import TextInput from './index.js';
|
|
4
|
+
const sqlCommands = [
|
|
5
|
+
'select * from users',
|
|
6
|
+
'select * from orders',
|
|
7
|
+
'select id, name from users',
|
|
8
|
+
'insert into users values',
|
|
9
|
+
'update users set',
|
|
10
|
+
'delete from users where',
|
|
11
|
+
'create table',
|
|
12
|
+
'drop table',
|
|
13
|
+
'alter table',
|
|
14
|
+
];
|
|
15
|
+
function Demo() {
|
|
16
|
+
const [value, setValue] = useState('');
|
|
17
|
+
const [submitted, setSubmitted] = useState([]);
|
|
18
|
+
const getSuggestion = (input) => {
|
|
19
|
+
if (input.length === 0)
|
|
20
|
+
return undefined;
|
|
21
|
+
const lower = input.toLowerCase();
|
|
22
|
+
return sqlCommands.find(cmd => cmd.startsWith(lower) && cmd !== lower);
|
|
23
|
+
};
|
|
24
|
+
const handleSubmit = (val) => {
|
|
25
|
+
if (val.trim()) {
|
|
26
|
+
setSubmitted(prev => [...prev, val]);
|
|
27
|
+
setValue('');
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
return (React.createElement(Box, { flexDirection: "column", padding: 1 },
|
|
31
|
+
React.createElement(Text, { bold: true, color: "cyan" }, "SQL Editor Demo (with autocomplete)"),
|
|
32
|
+
React.createElement(Text, { dimColor: true }, "Type a SQL command - suggestions appear in grey. Press right arrow to accept."),
|
|
33
|
+
React.createElement(Text, { dimColor: true }, "Press Enter to submit. Ctrl+C to exit."),
|
|
34
|
+
React.createElement(Box, { marginTop: 1 },
|
|
35
|
+
React.createElement(Text, { color: "green" }, `> `),
|
|
36
|
+
React.createElement(TextInput, { value: value, placeholder: "Enter SQL query...", language: "sql", getSuggestion: getSuggestion, onChange: setValue, onSubmit: handleSubmit, onSuggestionAccept: s => {
|
|
37
|
+
setValue(s);
|
|
38
|
+
} })),
|
|
39
|
+
submitted.length > 0 && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
|
|
40
|
+
React.createElement(Text, { bold: true }, "History:"),
|
|
41
|
+
submitted.map(cmd => (React.createElement(Text, { key: cmd, dimColor: true },
|
|
42
|
+
submitted.indexOf(cmd) + 1,
|
|
43
|
+
". ",
|
|
44
|
+
cmd)))))));
|
|
45
|
+
}
|
|
46
|
+
render(React.createElement(Demo, null));
|
|
47
|
+
//# sourceMappingURL=demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"demo.js","sourceRoot":"","sources":["../source/demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACtC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,GAAG;IACnB,qBAAqB;IACrB,sBAAsB;IACtB,4BAA4B;IAC5B,0BAA0B;IAC1B,kBAAkB;IAClB,yBAAyB;IACzB,cAAc;IACd,YAAY;IACZ,aAAa;CACb,CAAC;AAEF,SAAS,IAAI;IACZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEzD,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,SAAS,CAAC;QACzC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QAClC,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,IAAI,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;YAChB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;YACrC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC;QACrC,oBAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,MAAM,0CAEhB;QACP,oBAAC,IAAI,IAAC,QAAQ,0FAGP;QACP,oBAAC,IAAI,IAAC,QAAQ,mDAA8C;QAC5D,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YAChB,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAQ;YACjC,oBAAC,SAAS,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAC,oBAAoB,EAChC,QAAQ,EAAC,KAAK,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,kBAAkB,EAAE,CAAC,CAAC,EAAE;oBACvB,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACb,CAAC,GACA,CACG;QACL,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YACvC,oBAAC,IAAI,IAAC,IAAI,qBAAgB;YACzB,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACrB,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ;gBACtB,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;;gBAAI,GAAG,CAC5B,CACP,CAAC,CACG,CACN,CACI,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC"}
|
package/build/index.d.ts
CHANGED
|
@@ -39,8 +39,18 @@ export type Props = {
|
|
|
39
39
|
* When not specified, no syntax highlighting is applied.
|
|
40
40
|
*/
|
|
41
41
|
readonly language?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Function that returns an autocomplete suggestion based on the current value.
|
|
44
|
+
* The suggestion should be the complete text (including what's already typed).
|
|
45
|
+
* A grey ghost text will appear showing the remainder of the suggestion.
|
|
46
|
+
*/
|
|
47
|
+
readonly getSuggestion?: (value: string) => string | undefined;
|
|
48
|
+
/**
|
|
49
|
+
* Callback when a suggestion is accepted (via right arrow key).
|
|
50
|
+
*/
|
|
51
|
+
readonly onSuggestionAccept?: (accepted: string) => void;
|
|
42
52
|
};
|
|
43
|
-
declare function TextInput({ value: originalValue, placeholder, focus, mask, highlightPastedText, showCursor, onChange, onSubmit, language, }: Props): React.JSX.Element;
|
|
53
|
+
declare function TextInput({ value: originalValue, placeholder, focus, mask, highlightPastedText, showCursor, onChange, onSubmit, language, getSuggestion, onSuggestionAccept, }: Props): React.JSX.Element;
|
|
44
54
|
export default TextInput;
|
|
45
55
|
type UncontrolledProps = {
|
|
46
56
|
/**
|
package/build/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
|
|
2
2
|
import { Text, useInput } from 'ink';
|
|
3
3
|
import chalk from 'chalk';
|
|
4
4
|
import SyntaxHighlight from 'ink-syntax-highlight';
|
|
5
|
-
function TextInput({ value: originalValue, placeholder = '', focus = true, mask, highlightPastedText = false, showCursor = true, onChange, onSubmit, language, }) {
|
|
5
|
+
function TextInput({ value: originalValue, placeholder = '', focus = true, mask, highlightPastedText = false, showCursor = true, onChange, onSubmit, language, getSuggestion, onSuggestionAccept, }) {
|
|
6
6
|
const [state, setState] = useState({
|
|
7
7
|
cursorOffset: (originalValue || '').length,
|
|
8
8
|
cursorWidth: 0,
|
|
@@ -46,6 +46,20 @@ function TextInput({ value: originalValue, placeholder = '', focus = true, mask,
|
|
|
46
46
|
renderedValue += chalk.inverse(' ');
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
+
// Compute ghost text for autocomplete suggestion
|
|
50
|
+
let ghostText = '';
|
|
51
|
+
if (getSuggestion && focus && cursorOffset === originalValue.length) {
|
|
52
|
+
const suggestion = getSuggestion(originalValue);
|
|
53
|
+
if (suggestion &&
|
|
54
|
+
suggestion.startsWith(originalValue) &&
|
|
55
|
+
suggestion !== originalValue) {
|
|
56
|
+
ghostText = suggestion.slice(originalValue.length);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
// Append ghost text in dim styling
|
|
60
|
+
if (ghostText) {
|
|
61
|
+
renderedValue += chalk.dim(ghostText);
|
|
62
|
+
}
|
|
49
63
|
useInput((input, key) => {
|
|
50
64
|
if (key.upArrow ||
|
|
51
65
|
key.downArrow ||
|
|
@@ -70,7 +84,24 @@ function TextInput({ value: originalValue, placeholder = '', focus = true, mask,
|
|
|
70
84
|
}
|
|
71
85
|
else if (key.rightArrow) {
|
|
72
86
|
if (showCursor) {
|
|
73
|
-
|
|
87
|
+
// Check if we should accept autocomplete suggestion
|
|
88
|
+
if (cursorOffset === originalValue.length && getSuggestion) {
|
|
89
|
+
const suggestion = getSuggestion(originalValue);
|
|
90
|
+
if (suggestion &&
|
|
91
|
+
suggestion.startsWith(originalValue) &&
|
|
92
|
+
suggestion !== originalValue) {
|
|
93
|
+
// Accept the suggestion
|
|
94
|
+
nextValue = suggestion;
|
|
95
|
+
nextCursorOffset = suggestion.length;
|
|
96
|
+
onSuggestionAccept?.(suggestion);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
nextCursorOffset++;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
nextCursorOffset++;
|
|
104
|
+
}
|
|
74
105
|
}
|
|
75
106
|
}
|
|
76
107
|
else if (key.backspace || key.delete) {
|
|
@@ -110,8 +141,31 @@ function TextInput({ value: originalValue, placeholder = '', focus = true, mask,
|
|
|
110
141
|
? renderedValue
|
|
111
142
|
: renderedPlaceholder
|
|
112
143
|
: renderedValue;
|
|
144
|
+
// When syntax highlighting is enabled, use component-based rendering
|
|
145
|
+
// to avoid ANSI code conflicts between chalk and the syntax highlighter
|
|
113
146
|
if (language) {
|
|
114
|
-
|
|
147
|
+
const showGhost = ghostText && focus && cursorOffset === value.length;
|
|
148
|
+
const cursorVisible = showCursor && focus;
|
|
149
|
+
// Empty value with placeholder
|
|
150
|
+
if (value.length === 0 && placeholder) {
|
|
151
|
+
return (React.createElement(Text, null, cursorVisible ? (React.createElement(React.Fragment, null,
|
|
152
|
+
React.createElement(Text, { inverse: true }, placeholder[0] ?? ' '),
|
|
153
|
+
React.createElement(Text, { dimColor: true }, placeholder.slice(1)))) : (React.createElement(Text, { dimColor: true }, placeholder))));
|
|
154
|
+
}
|
|
155
|
+
// Empty value without placeholder
|
|
156
|
+
if (value.length === 0) {
|
|
157
|
+
return cursorVisible ? React.createElement(Text, { inverse: true }, " ") : React.createElement(Text, null);
|
|
158
|
+
}
|
|
159
|
+
const beforeCursor = value.slice(0, cursorOffset);
|
|
160
|
+
const atCursor = value[cursorOffset] ?? '';
|
|
161
|
+
const afterCursor = atCursor ? value.slice(cursorOffset + 1) : '';
|
|
162
|
+
const cursorAtEnd = cursorOffset === value.length;
|
|
163
|
+
return (React.createElement(Text, null,
|
|
164
|
+
beforeCursor && (React.createElement(SyntaxHighlight, { language: language, code: beforeCursor })),
|
|
165
|
+
cursorVisible && React.createElement(Text, { inverse: true }, cursorAtEnd ? ' ' : atCursor),
|
|
166
|
+
!cursorVisible && atCursor && (React.createElement(SyntaxHighlight, { language: language, code: atCursor })),
|
|
167
|
+
afterCursor && (React.createElement(SyntaxHighlight, { language: language, code: afterCursor })),
|
|
168
|
+
showGhost && React.createElement(Text, { dimColor: true }, ghostText)));
|
|
115
169
|
}
|
|
116
170
|
return React.createElement(Text, null, displayValue);
|
|
117
171
|
}
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../source/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,KAAK,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../source/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ink-mini-code-editor",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Code editor for Ink library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "choneface/ink-mini-code-editor",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"build": "tsc",
|
|
22
22
|
"prepare": "tsc",
|
|
23
23
|
"pretest": "tsc",
|
|
24
|
-
"dev": "tsx source/
|
|
24
|
+
"dev": "tsx source/demo.tsx"
|
|
25
25
|
},
|
|
26
26
|
"files": [
|
|
27
27
|
"build"
|
package/readme.md
CHANGED
|
@@ -108,6 +108,29 @@ Type: `Function`
|
|
|
108
108
|
|
|
109
109
|
Function to call when `Enter` is pressed, where first argument is the value of the input.
|
|
110
110
|
|
|
111
|
+
### getSuggestion
|
|
112
|
+
|
|
113
|
+
Type: `(value: string) => string | undefined`
|
|
114
|
+
|
|
115
|
+
Function that returns an autocomplete suggestion based on the current value. The suggestion should be the complete text (including what's already typed). When a valid suggestion is returned, a grey ghost text appears showing the remainder of the suggestion. Press the right arrow key to accept the suggestion.
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
const getSuggestion = (value) => {
|
|
119
|
+
const commands = ['select * from users', 'insert into table', 'delete from table'];
|
|
120
|
+
return commands.find(cmd => cmd.startsWith(value) && cmd !== value);
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
<CodeEditor value={code} onChange={setCode} getSuggestion={getSuggestion} />
|
|
124
|
+
// User types "sel" → displays: sel|ect * from users (grey ghost text)
|
|
125
|
+
// User presses → → value becomes "select * from users"
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### onSuggestionAccept
|
|
129
|
+
|
|
130
|
+
Type: `(accepted: string) => void`
|
|
131
|
+
|
|
132
|
+
Callback function called when a suggestion is accepted via the right arrow key. The accepted suggestion string is passed as the argument.
|
|
133
|
+
|
|
111
134
|
## Uncontrolled usage
|
|
112
135
|
|
|
113
136
|
This component also exposes an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) version, which handles `value` changes for you. To receive the final input value, use `onSubmit` prop. Initial value can be specified via `initialValue` prop.
|