@operato/app 1.1.75 → 1.1.76

package/src/input/ox-input-resource.ts

@@ -1,169 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/autorefresh'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/addon/lint/lint'
-import 'codemirror-graphql/hint'
-import 'codemirror-graphql/lint'
-import 'codemirror-graphql/mode'
-
-import { GRAPHQL_URI, client } from '@operato/graphql'
-import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
-
-import CodeMirror from 'codemirror'
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
-import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
-import { fetch } from 'cross-fetch'
-import { print } from 'graphql'
-
-/**
- WEB Component for code-mirror graphql editor.
- 
- Example:
- 
-   <ox-input-graphql value=${text} link=${link}>
-   </ox-input-graphql>
- */
-@customElement('ox-input-graphql')
-export default class OxInputGraphql extends LitElement {
-  static styles = [
-    css`
-      ${unsafeCSS(CodeMirrorStyle)}
-      ${unsafeCSS(FullScreenStyle)}
-         ${unsafeCSS(NightThemeStyle)}
-         ${unsafeCSS(LintStyle)}
-         ${unsafeCSS(ShowHintStyle)}
-    `,
-    css`
-      :host {
-        display: block;
-        position: relative;
-      }
-
-      textarea {
-        display: block;
-        height: 100%;
-        width: 100%;
-        resize: none;
-        font-size: 16px;
-        line-height: 20px;
-        border: 0px;
-        padding: 0px;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 에디터에서 작성중인 contents이다.
-   */
-  @property({ type: String }) value?: string
-  @property({ type: String }) link?: string
-
-  @query('textarea') textarea!: HTMLTextAreaElement
-
-  private _self_changing: boolean = false
-  private _changed: boolean = false
-  private _editor?: CodeMirror.EditorFromTextArea
-
-  async updated(changes: PropertyValues<this>) {
-    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
-      if (changes.has('link')) {
-        this._editor = undefined
-      }
-      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))
-      // ;(await this.getEditor()).refresh()
-    }
-  }
-
-  render() {
-    return html` <textarea></textarea> `
-  }
-
-  async getSchema() {
-    const executor = async ({ document, variables }: any) => {
-      const query = print(document)
-      const uri = this.link || GRAPHQL_URI
-
-      const fetchResult = await fetch(uri, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ query, variables })
-      })
-      return fetchResult.json()
-    }
-
-    return await wrapSchema({
-      schema: await introspectSchema(executor),
-      executor
-    })
-  }
-
-  async getEditor() {
-    if (!this._editor) {
-      try {
-        var schema = await this.getSchema()
-      } catch (err) {
-        console.error(err)
-      }
-
-      if (this.textarea) {
-        this._editor = CodeMirror.fromTextArea(this.textarea, {
-          value: this.value,
-          mode: 'graphql',
-          lint: {
-            //@ts-ignore
-            schema
-          },
-          hintOptions: {
-            //@ts-ignore
-            schema
-          },
-          tabSize: 2,
-          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'))
-            }
-          },
-          autoRefresh: {
-            delay: 500
-          }
-        })
-
-        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
-          if (!this._changed) return
-
-          this.value = editor.getValue()
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        })
-
-        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
-          this._self_changing = true
-
-          this._changed = true
-
-          await this.requestUpdate()
-
-          this._self_changing = false
-        })
-      }
-    }
-
-    return this._editor
-  }
-}