Skip to content

Commit 6ba3b58

Browse files
simonrhosimonrho
committed
Fix: Local and Cloud exports that were missing or failing to resolve certain fields
1 parent 92d248f commit 6ba3b58

13 files changed

+318
-3722
lines changed

‎jccm/package-lock.json

+56-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jccm/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@fluentui/react-components": "^9.49.2",
5050
"@fluentui/react-icons": "^2.0.239",
5151
"@microlink/react-json-view": "^1.23.1",
52+
"@monaco-editor/react": "^4.6.0",
5253
"@xterm/addon-fit": "^0.10.0",
5354
"@xterm/xterm": "^5.5.0",
5455
"ag-grid-react": "^31.3.2",
@@ -67,6 +68,8 @@
6768
"ip": "^2.0.1",
6869
"lodash": "^4.17.21",
6970
"mitt": "^3.0.1",
71+
"monaco-editor": "^0.52.2",
72+
"monaco-editor-webpack-plugin": "^7.1.0",
7073
"nedb": "^1.8.0",
7174
"nedb-promises": "^6.2.3",
7275
"node-cache": "^5.1.2",

‎jccm/src/Frontend/Components/Editor/MonacoEditor.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { useEffect, useRef } from 'react';
2+
import * as monaco from 'monaco-editor'; // Import Monaco directly
3+
import { throttle } from 'lodash'; // Use lodash for throttling
4+
import useStore from '../../Common/StateStore'; // Import the custom hook to access the store
5+
6+
export const MonacoEditor = ({ text, fontSize = 12 }) => {
7+
const { deviceFacts } = useStore();
8+
const editorRef = useRef(null);
9+
const monacoEditorInstance = useRef(null); // To keep track of the Monaco editor instance
10+
11+
useEffect(() => {
12+
if (editorRef.current) {
13+
// Initialize Monaco Editor directly with automatic layout disabled
14+
monacoEditorInstance.current = monaco.editor.create(
15+
editorRef.current,
16+
{
17+
value: text,
18+
language: 'yaml', // Set the language to plaintext
19+
theme: 'vs-dark', // You can switch to 'vs-light' if you prefer
20+
fontSize: fontSize, // Set the font size
21+
autoClosingBrackets: 'always',
22+
minimap: {
23+
enabled: false, // Hide the minimap
24+
},
25+
automaticLayout: false, // Disable automatic layout to avoid ResizeObserver loop
26+
}
27+
);
28+
29+
console.log('Monaco Editor initialized successfully');
30+
31+
// Add custom action for "Print Selected Text"
32+
monacoEditorInstance.current.addAction({
33+
id: 'logSelectedText', // Unique action ID
34+
label: 'Print Selected Text', // Label shown in context menu
35+
contextMenuGroupId: 'navigation', // Group in context menu (leave as 'navigation')
36+
contextMenuOrder: 1, // Order in the context menu
37+
run: function (editor) {
38+
const selection = editor.getSelection();
39+
const selectedText = editor.getModel().getValueInRange(selection);
40+
console.log('Selected Text:', selectedText);
41+
return null;
42+
}
43+
});
44+
45+
// Add custom action for "Print All Text"
46+
monacoEditorInstance.current.addAction({
47+
id: 'logAllText', // Unique action ID
48+
label: 'Print All Text', // Label shown in context menu
49+
contextMenuGroupId: 'navigation', // Group in context menu (leave as 'navigation')
50+
contextMenuOrder: 2, // Order in the context menu
51+
run: function (editor) {
52+
const allText = editor.getModel().getValue();
53+
console.log('All Text:', allText);
54+
return null;
55+
}
56+
});
57+
58+
// Throttled layout function to prevent excessive calls
59+
const throttledLayout = throttle(() => {
60+
if (monacoEditorInstance.current) {
61+
window.requestAnimationFrame(() => {
62+
console.log('Resizing Monaco Editor');
63+
monacoEditorInstance.current.layout(); // Adjust the editor layout based on new dimensions
64+
});
65+
}
66+
}, 100); // Throttle the callback, adjusting the delay as needed
67+
68+
// Create a ResizeObserver to track the size of the div
69+
const resizeObserver = new ResizeObserver(() => {
70+
throttledLayout(); // Use the throttled function inside the observer
71+
});
72+
73+
// Observe changes in size of the editor container div
74+
if (editorRef.current) {
75+
resizeObserver.observe(editorRef.current);
76+
}
77+
78+
// Cleanup function to remove ResizeObserver and editor when the component unmounts
79+
return () => {
80+
if (monacoEditorInstance.current) {
81+
monacoEditorInstance.current.dispose();
82+
}
83+
if (editorRef.current) {
84+
resizeObserver.unobserve(editorRef.current);
85+
}
86+
resizeObserver.disconnect();
87+
};
88+
}
89+
}, [editorRef, fontSize, text]);
90+
91+
return (
92+
<div
93+
ref={editorRef}
94+
style={{
95+
width: '100%',
96+
height: '100%',
97+
border: '1px solid black',
98+
flexGrow: 1,
99+
}}
100+
/>
101+
);
102+
};

