mirror of
https://github.com/maputnik/editor.git
synced 2025-12-24 07:00:01 +00:00
c168e65d86
## Launch Checklist - Fixes #1524 The problem is that the editor at the end of the layer editor view is forcing some scrolling due to a different bug that was solved. - #1492 which was solved in PR: #1501 The previous fix was in oder to solve issues in the code editor which has all the style in it, and a search-and-replace operation is used to change the content, so there was a need to introduce the previous fix. The current solution is to scroll the view only for the code editor using a react prop, which is `false` by default. - [x] Briefly describe the changes in this PR. - [x] Link to related issues. - [ ] Write tests for all new functionality. - [x] Add an entry to `CHANGELOG.md` under the `## main` section.
30 lines
961 B
TypeScript
30 lines
961 B
TypeScript
import InputJson from "./InputJson";
|
|
import React from "react";
|
|
import { withTranslation, type WithTranslation } from "react-i18next";
|
|
import { type StyleSpecification } from "maplibre-gl";
|
|
import { type StyleSpecificationWithId } from "../libs/definitions";
|
|
|
|
export type CodeEditorProps = {
|
|
value: StyleSpecification;
|
|
onChange: (value: StyleSpecificationWithId) => void;
|
|
onClose: () => void;
|
|
} & WithTranslation;
|
|
|
|
const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
|
|
|
|
return <>
|
|
<button className="maputnik-button" onClick={props.onClose} aria-label={props.t("Close")} style={{ position: "sticky", top: "0", zIndex: 1 }}>{props.t("Click to close the editor")}</button>
|
|
<InputJson
|
|
lintType="style"
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
className={"maputnik-code-editor"}
|
|
withScroll={true}
|
|
/>;
|
|
</>;
|
|
};
|
|
|
|
const CodeEditor = withTranslation()(CodeEditorInternal);
|
|
|
|
export default CodeEditor;
|