@operato/app 1.5.50 → 1.5.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/src/input/ox-input-graphql.d.ts +0 -3
  3. package/dist/src/input/ox-input-graphql.js +9 -70
  4. package/dist/src/input/ox-input-graphql.js.map +1 -1
  5. package/dist/src/property-editor/ox-property-editor-graphql.js +1 -1
  6. package/dist/src/property-editor/ox-property-editor-graphql.js.map +1 -1
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +7 -7
  9. package/src/input/ox-input-graphql.ts +8 -79
  10. package/src/property-editor/ox-property-editor-graphql.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [1.5.52](https://github.com/hatiolab/operato/compare/v1.5.51...v1.5.52) (2023-12-07)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * ox-input-code, graphql set overflow auto ([6c6ddba](https://github.com/hatiolab/operato/commit/6c6ddba7a26e7fcdd8fabf4416aae8ffebef84e4))
12
+
13
+
14
+
15
+ ### [1.5.51](https://github.com/hatiolab/operato/compare/v1.5.50...v1.5.51) (2023-12-07)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * ox-input-code, ox-input-graphql ([5cf8a78](https://github.com/hatiolab/operato/commit/5cf8a782a27d3980aa55c428273e491b17dba73b))
21
+
22
+
23
+
6
24
  ### [1.5.50](https://github.com/hatiolab/operato/compare/v1.5.49...v1.5.50) (2023-12-07)
7
25
 
8
26
 
package/dist/src/input/ox-input-graphql.d.ts CHANGED
@@ -19,12 +19,9 @@ export default class OxInputGraphql extends OxFormField {
19
19
  */
20
20
  value?: string;
21
21
  link?: string;
22
- textarea: HTMLTextAreaElement;
23
22
  private _self_changing;
24
- private _changed;
25
23
  private _editor?;
26
24
  updated(changes: PropertyValues<this>): Promise<void>;
27
- render(): import("lit").TemplateResult<1>;
28
25
  getSchema(): Promise<import("graphql").GraphQLSchema>;
29
26
  getEditor(): Promise<EditorView>;
30
27
  }
package/dist/src/input/ox-input-graphql.js CHANGED
@@ -4,8 +4,8 @@
4
4
  import { __decorate } from "tslib";
5
5
  import { fetch } from 'cross-fetch';
6
6
  import { print } from 'graphql';
7
- import { css, html } from 'lit';
8
- import { customElement, property, query } from 'lit/decorators.js';
7
+ import { css } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
9
  import { graphql } from 'cm6-graphql';
10
10
  import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
11
11
  import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
@@ -28,57 +28,6 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
28
28
  constructor() {
29
29
  super(...arguments);
30
30
  this._self_changing = false;
31
- this._changed = false;
32
- // async getEditor() {
33
- // if (!this._editor) {
34
- // try {
35
- // var schema = await this.getSchema()
36
- // } catch (err) {
37
- // console.error(err)
38
- // }
39
- // if (this.textarea) {
40
- // this._editor = CodeMirror.fromTextArea(this.textarea, {
41
- // value: this.value,
42
- // mode: 'graphql',
43
- // lint: {
44
- // //@ts-ignore
45
- // schema
46
- // },
47
- // hintOptions: {
48
- // //@ts-ignore
49
- // schema
50
- // },
51
- // tabSize: 2,
52
- // lineNumbers: false,
53
- // showCursorWhenSelecting: true,
54
- // theme: 'night',
55
- // extraKeys: {
56
- // F11: function (cm) {
57
- // cm.setOption('fullScreen', !cm.getOption('fullScreen'))
58
- // },
59
- // Esc: function (cm) {
60
- // cm.setOption('fullScreen', !cm.getOption('fullScreen'))
61
- // }
62
- // },
63
- // autoRefresh: {
64
- // delay: 500
65
- // }
66
- // })
67
- // this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
68
- // if (!this._changed) return
69
- // this.value = editor.getValue()
70
- // this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
71
- // })
72
- // this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
73
- // this._self_changing = true
74
- // this._changed = true
75
- // await this.requestUpdate()
76
- // this._self_changing = false
77
- // })
78
- // }
79
- // }
80
- // return this._editor
81
- // }
82
31
  }
83
32
  async updated(changes) {
84
33
  const editor = await this.getEditor();
@@ -89,9 +38,6 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
89
38
  });
90
39
  }
91
40
  }
92
- render() {
93
- return html ` <textarea></textarea> `;
94
- }
95
41
  async getSchema() {
96
42
  const executor = async ({ document, variables }) => {
97
43
  const query = print(document);
@@ -138,17 +84,7 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
138
84
  }),
139
85
  highlightActiveLine(),
140
86
  history(),
