File tree Expand file tree Collapse file tree
docs/components/code-editor Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ import React from 'react' ;
2+ import { CodeEditor } from 'geostyler' ;
3+ import SldStyleParser from 'geostyler-sld-parser' ;
4+ import QgisStyleParser from "geostyler-qgis-parser" ;
5+ import MapboxStyleParser from 'geostyler-mapbox-parser' ;
6+ import { Style as GsStyle } from 'geostyler-style' ;
7+
8+ const CodeEditorExample = ( ) => {
9+ const sldParser = new SldStyleParser ( {
10+ sldVersion : "1.1.0" ,
11+ builderOptions : {
12+ format : true ,
13+ } ,
14+ } ) ;
15+ const qgisStyleParser = new QgisStyleParser ( ) ;
16+ const mapboxStyleParser = new MapboxStyleParser ( { pretty : true } ) ;
17+ const style : GsStyle = {
18+ name : "Demo Style" ,
19+ rules : [
20+ {
21+ name : "Rule 1" ,
22+ symbolizers : [
23+ {
24+ kind : "Mark" ,
25+ wellKnownName : "circle" ,
26+ } ,
27+ ] ,
28+ } ,
29+ ] ,
30+ } ;
31+
32+ return (
33+ < div style = { { height : "300px" } } >
34+ < CodeEditor
35+ style = { style }
36+ parsers = { [ sldParser , qgisStyleParser , mapboxStyleParser ] }
37+ defaultParser = { sldParser }
38+ showSaveButton = { true }
39+ showCopyButton = { true }
40+ />
41+ </ div >
42+ ) ;
43+ }
44+
45+ export default CodeEditorExample ;
Original file line number Diff line number Diff line change 1+ ---
2+ displayed_sidebar : componentsSidebar
3+ ---
4+
5+ import CodeEditorExample from './CodeEditorExample.tsx'
6+
7+ # CodeEditor
8+
9+ This demonstrates the use of ` CodeEditor ` .
10+
11+ <CodeEditorExample />
You can’t perform that action at this time.
0 commit comments