vzcode 1.14.0 → 1.15.0

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.
Files changed (19) hide show
  1. package/dist/assets/{index-DGNI0PAo.js → index-DbFdL1A1.js} +55 -53
  2. package/dist/assets/{index-Wxh-Jaj6.css → index-Yz-ZHc0O.css} +1 -1
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/client/CodeEditor/index.tsx +1 -1
  6. package/src/client/VZCodeContext.tsx +14 -0
  7. package/src/client/VZSidebar/FileListing.tsx +20 -56
  8. package/src/client/VZSidebar/FileTypeIcon.tsx +49 -0
  9. package/src/client/VZSidebar/Item.tsx +5 -9
  10. package/src/client/VZSidebar/Search.tsx +412 -108
  11. package/src/client/VZSidebar/index.tsx +1 -1
  12. package/src/client/VZSidebar/styles.scss +36 -21
  13. package/src/client/useActions.ts +31 -0
  14. package/src/client/useKeyboardShortcuts.ts +13 -3
  15. package/src/client/vzReducer/createInitialState.ts +7 -1
  16. package/src/client/vzReducer/index.ts +21 -0
  17. package/src/client/vzReducer/openTabReducer.ts +4 -3
  18. package/src/client/vzReducer/searchReducer.ts +46 -1
  19. package/src/types.ts +2 -0
package/dist/index.html CHANGED
@@ -20,8 +20,8 @@
20
20
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
21
21
  rel="stylesheet"
22
22
  />
23
- <script type="module" crossorigin src="/assets/index-DGNI0PAo.js"></script>
24
- <link rel="stylesheet" crossorigin href="/assets/index-Wxh-Jaj6.css">
23
+ <script type="module" crossorigin src="/assets/index-DbFdL1A1.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-Yz-ZHc0O.css">
25
25
  </head>
26
26
  <body>
27
27
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
package/src/client/CodeEditor/index.tsx CHANGED
@@ -144,7 +144,7 @@ export const CodeEditor = ({
144
144
  }, [shareDBDoc, editorCacheValue]);
145
145
 
146
146
  // Focus the editor
