online-compiler-widget 0.0.2 → 0.0.4

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 (3) hide show
  1. package/index.tsx +3 -0
  2. package/package.json +1 -1
  3. package/src/components/CompilerWidget.tsx +71 -19
package/index.tsx ADDED
@@ -0,0 +1,3 @@
1
+ import CompilerWidget from './src/components/CompilerWidget.tsx'
2
+
3
+ export {CompilerWidget};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "online-compiler-widget",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/CompilerWidget.tsx CHANGED
@@ -7,23 +7,75 @@ import { OutputPanel } from './OutputPanel';
7
7
  import cls from './CompilerWidget.module.scss';
8
8
  import { useCompiler } from '../hooks/useCompiler';
9
9
 
10
- import ShieldIcon from "../assets/shield.svg?react";
11
- import BadgeIcon from "../assets/Badge.svg?react";
12
- import CloseIcon from "../assets/closeIcon.svg?react";
13
-
14
10
  import type { EditorDocument } from '../types/EditorDocument';
15
11
  import { RunContainer } from "./RunContainer.tsx";
16
12
 
13
+ const ShieldIcon = () => (
14
+ <svg viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
15
+ <g clip-path="url(#clip0_167_86)">
16
+ <path d="M6.86666 4.46333C6.86666 6.18 5.66499 7.03833 4.23672 7.53616C4.16193 7.56151 4.08069 7.56029 4.00669 7.53273C2.57499 7.03833 1.37332 6.18 1.37332 4.46333V2.06C1.37332 1.96894 1.40949 1.88161 1.47388 1.81722C1.53827 1.75284 1.6256 1.71666 1.71665 1.71666C2.40332 1.71666 3.26165 1.30466 3.85906 0.782796C3.93179 0.720652 4.02432 0.686508 4.11999 0.686508C4.21566 0.686508 4.30819 0.720652 4.38092 0.782796C4.98176 1.3081 5.83666 1.71666 6.52332 1.71666C6.61438 1.71666 6.70171 1.75284 6.7661 1.81722C6.83048 1.88161 6.86666 1.96894 6.86666 2.06V4.46333Z" stroke="#0A0A0A" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
17
+ </g>
18
+ <defs>
19
+ <clipPath id="clip0_167_86">
20
+ <rect width="8.24" height="8.24" fill="white" />
21
+ </clipPath>
22
+ </defs>
23
+ </svg>
24
+ );
25
+
26
+ const BadgeIcon = () => (
27
+ <svg viewBox="0 0 30 11" fill="none" xmlns="http://www.w3.org/2000/svg">
28
+ <mask id="path-1-inside-1_167_88" fill="white">
29
+ <path d="M0 4.12C0 1.84459 1.84459 0 4.12 0H25.8788C28.1542 0 29.9988 1.84459 29.9988 4.12V6.18C29.9988 8.45541 28.1542 10.3 25.8788 10.3H4.11999C1.84458 10.3 0 8.45541 0 6.18V4.12Z" />
30
+ </mask>
31
+ <path d="M0 4.12C0 1.84459 1.84459 0 4.12 0H25.8788C28.1542 0 29.9988 1.84459 29.9988 4.12V6.18C29.9988 8.45541 28.1542 10.3 25.8788 10.3H4.11999C1.84458 10.3 0 8.45541 0 6.18V4.12Z" fill="#DCFCE7" />
32
+ <path d="M4.12 0V0.343333H25.8788V0V-0.343333H4.12V0ZM29.9988 4.12H29.6554V6.18H29.9988H30.3421V4.12H29.9988ZM25.8788 10.3V9.95667H4.11999V10.3V10.6433H25.8788V10.3ZM0 6.18H0.343333V4.12H0H-0.343333V6.18H0ZM4.11999 10.3V9.95667C2.0342 9.95667 0.343333 8.2658 0.343333 6.18H0H-0.343333C-0.343333 8.64503 1.65496 10.6433 4.11999 10.6433V10.3ZM29.9988 6.18H29.6554C29.6554 8.26579 27.9645 9.95667 25.8788 9.95667V10.3V10.6433C28.3438 10.6433 30.3421 8.64503 30.3421 6.18H29.9988ZM25.8788 0V0.343333C27.9646 0.343333 29.6554 2.0342 29.6554 4.12H29.9988H30.3421C30.3421 1.65497 28.3438 -0.343333 25.8788 -0.343333V0ZM4.12 0V-0.343333C1.65497 -0.343333 -0.343333 1.65497 -0.343333 4.12H0H0.343333C0.343333 2.03421 2.0342 0.343333 4.12 0.343333V0Z" fill="black" fill-opacity="0.1" mask="url(#path-1-inside-1_167_88)" />
33
+ <g clip-path="url(#clip0_167_88)">
34
+ <path d="M8.58329 2.06H6.17995C5.99784 2.06 5.82318 2.13234 5.69441 2.26112C5.56563 2.38989 5.49329 2.56455 5.49329 2.74666V7.55333C5.49329 7.73545 5.56563 7.9101 5.69441 8.03888C5.82318 8.16765 5.99784 8.24 6.17995 8.24H10.9866C11.1687 8.24 11.3434 8.16765 11.4722 8.03888C11.6009 7.9101 11.6733 7.73545 11.6733 7.55333V5.15" stroke="#008236" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
35
+ <path d="M10.772 1.93126C10.9086 1.79467 11.0939 1.71794 11.287 1.71794C11.4802 1.71794 11.6655 1.79467 11.802 1.93126C11.9386 2.06785 12.0154 2.2531 12.0154 2.44626C12.0154 2.63942 11.9386 2.82467 11.802 2.96126L8.70758 6.05607C8.62606 6.13752 8.52534 6.19715 8.41472 6.22945L7.42832 6.51785C7.39878 6.52647 7.36746 6.52698 7.33765 6.51935C7.30784 6.51171 7.28063 6.4962 7.25887 6.47444C7.23711 6.45268 7.2216 6.42547 7.21396 6.39566C7.20632 6.36584 7.20684 6.33453 7.21545 6.30499L7.50385 5.31859C7.53631 5.20805 7.59605 5.10746 7.67758 5.02607L10.772 1.93126Z" stroke="#008236" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
36
+ </g>
37
+ <path d="M15.2522 6.515V2.09123H18.4508V2.61327H15.8376V3.96816H18.2848V4.48719H15.8376V5.99296H18.5534V6.515H15.2522ZM21.3718 6.515V6.11064C21.1686 6.4285 20.8699 6.58742 20.4756 6.58742C20.2201 6.58742 19.9847 6.51701 19.7695 6.37619C19.5562 6.23537 19.3903 6.03923 19.2716 5.78776C19.1549 5.53429 19.0965 5.24359 19.0965 4.91568C19.0965 4.59582 19.1499 4.30613 19.2565 4.04662C19.3631 3.7851 19.523 3.58493 19.7363 3.44612C19.9495 3.30731 20.1879 3.23791 20.4514 3.23791C20.6446 3.23791 20.8166 3.27915 20.9674 3.36163C21.1183 3.4421 21.241 3.54771 21.3356 3.67848V2.09123H21.8757V6.515H21.3718ZM19.6548 4.91568C19.6548 5.32607 19.7413 5.63286 19.9143 5.83604C20.0873 6.03923 20.2915 6.14082 20.5269 6.14082C20.7643 6.14082 20.9654 6.04426 21.1304 5.85113C21.2974 5.656 21.3809 5.35927 21.3809 4.96095C21.3809 4.52239 21.2964 4.20052 21.1274 3.99532C20.9584 3.79013 20.7502 3.68753 20.5027 3.68753C20.2613 3.68753 20.0592 3.7861 19.8962 3.98325C19.7353 4.1804 19.6548 4.49121 19.6548 4.91568ZM22.7357 2.71587V2.09123H23.2789V2.71587H22.7357ZM22.7357 6.515V3.31033H23.2789V6.515H22.7357ZM25.2947 6.02917L25.3731 6.50896C25.2202 6.54115 25.0834 6.55725 24.9627 6.55725C24.7656 6.55725 24.6127 6.52606 24.504 6.4637C24.3954 6.40134 24.319 6.31986 24.2747 6.21928C24.2305 6.11668 24.2083 5.90243 24.2083 5.57653V3.73279H23.81V3.31033H24.2083V2.51671L24.7485 2.19081V3.31033H25.2947V3.73279H24.7485V5.60671C24.7485 5.76161 24.7575 5.86119 24.7756 5.90545C24.7957 5.94971 24.8269 5.98491 24.8692 6.01106C24.9134 6.03722 24.9758 6.05029 25.0563 6.05029C25.1166 6.05029 25.1961 6.04325 25.2947 6.02917Z" fill="#008236" />
38
+ <defs>
39
+ <clipPath id="clip0_167_88">
40
+ <rect width="8.24" height="8.24" fill="white" transform="translate(4.46329 1.03001)" />
41
+ </clipPath>
42
+ </defs>
43
+ </svg>
44
+ );
45
+
46
+ const CloseIcon = () => (
47
+ <svg
48
+ viewBox="0 0 9 9"
49
+ fill="none"
50
+ xmlns="http://www.w3.org/2000/svg"
51
+ >
52
+ <path
53
+ d="M6.18 2.05998L2.06 6.17998"
54
+ stroke="#0A0A0A"
55
+ stroke-width="0.686667"
56
+ stroke-linecap="round"
57
+ stroke-linejoin="round"
58
+ />
59
+ <path
60
+ d="M2.06 2.05998L6.18 6.17998"
61
+ stroke="#0A0A0A"
62
+ stroke-width="0.686667"
63
+ stroke-linecap="round"
64
+ stroke-linejoin="round"
65
+ />
66
+ </svg>
67
+ );
68
+
17
69
  interface GetInfoModel {
18
- "widgetId": number,
19
- "userId": number,
20
- "role": string,
21
- "config": string, // json
22
- "board": {
23
- "id": number,
24
- "name": string,
25
- "parentId": number
26
- }
70
+ "widgetId": number,
71
+ "userId": number,
72
+ "role": string,
73
+ "config": string, // json
74
+ "board": {
75
+ "id": number,
76
+ "name": string,
77
+ "parentId": number
78
+ }
27
79
  }
