@operato/input 1.5.53 → 1.7.2

package/src/ox-input-code.ts

@@ -9,10 +9,12 @@ 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, syntaxHighlighting } from '@codemirror/language'
+import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
 
 import { javascript } from '@codemirror/lang-javascript'
+import { sql } from '@codemirror/lang-sql'
+import { json } from '@codemirror/lang-json'
 
 import { ScrollbarStyles } from '@operato/styles'
 import { togglefullscreen } from '@operato/utils'
@@ -53,6 +55,7 @@ export class OxInputCode extends OxFormField {
   @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'
 
   private _self_changing: boolean = false
   private _editor?: EditorView
@@ -68,9 +71,24 @@ export class OxInputCode extends OxFormField {
 
   get editor() {
     if (!this._editor) {
+      let language: LanguageSupport
+      switch (this.language) {
+        case 'sql':
+          language = sql()
+          break
+        case 'json':
+          language = json()
+          break
+        case 'javascript':
+        default:
+          language = javascript()
+          break
+      }
+
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          language,
           bracketMatching(),
           closeBrackets(),
           history(),
@@ -78,7 +96,6 @@ export class OxInputCode extends OxFormField {
           oneDark,
           syntaxHighlighting(oneDarkHighlightStyle),
           highlightActiveLine(),
-          javascript(),
           keymap.of([
             ...historyKeymap,
             indentWithTab,

package/stories/ox-input-code.stories.ts

@@ -7,7 +7,8 @@ export default {
   component: 'ox-input-code',
   argTypes: {
     value: { control: 'text' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    language: { control: 'select', options: ['javascript', 'sql', 'json'] }
   }
 }
 
@@ -20,9 +21,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: string
+  language: 'javascript' | 'sql' | 'json'
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '' }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   <style>
@@ -38,6 +40,7 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => h
       console.log((e.target as HTMLInputElement).value)
     }}
     name=${name}
+    language=${language}
     .value=${value}
   >
   </ox-input-code>
@@ -46,5 +49,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => h
 export const Regular = Template.bind({})
 Regular.args = {
   name: 'code',
-  value: ''
+  value: '',
+  language: 'javascript'
 }