feat(code-editor): enable label, tooltip, required field, and word wrap support

Author: Nangelov7

client/packages/lowcoder/src/comps/comps/codeEditorComp/codeEditorComp.tsx

@@ -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;
@@ -58,6 +62,7 @@ let CodeEditorTmpComp = (function () {
     language: "yaml",
     theme: "light",
     lineNumbers: "on",
+    wordWrap: "on",
     lightbulb: monacoEditor.editor.ShowLightbulbIconMode.OnCode,
     enabled: true,
     disabled: false,
@@ -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) => {
@@ -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={{
@@ -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,
@@ -219,7 +248,8 @@ let CodeEditorTmpComp = (function () {
         onChange={handleOnChange}
       />
     </CodeEditorWrapper>
-  );
+    )
+  })
 })
 .setPropertyViewFn((children: any) => {
   return (
@@ -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} />
     </>
   );
 })
@@ -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",
@@ -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")),
 ]);

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1446,6 +1446,10 @@ export const SignatureContainerStyle = [
   // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
+export const CodeEditorContainerStyle = [
+  getStaticBorder(),
+] as const;
+
 export const RatingStyle = [
   {
     name: "checked",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -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.",
@@ -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",
@@ -116,6 +117,12 @@ export const en = {
       "off": "Off",
       "relative": "Relative",
       "interval": "Interval"
+    },
+    "wordWrapOptions": {
+      "on": "On",
+      "off": "Off",
+      "wordWrapColumn": "Column",
+      "bounded": "Bounded"
     }
   },
   "exportMethod": {