147
- useLayoutEffect(() => {
147
+ useEffect(() => {
148
148
  if (editorWantsFocus) {
149
149
  editorCacheValue.editor.focus();
150
150
  editorNoLongerWantsFocus();
package/src/client/VZCodeContext.tsx CHANGED
@@ -123,6 +123,15 @@ export type VZCodeContextValue = {
123
123
  id: string,
124
124
  visibility: SearchFileVisibility,
125
125
  ) => void;
126
+ setSearchLineVisibility: (
127
+ files: ShareDBDoc<VZCodeContent>,
128
+ id: string,
129
+ line: number,
130
+ ) => void;
131
+ setSearchFocusedIndex: (
132
+ focusedIndex: number,
133
+ childIndex: number,
134
+ ) => void;
126
135
  toggleSearchFocused: () => void;
127
136
 
128
137
  isCreateFileModalOpen: boolean;
@@ -270,6 +279,8 @@ export const VZCodeProvider = ({
270
279
  setSearch,
271
280
  setSearchResults,
272
281
  setSearchFileVisibility,
282
+ setSearchLineVisibility,
283
+ setSearchFocusedIndex,
273
284
  toggleSearchFocused,
274
285
  setIsSettingsOpen,
275
286
  setIsDocOpen,
@@ -364,6 +375,7 @@ export const VZCodeProvider = ({
364
375
  useKeyboardShortcuts({
365
376
  closeTabs,
366
377
  activeFileId,
378
+ activePaneId,
367
379
  handleOpenCreateFileModal,
368
380
  setActiveFileLeft,
369
381
  setActiveFileRight,
@@ -412,6 +424,8 @@ export const VZCodeProvider = ({
412
424
  setSearch,
413
425
  setSearchResults,
414
426
  setSearchFileVisibility,
427
+ setSearchLineVisibility,
428
+ setSearchFocusedIndex,
415
429
  toggleSearchFocused,
416
430
 
417
431
  isSettingsOpen,
package/src/client/VZSidebar/FileListing.tsx CHANGED
@@ -1,44 +1,25 @@
1
1
  import { useCallback, useContext } from 'react';
2
2
  import { Item } from './Item';
3
3
  import { FileId, PresenceIndicator } from '../../types';
4
- import {
5
- FileSVG,
6
- JavaScriptSVG,
7
- TypeScriptSVG,
8
- ReactSVG,
9
- SvelteSVG,
10
- JsonSVG,
11
- MarkdownSVG,
12
- HtmlSVG,
13
- CssSVG,
14
- } from '../Icons';
15
4
  import { VZCodeContext } from '../VZCodeContext';
5
+ import { FileTypeIcon } from './FileTypeIcon';
16
6
 
17
- export function getExtensionIcon(fileName: string) {
18
- const extension = fileName.split('.');
19
-
20
- switch (extension[extension.length - 1]) {
21
- case 'jsx':
22
- case 'tsx':
23
- return <ReactSVG />;
24
- case 'js':
25
- return <JavaScriptSVG />;
26
- case 'ts':
27
- return <TypeScriptSVG />;
28
- case 'json':
29
- return <JsonSVG />;
30
- case 'md':
31
- return <MarkdownSVG />;
32
- case 'html':
33
- return <HtmlSVG />;
34
- case 'css':
35
- return <CssSVG />;
36
- case 'svelte':
37
- return <SvelteSVG />;
38
- default:
39
- return <FileSVG />;
40
- }
41
- }
7
+ const PresenceIndicators = ({
8
+ presence,
9
+ }: {
10
+ presence: PresenceIndicator[];
11
+ }) => {
12
+ return (
13
+ <div className="presence-indicators">
14
+ {presence.map((indicator, index) => (
15
+ <div key={index} className="presence-indicator">
16
+ {indicator.username[0]}{' '}
17
+ {/* Display the first letter of the username */}
18
+ </div>
19
+ ))}
20
+ </div>
21
+ );
22
+ };
42
23
 
43
24
  export const FileListing = ({
44
25
  name,
@@ -87,26 +68,9 @@ export const FileListing = ({
87
68
  handleRenameClick={handleRenameClick}
88
69
  isActive={isActive}
89
70
  >
90
- <div className="name">
91
- {/* Render presence indicators to the left of the file name */}
92
- {presence.length > 0 && (
93
- <div className="presence-indicators">
94
- {presence.map((indicator, index) => (
95
- <div
96
- key={index}
97
- className="presence-indicator"
98
- >
99
- {indicator.username[0]}{' '}
100
- {/* Display the first letter of the username */}
101
- </div>
102
- ))}
103
- </div>
104
- )}
105
- <i className="file-icon">
106
- {getExtensionIcon(name)}
107
- </i>
108
- {name}
109
- </div>
71
+ <PresenceIndicators presence={presence} />
72
+ <FileTypeIcon name={name} />
73
+ {name}
110
74
  </Item>
111
75
  );
112
76
  };
package/src/client/VZSidebar/FileTypeIcon.tsx ADDED
@@ -0,0 +1,49 @@
1
+ import { useMemo } from 'react';
2
+ import {
3
+ FileSVG,
4
+ JavaScriptSVG,
5
+ TypeScriptSVG,
6
+ ReactSVG,
7
+ SvelteSVG,
8
+ JsonSVG,
9
+ MarkdownSVG,
10
+ HtmlSVG,
11
+ CssSVG,
12
+ } from '../Icons';
13
+
14
+ export function getExtensionIcon(fileName: string) {
15
+ const extension = fileName.split('.');
16
+
17
+ switch (extension[extension.length - 1]) {
18
+ case 'jsx':
19
+ case 'tsx':
20
+ return <ReactSVG />;
21
+ case 'js':
22
+ return <JavaScriptSVG />;
23
+ case 'ts':
24
+ return <TypeScriptSVG />;
25
+ case 'json':
26
+ return <JsonSVG />;
27
+ case 'md':
28
+ return <MarkdownSVG />;
29
+ case 'html':
30
+ return <HtmlSVG />;
31
+ case 'css':
32
+ return <CssSVG />;
33
+ case 'svelte':
34
+ return <SvelteSVG />;
35
+ default:
36
+ return <FileSVG />;
37
+ }
38
+ }
39
+
40
+ // Various neat icons based on the file extension
41
+ export const FileTypeIcon = ({
42
+ name,
43
+ }: {
44
+ name: string;
45
+ }) => (
46
+ <i className="file-icon">
47
+ {useMemo(() => getExtensionIcon(name), [name])}
48
+ </i>
49
+ );
package/src/client/VZSidebar/Item.tsx CHANGED
@@ -5,16 +5,14 @@ import {
5
5
  useEffect,
6
6
  useContext,
7
7
  } from 'react';
8
- import { EditSVG, FileSVG, TrashSVG } from '../Icons';
8
+ import { ItemId } from '../../types';
9
+ import { EditSVG, TrashSVG } from '../Icons';
9
10
  import { Tooltip, OverlayTrigger } from '../bootstrap';
11
+ import { VZCodeContext } from '../VZCodeContext';
12
+ import { FileTypeIcon } from './FileTypeIcon';
10
13
 
11
14
  // TODO consider moving this up to a higher level of the component tree
12
15
  import { DeleteConfirmationModal } from './DeleteConfirmationModal';
13
- import { VZCodeContext } from '../VZCodeContext';
14
- import { ItemId } from '../../types';
15
- import { getExtensionIcon } from './FileListing';
16
- import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
17
- import { SplitPaneResizeProvider } from '../SplitPaneResizeContext';
18
16
 
19
17
  const enableRenameDirectory = true;
20
18
 
@@ -169,9 +167,7 @@ export const Item = ({
169
167
  <div className="name">
170
168
  {isRenaming ? (
171
169
  <>
172
- <i className="file-icon">
173
- {getExtensionIcon(renameValue)}
174
- </i>
170
+ <FileTypeIcon name={renameValue} />
175
171
  <input
176
172
  className="rename-input"
177
173
  ref={renameInputRef}