fix a bug in the editor

KonnorRogers · Nov 4, 2023 · 0ab58b7 · 0ab58b7
1 parent 8d9c153
commit 0ab58b7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 70 deletions.
diff --git a/docs/src/_documentation/components/light-editor.md b/docs/src/_documentation/components/light-editor.md
@@ -1,6 +1,7 @@
 ---
 title: <light-editor>
 permalink: /components/light-editor/
+component: light-editor
 ---
 
 <light-editor style="display: none;"></light-editor>
@@ -11,3 +12,45 @@ permalink: /components/light-editor/
     </light-editor>
   </template>
 </light-preview>
+
+## With a template
+
+<light-preview inline-preview>
+  <template slot="code">
+    <light-editor>
+      <template>
+        <div>
+          <div>Hello World</div>
+          <div>What's up dude</div>
+        </div>
+
+        <template>
+          A template in a template?!!?!?
+        </template>
+
+        This is madness!!
+      </template>
+    </light-editor>
+  </template>
+</light-preview>
+
+## Changing the language
+
+<light-preview inline-preview>
+  <template slot="code">
+    <light-editor language="css">
+      <template>
+        html, body {
+          min-height: 100%;
+          height: 100%;
+          padding: 0;
+          margin: 0;
+        }
+
+        light-pen {
+          height: 100%;
+        }
+      </template>
+    </light-editor>
+  </template>
+</light-preview>
diff --git a/docs/src/_documentation/components/light-preview.md b/docs/src/_documentation/components/light-preview.md
@@ -1,6 +1,7 @@
 ---
 title: <light-preview>
 permalink: /components/light-preview/
+component: light-preview
 ---
 
 ## Typical Usage

diff --git a/exports/light-editor.js b/exports/light-editor.js
@@ -11,6 +11,7 @@ import { baseStyles } from "./base-styles.js";
 import { styles } from "./light-editor.styles.js";
 import { theme } from "./default-theme.styles.js";
 import { LightResizeEvent } from "./events/light-resize-event.js"
+import { dedent } from "../internal/dedent.js";
 
 HighlightJS.registerLanguage('javascript', JavaScript);
 HighlightJS.registerLanguage('xml', HTML);
