Skip to content

Commit 152e5f2

Browse files
echarlesecharles
committed
giphy
1 parent 170b107 commit 152e5f2

File tree

12 files changed

+115
-53
lines changed

12 files changed

+115
-53
lines changed

‎packages/lexical/src/components/InsertImageDialog.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
import { useState } from 'react';
88
import { LexicalEditor } from 'lexical';
9+
import { fetchRandomGif } from './../utils/giphy';
910
import { Button } from './../components/Button';
1011
import { TextInput } from './../components/TextInput';
1112
import { FileInput } from './../components/FileInput';
1213
import { INSERT_IMAGE_COMMAND } from './../plugins/ImagesPlugin';
1314
import { InsertImagePayload } from './../plugins/ImagesPlugin';
14-
import yellowFlowerImage from '../images/yellow-flower-small.jpg';
1515

1616
export function InsertImageUriDialogBody({
1717
onClick,
@@ -119,12 +119,13 @@ export function InsertImageDialog({
119119
<div className="ToolbarPlugin__dialogButtonsList">
120120
<Button
121121
data-test-id="image-modal-option-sample"
122-
onClick={() =>
123-
onClick({
124-
altText: 'Yellow flower in tilt shift lens',
125-
src: yellowFlowerImage,
126-
})
127-
}
122+
onClick={() => {
123+
fetchRandomGif().then(result => {
124+
if (result) {
125+
onClick(result);
126+
}
127+
});
128+
}}
128129
>
129130
Sample
130131
</Button>

‎packages/lexical/src/components/Modal.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ export const Modal = ({
2424
title: string;
2525
}): JSX.Element => {
2626
return (
27-
<Dialog title={title} onClose={() => onClose()} width="large" height="auto">
27+
<Dialog
28+
title={title}
29+
onClose={() => onClose()}
30+
width="medium"
31+
height="auto"
32+
>
2833
{children}
2934
</Dialog>
3035
);

‎packages/lexical/src/examples/AppNbformat.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,15 +195,18 @@ export function App() {
195195
textAlign: 'center',
196196
}}
197197
>
198-
<a href="https://datalayer.ai" target="_blank" rel="noreferrer">
198+
<a
199+
href="https://datalayer.ai"
200+
target="_blank"
201+
rel="noreferrer"
202+
style={{ marginRight: 8 }}
203+
>
199204
<ThreeBarsIcon />
200205
</a>
201-
</div>
202-
<h2>
203206
<a href="https://datalayer.ai" target="_blank" rel="noreferrer">
204207
Datalayer, Inc.
205208
</a>
206-
</h2>
209+
</div>
207210
</div>
208211
</div>
209212
</>

‎packages/lexical/src/examples/AppSimple.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const LexicalEditor = () => {
5252
}
5353
}}
5454
>
55-
Load Notebook Model
55+
Insert Notebook Model
5656
</Button>
5757
</Box>
5858
</Box>
@@ -194,15 +194,18 @@ export const App = () => {
194194
textAlign: 'center',
195195
}}
196196
>
197-
<a href="https://datalayer.ai" target="_blank" rel="noreferrer">
197+
<a
198+
href="https://datalayer.ai"
199+
target="_blank"
200+
rel="noreferrer"
201+
style={{ marginRight: 8 }}
202+
>
198203
<ThreeBarsIcon />
199204
</a>
200-
</div>
201-
<h2>
202205
<a href="https://datalayer.ai" target="_blank" rel="noreferrer">
203206
Datalayer, Inc.
204207
</a>
205-
</h2>
208+
</div>
206209
</div>
207210
</ThemeContext.Provider>
208211
</JupyterReactTheme>

‎packages/lexical/src/images/icons/plus.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/lexical/src/images/yellow-flower-small.jpg‎

-2.68 KB
Binary file not shown.

‎packages/lexical/src/plugins/AutoEmbedPlugin.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
URL_MATCHER,
1515
} from '@lexical/react/LexicalAutoEmbedPlugin';
1616
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
17-
import { useMemo, useState } from 'react';
17+
import { useEffect, useMemo, useRef, useState } from 'react';
1818
import * as ReactDOM from 'react-dom';
1919
import { Box, Text, ThemeProvider, BaseStyles } from '@primer/react';
2020
import { useTheme } from '../context/ThemeContext';
@@ -197,9 +197,16 @@ export function AutoEmbedDialog({
197197
}
198198
};
199199

