Skip to content

Commit e21152c

Browse files
nightwingnightwing
authored
Merge pull request #6 from mkslanc/cloudscape-example
Cloudscape Ace + Ace linters example
2 parents 37ddbb6 + 90aea8f commit e21152c

File tree

19 files changed

+421
-7
lines changed

19 files changed

+421
-7
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"ace-builds": "^1.31.2",
1414
"ace-code": "^1.31.2",
15+
"ace-linters": "^1.0.3",
1516
"typescript": "^5.3.2"
1617
},
1718
"devDependencies": {

‎samples/ace-builds-parcel/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
},
88
"devDependencies": {
99
"ace-builds": "^1.15.3",
10-
"ace-linters": "^0.4.1",
1110
"buffer": "^5.7.1",
1211
"parcel": "^2.8.3",
1312
"process": "^0.11.10"

‎samples/ace-builds-vitejs/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"build": "vite build"
77
},
88
"devDependencies": {
9-
"ace-linters": "^0.4.1",
109
"ace-builds": "^1.15.3",
1110
"vite": "^4.0.3"
1211
},

‎samples/ace-code-parcel/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
},
88
"devDependencies": {
99
"ace-code": "^1.15.3",
10-
"ace-linters": "^0.4.1",
1110
"parcel": "^2.8.3"
1211
}
1312
}

‎samples/ace-code-vitejs-typescript/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"test:tsc": "tsc --project tsconfig.json"
88
},
99
"devDependencies": {
10-
"ace-linters": "^0.4.1",
1110
"ace-code": "^1.15.3",
1211
"vite": "^4.0.3"
1312
},

‎samples/ace-code-vitejs/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"build": "vite build"
77
},
88
"devDependencies": {
9-
"ace-linters": "^0.4.1",
109
"ace-code": "^1.15.3",
1110
"vite": "^4.0.3"
1211
},

