ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-06-15 11:47:26 +00:00
Code Issues Projects Releases Wiki Activity

Add code editor for maputnik (#1426)

Browse Source 
## Launch Checklist

This PR adds the ability to look at the entire style and edit it in a
code editor that supports syntax highlight, errors, search and more.

- Resolves #820

CC: @Kanahiro as I know you did something similar, probably has better
performance...

After:
<img width="1920" height="937" alt="image"
src="https://github.com/user-attachments/assets/f925cf92-2623-4390-8f75-14d7f6a79171"
/>


 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Harel M
2025-10-05 16:38:03 +03:00
committed by GitHub
parent 454d8d8b10
commit 39d63ec7b1
15 changed files with 169 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppToolbar.tsx
+13 -8
View File
@@ -10,7 +10,8 @@ import {
MdFindInPage,
MdLanguage,
MdSave,
MdPublic
MdPublic,
MdCode
} from "react-icons/md";
import pkgJson from "../../package.json";
//@ts-ignore
@@ -23,6 +24,7 @@ import type { OnStyleChangedCallback } from "../libs/definitions";
const browser = detect();
const colorAccessibilityFiltersEnabled = ["chrome", "firefox"].indexOf(browser!.name) > -1;
export type ModalTypes = "settings" | "sources" | "open" | "shortcuts" | "export" | "debug" | "globalState" | "codeEditor";
type IconTextProps = {
children?: React.ReactNode
@@ -39,7 +41,6 @@ type ToolbarLinkProps = {
className?: string
children?: React.ReactNode
href?: string
onToggleModal?(...args: unknown[]): unknown
};
class ToolbarLink extends React.Component<ToolbarLinkProps> {
@@ -101,7 +102,7 @@ type AppToolbarInternalProps = {
// A dict of source id's and the available source layers
sources: object
children?: React.ReactNode
onToggleModal(...args: unknown[]): unknown
onToggleModal(modal: ModalTypes): void
onSetMapState(mapState: MapState): unknown
mapState?: MapState
renderer?: string
@@ -221,23 +222,27 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
</a>
</div>
<div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, "open")}>
<ToolbarAction wdKey="nav:open" onClick={() => this.props.onToggleModal("open")}>
<MdOpenInBrowser />
<IconText>{t("Open")}</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, "export")}>
<ToolbarAction wdKey="nav:export" onClick={() => this.props.onToggleModal("export")}>
<MdSave />
<IconText>{t("Save")}</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, "sources")}>
<ToolbarAction wdKey="nav:code-editor" onClick={() => this.props.onToggleModal("codeEditor")}>
<MdCode />
<IconText>{t("Code Editor")}</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:sources" onClick={() => this.props.onToggleModal("sources")}>
<MdLayers />
<IconText>{t("Data Sources")}</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, "settings")}>
<ToolbarAction wdKey="nav:settings" onClick={() => this.props.onToggleModal("settings")}>
<MdSettings />
<IconText>{t("Style Settings")}</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:global-state" onClick={this.props.onToggleModal.bind(this, "globalState")}>
<ToolbarAction wdKey="nav:global-state" onClick={() => this.props.onToggleModal("globalState")}>
<MdPublic />
<IconText>{t("Global State")}</IconText>
</ToolbarAction>