Skip to content

[Feat]: Add code editor as a standalone component #1842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

[Feat]: Add code editor as a standalone component #1842

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f9330b
feat: add code editor component
Nangelov7 Jul 5, 2025
03db9f7
feat(code-editor): enable label, tooltip, required field, and word wr…
Nangelov7 Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
feat(code-editor): enable label, tooltip, required field, and word wr… 
…ap support
  • Loading branch information
@Nangelov7
Nangelov7 committed Jul 8, 2025
commit 03db9f774eb04a1b9ed911af636e2e148b990d26
90 changes: 86 additions & 4 deletions client/packages/lowcoder/src/comps/comps/codeEditorComp/codeEditorComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,20 @@ import {
eventHandlerControl,
stringExposingStateControl,
BoolControl,
LabelControl,
styleControl,
dropdownControl,
AutoHeightControl,
} from "lowcoder-sdk";
import { CodeEditorContainerStyle, LabelStyle } from "comps/controls/styleControlConstants";
import { useResizeDetector } from "react-resize-detector";
import Editor from "@monaco-editor/react";
import { styled } from "styled-components";
import { trans } from "i18n";
import { useRef, useCallback, useLayoutEffect } from "react";
import debounce from "lodash/debounce";
import * as monacoEditor from "monaco-editor";
import { formDataChildren, FormDataPropertyView } from "../../comps/formComp/formDataConstants";

