Skip to content

Commit 5f043f6

Browse files
TheodoreChuTheodoreChu
committed
feat: setting to toggle minimap
also fix style of settings at bottom. closes #1 and #4
1 parent c7eef3c commit 5f043f6

File tree

3 files changed

+192
-147
lines changed

3 files changed

+192
-147
lines changed

‎src/components/Editor.tsx‎

Lines changed: 147 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export enum HtmlClassName {
2727
export enum HtmlElementId {
2828
fontSize = 'fontSize',
2929
language = 'language',
30+
minimap = 'minimap',
3031
tabSize = 'tabSize',
3132
theme = 'theme',
3233
wordWrap = 'wordWrap',
@@ -42,6 +43,7 @@ export enum HtmlElementId {
4243
export interface SettingsInterface {
4344
fontSize: string;
4445
language: string;
46+
minimap: boolean;
4547
tabSize: number;
4648
theme: string;
4749
wordWrap: string;
@@ -59,6 +61,7 @@ export interface EditorInterface extends SettingsInterface {
5961
const initialState = {
6062
fontSize: '16px',
6163
language: 'markdown',
64+
minimap: true,
6265
showSettings: true,
6366
tabSize: 2,
6467
text: '',
@@ -124,6 +127,7 @@ export default class Editor extends React.Component<{}, EditorInterface> {
124127
settings = {
125128
fontSize: this.state.fontSize,
126129
language: this.state.language,
130+
minimap: this.state.minimap,
127131
tabSize: this.state.tabSize,
128132
theme: this.state.theme,
129133
wordWrap: this.state.wordWrap,
@@ -150,6 +154,7 @@ export default class Editor extends React.Component<{}, EditorInterface> {
150154
{
151155
fontSize: loadedSettings.fontSize,
152156
language: loadedSettings.language,
157+
minimap: loadedSettings.minimap,
153158
tabSize: loadedSettings.tabSize,
154159
theme: loadedSettings.theme,
155160
wordWrap: loadedSettings.wordWrap,
@@ -185,6 +190,7 @@ export default class Editor extends React.Component<{}, EditorInterface> {
185190
defaultSettings = {
186191
fontSize: this.state.fontSize,
187192
language: this.state.language,
193+
minimap: this.state.minimap,
188194
tabSize: this.state.tabSize,
189195
theme: this.state.theme,
190196
wordWrap: this.state.wordWrap,
@@ -206,6 +212,7 @@ export default class Editor extends React.Component<{}, EditorInterface> {
206212
{
207213
fontSize: defaultSettings.fontSize,
208214
language: defaultSettings.language,
215+
minimap: defaultSettings.minimap,
209216
tabSize: defaultSettings.tabSize,
210217
theme: defaultSettings.theme,
211218
wordWrap: defaultSettings.wordWrap,
@@ -233,10 +240,21 @@ export default class Editor extends React.Component<{}, EditorInterface> {
233240
}
234241
};
235242

236-
handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
243+
handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
237244
const target = event.target;
238-
const value = target.value;
239-
this.saveText(value);
245+
const value = target.type === 'checkbox' ? target.checked : target.value;
246+
const name = target.name;
247+
this.setState(
248+
{
249+
[name]: value,
250+
},
251+
() => {
252+
if (name === 'minimap') {
253+
this.saveSettings();
254+
this.refreshEditor();
255+
}
256+
}
257+
);
240258
};
241259

242260
handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -302,6 +320,10 @@ export default class Editor extends React.Component<{}, EditorInterface> {
302320
showSettings: !this.state.showSettings,
303321
},
304322
() => {
323+
/** Refresh the editor to increase its height */
324+
if (!this.state.showSettings) {
325+
this.refreshEditor();
326+
}
305327
const toggleSettingsButton = document.getElementById(
306328
HtmlElementId.settingsToggleButton
307329
);
@@ -361,12 +383,15 @@ export default class Editor extends React.Component<{}, EditorInterface> {
361383
className={
362384
HtmlClassName.MonacoEditorContainerParentDiv +
363385
' ' +
364-
this.state.theme
386+
this.state.theme +
387+
' ' +
388+
(this.state.showSettings ? 'showSettings' : 'hideSettings')
365389
}
366390
>
367391
<MonacoEditor
368392
fontSize={this.state.fontSize}
369393
language={this.state.language}
394+
minimap={this.state.minimap}
370395
onKeyDown={this.onKeyDown}
371396
saveText={this.saveText}
372397
tabSize={this.state.tabSize}
@@ -379,8 +404,10 @@ export default class Editor extends React.Component<{}, EditorInterface> {
379404
<Settings
380405
debugMode={debugMode}
381406
fontSize={this.state.fontSize}
407+
handleInputChange={this.handleInputChange}
382408
handleSelectChange={this.handleSelectChange}
383409
language={this.state.language}
410+
minimap={this.state.minimap}
384411
loadDefaultSettings={this.loadDefaultSettings}
385412
refreshEditor={this.refreshEditor}
386413
saveSettings={this.saveSettings}
@@ -434,6 +461,7 @@ interface MonacoEditorTypes {
434461
fontSize: string;
435462
id?: string;
436463
language: string;
464+
minimap: boolean;
437465
onKeyDown: Function;
438466
onKeyUp?: Function;
439467
saveText: Function;
@@ -447,6 +475,7 @@ export const MonacoEditor: React.FC<MonacoEditorTypes> = ({
447475
fontSize = '16px',
448476
id = HtmlClassName.MonacoEditorContainer,
449477
language = 'javascript',
478+
minimap = true,
450479
onKeyDown,
451480
saveText,
452481
tabSize = 2,
@@ -458,130 +487,131 @@ export const MonacoEditor: React.FC<MonacoEditorTypes> = ({
458487
let editor: monaco.editor.IStandaloneCodeEditor;
459488
useEffect(() => {
460489
if (divEl.current) {
461-
const colorRegExp = /^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/;
462-
const whiteSpaceRegExp = /\s+/g;
463-
464-
let backgroundColor: string;
465-
let tempBackgroundColor = getComputedStyle(document.documentElement)
466-
.getPropertyValue('--sn-stylekit-background-color')
467-
.replace(whiteSpaceRegExp, '');
468-
469-
if (!tempBackgroundColor.match(colorRegExp)) {
470-
console.error('Error parsing background color', tempBackgroundColor);
471-
backgroundColor = '#ffffff';
472-
} else {
473-
backgroundColor = tempBackgroundColor;
474-
}
490+
if (theme === 'sn-theme') {
491+
const colorRegExp = /^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/;
492+
const whiteSpaceRegExp = /\s+/g;
475493

476-
let borderColor: string;
477-
let tempBorderColor = getComputedStyle(document.documentElement)
478-
.getPropertyValue('--sn-stylekit-border-color')
479-
.replace(whiteSpaceRegExp, '');
480-
if (!tempBorderColor.match(colorRegExp)) {
481-
console.error('Error parsing border color', tempBorderColor);
482-
borderColor = '#e3e3e3';
483-
} else {
484-
borderColor = tempBorderColor;
485-
}
494+
let backgroundColor: string;
495+
let tempBackgroundColor = getComputedStyle(document.documentElement)
496+
.getPropertyValue('--sn-stylekit-background-color')
497+
.replace(whiteSpaceRegExp, '');
486498

487-
let contrastBackgroundColor: string;
488-
let tempContrastBackgroundColor = getComputedStyle(
489-
document.documentElement
490-
)
491-
.getPropertyValue('--sn-stylekit-contrast-background-color')
492-
.replace(whiteSpaceRegExp, '');
493-
if (!tempContrastBackgroundColor.match(colorRegExp)) {
494-
console.error(
495-
'Error parsing contrast background color',
496-
tempContrastBackgroundColor
497-
);
498-
contrastBackgroundColor = '#F6F6F6';
499-
} else {
500-
contrastBackgroundColor = tempContrastBackgroundColor;
501-
}
499+
if (!tempBackgroundColor.match(colorRegExp)) {
500+
console.error('Error parsing background color', tempBackgroundColor);
501+
backgroundColor = '#ffffff';
502+
} else {
503+
backgroundColor = tempBackgroundColor;
504+
}
502505

503-
let dangerColor: string;
504-
let tempDangerColor = getComputedStyle(document.documentElement)
505-
.getPropertyValue('--sn-stylekit-danger-color')
506-
.replace(whiteSpaceRegExp, '');
507-
if (!tempDangerColor.match(colorRegExp)) {
508-
console.error('Error parsing danger color', tempDangerColor);
509-
dangerColor = '#F80324'; // Red
510-
} else {
511-
dangerColor = tempDangerColor;
512-
}
506+
let borderColor: string;
507+
let tempBorderColor = getComputedStyle(document.documentElement)
508+
.getPropertyValue('--sn-stylekit-border-color')
509+
.replace(whiteSpaceRegExp, '');
510+
if (!tempBorderColor.match(colorRegExp)) {
511+
console.error('Error parsing border color', tempBorderColor);
512+
borderColor = '#e3e3e3';
513+
} else {
514+
borderColor = tempBorderColor;
515+
}
516+
517+
let contrastBackgroundColor: string;
518+
let tempContrastBackgroundColor = getComputedStyle(
519+
document.documentElement
520+
)
521+
.getPropertyValue('--sn-stylekit-contrast-background-color')
522+
.replace(whiteSpaceRegExp, '');
523+
if (!tempContrastBackgroundColor.match(colorRegExp)) {
524+
console.error(
525+
'Error parsing contrast background color',
526+
tempContrastBackgroundColor
527+
);
528+
contrastBackgroundColor = '#F6F6F6';
529+
} else {
530+
contrastBackgroundColor = tempContrastBackgroundColor;
531+
}
513532

514-
let foregroundColor: string;
515-
let fadedForegroundColor: string;
516-
let fadedTwiceForegroundColor: string;
517-
let tempForegroundColor = getComputedStyle(document.documentElement)
518-
.getPropertyValue('--sn-stylekit-foreground-color')
519-
.replace(whiteSpaceRegExp, '');
520-
if (!tempForegroundColor.match(colorRegExp)) {
521-
console.error('Error parsing foreground color', tempForegroundColor);
522-
foregroundColor = '#000000';
523-
fadedForegroundColor = '#00000099'; /** 60 */
524-
fadedTwiceForegroundColor = '#0000001A'; /** 10 */
525-
} else {
526-
foregroundColor = tempForegroundColor;
527-
if (!foregroundColor.concat('99').match(colorRegExp)) {
533+
let dangerColor: string;
534+
let tempDangerColor = getComputedStyle(document.documentElement)
535+
.getPropertyValue('--sn-stylekit-danger-color')
536+
.replace(whiteSpaceRegExp, '');
537+
if (!tempDangerColor.match(colorRegExp)) {
538+
console.error('Error parsing danger color', tempDangerColor);
539+
dangerColor = '#F80324'; // Red
540+
} else {
541+
dangerColor = tempDangerColor;
542+
}
543+
544+
let foregroundColor: string;
545+
let fadedForegroundColor: string;
546+
let fadedTwiceForegroundColor: string;
547+
let tempForegroundColor = getComputedStyle(document.documentElement)
548+
.getPropertyValue('--sn-stylekit-foreground-color')
549+
.replace(whiteSpaceRegExp, '');
550+
if (!tempForegroundColor.match(colorRegExp)) {
551+
console.error('Error parsing foreground color', tempForegroundColor);
552+
foregroundColor = '#000000';
528553
fadedForegroundColor = '#00000099'; /** 60 */
529554
fadedTwiceForegroundColor = '#0000001A'; /** 10 */
530555
} else {
531-
fadedForegroundColor = tempForegroundColor.concat('99'); /** 60% */
532-
fadedTwiceForegroundColor = tempForegroundColor.concat(
533-
'1A'
534-
); /** 10% */
556+
foregroundColor = tempForegroundColor;
557+
if (!foregroundColor.concat('99').match(colorRegExp)) {
558+
fadedForegroundColor = '#00000099'; /** 60 */
559+
fadedTwiceForegroundColor = '#0000001A'; /** 10 */
560+
} else {
561+
fadedForegroundColor = tempForegroundColor.concat('99'); /** 60% */
562+
fadedTwiceForegroundColor = tempForegroundColor.concat(
563+
'1A'
564+
); /** 10% */
565+
}
535566
}
536-
}
537567

538-
let infoColor: string;
539-
let fadedInfoColor: string;
540-
let fadedTwiceInfoColor: string;
541-
let tempInfoColor = getComputedStyle(document.documentElement)
542-
.getPropertyValue('--sn-stylekit-info-color')
543-
.replace(whiteSpaceRegExp, '');
544-
if (!tempInfoColor.match(colorRegExp)) {
545-
console.error('Error parsing info color', tempInfoColor);
546-
infoColor = '#086dd6';
547-
fadedInfoColor = '#086dd666'; /** 40% */
548-
fadedTwiceInfoColor = '#086dd633'; /** 20% */
549-
} else {
550-
infoColor = tempInfoColor;
551-
/** You only need to test for one */
552-
if (!tempInfoColor.concat('66').match(colorRegExp)) {
553-
fadedInfoColor = '#086dd666';
554-
fadedTwiceInfoColor = '#086dd633';
568+
let infoColor: string;
569+
let fadedInfoColor: string;
570+
let fadedTwiceInfoColor: string;
571+
let tempInfoColor = getComputedStyle(document.documentElement)
572+
.getPropertyValue('--sn-stylekit-info-color')
573+
.replace(whiteSpaceRegExp, '');
574+
if (!tempInfoColor.match(colorRegExp)) {
575+
console.error('Error parsing info color', tempInfoColor);
576+
infoColor = '#086dd6';
577+
fadedInfoColor = '#086dd666'; /** 40% */
578+
fadedTwiceInfoColor = '#086dd633'; /** 20% */
555579
} else {
556-
fadedInfoColor = tempInfoColor.concat('66'); // This is 40% opacity
557-
fadedTwiceInfoColor = tempInfoColor.concat('33'); // This is 20% opacity
580+
infoColor = tempInfoColor;
581+
/** You only need to test for one */
582+
if (!tempInfoColor.concat('66').match(colorRegExp)) {
583+
fadedInfoColor = '#086dd666';
584+
fadedTwiceInfoColor = '#086dd633';
585+
} else {
586+
fadedInfoColor = tempInfoColor.concat('66'); // This is 40% opacity
587+
fadedTwiceInfoColor = tempInfoColor.concat('33'); // This is 20% opacity
588+
}
558589
}
559-
}
560590

561-
let shadowColor: string;
562-
let tempShadowColor = getComputedStyle(document.documentElement)
563-
.getPropertyValue('--sn-stylekit-shadow-color')
564-
.replace(whiteSpaceRegExp, '');
565-
if (!tempShadowColor.match(colorRegExp)) {
566-
console.error('Error parsing shadow color', tempShadowColor);
567-
shadowColor = '#C8C8C8'; // Gray shadow
568-
} else {
569-
shadowColor = tempShadowColor;
570-
}
591+
let shadowColor: string;
592+
let tempShadowColor = getComputedStyle(document.documentElement)
593+
.getPropertyValue('--sn-stylekit-shadow-color')
594+
.replace(whiteSpaceRegExp, '');
595+
if (!tempShadowColor.match(colorRegExp)) {
596+
console.error('Error parsing shadow color', tempShadowColor);
597+
shadowColor = '#C8C8C8'; // Gray shadow
598+
} else {
599+
shadowColor = tempShadowColor;
600+
}
571601

572-
let warningColor: string;
573-
let tempWarningColor = getComputedStyle(document.documentElement)
574-
.getPropertyValue('--sn-stylekit-warning-color')
575-
.replace(whiteSpaceRegExp, '');
576-
if (!tempWarningColor.match(colorRegExp)) {
577-
console.error('Error parsing warning color', tempWarningColor);
578-
warningColor = '#f6a200'; // Orange
579-
} else {
580-
warningColor = tempWarningColor;
581-
}
602+
let warningColor: string;
603+
let tempWarningColor = getComputedStyle(document.documentElement)
604+
.getPropertyValue('--sn-stylekit-warning-color')
605+
.replace(whiteSpaceRegExp, '');
606+
if (!tempWarningColor.match(colorRegExp)) {
607+
console.error('Error parsing warning color', tempWarningColor);
608+
warningColor = '#f6a200'; // Orange
609+
} else {
610+
warningColor = tempWarningColor;
611+
}
582612

583-
let darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
584-
if (theme === 'sn-theme') {
613+
let darkMode = window.matchMedia('(prefers-color-scheme: dark)')
614+
.matches;
585615
monaco.editor.defineTheme('sn-theme', {
586616
/** If sn-theme, then if not dark mode, use vs. Otherwise, use vs-dark (default) */
587617
base: !darkMode ? 'vs' : 'vs-dark',
@@ -653,6 +683,9 @@ export const MonacoEditor: React.FC<MonacoEditorTypes> = ({
653683
//fontFamily: 'var(--sn-stylekit-monospace-font)',
654684
fontSize: parseInt(fontSize.replace('px', '')),
655685
language: language,
686+
minimap: {
687+
enabled: minimap,
688+
},
656689
tabSize: tabSize,
657690
theme: theme,
658691
//@ts-ignore

0 commit comments

Comments
 (0)