@operato/app 1.5.50 → 1.5.51

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.51](https://github.com/hatiolab/operato/compare/v1.5.50...v1.5.51) (2023-12-07)
+
+
+### :bug: Bug Fix
+
+* ox-input-code, ox-input-graphql ([5cf8a78](https://github.com/hatiolab/operato/commit/5cf8a782a27d3980aa55c428273e491b17dba73b))
+
+
+
 ### [1.5.50](https://github.com/hatiolab/operato/compare/v1.5.49...v1.5.50) (2023-12-07)
 
 

package/dist/src/input/ox-input-graphql.d.ts

@@ -19,12 +19,9 @@ export default class OxInputGraphql extends OxFormField {
      */
     value?: string;
     link?: string;
-    textarea: HTMLTextAreaElement;
     private _self_changing;
-    private _changed;
     private _editor?;
     updated(changes: PropertyValues<this>): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
     getSchema(): Promise<import("graphql").GraphQLSchema>;
     getEditor(): Promise<EditorView>;
 }

package/dist/src/input/ox-input-graphql.js

@@ -4,8 +4,8 @@
 import { __decorate } from "tslib";
 import { fetch } from 'cross-fetch';
 import { print } from 'graphql';
-import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { graphql } from 'cm6-graphql';
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
@@ -28,57 +28,6 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
     constructor() {
         super(...arguments);
         this._self_changing = false;
-        this._changed = false;
-        // 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
-        // }
     }
     async updated(changes) {
         const editor = await this.getEditor();
@@ -89,9 +38,6 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
             });
         }
     }
-    render() {
-        return html ` <textarea></textarea> `;
-    }
     async getSchema() {
         const executor = async ({ document, variables }) => {
             const query = print(document);
@@ -138,17 +84,7 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
                     }),
                     highlightActiveLine(),
                     history(),
-                    keymap.of([
-                        ...historyKeymap,
-                        indentWithTab,
-                        {
-                            key: 'Escape',
-                            run: (view) => {
-                                togglefullscreen(this);
-                                return true;
-                            }
-                        }
-                    ]),
+                    keymap.of([...historyKeymap, indentWithTab]),
                     EditorView.updateListener.of(v => {
                         if (v.docChanged) {
                             this._self_changing = true;
@@ -163,6 +99,11 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
                 parent: this.renderRoot
             });
         }
+        this._editor.contentDOM.addEventListener('keydown', event => {
+            if (event.key === 'Escape') {
+                togglefullscreen(this._editor.contentDOM);
+            }
+        });
         return this._editor;
     }
 };
@@ -186,9 +127,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxInputGraphql.prototype, "link", void 0);
-__decorate([
-    query('textarea')
-], OxInputGraphql.prototype, "textarea", void 0);
 OxInputGraphql = __decorate([
     customElement('ox-input-graphql')
 ], OxInputGraphql);