const CodeEditorWrapper = styled.div`
border: 1px solid #dddddd;
Expand Down Expand Up @@ -58,6 +62,7 @@ let CodeEditorTmpComp = (function () {
language: "yaml",
theme: "light",
lineNumbers: "on",
wordWrap: "on",
lightbulb: monacoEditor.editor.ShowLightbulbIconMode.OnCode,
enabled: true,
disabled: false,
Expand All @@ -76,25 +81,45 @@ let CodeEditorTmpComp = (function () {
{ label: trans("codeEditor.lineNumberOptions.relative"), value: "relative" },
].sort((a, b) => a.label.localeCompare(b.label))

const wordWrapOptions = [
{ label: trans("codeEditor.wordWrapOptions.on"), value: "on" },
{ label: trans("codeEditor.wordWrapOptions.off"), value: "off" },
{ label: trans("codeEditor.wordWrapOptions.wordWrapColumn"), value: "wordWrapColumn" },
{ label: trans("codeEditor.wordWrapOptions.bounded"), value: "bounded" },
].sort((a, b) => a.label.localeCompare(b.label))

const childrenMap = {
autoHeight: withDefault(AutoHeightControl, "auto"),
language: dropdownControl(languages, defaultValues.language),
theme: dropdownControl(themes, defaultValues.theme),
lineNumbers: dropdownControl(lineNumbersOptions, defaultValues.lineNumbers),
wordWrap: dropdownControl(wordWrapOptions, defaultValues.wordWrap),
minimap: withDefault(BoolControl, defaultValues.enabled),
stickyScroll: withDefault(BoolControl, defaultValues.enabled),
lightbulb: withDefault(BoolControl, defaultValues.enabled),
hover: withDefault(BoolControl, defaultValues.enabled),
folding: withDefault(BoolControl, defaultValues.enabled),
readOnly: withDefault(BoolControl, defaultValues.disabled),
value: stringExposingStateControl("text", defaultValues.value),
required: withDefault(BoolControl, defaultValues.disabled),
label: withDefault(LabelControl, {
text: "Code Editor",
tooltip: "",
hidden: false,
widthUnit: "%",
position: "column",
align: "left"
}),
style: styleControl(CodeEditorContainerStyle , "style"),
labelStyle: styleControl(LabelStyle , 'labelStyle'),
onEvent: eventHandlerControl([
{
label: "onChange",
value: "change",
description: "Triggers when data changes",
},
] as const),
...formDataChildren,
};

return new UICompBuilder(childrenMap, (props) => {
Expand Down Expand Up @@ -174,7 +199,10 @@ let CodeEditorTmpComp = (function () {
}
}, [props.value.value]);

return (
return props.label({
required: props.required,
style: props.style,
children: (
<CodeEditorWrapper
ref={conRef}
style={{
Expand Down Expand Up @@ -210,6 +238,7 @@ let CodeEditorTmpComp = (function () {
hover: {
enabled: props.hover,
},
wordWrap: props.wordWrap as 'off' | 'on' | 'wordWrapColumn' | 'bounded',
folding: props.folding,
readOnly: props.readOnly,
lineNumbers: props.lineNumbers as monacoEditor.editor.LineNumbersType,
Expand All @@ -219,7 +248,8 @@ let CodeEditorTmpComp = (function () {
onChange={handleOnChange}
/>
</CodeEditorWrapper>
);
)
})
})
.setPropertyViewFn((children: any) => {
return (
Expand All @@ -229,19 +259,33 @@ let CodeEditorTmpComp = (function () {
{children.language.propertyView({ label: trans("codeEditor.properties.language") })}
{children.theme.propertyView({ label: trans("codeEditor.properties.theme") })}
{children.lineNumbers.propertyView({ label: trans("codeEditor.properties.lineNumbers") })}
{children.wordWrap.propertyView({ label: trans("codeEditor.properties.wordWrap") })}
{children.minimap.propertyView({ label: trans("codeEditor.properties.minimap") })}
{children.stickyScroll.propertyView({ label: trans("codeEditor.properties.stickyScroll")})}
{children.lightbulb.propertyView({ label: trans("codeEditor.properties.lightbulb") })}
{children.hover.propertyView({ label: trans("codeEditor.properties.hover") })}
{children.folding.propertyView({ label: trans("codeEditor.properties.folding") })}
{children.readOnly.propertyView({ label: trans("codeEditor.properties.readOnly") })}
</Section>
{children.label.getPropertyView()}
<Section name="Interaction">
{children.onEvent.propertyView()}
</Section>
<Section name="Styles">
<Section name="Layout">
{children.autoHeight.getPropertyView()}
</Section>
<Section name="Advanced">
{children.readOnly.propertyView({ label: trans("codeEditor.properties.readOnly") })}
</Section>
<Section name="Validation">
{children.required.propertyView({ label: trans("codeEditor.properties.required") })}
</Section>
<Section name="Style">
{children.style.getPropertyView()}
</Section>
<Section name="Label Style">
{children.labelStyle.getPropertyView()}
</Section>
<FormDataPropertyView {...children} />
</>
);
})
Expand Down Expand Up @@ -427,6 +471,24 @@ CodeEditorTmpComp = withMethodExposing(CodeEditorTmpComp, [
}
}
},
{
method: {
name: "enableWordWrap",
description: trans("codeEditor.methods.enableWordWrap"),
params: [{
name: "wordWrap",
type: "boolean",
description: "boolean"
}],
},
execute: (comp: any, values: any[]) => {
if(Array.isArray(values)) {
comp.children.wordWrap.dispatchChangeValueAction(values[0]);
} else {
comp.children.wordWrap.dispatchChangeValueAction(values);
}
}
},
{
method: {
name: "setReadOnly",
Expand All @@ -445,17 +507,37 @@ CodeEditorTmpComp = withMethodExposing(CodeEditorTmpComp, [
}
}
},
{
method: {
name: "markAsRequired",
description: trans("codeEditor.methods.markAsRequired"),
params: [{
name: "required",
type: "boolean",
description: "boolean"
}],
},
execute: (comp: any, values: any[]) => {
if(Array.isArray(values)) {
comp.children.required.dispatchChangeValueAction(values[0]);
} else {
comp.children.required.dispatchChangeValueAction(values);
}
}
},
]);

export const CodeEditorComp = withExposingConfigs(CodeEditorTmpComp, [
new NameConfig("value", trans("codeEditor.properties.value")),
new NameConfig("language", trans("codeEditor.properties.language")),
new NameConfig("theme", trans("codeEditor.properties.theme")),
new NameConfig("lineNumbers", trans("codeEditor.properties.lineNumbers")),
new NameConfig("wordWrap", trans("codeEditor.properties.wordWrap")),
new NameConfig("minimap", trans("codeEditor.properties.minimap")),
new NameConfig("stickyScroll", trans("codeEditor.properties.stickyScroll")),
new NameConfig("lightbulb", trans("codeEditor.properties.lightbulb")),
new NameConfig("hover", trans("codeEditor.properties.hover")),
new NameConfig("folding", trans("codeEditor.properties.folding")),
new NameConfig("readOnly", trans("codeEditor.properties.readOnly")),
new NameConfig("required", trans("codeEditor.properties.required")),
]);
4 changes: 4 additions & 0 deletions client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1446,6 +1446,10 @@ export const SignatureContainerStyle = [
// ...STYLING_FIELDS_CONTAINER_SEQUENCE,
] as const;

export const CodeEditorContainerStyle = [
getStaticBorder(),
] as const;

export const RatingStyle = [
{
name: "checked",
Expand Down
11 changes: 9 additions & 2 deletions client/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,9 @@ export const en = {
"lightbulb": "Lightbulb",
"hover": "Hover",
"folding": "Folding",
"wordWrap": "Word Wrap",
"readOnly": "Read Only",
"resizable": "Resizable"
"required": "Required",
},
"methods": {
"setValue": "Update the editor's content.",
Expand All @@ -78,7 +79,7 @@ export const en = {
"enableHover": "Enable or disable hover.",
"enableFolding": "Enable or disable folding.",
"setReadOnly": "Enable or disable read-only mode.",
"setResizable": "Enable or disable the ability to resize the editor.",
"markAsRequired": "Marks the field as required, preventing submission if left empty.",
},
"theme": {
"light": "Light",
Expand Down Expand Up @@ -116,6 +117,12 @@ export const en = {
"off": "Off",
"relative": "Relative",
"interval": "Interval"
},
"wordWrapOptions": {
"on": "On",
"off": "Off",
"wordWrapColumn": "Column",
"bounded": "Bounded"
}
},
"exportMethod": {
Expand Down
Loading