@operato/app 1.5.50 → 1.5.52

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.5.50",
+  "version": "1.5.52",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -136,15 +136,15 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.5.50",
-    "@operato/data-grist": "^1.5.50",
-    "@operato/font": "^1.5.50",
+    "@operato/attachment": "^1.5.52",
+    "@operato/data-grist": "^1.5.52",
+    "@operato/font": "^1.5.52",
     "@operato/form": "^1.5.44",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.5.50",
+    "@operato/input": "^1.5.52",
     "@operato/layout": "^1.5.48",
-    "@operato/property-editor": "^1.5.50",
+    "@operato/property-editor": "^1.5.52",
     "@operato/shell": "^1.5.48",
     "@operato/styles": "^1.5.48",
     "@operato/utils": "^1.5.44",
@@ -189,5 +189,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "4e8d7b771ecb89da1a9b599d62dc1775b253d3bb"
+  "gitHead": "07f692c2e5ffc3045add9bfcebc94516dad187fc"
 }

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

@@ -9,8 +9,6 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { graphql } from 'cm6-graphql'
 
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { javascript } from '@codemirror/lang-javascript'
-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'
@@ -38,6 +36,7 @@ export default class OxInputGraphql extends OxFormField {
         flex-direction: column;
         position: relative;
         background: white;
+        overflow: auto;
       }
 
       .cm-editor {
@@ -52,10 +51,7 @@ export default class OxInputGraphql extends OxFormField {
   @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?: EditorView
 
   async updated(changes: PropertyValues<this>) {
@@ -68,10 +64,6 @@ export default class OxInputGraphql extends OxFormField {
     }
   }
 
-  render() {
-    return html` <textarea></textarea> `
-  }
-
   async getSchema() {
     const executor = async ({ document, variables }: any) => {
       const query = print(document)
@@ -121,17 +113,7 @@ export default class OxInputGraphql extends OxFormField {
           }),
           highlightActiveLine(),
           history(),
-          keymap.of([
-            ...historyKeymap,
-            indentWithTab,
-            {
-              key: 'Escape',
-              run: (view: EditorView) => {
-                togglefullscreen(this)
-                return true
-              }
-            }
-          ]),
+          keymap.of([...historyKeymap, indentWithTab]),
           EditorView.updateListener.of(v => {
             if (v.docChanged) {
               this._self_changing = true
@@ -147,65 +129,12 @@ export default class OxInputGraphql extends OxFormField {
       })
     }
 
+    this._editor.contentDOM.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        togglefullscreen(this._editor!.contentDOM)
+      }
+    })
+
     return this._editor
   }
-
-  // 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
-  // }
 }

package/src/property-editor/ox-property-editor-graphql.ts

@@ -8,6 +8,6 @@ import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
 @customElement('ox-property-editor-graphql')
 export class OxPropertyEditorGraphQL extends OxPropertyEditor {
   editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    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> `
   }
 }