package/dist/src/input/ox-input-graphql.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { graphql } from 'cm6-graphql'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { javascript } from '@codemirror/lang-javascript'\nimport { EditorState } from '@codemirror/state'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\n\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\nimport { GRAPHQL_URI } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\nimport { togglefullscreen } from '@operato/utils'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n   <ox-input-graphql value=${text} link=${link}>\n   </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value?: string\n  @property({ type: String }) link?: string\n\n  @query('textarea') textarea!: HTMLTextAreaElement\n\n  private _self_changing: boolean = false\n  private _changed: boolean = false\n  private _editor?: EditorView\n\n  async updated(changes: PropertyValues<this>) {\n    const editor = await this.getEditor()\n    if (changes.has('value') && editor && !this._self_changing) {\n      const to = editor.state.doc.toString().length\n      editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  render() {\n    return html` <textarea></textarea> `\n  }\n\n  async getSchema() {\n    const executor = async ({ document, variables }: any) => {\n      const query = print(document)\n      const uri = this.link || GRAPHQL_URI\n\n      const fetchResult = await fetch(uri, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query, variables })\n      })\n      return fetchResult.json()\n    }\n\n    return await wrapSchema({\n      schema: await introspectSchema(executor),\n      executor\n    })\n  }\n\n  async getEditor() {\n    if (!this._editor) {\n      var schema\n      try {\n        schema = await this.getSchema()\n      } catch (err) {\n        console.error(err)\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          graphql(schema, {\n            onShowInDocs(field, type, parentType) {\n              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)\n            },\n            onFillAllFields(view, schema, _query, cursor, token) {\n              alert(`Filling all fields. Token: ${token}`)\n            }\n          }),\n          highlightActiveLine(),\n          history(),\n          keymap.of([\n            ...historyKeymap,\n            indentWithTab,\n            {\n              key: 'Escape',\n              run: (view: EditorView) => {\n                togglefullscreen(this)\n                return true\n              }\n            }\n          ]),\n          EditorView.updateListener.of(v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this.value = v.state.doc.toString()\n              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n              requestAnimationFrame(() => {\n                this._self_changing = false\n              })\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    return this._editor\n  }\n\n  // async getEditor() {\n  //   if (!this._editor) {\n  //     try {\n  //       var schema = await this.getSchema()\n  //     } catch (err) {\n  //       console.error(err)\n  //     }\n\n  //     if (this.textarea) {\n  //       this._editor = CodeMirror.fromTextArea(this.textarea, {\n  //         value: this.value,\n  //         mode: 'graphql',\n  //         lint: {\n  //           //@ts-ignore\n  //           schema\n  //         },\n  //         hintOptions: {\n  //           //@ts-ignore\n  //           schema\n  //         },\n  //         tabSize: 2,\n  //         lineNumbers: false,\n  //         showCursorWhenSelecting: true,\n  //         theme: 'night',\n  //         extraKeys: {\n  //           F11: function (cm) {\n  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n  //           },\n  //           Esc: function (cm) {\n  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n  //           }\n  //         },\n  //         autoRefresh: {\n  //           delay: 500\n  //         }\n  //       })\n\n  //       this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n  //         if (!this._changed) return\n\n  //         this.value = editor.getValue()\n  //         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  //       })\n\n  //       this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n  //         this._self_changing = true\n\n  //         this._changed = true\n\n  //         await this.requestUpdate()\n\n  //         this._self_changing = false\n  //       })\n  //     }\n  //   }\n\n  //   return this._editor\n  // }\n}\n"]}
+{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { graphql } from 'cm6-graphql'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\n\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\nimport { GRAPHQL_URI } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\nimport { togglefullscreen } from '@operato/utils'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n   <ox-input-graphql value=${text} link=${link}>\n   </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value?: string\n  @property({ type: String }) link?: string\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n\n  async updated(changes: PropertyValues<this>) {\n    const editor = await this.getEditor()\n    if (changes.has('value') && editor && !this._self_changing) {\n      const to = editor.state.doc.toString().length\n      editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  async getSchema() {\n    const executor = async ({ document, variables }: any) => {\n      const query = print(document)\n      const uri = this.link || GRAPHQL_URI\n\n      const fetchResult = await fetch(uri, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query, variables })\n      })\n      return fetchResult.json()\n    }\n\n    return await wrapSchema({\n      schema: await introspectSchema(executor),\n      executor\n    })\n  }\n\n  async getEditor() {\n    if (!this._editor) {\n      var schema\n      try {\n        schema = await this.getSchema()\n      } catch (err) {\n        console.error(err)\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          graphql(schema, {\n            onShowInDocs(field, type, parentType) {\n              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)\n            },\n            onFillAllFields(view, schema, _query, cursor, token) {\n              alert(`Filling all fields. Token: ${token}`)\n            }\n          }),\n          highlightActiveLine(),\n          history(),\n          keymap.of([...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of(v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this.value = v.state.doc.toString()\n              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n              requestAnimationFrame(() => {\n                this._self_changing = false\n              })\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    this._editor.contentDOM.addEventListener('keydown', event => {\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    return this._editor\n  }\n}\n"]}

package/dist/src/property-editor/ox-property-editor-graphql.js

@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 let OxPropertyEditorGraphQL = class OxPropertyEditorGraphQL extends OxPropertyEditor {
     editorTemplate(value, spec) {
-        return html ` <ox-input-graphql id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
+        return html ` <ox-input-graphql class="multiline-input" id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
     }
 };
 OxPropertyEditorGraphQL = __decorate([

package/dist/src/property-editor/ox-property-editor-graphql.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-graphql.js","sourceRoot":"","sources":["../../../src/property-editor/ox-property-editor-graphql.ts"],"names":[],"mappings":";AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,gBAAgB;IAC3D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,yCAAyC,KAAK,kCAAkC,CAAA;IAC7F,CAAC;CACF,CAAA;AAJY,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAInC","sourcesContent":["import '../input/ox-input-graphql.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-graphql')\nexport class OxPropertyEditorGraphQL extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html` <ox-input-graphql id=\"editor\" .value=${value} fullwidth> </ox-input-graphql> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-graphql.js","sourceRoot":"","sources":["../../../src/property-editor/ox-property-editor-graphql.ts"],"names":[],"mappings":";AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,gBAAgB;IAC3D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,iEAAiE,KAAK,kCAAkC,CAAA;IACrH,CAAC;CACF,CAAA;AAJY,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAInC","sourcesContent":["import '../input/ox-input-graphql.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-graphql')\nexport class OxPropertyEditorGraphQL extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html` <ox-input-graphql class=\"multiline-input\" id=\"editor\" .value=${value} fullwidth> </ox-input-graphql> `\n  }\n}\n"]}