200+
const inputRef = useRef<HTMLInputElement>(null);
201+
useEffect(() => {
202+
// Focus the input when the dialog opens
203+
inputRef.current?.focus();
204+
}, []);
205+
200206
return (
201-
<div style={{ width: '600px' }}>
207+
<div>
202208
<PrimerTextInput
209+
ref={inputRef}
203210
type="text"
204211
placeholder={embedConfig.exampleUrl}
205212
value={text}

‎packages/lexical/src/plugins/CommentPlugin.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -495,21 +495,21 @@ function ShowDeleteCommentOrThreadDialog({
495495
Are you sure you want to delete this {commentOrThread.type}?
496496
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end', mt: 3 }}>
497497
<PrimerButton
498-
variant="danger"
498+
variant="invisible"
499499
onClick={() => {
500-
deleteCommentOrThread(commentOrThread, thread);
501500
onClose();
502501
}}
503502
>
504-
Delete
505-
</PrimerButton>{' '}
503+
Cancel
504+
</PrimerButton>
506505
<PrimerButton
507-
variant="invisible"
506+
variant="danger"
508507
onClick={() => {
508+
deleteCommentOrThread(commentOrThread, thread);
509509
onClose();
510510
}}
511511
>
512-
Cancel
512+
Delete
513513
</PrimerButton>
514514
</Box>
515515
</>

‎packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
*/
1313

1414
import { $createCodeNode } from '@lexical/code';
15+
import { fetchRandomGif } from '../utils/giphy';
1516
import {
1617
INSERT_CHECK_LIST_COMMAND,
1718
INSERT_ORDERED_LIST_COMMAND,
@@ -65,7 +66,6 @@ import {
6566
} from '@primer/octicons-react';
6667

6768
import useModal from '../hooks/useModal';
68-
import catTypingGif from '../images/yellow-flower-small.jpg';
6969
import { EmbedConfigs } from './AutoEmbedPlugin';
7070
import { InsertEquationDialog } from './EquationsPlugin';
7171
import { INSERT_IMAGE_COMMAND, InsertImageDialog } from './ImagesPlugin';
@@ -378,11 +378,13 @@ export const ComponentPickerMenuPlugin = ({
378378
new ComponentPickerOption('GIF', {
379379
icon: <FileMediaIcon size={16} />,
380380
keywords: ['gif', 'animate', 'image', 'file'],
381-
onSelect: () =>
382-
editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
383-
altText: 'Cat typing on a laptop',
384-
src: catTypingGif,
385-
}),
381+
onSelect: () => {
382+
fetchRandomGif().then(result => {
383+
if (result) {
384+
editor.dispatchCommand(INSERT_IMAGE_COMMAND, result);
385+
}
386+
});
387+
},
386388
}),
387389
new ComponentPickerOption('Image', {
388390
icon: <FileMediaIcon size={16} />,

‎packages/lexical/src/plugins/ImagesPlugin.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
8+
import { fetchRandomGif } from '../utils/giphy';
89
import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
910
import {
1011
$createParagraphNode,
@@ -27,7 +28,6 @@ import {
2728
import { useEffect, useRef, useState } from 'react';
2829
import { CAN_USE_DOM } from './../utils/canUseDOM';
2930

30-
import yellowFlowerImage from '../images/yellow-flower-small.jpg';
3131
import {
3232
$createImageNode,
3333
$isImageNode,
@@ -169,20 +169,13 @@ export function InsertImageDialog({
169169
<DialogButtonsList>
170170
<Button
171171
data-test-id="image-modal-option-sample"
172-
onClick={() =>
173-
onClick(
174-
hasModifier.current
175-
? {
176-
altText:
177-
'Daylight fir trees forest glacier green high ice landscape',
178-
src: yellowFlowerImage,
179-
}
180-
: {
181-
altText: 'Yellow flower in tilt shift lens',
182-
src: yellowFlowerImage,
183-
},
184-
)
185-
}
172+
onClick={() => {
173+
fetchRandomGif().then(result => {
174+
if (result) {
175+
onClick(result);
176+
}
177+
});
178+
}}
186179
>
187180
Sample
188181
</Button>

0 commit comments

Comments
 (0)