‎samples/ace-code-webpack/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
},
88
"devDependencies": {
99
"ace-code": "^1.15.3",
10-
"ace-linters": "^0.4.1",
1110
"webpack": "^5.75.0",
1211
"webpack-cli": "^5.0.1",
1312
"webpack-dev-server": "^4.11.1",

‎samples/cloudscape-ace-example/.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎samples/cloudscape-ace-example/app/layout.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function RootLayout({children}) {
2+
return <html lang="en">
3+
<body>
4+
{children}
5+
</body>
6+
</html>;
7+
}

‎samples/cloudscape-ace-example/app/page.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use client";
2+
3+
import CodeEditorSnippet from "../components/code-editor";
4+
5+
export default function Page() {
6+
return <>Page3
7+
<CodeEditorSnippet/>
8+
</>;
9+
}

‎samples/cloudscape-ace-example/components/ace-loader.ts

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import "ace-code/styles/ace.css";
2+
import "ace-code/styles/theme/chrome.css";
3+
import "ace-code/styles/theme/clouds.css";
4+
import "ace-code/styles/theme/crimson_editor.css";
5+
import "ace-code/styles/theme/dawn.css";
6+
import "ace-code/styles/theme/dreamweaver.css";
7+
import "ace-code/styles/theme/eclipse.css";
8+
import "ace-code/styles/theme/github.css";
9+
import "ace-code/styles/theme/iplastic.css";
10+
import "ace-code/styles/theme/solarized_light.css";
11+
import "ace-code/styles/theme/textmate.css";
12+
import "ace-code/styles/theme/tomorrow.css";
13+
import "ace-code/styles/theme/xcode.css";
14+
import "ace-code/styles/theme/kuroir.css";
15+
import "ace-code/styles/theme/katzenmilch.css";
16+
import "ace-code/styles/theme/sqlserver.css";
17+
18+
import "ace-code/styles/theme/ambiance.css";
19+
import "ace-code/styles/theme/chaos.css";
20+
import "ace-code/styles/theme/clouds_midnight.css";
21+
import "ace-code/styles/theme/dracula.css";
22+
import "ace-code/styles/theme/cobalt.css";
23+
import "ace-code/styles/theme/gruvbox.css";
24+
import "ace-code/styles/theme/gob.css";
25+
import "ace-code/styles/theme/idle_fingers.css";
26+
import "ace-code/styles/theme/kr_theme.css";
27+
import "ace-code/styles/theme/merbivore.css";
28+
import "ace-code/styles/theme/merbivore_soft.css";
29+
import "ace-code/styles/theme/mono_industrial.css";
30+
import "ace-code/styles/theme/monokai.css";
31+
import "ace-code/styles/theme/nord_dark.css";
32+
import "ace-code/styles/theme/pastel_on_dark.css";
33+
import "ace-code/styles/theme/solarized_dark.css";
34+
import "ace-code/styles/theme/terminal.css";
35+
import "ace-code/styles/theme/tomorrow_night.css";
36+
import "ace-code/styles/theme/tomorrow_night_blue.css";
37+
import "ace-code/styles/theme/tomorrow_night_bright.css";
38+
import "ace-code/styles/theme/tomorrow_night_eighties.css";
39+
import "ace-code/styles/theme/twilight.css";
40+
import "ace-code/styles/theme/vibrant_ink.css";
41+
import {LanguageProvider} from "ace-linters";
42+
43+
export async function aceLoader() {
44+
const ace = await import("ace-code");
45+
46+
const modules = {
47+
// Do not change introduce variables in the imports, or your bundle size will blow up.
48+
"ace/mode/c_cpp": await import("ace-code/src/mode/c_cpp"),
49+
"ace/mode/csharp": await import("ace-code/src/mode/csharp"),
50+
"ace/mode/css": await import("ace-code/src/mode/css"),
51+
"ace/mode/golang": await import("ace-code/src/mode/golang"),
52+
"ace/mode/html": await import("ace-code/src/mode/html"),
53+
"ace/mode/java": await import("ace-code/src/mode/java"),
54+
"ace/mode/javascript": await import("ace-code/src/mode/javascript"),
55+
"ace/mode/json": await import("ace-code/src/mode/json"),
56+
"ace/mode/markdown": await import("ace-code/src/mode/markdown"),
57+
"ace/mode/kotlin": await import("ace-code/src/mode/kotlin"),
58+
"ace/mode/python": await import("ace-code/src/mode/python"),
59+
"ace/mode/ruby": await import("ace-code/src/mode/ruby"),
60+
"ace/mode/rust": await import("ace-code/src/mode/rust"),
61+
"ace/mode/sql": await import("ace-code/src/mode/sql"),
62+
"ace/mode/swift": await import("ace-code/src/mode/swift"),
63+
"ace/mode/text": await import("ace-code/src/mode/text"),
64+
"ace/mode/typescript": await import("ace-code/src/mode/typescript"),
65+
"ace/mode/xml": await import("ace-code/src/mode/xml"),
66+
"ace/mode/yaml": await import("ace-code/src/mode/yaml"),
67+
"ace/mode/jsx": await import("ace-code/src/mode/jsx"),
68+
"ace/mode/tsx": await import("ace-code/src/mode/tsx"),
69+
70+
"ace/snippets/javascript": await import("ace-code/src/snippets/javascript"),
71+
"ace/ext/language_tools": await import("ace-code/src/ext/language_tools"),
72+
"ace/ext/searchbox": await import("ace-code/src/ext/searchbox"),
73+
74+
"ace/theme/chrome": {cssClass: "ace-chrome", isDark: false},
75+
"ace/theme/clouds": {cssClass: "ace-clouds", isDark: false},
76+
"ace/theme/crimson_editor": {
77+
cssClass: "ace-crimson-editor",
78+
isDark: false,
79+
},
80+
"ace/theme/dawn": {cssClass: "ace-dawn", isDark: false},
81+
"ace/theme/dreamweaver": {cssClass: "ace-dreamweaver", isDark: false},
82+
"ace/theme/eclipse": {cssClass: "ace-eclipse", isDark: false},
83+
"ace/theme/github": {cssClass: "ace-github", isDark: false},
84+
"ace/theme/iplastic": {cssClass: "ace-iplastic", isDark: false},
85+
"ace/theme/solarized_light": {
86+
cssClass: "ace-solarized-light",
87+
isDark: false,
88+
},
89+
"ace/theme/textmate": {cssClass: "ace-tm", isDark: false},
90+
"ace/theme/tomorrow": {cssClass: "ace-tomorrow", isDark: false},
91+
"ace/theme/xcode": {cssClass: "ace-xcode", isDark: false},
92+
"ace/theme/kuroir": {cssClass: "ace-kuroir", isDark: false},
93+
"ace/theme/katzenmilch": {cssClass: "ace-katzenmilch", isDark: false},
94+
"ace/theme/sqlserver": {cssClass: "ace-sqlserver", isDark: false},
95+
"ace/theme/ambiance": {cssClass: "ace-ambiance", isDark: true},
96+
"ace/theme/chaos": {cssClass: "ace-chaos", isDark: true},
97+
"ace/theme/clouds_midnight": {
98+
cssClass: "ace-clouds-midnight",
99+
isDark: true,
100+
},
101+
"ace/theme/dracula": {cssClass: "ace-dracula", isDark: true},
102+
"ace/theme/cobalt": {cssClass: "ace-cobalt", isDark: true},
103+
"ace/theme/gruvbox": {cssClass: "ace-gruvbox", isDark: true},
104+
"ace/theme/gob": {cssClass: "ace-gob", isDark: true},
105+
"ace/theme/idle_fingers": {
106+
cssClass: "ace-idle-fingers",
107+
isDark: true,
108+
},
109+
"ace/theme/kr_theme": {cssClass: "ace-kr-theme", isDark: true},
110+
"ace/theme/merbivore": {cssClass: "ace-merbivore", isDark: true},
111+
"ace/theme/merbivore_soft": {
112+
cssClass: "ace-merbivore-soft",
113+
isDark: true,
114+
},
115+
"ace/theme/mono_industrial": {
116+
cssClass: "ace-mono-industrial",
117+
isDark: true,
118+
},
119+
"ace/theme/monokai": {cssClass: "ace-monokai", isDark: true},
120+
"ace/theme/nord_dark": {cssClass: "ace-nord-dark", isDark: true},
121+
"ace/theme/pastel_on_dark": {
122+
cssClass: "ace-pastel-on-dark",
123+
isDark: true,
124+
},
125+
"ace/theme/solarized_dark": {
126+
cssClass: "ace-solarized-dark",
127+
isDark: true,
128+
},
129+
"ace/theme/terminal": {cssClass: "ace-terminal-theme", isDark: true},
130+
"ace/theme/tomorrow_night": {
131+
cssClass: "ace-tomorrow-night",
132+
isDark: true,
133+
},
134+
"ace/theme/tomorrow_night_blue": {
135+
cssClass: "ace-tomorrow-night-blue",
136+
isDark: true,
137+
},
138+
"ace/theme/tomorrow_night_bright": {
139+
cssClass: "ace-tomorrow-night-bright",
140+
isDark: true,
141+
},
142+
"ace/theme/tomorrow_night_eighties": {
143+
cssClass: "ace-tomorrow-night-eighties",
144+
isDark: true,
145+
},
146+
"ace/theme/twilight": {cssClass: "ace-twilight", isDark: true},
147+
"ace/theme/vibrant_ink": {cssClass: "ace-vibrant-ink", isDark: true},
148+
};
149+
ace.config.set("useStrictCSP", true);
150+
ace.config.setLoader((moduleName, afterLoad) => {
151+
console.debug(`Loading Ace module '${moduleName}'`);
152+
if (moduleName in modules) {
153+
afterLoad(null, modules[moduleName]);
154+
return;
155+
}
156+
console.error("module not found", moduleName);
157+
});
158+
if (ace.config["provider"]) {
159+
return ace;
160+
}
161+
162+
ace.config["provider"] = loadLinters(ace);
163+
return ace;
164+
}
165+
166+
export function loadLinters(ace) {
167+
const worker = new Worker(new URL('./webworker.ts', import.meta.url));
168+
const provider = LanguageProvider.create(worker);
169+
170+
(ace?.config as any)?.on("editor", function (editor) {
171+
if (/awsui_editor/.test(editor.container.className)) {
172+
provider.registerEditor(editor);
173+
}
174+
});
175+
176+
return provider;
177+
}

‎samples/cloudscape-ace-example/components/code-editor.jsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, {useEffect, useState} from "react";
2+
import CodeEditor from "@cloudscape-design/components/code-editor";
3+
import {aceLoader} from "./ace-loader";
4+
5+
const i18nStrings = {
6+
loadingState: "Loading code editor",
7+
errorState: "There was an error loading the code editor.",
8+
errorStateRecovery: "Retry",
9+
10+
editorGroupAriaLabel: "Code editor",
11+
statusBarGroupAriaLabel: "Status bar",
12+
13+
cursorPosition: (row, column) => `Ln ${row}, Col ${column}`,
14+
errorsTab: "Errors",
15+
warningsTab: "Warnings",
16+
preferencesButtonAriaLabel: "Preferences",
17+
18+
paneCloseButtonAriaLabel: "Close",
19+
20+
preferencesModalHeader: "Preferences",
21+
preferencesModalCancel: "Cancel",
22+
preferencesModalConfirm: "Confirm",
23+
preferencesModalWrapLines: "Wrap lines",
24+
preferencesModalTheme: "Theme",
25+
preferencesModalLightThemes: "Light themes",
26+
preferencesModalDarkThemes: "Dark themes"
27+
};
28+
29+
function CodeEditorSnippet(props) {
30+
const [value, setValue] = useState(props.value);
31+
const [preferences, setPreferences] = useState({});
32+
const [loading, setLoading] = useState(true);
33+
const [ace, setAce] = useState();
34+
//const [provider, setProvider] = useState();
35+
36+
useEffect(() => {
37+
setValue(props.value);
38+
}, [props.value]);
39+
40+
useEffect(() => {
41+
aceLoader()
42+
.then((ace) => {
43+
setAce(ace);
44+
})
45+
.finally(() => {
46+
setLoading(false);
47+
});
48+
}, []);
49+
50+
return (<>
51+
<CodeEditor
52+
ace={ace}
53+
value={value}
54+
language="tsx"
55+
onDelayedChange={(event) => setValue(event.detail.value)}
56+
preferences={preferences}
57+
onPreferencesChange={(event) => setPreferences(event.detail)}
58+
i18nStrings={i18nStrings}
59+
loading={loading}
60+
// should match the imports on top of this file and in modules imports
61+
themes={{
62+
light: ["dawn"],
63+
dark: ["tomorrow_night_bright"]
64+
}}
65+
/>
66+
</>);
67+
}
68+
69+
const Wrapper = () => {
70+
71+
const [value, setValue] = useState("dddd.as.s ;");
72+
73+
74+
return <div>
75+
{value}
76+
<input value={value} type="text" onChange={(event) => setValue(event.currentTarget.value)}/>
77+
<CodeEditorSnippet value={value}/>
78+
</div>;
79+
};
80+
export default Wrapper;

0 commit comments

Comments
 (0)