@@ -41,7 +42,7 @@ export default class LightEditor extends BaseElement {
   static properties = {
     label: {},
     value: {},
-    language: {reflect: true}
+    language: {reflect: true},
   }
 
   constructor () {
@@ -130,10 +131,10 @@ export default class LightEditor extends BaseElement {
           }}
           @scroll=${this.syncScroll}
           .value=${this.value}
-        >${this.value}</textarea>
+        ></textarea>
 			</div>
 
-      <slot hidden></slot>
+      <slot hidden @slotchange=${this.handleSlotChangeEvent}></slot>
 		`
   }
 
@@ -170,10 +171,20 @@ export default class LightEditor extends BaseElement {
    * @param {Event} e
    */
   handleSlotChangeEvent (e) {
-    const target = /** @type {HTMLSlotElement} */ (e.target)
-
-    this.currentWatchedElements = target.assignedElements({ flatten: true })
     // @TODO: Attach mutations observers to update value.
+    /**
+     * @type {HTMLSlotElement}
+     */
+    // @ts-expect-error
+    const slot = e.target
+
+    const templates = slot.assignedElements({flatten: true})
+
+    const code = dedent(this.unescapeCharacters(templates.map((template) => template.innerHTML).join("\n")))
+
+    if (code.trim()) {
+      this.value = code
+    }
   }
 
   /**
@@ -231,7 +242,7 @@ export default class LightEditor extends BaseElement {
     let { code, language } = options
 
     code = this.unescapeCharacters(code)
-    // Dedent is nice, but we don't want to do it on user type data.
+    // Dedent is nice, but we don't want to do it on user typed data.
     // code = dedent(code)
     code = this.injectNewLine(code)
 

diff --git a/exports/light-editor.styles.js b/exports/light-editor.styles.js
@@ -34,6 +34,11 @@ export const styles = css`
     overflow: auto;
     position: relative;
 
+    height: var(--textarea-height, auto);
+    width: var(--textarea-width, auto);
+    max-width: 100%;
+    max-height: 100%;
+
     /* this creates line-wrapping. */
 	  word-break: break-word;
     white-space: pre-wrap;
@@ -50,12 +55,6 @@ export const styles = css`
 	  background-color: #f7f7f7;
   }
 
-  [part~="pre"] {
-    height: var(--textarea-height, auto);
-    max-height: var(--textarea-height, auto);
-    width: var(--textarea-width, auto);
-    max-width: var(--textarea-width, auto);
-  }
 
   [part~="pre"],
   [part~="code"],

diff --git a/exports/light-pen.js b/exports/light-pen.js
@@ -209,11 +209,16 @@ export default class LightPen extends BaseElement {
   }
 
   updateIframeContent () {
-    const iframeElem= this.iframeElem
+    const iframeElem = this.iframeElem
     if (iframeElem == null) return
 
     // this.setupIframeLogging();
 
+    console.log({
+      cssCode: this.cssCode,
+      htmlCode: this.htmlCode,
+      jsCode: this.jsCode,
+    })
     let page = `
       <!doctype html><html>
         <head><meta charset="utf-8">
@@ -298,7 +303,7 @@ export default class LightPen extends BaseElement {
   resetValues () {
     this.htmlCode = this.htmlEditor?.getAttribute("value") || ""
     this.cssCode = this.cssEditor?.getAttribute("value") || ""
-    this.jsCode = this.cssEditor?.getAttribute("value") || ""
+    this.jsCode = this.jsEditor?.getAttribute("value") || ""
     this.requestUpdate()
 
   }
@@ -330,47 +335,6 @@ export default class LightPen extends BaseElement {
   //   )
   // }
 
-  /**
-   * @param {Event} e
-   */
-  handleTemplate (e) {
-    /**
-     * @type {HTMLSlotElement}
-     */
-    // @ts-expect-error
-    const slot = e.target
-
-    const slotName = slot.getAttribute("name")
-    if (slotName == null) return
-
-    if (!this.languages.includes(/** @type {SupportedLanguages} */ (slotName))) {
-      return
-    }
-
-    const codeType = /** @type {SupportedLanguages} */ (slotName)
-
-    const templates = slot.assignedElements({flatten: true})
-
-    const code = dedent(this.unescapeCharacters(templates.map((template) => template.innerHTML).join("\n")))
-
-    this[`${codeType}Code`] = code
-
-    const textArea = this[`${codeType}Editor`]
-
-    if (textArea && code) {
-      textArea.setAttribute("value", code)
-      textArea.value = code
-    }
-  }
-
-  /**
-   * @param {string} text
-   */
-  unescapeCharacters (text) {
-    // Update code
-    return text.replaceAll("&lt;/script>", "</script>")
-  }
-
   // Rendering
   renderConsole () {
     return html`<div part="sandbox-console-log"></div>`
@@ -382,12 +346,6 @@ export default class LightPen extends BaseElement {
   render () {
 		return html`
       <!-- Where users can declaratively provide templates -->
-      <div style="display: none;">
-        <slot name="html" @slotchange=${this.handleTemplate}></slot>
-        <slot name="css" @slotchange=${this.handleTemplate}></slot>
-        <slot name="js" @slotchange=${this.handleTemplate}></slot>
-      </div>
-
       <div part="base" ?resizing=${this._resizing}>
 			  <div part="sandbox">
 				  <div part="sandbox-header">
@@ -515,14 +473,7 @@ export default class LightPen extends BaseElement {
           textarea:sandbox-editor__textarea
         "
         language=${highlightLang}
-        .value=${this[`${language}Code`]}
-        @light-input=${/** @param {Event} e */ (e) => {
-          this[`${language}Code`] = /** @type {LightEditor} */ (e.currentTarget).value
-        }}
-        @light-change=${/** @param {Event} e */ (e) => {
-          this[`${language}Code`] = /** @type {LightEditor} */ (e.currentTarget).value
-        }}
-      ></light-editor>
+      ><slot name=${language}></slot></light-editor>
     `
   }
 

diff --git a/exports/light-pen.styles.js b/exports/light-pen.styles.js
@@ -23,9 +23,11 @@ export const styles = css`
   outline: 2px solid blue;
 }
 
+/*
 [part~="sandbox-editor"] {
   height: var(--textarea-height, 33%);
 }
+*/
 
 [part~="base"] {
 	word-wrap: break-word;