8000 Code structure settings. · pdg137/python-editor-next@c9de6bc · GitHub
[go: up one dir, main page]
Skip to content

Commit c9de6bc

Browse files
microbit-matt-hillsdonmicrobit-matt-hillsdon
committed
Code structure settings.
These are experiments and aren't expected to remain configurable by users. We'll probably hide them for a beta.
1 parent b787ec3 commit c9de6bc

File tree

6 files changed

+247
-127
lines changed

6 files changed

+247
-127
lines changed

‎src/common/use-local-storage.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,21 @@ export function useLocalStorage<T>(
1717
const value = localStorage.getItem(key);
1818
if (value !== null) {
1919
try {
20-
const parsed = JSON.parse(value);
20+
let parsed = JSON.parse(value);
21+
// Ensure we get new top-level defaults.
22+
parsed = {
23+
...defaultValue,
24+
...parsed,
25+
};
26+
// Remove any top-level keys that aren't present in defaults.
27+
const unknownKeys = new Set(Object.keys(parsed));
28+
Object.keys(defaultValue).forEach((k) => unknownKeys.delete(k));
29+
unknownKeys.forEach((k) => delete parsed[k]);
30+
2131
if (!validate(parsed)) {
2232
throw new Error("Invalid data stored in local storage");
2333
}
34+
2435
return parsed;
2536
} catch (e) {
2637
// Better than exploding forever.

‎src/editor/EditorContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ interface EditorContainerProps {
1616
* and wires it to the currently open file.
1717
*/
1818
const EditorContainer = ({ filename }: EditorContainerProps) => {
19-
const [{ fontSize, codeStructureHighlight }] = useSettings();
19+
const [{ fontSize, codeStructureHighlighting }] = useSettings();
2020
const [defaultValue, onFileChange] = useProjectFileText(filename);
2121
return typeof defaultValue === "undefined" ? null : (
2222
<Editor
2323
defaultValue={defaultValue}
2424
onChange={onFileChange}
2525
fontSize={fontSize}
26-
codeStructureHighlight={codeStructureHighlight}
26+
codeStructureSettings={codeStructureHighlighting}
2727
/>
2828
);
2929
};

‎src/editor/codemirror/CodeMirror.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { EditorState } from "@codemirror/state";
77
import { EditorView } from "@codemirror/view";
88
import { useEffect, useMemo, useRef } from "react";
99
import { useIntl } from "react-intl";
10-
import { CodeStructureHighlight } from "../../settings/settings";
1110
import "./CodeMirror.css";
1211
import { editorConfig, themeExtensionsCompartment } from "./config";
1312
import {
14-
structureHighlighting,
13+
codeStructure,
14+
CodeStructureSettings,
1515
structureHighlightingCompartment,
1616
} from "./structure-highlighting";
1717
import themeExtensions from "./themeExtensions";
@@ -22,7 +22,7 @@ interface CodeMirrorProps {
2222
onChange: (doc: string) => void;
2323

2424
fontSize: number;
25-
codeStructureHighlight: CodeStructureHighlight;
25+
codeStructureSettings: CodeStructureSettings;
2626
}
2727

2828
/**
@@ -38,7 +38,7 @@ const CodeMirror = ({
3838
className,
3939
onChange,
4040
fontSize,
41-
codeStructureHighlight,
41+
codeStructureSettings,
4242
}: CodeMirrorProps) => {
4343
const elementRef = useRef<HTMLDivElement | null>(null);
4444
const viewRef = useRef<EditorView | null>(null);
@@ -48,9 +48,9 @@ const CodeMirror = ({
4848
const options = useMemo(
4949
() => ({
5050
fontSize,
51-
codeStructureHighlight,
51+
codeStructureSettings,
5252
}),
53-
[fontSize, codeStructureHighlight]
53+
[fontSize, codeStructureSettings]
5454
);
5555

5656
useEffect(() => {
@@ -68,7 +68,7 @@ const CodeMirror = ({
6868
editorConfig,
6969
// Extensions we enable/disable based on props.
7070
structureHighlightingCompartment.of(
71-
structureHighlighting(options.codeStructureHighlight)
71+
codeStructure(options.codeStructureSettings)
7272
),
7373
themeExtensionsCompartment.of(themeExtensions(options.fontSize)),
7474
],
@@ -98,7 +98,7 @@ const CodeMirror = ({
9898
themeExtensions(options.fontSize)
9999
),
100100
structureHighlightingCompartment.reconfigure(
101-
structureHighlighting(options.codeStructureHighlight)
101+
codeStructure(options.codeStructureSettings)
102102
),
103103
],
104104
});

‎src/editor/codemirror/structure-highlighting/index.ts

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,35 @@
88
*/
99

1010
import { Compartment, Extension } from "@codemirror/state";
11-
import { CodeStructureHighlight } from "../../../settings/settings";
1211
import { baseTheme, themeTweakForBackgrounds } from "./theme";
1312
import { codeStructureView } from "./view";
1413

1514
export const structureHighlightingCompartment = new Compartment();
1615

16+
export type CodeStructureShape = "l-shape" | "box";
17+
export type CodeStructureBackground = "block" | "none";
18+
export type CodeStructureBorders = "borders" | "none" | "left-edge-only";
19+
1720
export interface CodeStructureSettings {
18-
shape: "l-shape" | "box";
19-
background: "block" | "none";
20-
borders: "borders" | "no-borders" | "left-edge-only";
21+
shape: CodeStructureShape;
22+
background: CodeStructureBackground;
23+
borders: CodeStructureBorders;
2124

2225
hoverBackground?: boolean;
2326
cursorBackground?: boolean;
2427
hoverBorder?: boolean;
2528
cursorBorder?: boolean;
2629
}
2730

28-
// We'll switch to exporting this soon, see below.
29-
const codeStructure = (settings: CodeStructureSettings): Extension => [
31+
/**
32+
* Creates a CodeMirror extension that provides structural highlighting
33+
* based on the CodeMirror syntax tree. The indent is to aid code comprehension
34+
* and provide clues when indentation isn't correct.
35+
*
36+
* @param settings Settings for the code structure CodeMirror extension.
37+
* @returns A new
38+
*/
39+
export const codeStructure = (settings: CodeStructureSettings): Extension => [
3040
codeStructureView(settings),
3141
baseTheme,
3242
settings.background !== "none" ||
@@ -35,33 +45,3 @@ const codeStructure = (settings: CodeStructureSettings): Extension => [
3545
? themeTweakForBackgrounds
3646
: [],
3747
];
38-
39-
// This will go soon in favour of more fine-grained settings
40-
export const structureHighlighting = (
41-
option: CodeStructureHighlight
42-
): Extension => {
43-
switch (option) {
44-
case "l-shapes":
45-
return codeStructure({
46-
shape: "l-shape",
47-
background: "none",
48-
borders: "left-edge-only",
49-
});
50-
case "boxes":
51-
return codeStructure({
52-
shape: "box",
53-
background: "block",
54-
borders: "no-borders",
55-
});
56-
case "l-shape-boxes":
57-
return codeStructure({
58-
shape: "l-shape",
59-
background: "block",
60-
borders: "no-borders",
61-
});
62-
case "none":
63-
return [];
64-
default:
65-
return [];
66-
}
67-
};

0 commit comments

Comments
 (0)
0