handleShortcut(e, shortcuts)}
+ tabIndex={-1}
+ >
+
+
+
+ {
+ store.getState().init(monaco, editor);
+ }}
+ onChange={() => store.getState().onChange()}
+ />
+
+ {showButtons &&
}
+
+
+ );
+}
+
+function createAppVariables(theme: Theme, editorWidth: number): CSSProperties {
+ return {
+ backgroundColor: theme.surface,
+ color: theme.primary,
+ '--mtk23': theme.accent,
+ '--mtk24': theme.name == 'dark'? theme.primary : theme.accent,
+ '--mtk25': theme.primary,
+ '--accent': theme.accent,
+ '--editor-width': `${editorWidth}px`,
+ '--toastify-color-light': theme.surfaceVariant,
+ '--toastify-text-color-light': theme.primary
+ } as CSSProperties;
+}
+
+function createEditorOptions(theme: Theme, fontSize: number): monaco.editor.IStandaloneEditorConstructionOptions {
+ return {
+ lineNumbers: "off",
+ cursorBlinking: "phase",
+ cursorSmoothCaretAnimation: "on",
+ minimap: {
+ enabled: false,
+ },
+ smoothScrolling: true,
+ wordBasedSuggestions: "off",
+ wordWrap: "on",
+ renderLineHighlight: "none",
+ theme: theme.name,
+ fontSize,
+ padding: {
+ top: 50,
+ bottom: 30
+ },
+ selectionHighlight: false,
+ matchBrackets: "never",
+ folding: false,
+ occurrencesHighlight: "off",
+ bracketPairColorization: {
+ enabled: false
+ },
+ unicodeHighlight: {
+ ambiguousCharacters: false,
+ invisibleCharacters: false,
+ },
+ guides: {
+ indentation: false
+ },
+ lineDecorationsWidth: 50,
+ stickyScroll: {
+ enabled: false
+ }
+ };
+}
+
+export default App;
diff --git a/src/renderer/components/CommandPalette.css b/src/renderer/components/CommandPalette.css
new file mode 100644
index 0000000..9802a42
--- /dev/null
+++ b/src/renderer/components/CommandPalette.css
@@ -0,0 +1,76 @@
+[cmdk-overlay] {
+ background-color: rgba(0, 0, 0, 0.2);
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ top: 0;
+ left: 0;
+ pointer-events: all !important;
+}
+
+[cmdk-root] {
+ position: fixed;
+ width: 600px;
+ top: 10vh;
+ left: calc(50% - 300px);
+ border-radius: 5px;
+ padding: 10px;
+ outline: none;
+}
+
+[cmdk-list] {
+ max-height: 200px;
+ overflow-y: scroll;
+ padding-right: 6px;
+}
+
+[cmdk-list]::-webkit-scrollbar {
+ width: 6px;
+}
+[cmdk-list]::-webkit-scrollbar-track {
+ background: transparent;
+}
+[cmdk-list]::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 3px;
+ width: 5px;
+ border: transparent;
+}
+
+[cmdk-input] {
+ width: 580px;
+ padding: 6px 10px;
+ outline: none;
+ border: none;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ font-size: 16px;
+ font-family: "Droid Sans Mono", "monospace", monospace;
+}
+
+[cmdk-input]::placeholder {
+ color: var(--color);
+ opacity: 0.5;
+}
+
+[cmdk-item], [cmdk-empty] {
+ padding: 4px 10px;
+ font-size: 14px;
+ border-radius: 5px;
+ margin-top: 3px;
+ font-family: "Droid Sans Mono", "monospace", monospace;
+ transition: all 0.5s ease;
+}
+
+[cmdk-item]:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ cursor: pointer;
+}
+
+[cmdk-item][data-selected='true'] {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.emoticon {
+ font-family: 'Courier New', Courier, monospace;
+}
diff --git a/src/renderer/components/CommandPalette.tsx b/src/renderer/components/CommandPalette.tsx
new file mode 100644
index 0000000..35398a4
--- /dev/null
+++ b/src/renderer/components/CommandPalette.tsx
@@ -0,0 +1,137 @@
+import { Command } from 'cmdk';
+import './CommandPalette.css';
+import { lightTheme, darkTheme, commaTheme } from '../../themes';
+import store from '../store/store';
+import { CSSProperties, useEffect, useState } from 'react';
+
+export default function CommandPalette() {
+
+ const theme = store(state => state.settings.theme);
+ const recentlyOpened = store(state => state.recentlyOpened);
+ const commandPaletteOpen = store(state => state.commandPaletteOpen);
+ const commandPalettePage = store(state => state.commandPalettePage);
+
+ const [value, setValue] = useState('');
+
+ const items = commandPalettePage == 'recentlyOpened' ? recentlyOpened.map(path => ({
+ label: path,
+ action: () => store.getState().openRecent(path)
+ })) : actions[commandPalettePage];
+
+ useEffect(() => {
+ setValue('');
+ }, [commandPaletteOpen, commandPalettePage]);
+
+ return (
+