feat(code-editor): add support for line wrapping when passing prop

Author: hannahu

etc/lime-elements.api.md

@@ -309,6 +309,7 @@ export namespace Components {
         "fold": boolean;
         "language": Language;
         "lineNumbers": boolean;
+        "lineWrapping": boolean;
         "lint": boolean;
         "readonly": boolean;
         "value": string;
@@ -1471,6 +1472,7 @@ export namespace JSX {
         "fold"?: boolean;
         "language"?: Language;
         "lineNumbers"?: boolean;
+        "lineWrapping"?: boolean;
         "lint"?: boolean;
         "onChange"?: (event: LimelCodeEditorCustomEvent<string>) => void;
         "readonly"?: boolean;

src/components/code-editor/code-editor.tsx

@@ -27,7 +27,7 @@ import jslint from 'jsonlint-mod';
 /**
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
- * @exampleComponent limel-example-code-editor-fold-lint
+ * @exampleComponent limel-example-code-editor-fold-lint-wrap
  */
 @Component({
     tag: 'limel-code-editor',
@@ -59,6 +59,12 @@ export class CodeEditor {
     @Prop()
     public lineNumbers: boolean = false;
 
+    /**
+     * Wraps long lines instead of showing horizontal scrollbar
+     */
+    @Prop()
+    public lineWrapping: boolean = false;
+
     /**
      * Allows the user to fold code
      */
@@ -228,6 +234,7 @@ export class CodeEditor {
             tabSize: TAB_SIZE,
             indentUnit: TAB_SIZE,
             lineNumbers: this.lineNumbers,
+            lineWrapping: this.lineWrapping,
             styleActiveLine: true,
             matchBrackets: true,
             matchTags: { bothTags: true },

src/components/code-editor/examples/code-editor-with-linting-and-folding.tsx

@@ -0,0 +1,50 @@
+import { Component, h, State } from '@stencil/core';
+import { data } from '../../table/examples/birds';
+
+/**
+ * Editable with JSON linting, folding, and line wrapping
+ * Here you see an instance of the Code Editor component with linting,
+ * folding, and line wrapping support. Linting allows the user to see syntax
+ * errors in the JSON code. Folding makes it easier to collapse larger pieces
+ * of code. Line wrapping ensures long lines wrap to the next line instead of
+ * requiring horizontal scrolling, improving readability in constrained spaces.
+ */
+
+@Component({
+    tag: 'limel-example-code-editor-fold-lint-wrap',
+    shadow: true,
+    styleUrl: 'code-editor.scss',
+})
+export class CodeFoldLintAndWrapExample {
+    @State()
+    private json: string = JSON.stringify(
+        [
+            ...data.slice(0, -1),
+            {
+                ...data.at(-1),
+                habitat:
+                    'Found in wetlands, marshes, lakes, rivers, and coastal areas across North America, Europe, Asia, Africa, and Australia. They prefer shallow water with abundant vegetation.',
+            },
+        ],
+        null,
+        '    '
+    );
+
+    private handleChange = (event: CustomEvent<string>) => {
+        this.json = event.detail;
+    };
+
+    public render() {
+        return (
+            <limel-code-editor
+                value={this.json}
+                language="json"
+                lineNumbers={true}
+                lint={true}
+                fold={true}
+                lineWrapping={true}
+                onChange={this.handleChange}
+            />
+        );
+    }
+}