@operato/input 1.5.49 → 1.5.50

package/src/ox-input-code.ts

@@ -2,18 +2,18 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/python/python'
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/autorefresh'
-
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-import CodeMirror from 'codemirror'
-import { css, html, PropertyValues, unsafeCSS } from 'lit'
+import { css, PropertyValues } from 'lit'
 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, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
+
+import { javascript } from '@codemirror/lang-javascript'
+
 import { ScrollbarStyles } from '@operato/styles'
 import { togglefullscreen } from '@operato/utils'
 
@@ -31,45 +31,17 @@ Example:
 export class OxInputCode extends OxFormField {
   static styles = [
     ScrollbarStyles,
-    css`
-      ${unsafeCSS(CodeMirrorStyle)}
-      ${unsafeCSS(FullScreenStyle)}
-        ${unsafeCSS(NightThemeStyle)}
-    `,
     css`
       :host {
         display: flex;
         flex-direction: column;
         position: relative;
+        background: white;
       }
 
-      .CodeMirror {
+      .cm-editor {
         flex: 1;
       }
-
-      textarea {
-        display: block;
-        height: 100%;
-        width: 100%;
-        resize: none;
-        font-size: 16px;
-        line-height: 20px;
-        border: 0px;
-        padding: 0px;
-      }
-
-      #fs-toggle:not(:fullscreen) {
-        background-color: #afa;
-      }
-
-      .CodeMirror-fullscreen {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 9999;
-      }
     `
   ]
 
@@ -82,84 +54,55 @@ export class OxInputCode extends OxFormField {
   @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
 
   private _self_changing: boolean = false
-  private _editor: CodeMirror.EditorFromTextArea | null | undefined = null
+  private _editor?: EditorView
   private _changed: boolean = false
 
-  // private lint: any
-  // private hintOptions: any
-
   updated(changes: PropertyValues<this>) {
     if (changes.has('value') && this.editor && !this._self_changing) {
-      this.editor?.setValue(this.value === undefined ? '' : String(this.value))
-      this.editor?.refresh()
+      const to = this.editor.state.doc.toString().length
+      this.editor.dispatch({
+        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+      })
     }
   }
 
-  render() {
-    return html` <textarea></textarea> `
-  }
-
   get editor() {
     if (!this._editor) {
-      let textarea = this.renderRoot.querySelector('textarea')
-      let mode = this.mode || 'javascript'
-      let tabSize = Number(this.tabSize) || 2
-      let indentUnit = tabSize
-      // let lint = this.lint
-      // let hintOptions = this.hintOptions
-      let tabAsSpace = this.tabAsSpace
-
-      if (textarea) {
-        this._editor = CodeMirror.fromTextArea(textarea, {
-          value: this.value,
-          mode,
-          // lint,
-          // hintOptions,
-          tabSize,
-          indentUnit,
-          lineNumbers: false,
-          showCursorWhenSelecting: true,
-          theme: 'night',
-          extraKeys: {
-            F11: function (cm) {
-              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-            },
-            Esc: function (cm) {
-              // cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-              togglefullscreen(cm.getWrapperElement())
-            },
-            // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621
-            Tab: tabAsSpace
-              ? function (cm: CodeMirror.Editor) {
-                  cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))
-                }
-              : false
-          },
-          autoRefresh: {
-            delay: 500
-          }
-        })
-
-        this._editor.on('blur', e => {
-          if (!this._changed) return
-
-          this.value = e.getValue()
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-        })
-
-        this._editor.on('change', async e => {
-          this._self_changing = true
-
-          this._changed = true
-
-          await this.updateComplete
-          this._self_changing = false
-        })
-
-        this._editor.on('keydown', async (_: any, e: Event) => {
-          e.stopPropagation()
-        })
-      }
+      this._editor = new EditorView({
+        doc: this.value,
+        extensions: [
+          bracketMatching(),
+          closeBrackets(),
+          history(),
+          autocompletion(),
+          oneDark,
+          syntaxHighlighting(oneDarkHighlightStyle),
+          highlightActiveLine(),
+          javascript(),
+          keymap.of([
+            ...historyKeymap,
+            indentWithTab,
+            {
+              key: 'Escape',
+              run: (view: EditorView) => {
+                togglefullscreen(this)
+                return true
+              }
+            }
+          ]),
+          EditorView.updateListener.of(v => {
+            if (v.docChanged) {
+              this._self_changing = true
+              this.value = v.state.doc.toString()
+              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+              requestAnimationFrame(() => {
+                this._self_changing = false
+              })
+            }
+          })
+        ],
+        parent: this.renderRoot
+      })
     }
 
     return this._editor

package/src/ox-input-graphql.ts

@@ -0,0 +1,99 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { javascript } from '@codemirror/lang-javascript'
+import { ScrollbarStyles } from '@operato/styles'
+import { togglefullscreen } from '@operato/utils'
+
+import { OxFormField } from './ox-form-field'
+
+/**
+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>
+*/
+@customElement('ox-input-code')
+export class OxInputCode extends OxFormField {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        background: white;
+      }
+
+      .cm-editor {
+        flex: 1;
+      }
+    `
+  ]
+
+  /**
+   * `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
+
+  private _self_changing: boolean = false
+  private _editor?: EditorView
+  private _changed: boolean = false
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value') && this.editor && !this._self_changing) {
+      const to = this.editor.state.doc.toString().length
+      this.editor.dispatch({
+        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+      })
+    }
+  }
+
+  get editor() {
+    if (!this._editor) {
+      this._editor = new EditorView({
+        doc: this.value,
+        extensions: [
+          highlightActiveLine(),
+          history(),
+          javascript(),
+          keymap.of([
+            ...historyKeymap,
+            indentWithTab,
+            {
+              key: 'Escape',
+              run: (view: EditorView) => {
+                togglefullscreen(this)
+                return true
+              }
+            }
+          ]),
+          EditorView.updateListener.of(v => {
+            if (v.docChanged) {
+              this._self_changing = true
+              this.value = v.state.doc.toString()
+              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+              requestAnimationFrame(() => {
+                this._self_changing = false
+              })
+            }
+          })
+        ],
+        parent: this.renderRoot
+      })
+    }
+
+    return this._editor
+  }
+}

package/stories/{ox-input-code.stories.ts_ → ox-input-code.stories.ts}

@@ -6,7 +6,7 @@ export default {
   title: 'ox-input-code',
   component: 'ox-input-code',
   argTypes: {
-    value: { control: 'object' },
+    value: { control: 'text' },
     name: { control: 'text' }
   }
 }
@@ -19,10 +19,10 @@ interface Story<T> {
 
 interface ArgTypes {
   name?: string
-  value?: object
+  value?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = {} }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', 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>
@@ -43,9 +43,5 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = {} }: ArgTypes) => h
 export const Regular = Template.bind({})
 Regular.args = {
   name: 'code',
-  value: {
-    A: 'A',
-    B: 'B',
-    C: 'C'
-  }
+  value: ''
 }

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

@@ -0,0 +1,58 @@
+import '../src/ox-input-graphql.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-graphql',
+  component: 'ox-input-graphql',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', 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>
+    body {
+    }
+  </style>
+
+  <ox-input-graphql
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-graphql>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'code',
+  value: `
+query privileges {
+  privileges {
+    items {
+      privilege
+      category
+      description
+    }
+    total
+  }
+}
+`
+}