28
80
 
29
81
  interface ConfigModel {
@@ -37,7 +89,7 @@ interface CompilerWidgetProps {
37
89
  language?: 'csharp' | 'js';
38
90
  };
39
91
  setNodeHeight?: (id: string, height: number) => void;
40
- getInfo?: (info: GetInfoModel) => void;
92
+ getInfo?: (info: GetInfoModel) => void;
41
93
  }
42
94
 
43
95
  const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight }) => {
@@ -92,10 +144,10 @@ const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight
92
144
  };
93
145
 
94
146
  // Обработчик переименования файла
95
- const handleRename = (id: string, newName: string) => {
147
+ const handleRename = (id: string, newName: string) => {
96
148
  const doc = documents.find(d => d.id === id);
97
149
  if (!doc || newName === doc.name) return;
98
-
150
+
99
151
  updateDocument(id, {
100
152
  name: newName
101
153
  });
@@ -189,8 +241,8 @@ const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight
189
241
  <NodeResizer
190
242
  minWidth={600}
191
243
  minHeight={300}
192
- // Некоторые версии NodeResizer поддержуют onResize/onResizeEnd, некоторые — нет.
193
- // Мы полагаемся на ResizeObserver для синхронизации высоты, так что не обязаны использовать коллбэки.
244
+ // Некоторые версии NodeResizer поддержуют onResize/onResizeEnd, некоторые — нет.
245
+ // Мы полагаемся на ResizeObserver для синхронизации высоты, так что не обязаны использовать коллбэки.
194
246
  />
195
247
  )}
196
248
 
@@ -248,7 +300,7 @@ const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight
248
300
  onChange={handleCodeChange}
249
301
  theme="vs-light"
250
302
  />
251
- <RunContainer run={run} stop={stop} save={saveAll}/>
303
+ <RunContainer run={run} stop={stop} save={saveAll} />
252
304
  </div>
253
305
  ) : (
254
306
  <div style={{ padding: 16, color: '#666' }}>