‎jccm/src/Frontend/Layout/EditCLIShortcutsCard.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { useState, useRef, useEffect } from 'react';
2+
import 'ag-grid-community/styles/ag-grid.css';
3+
import 'ag-grid-community/styles/ag-theme-alpine.css';
4+
import 'ag-grid-community/styles/ag-theme-balham.css';
5+
import _ from 'lodash';
6+
7+
import {
8+
Dialog,
9+
DialogSurface,
10+
Button,
11+
Label,
12+
Text,
13+
Field,
14+
SpinButton,
15+
Toast,
16+
ToastTitle,
17+
ToastBody,
18+
Tooltip,
19+
Divider,
20+
tokens,
21+
} from '@fluentui/react-components';
22+
import { DismissFilled, DismissRegular, bundleIcon } from '@fluentui/react-icons';
23+
24+
const { electronAPI } = window;
25+
26+
import { useNotify } from '../Common/NotificationContext';
27+
import useStore from '../Common/StateStore';
28+
import { MonacoEditor } from '../Components/Editor/MonacoEditor';
29+
30+
const Dismiss = bundleIcon(DismissFilled, DismissRegular);
31+
32+
const EditCLIShortcutsCard = ({ isOpen, onClose }) => {
33+
if (!isOpen) return null;
34+
35+
const [isSearchRun, setIsSearchRun] = useState(false);
36+
37+
const Title = () => <Text size={400}>CLI Commands Mapping</Text>;
38+
const { notify } = useNotify();
39+
40+
return (
41+
<Dialog open={isOpen} onDismiss={onClose} modalProps={{ isBlocking: true }}>
42+
<DialogSurface
43+
style={{
44+
display: 'flex',
45+
flexDirection: 'column',
46+
justifyContent: 'flex-start',
47+
minWidth: '90%',
48+
height: '90%',
49+
overflow: 'hidden', // Hide overflowed footer block edges
50+
padding: 0,
51+
border: 0, // Hide border lines
52+
background: tokens.colorNeutralBackground1,
53+
}}
54+
>
55+
<div
56+
style={{
57+
display: 'flex',
58+
flexDirection: 'column',
59+
width: '100%',
60+
height: '100%',
61+
flex: 1,
62+
padding: '15px 15px 5px 15px',
63+
boxSizing: 'border-box',
64+
}}
65+
>
66+
{/* Header - Dismiss */}
67+
<div
68+
style={{
69+
display: 'flex',
70+
flexDirection: 'row',
71+
justifyContent: 'space-between',
72+
marginBottom: '10px',
73+
}}
74+
>
75+
<Title />
76+
<Button
77+
onClick={onClose}
78+
shape='circular'
79+
appearance='subtle'
80+
icon={<Dismiss />}
81+
size='small'
82+
/>
83+
</div>
84+
<div style={{width: '100%', height: 'calc(95%)'} }>
85+
<MonacoEditor text='Hello World' />
86+
</div>
87+
</div>
88+
</DialogSurface>
89+
</Dialog>
90+
);
91+
};
92+
93+
export default EditCLIShortcutsCard;

0 commit comments

Comments
 (0)