Skip to content

Commit 082de36

Browse files
ernst-devernst-dev
committed
Address comments for use-token-mode, enable tokens working with only the token prop, fixed some minor issues with insertText and other flows
1 parent b0a5f67 commit 082de36

18 files changed

+398
-735
lines changed

‎pages/prompt-input/permutations.page.tsx‎

Lines changed: 23 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -118,28 +118,15 @@ const permutations = createPermutations<PromptInputProps>([
118118
// Token mode: Basic text and references
119119
{
120120
tokens: [
121-
[],
122121
[{ type: 'text', value: 'Simple text' }],
123122
[
124123
{ type: 'text', value: 'Text with ' },
125-
{ type: 'reference', id: '', label: 'Reference', value: 'ref1', menuId: 'mentions' },
124+
{ type: 'reference', id: 'ref-1', label: 'Reference', value: 'ref1', menuId: 'mentions' },
126125
],
127126
[
128-
{ type: 'reference', id: '', label: 'Ref1', value: 'ref1', menuId: 'mentions' },
127+
{ type: 'reference', id: 'ref-1', label: 'Ref1', value: 'ref1', menuId: 'mentions' },
129128
{ type: 'text', value: ' ' },
130-
{ type: 'reference', id: '', label: 'Ref2', value: 'ref2', menuId: 'mentions' },
131-
],
132-
],
133-
menus: [
134-
[
135-
{
136-
id: 'mentions',
137-
trigger: '@',
138-
options: [
139-
{ value: 'user1', label: 'John Doe' },
140-
{ value: 'user2', label: 'Jane Smith' },
141-
],
142-
},
129+
{ type: 'reference', id: 'ref-2', label: 'Ref2', value: 'ref2', menuId: 'mentions' },
143130
],
144131
],
145132
},
@@ -154,29 +141,20 @@ const permutations = createPermutations<PromptInputProps>([
154141
[
155142
{ type: 'text', value: 'A' },
156143
{ type: 'break', value: '\n' },
157-
{ type: 'reference', id: '', label: 'Ref', value: 'ref1', menuId: 'mentions' },
144+
{ type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
158145
{ type: 'break', value: '\n' },
159146
{ type: 'text', value: 'B' },
160147
],
161148
],
162-
menus: [
163-
[
164-
{
165-
id: 'mentions',
166-
trigger: '@',
167-
options: [{ value: 'user1', label: 'User' }],
168-
},
169-
],
170-
],
171149
},
172-
// Token mode: Triggers
150+
// Token mode: Triggers (menus required for trigger rendering)
173151
{
174152
tokens: [
175-
[{ type: 'trigger', triggerChar: '@', value: '', id: '' }],
176-
[{ type: 'trigger', triggerChar: '@', value: 'user', id: '' }],
153+
[{ type: 'trigger', triggerChar: '@', value: '', id: 'trig-1' }],
154+
[{ type: 'trigger', triggerChar: '@', value: 'user', id: 'trig-1' }],
177155
[
178156
{ type: 'text', value: 'Text ' },
179-
{ type: 'trigger', triggerChar: '@', value: 'User', id: '' },
157+
{ type: 'trigger', triggerChar: '@', value: 'User', id: 'trig-1' },
180158
],
181159
],
182160
menus: [
@@ -196,35 +174,25 @@ const permutations = createPermutations<PromptInputProps>([
196174
{
197175
tokens: [
198176
[
199-
{ type: 'reference', id: '', label: 'Pinned', value: 'pin1', menuId: 'mentions', pinned: true },
177+
{ type: 'reference', id: 'pin-1', label: 'Pinned', value: 'pin1', menuId: 'mentions', pinned: true },
200178
{ type: 'text', value: 'Content' },
201179
],
202180
[
203-
{ type: 'reference', id: '', label: 'Pin1', value: 'pin1', menuId: 'mentions', pinned: true },
204-
{ type: 'reference', id: '', label: 'Pin2', value: 'pin2', menuId: 'mentions', pinned: true },
181+
{ type: 'reference', id: 'pin-1', label: 'Pin1', value: 'pin1', menuId: 'mentions', pinned: true },
182+
{ type: 'reference', id: 'pin-2', label: 'Pin2', value: 'pin2', menuId: 'mentions', pinned: true },
205183
{ type: 'text', value: 'Text' },
206184
],
207185
],
208-
menus: [
209-
[
210-
{
211-
id: 'mentions',
212-
trigger: '@',
213-
options: [{ value: 'user1', label: 'User' }],
214-
useAtStart: true,
215-
},
216-
],
217-
],
218186
},
219-
// Token mode: Complex mixed scenarios
187+
// Token mode: Complex mixed (menus required for trigger)
220188
{
221189
tokens: [
222190
[
223-
{ type: 'reference', id: '', label: 'P1', value: 'p1', menuId: 'mentions', pinned: true },
191+
{ type: 'reference', id: 'pin-1', label: 'P1', value: 'p1', menuId: 'mentions', pinned: true },
224192
{ type: 'text', value: 'Start ' },
225-
{ type: 'trigger', triggerChar: '@', value: 'trig', id: '' },
193+
{ type: 'trigger', triggerChar: '@', value: 'trig', id: 'trig-1' },
226194
{ type: 'text', value: ' ' },
227-
{ type: 'reference', id: '', label: 'Ref', value: 'ref1', menuId: 'mentions' },
195+
{ type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
228196
{ type: 'break', value: '\n' },
229197
{ type: 'text', value: 'Line 2' },
230198
],
@@ -238,53 +206,30 @@ const permutations = createPermutations<PromptInputProps>([
238206
{ value: 'user1', label: 'User 1' },
239207
{ value: 'user2', label: 'User 2' },
240208
],
241-
useAtStart: true,
242209
},
243210
],
244211
],
245212
},
246-
// Token mode: State variations (disabled, readonly, invalid, warning)
213+
// Token mode: State variations
247214
{
248215
tokens: [
249216
[
250-
{ type: 'text', value: 'Text with ' },
251-
{ type: 'reference', id: '', label: 'Reference', value: 'ref1', menuId: 'mentions' },
252-
],
253-
],
254-
menus: [
255-
[
256-
{
257-
id: 'mentions',
258-
trigger: '@',
259-
options: [
260-
{ value: 'user1', label: 'User 1' },
261-
{ value: 'user2', label: 'User 2' },
262-
],
263-
},
217+
{ type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
218+
{ type: 'text', value: 'Tell me about ' },
219+
{ type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
264220
],
265221
],
266222
disabled: [false, true],
267223
readOnly: [false, true],
268224
invalid: [false, true],
269225
},
270-
// Token mode: Warning state (separate from invalid to avoid duplicates)
226+
// Token mode: Warning state
271227
{
272228
tokens: [
273229
[
274-
{ type: 'text', value: 'Text with ' },
275-
{ type: 'reference', id: '', label: 'Reference', value: 'ref1', menuId: 'mentions' },
276-
],
277-
],
278-
menus: [
279-
[
280-
{
281-
id: 'mentions',
282-
trigger: '@',
283-
options: [
284-
{ value: 'user1', label: 'User 1' },
285-
{ value: 'user2', label: 'User 2' },
286-
],
287-
},
230+
{ type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
231+
{ type: 'text', value: 'Tell me about ' },
232+
{ type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
288233
],
289234
],
290235
disabled: [false, true],

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20092,7 +20092,7 @@ exports[`Components definition for prompt-input matches the snapshot: prompt-inp
2009220092
"description": "Called whenever a user clicks the action button or presses the "Enter" key.
2009320093
The event \`detail\` contains the current value as a string and an array of tokens.
2009420094

20095-
When \`menus\` or \`tokens\` is defined, the \`value\` is derived from \`tokensToText(tokens)\` if provided, otherwise from the default tokens-to-text conversion.",
20095+
When \`tokens\` is defined, the \`value\` is derived from \`tokensToText(tokens)\` if provided, otherwise from the default tokens-to-text conversion.",
2009620096
"detailInlineType": {
2009720097
"name": "PromptInputProps.ActionDetail",
2009820098
"properties": [
@@ -20122,7 +20122,7 @@ When \`menus\` or \`tokens\` is defined, the \`value\` is derived from \`tokensT
2012220122
"description": "Called whenever a user changes the input value (by typing or pasting).
2012320123
The event \`detail\` contains the current value as a string and an array of tokens.
2012420124

20125-
When \`menus\` or \`tokens\` is defined, the \`value\` is derived from \`tokensToText(tokens)\` if provided, otherwise from the default tokens-to-text conversion.",
20125+
When \`tokens\` is defined, the \`value\` is derived from \`tokensToText(tokens)\` if provided, otherwise from the default tokens-to-text conversion.",
2012620126
"detailInlineType": {
2012720127
"name": "PromptInputProps.ChangeDetail",
2012820128
"properties": [
@@ -20619,7 +20619,7 @@ Requires React 18.",
2061920619
"returnType": "void",
2062020620
},
2062120621
{
20622-
"description": "Inserts text at a specified position. Only supported when \`menus\` or \`tokens\` is defined.
20622+
"description": "Inserts text at a specified position. Only supported when \`tokens\` is defined.
2062320623
Triggers input events and menu detection.
2062420624

2062520625
When pinned reference tokens are present, \`caretStart\` and \`caretEnd\` are automatically
@@ -20891,7 +20891,7 @@ To use it correctly, set the \`name\` property.
2089120891
You can either provide a boolean value to set the property to "on" or "off", or specify a string value
2089220892
for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
2089320893

20894-
Note: When \`menus\` or \`tokens\` is defined, autocomplete will not function.",
20894+
Note: When \`tokens\` is defined, autocomplete will not function.",
2089520895
"inlineType": {
2089620896
"name": "string | boolean",
2089720897
"type": "union",
@@ -21147,7 +21147,7 @@ Some attributes will be automatically combined with internal attribute values:
2114721147
- Event handlers will be chained, unless the default is prevented.
2114821148

2114921149
We do not support using this attribute to apply custom styling.
21150-
When \`menus\` or \`tokens\` is defined, nativeTextareaAttributes will be ignored.",
21150+
When \`tokens\` is defined, nativeTextareaAttributes will be ignored.",
2115121151
"inlineType": {
2115221152
"name": "Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> & Record<\`data-\${string}\`, string>",
2115321153
"type": "union",
@@ -21466,11 +21466,11 @@ Requires React 18.",
2146621466
{
2146721467
"description": "Specifies the content of the prompt input.
2146821468

21469-
When \`menus\` or \`tokens\` is defined (token mode):
21469+
When \`tokens\` is defined (token mode):
2147021470
- This property is optional and defaults to empty string
2147121471
- The actual content is managed via the \`tokens\` array
2147221472

21473-
When \`menus\` or \`tokens\` is not defined (text mode):
21473+
When \`tokens\` is not defined (text mode):
2147421474
- This property is required
2147521475
- Represents the current text content of the textarea",
2147621476
"name": "value",

‎src/prompt-input/__tests__/caret-spot-utils.test.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function createReferenceWrapper(
4444
wrapper.appendChild(container);
4545
wrapper.appendChild(after);
4646

47-
portalContainers.set(id, { id, element: container, label });
47+
portalContainers.set(id, { id, element: container, label, value: '', menuId: '' });
4848

4949
return wrapper;
5050
}
@@ -179,7 +179,13 @@ describe('extractTextFromCaretSpots', () => {
179179
const portalContainers = new Map<string, PortalContainer>();
180180
const orphanContainer = document.createElement('span');
181181
orphanContainer.textContent = 'orphan';
182-
portalContainers.set('orphan-1', { id: 'orphan-1', element: orphanContainer, label: 'orphan' });
182+
portalContainers.set('orphan-1', {
183+
id: 'orphan-1',
184+
element: orphanContainer,
185+
label: 'orphan',
186+
value: '',
187+
menuId: '',
188+
});
183189
const result = extractTextFromCaretSpots(portalContainers, false);
184190
expect(result.movedTextNode).toBeNull();
185191
});

0 commit comments

Comments
 (0)