@operato/input 1.7.2 → 1.7.4

package/src/ox-input-code.ts

@@ -7,7 +7,6 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
-import { EditorState } from '@codemirror/state'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
@@ -26,7 +25,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
+  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
   </ox-input-code>
 */
 @customElement('ox-input-code')
@@ -52,10 +51,9 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: String }) mode?: string
   @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
   @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
-  @property({ type: String }) language?: 'javascript' | 'sql' | 'json' = 'javascript'
+  @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
   private _editor?: EditorView
@@ -71,24 +69,25 @@ export class OxInputCode extends OxFormField {
 
   get editor() {
     if (!this._editor) {
-      let language: LanguageSupport
+      let language: LanguageSupport[] = []
       switch (this.language) {
         case 'sql':
-          language = sql()
+          language = [sql()]
           break
         case 'json':
-          language = json()
+          language = [json()]
           break
         case 'javascript':
+          language = [javascript()]
+          break
         default:
-          language = javascript()
           break
       }
 
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
-          language,
+          ...language,
           bracketMatching(),
           closeBrackets(),
           history(),

package/src/ox-input-data.ts

@@ -77,7 +77,7 @@ export class OxInputData extends OxFormField {
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>
+      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor> </ox-input-code>
     `
   }