141
- keymap.of([
142
- ...historyKeymap,
143
- indentWithTab,
144
- {
145
- key: 'Escape',
146
- run: (view) => {
147
- togglefullscreen(this);
148
- return true;
149
- }
150
- }
151
- ]),
87
+ keymap.of([...historyKeymap, indentWithTab]),
152
88
  EditorView.updateListener.of(v => {
153
89
  if (v.docChanged) {
154
90
  this._self_changing = true;
@@ -163,6 +99,11 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
163
99
  parent: this.renderRoot
164
100
  });
165
101
  }
102
+ this._editor.contentDOM.addEventListener('keydown', event => {
103
+ if (event.key === 'Escape') {
104
+ togglefullscreen(this._editor.contentDOM);
105
+ }
106
+ });
166
107
  return this._editor;
167
108
  }
168
109
  };
@@ -173,6 +114,7 @@ OxInputGraphql.styles = [
173
114
  flex-direction: column;
174
115
  position: relative;
175
116
  background: white;
117
+ overflow: auto;
176
118
  }
177
119
 
178
120
  .cm-editor {
@@ -186,9 +128,6 @@ __decorate([
186
128
  __decorate([
187
129
  property({ type: String })
188
130
  ], OxInputGraphql.prototype, "link", void 0);
189
- __decorate([
190
- query('textarea')
191
- ], OxInputGraphql.prototype, "textarea", void 0);
192
131
  OxInputGraphql = __decorate([
193
132
  customElement('ox-input-graphql')
194
133
  ], OxInputGraphql);
package/dist/src/input/ox-input-graphql.js.map CHANGED
@@ -1 +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"]}
1
+ {"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,GAAG,EAAwB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE1E,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD;;;;;;;GAOG;AAEY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAuBL,mBAAc,GAAY,KAAK,CAAA;IAsFzC,CAAC;IAnFC,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAA;QACrC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC3D,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAA;YAC7C,MAAM,CAAC,QAAQ,CAAC;gBACd,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;aACrF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,SAAS;QACb,MAAM,QAAQ,GAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAO,EAAE,EAAE;YACtD,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAA;YAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAA;YAEpC,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE;gBACnC,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;iBACnC;gBACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;aAC3C,CAAC,CAAA;YACF,OAAO,WAAW,CAAC,IAAI,EAAE,CAAA;QAC3B,CAAC,CAAA;QAED,OAAO,MAAM,UAAU,CAAC;YACtB,MAAM,EAAE,MAAM,gBAAgB,CAAC,QAAQ,CAAC;YACxC,QAAQ;SACT,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,MAAM,CAAA;YACV,IAAI,CAAC;gBACH,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAA;YACjC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YACpB,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;gBAC5B,GAAG,EAAE,IAAI,CAAC,KAAK;gBACf,UAAU,EAAE;oBACV,eAAe,EAAE;oBACjB,aAAa,EAAE;oBACf,OAAO,EAAE;oBACT,cAAc,EAAE;oBAChB,OAAO;oBACP,kBAAkB,CAAC,qBAAqB,CAAC;oBACzC,OAAO,CAAC,MAAM,EAAE;wBACd,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU;4BAClC,KAAK,CAAC,4BAA4B,KAAK,WAAW,IAAI,iBAAiB,UAAU,EAAE,CAAC,CAAA;wBACtF,CAAC;wBACD,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK;4BACjD,KAAK,CAAC,8BAA8B,KAAK,EAAE,CAAC,CAAA;wBAC9C,CAAC;qBACF,CAAC;oBACF,mBAAmB,EAAE;oBACrB,OAAO,EAAE;oBACT,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,EAAE,aAAa,CAAC,CAAC;oBAC5C,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;wBAC/B,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;4BACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;4BAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;4BACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;4BACpG,qBAAqB,CAAC,GAAG,EAAE;gCACzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;4BAC7B,CAAC,CAAC,CAAA;wBACJ,CAAC;oBACH,CAAC,CAAC;iBACH;gBACD,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE;YAC1D,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,gBAAgB,CAAC,IAAI,CAAC,OAAQ,CAAC,UAAU,CAAC,CAAA;YAC5C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;;AA3GM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,AAdY,CAcZ;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AArBtB,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CA6GlC;eA7GoB,cAAc","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 overflow: auto;\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 CHANGED
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
5
5
  import { OxPropertyEditor } from '@operato/property-editor';
6
6
  let OxPropertyEditorGraphQL = class OxPropertyEditorGraphQL extends OxPropertyEditor {
7
7
  editorTemplate(value, spec) {
8
- return html ` <ox-input-graphql id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
8
+ return html ` <ox-input-graphql class="multiline-input" id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
9
9
  }
10
10
  };
11
11
  OxPropertyEditorGraphQL = __decorate([
package/dist/src/property-editor/ox-property-editor-graphql.js.map CHANGED
@@ -1 +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"]}
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,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"]}