Merge branch 'main' into slangroom-preset-loader

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.2.5](https://github.com/dyne/components/compare/v1.2.4...v1.2.5) (2024-07-29)
+
+
+### Bug Fixes
+
+* responsiveness ([#15](https://github.com/dyne/components/issues/15)) ([355c6bc](https://github.com/dyne/components/commit/355c6bc3dcbfbbfd8452a690efd09e319118223f))
+
+## [1.2.4](https://github.com/dyne/components/compare/v1.2.3...v1.2.4) (2024-07-29)
+
+
+### Bug Fixes
+
+* solved reactivity issue ([#17](https://github.com/dyne/components/issues/17)) ([e6fd8e6](https://github.com/dyne/components/commit/e6fd8e6eb400f03fca0102a60c300cf8a6356c5c))
+
+## [1.2.3](https://github.com/dyne/components/compare/v1.2.2...v1.2.3) (2024-07-29)
+
+
+### Bug Fixes
+
+* add pre to preserve whitespace ([#16](https://github.com/dyne/components/issues/16)) ([4b4c2ce](https://github.com/dyne/components/commit/4b4c2cefc347f62e0b9f8aa6f73bc86dbe173205))
+
+## [1.2.2](https://github.com/dyne/components/compare/v1.2.1...v1.2.2) (2024-07-23)
+
+
+### Bug Fixes
+
+* slangroom error now are rendered with the correct background and foreground colors ([#11](https://github.com/dyne/components/issues/11)) ([50505cb](https://github.com/dyne/components/commit/50505cb5112cb7b9eec1d3bed98543a147beb42e))
+
 ## [1.2.1](https://github.com/dyne/components/compare/v1.2.0...v1.2.1) (2024-07-22)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyne/components",
-  "version": "1.2.1",
+  "version": "1.2.5",
   "description": " ♻️ Recycled UI for dyners",
   "publishConfig": {
     "access": "public"

src/components.d.ts

@@ -31,6 +31,7 @@ export namespace Components {
     interface DyneCodeEditor {
         "class": string;
         "config": EditorStateConfig;
+        "content": string;
         "getContent": () => Promise<string>;
         "name": string;
         "setContent": (text: string) => Promise<void>;
@@ -124,6 +125,7 @@ declare namespace LocalJSX {
     interface DyneCodeEditor {
         "class"?: string;
         "config"?: EditorStateConfig;
+        "content"?: string;
         "name"?: string;
     }
     interface DyneInline {

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

@@ -1,4 +1,4 @@
-import { Component, Element, Method, State, h, Prop } from '@stencil/core';
+import { Component, Element, Method, State, h, Prop, Host, Watch } from '@stencil/core';
 
 import { basicSetup } from 'codemirror';
 import { EditorState, EditorStateConfig } from '@codemirror/state';
@@ -16,16 +16,30 @@ import { nanoid } from 'nanoid';
 export class DyneCodeEditor {
   @Element() el: HTMLElement;
 
-  @Prop() name = nanoid(5);
-  @Prop() config: EditorStateConfig = { extensions: basicSetup };
-  @Prop() class = '';
+  @Prop({ reflect: true }) name = nanoid(5);
+  @Prop({ reflect: true }) config: EditorStateConfig = { extensions: basicSetup };
+  @Prop({ reflect: true }) class = '';
+  @Prop({ reflect: true }) content = '';
 
-  @State() view: EditorView;
+  view: EditorView;
+
+  @Watch('content')
+  async updateEditorContent() {
+    await this.setContent(this.content);
+  }
 
   private get state() {
     return this.view.state;
   }
 
+  //
+
+  async componentDidLoad() {
+    this.view = createEditor(this.getContainer(), { ...this.config, doc: this.content });
+  }
+
+  //
+
   @Method()
   async getContent(): Promise<string> {
     return this.state.doc.toString();
@@ -40,18 +54,20 @@ export class DyneCodeEditor {
 
   //
 
-  async componentDidLoad() {
-    this.view = createEditor(this.getContainer(), this.config);
-  }
-
   private getContainer() {
     const editorContainer = this.el.shadowRoot?.getElementById(this.name);
     if (!editorContainer) throw new Error('Container not initialized');
     return editorContainer;
   }
 
+  //
+
   render() {
-    return <div id={this.name} class={this.class}></div>;
+    return (
+      <Host>
+        <div id={this.name} class={this.class}></div>
+      </Host>
+    );
   }
 }