@operato/input 1.11.3 → 1.11.5
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.
- package/CHANGELOG.md +9 -0
- package/dist/src/ox-input-code.d.ts +1 -0
- package/dist/src/ox-input-code.js +25 -17
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-code.ts +34 -17
- package/yarn-error.log +0 -17084
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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.11.5](https://github.com/hatiolab/operato/compare/v1.11.4...v1.11.5) (2023-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-input-code value changed event firing ([5cd0e5c](https://github.com/hatiolab/operato/commit/5cd0e5cddbe6b2d272b8fcc4af766ccdd9d33650))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [1.11.3](https://github.com/hatiolab/operato/compare/v1.11.2...v1.11.3) (2023-12-14)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -34,6 +34,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
34
34
|
this.tabAsSpace = true;
|
|
35
35
|
this.language = 'javascript';
|
|
36
36
|
this._self_changing = false;
|
|
37
|
+
this._changed = false;
|
|
37
38
|
}
|
|
38
39
|
static { this.styles = [
|
|
39
40
|
ScrollbarStyles,
|
|
@@ -86,31 +87,38 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
86
87
|
oneDark,
|
|
87
88
|
syntaxHighlighting(oneDarkHighlightStyle),
|
|
88
89
|
highlightActiveLine(),
|
|
89
|
-
keymap.of([
|
|
90
|
-
|
|
91
|
-
indentWithTab,
|
|
92
|
-
{
|
|
93
|
-
key: 'Escape',
|
|
94
|
-
run: (view) => {
|
|
95
|
-
togglefullscreen(this);
|
|
96
|
-
return true;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
]),
|
|
100
|
-
EditorView.updateListener.of(v => {
|
|
90
|
+
keymap.of([...historyKeymap, indentWithTab]),
|
|
91
|
+
EditorView.updateListener.of(async (v) => {
|
|
101
92
|
if (v.docChanged) {
|
|
102
93
|
this._self_changing = true;
|
|
103
|
-
this.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this._self_changing = false;
|
|
107
|
-
});
|
|
94
|
+
this._changed = true;
|
|
95
|
+
await this.updateComplete;
|
|
96
|
+
this._self_changing = false;
|
|
108
97
|
}
|
|
109
98
|
})
|
|
110
99
|
],
|
|
111
100
|
parent: this.renderRoot
|
|
112
101
|
});
|
|
113
102
|
}
|
|
103
|
+
this._editor.contentDOM.addEventListener('keydown', event => {
|
|
104
|
+
event.stopPropagation();
|
|
105
|
+
if (event.key === 'Escape') {
|
|
106
|
+
togglefullscreen(this._editor.contentDOM);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
this._editor.contentDOM.addEventListener('blur', e => {
|
|
110
|
+
if (!this._changed) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
this.value = this._editor.state.doc.toString();
|
|
114
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
|
115
|
+
});
|
|
116
|
+
// this._editor.contentDOM.addEventListener('change', async e => {
|
|
117
|
+
// this._self_changing = true
|
|
118
|
+
// this._changed = true
|
|
119
|
+
// await this.updateComplete
|
|
120
|
+
// this._self_changing = false
|
|
121
|
+
// })
|
|
114
122
|
return this._editor;
|
|
115
123
|
}
|
|
116
124
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAmB,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAkBL;;WAEG;QACyB,UAAK,GAAW,EAAE,CAAA;QACK,YAAO,GAAW,CAAC,CAAA;QACd,eAAU,GAAY,IAAI,CAAA;QACtD,aAAQ,GAAY,YAAY,CAAA;QAEpD,mBAAc,GAAY,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} tab-size=\"4\" tab-as-space=\"true\" language=\"javascript\">\n </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\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: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n @property({ type: String }) language?: string = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && this.editor && !this._self_changing) {\n const to = this.editor.state.doc.toString().length\n this.editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\n }\n\n get editor() {\n if (!this._editor) {\n let language: LanguageSupport[] = []\n switch (this.language) {\n case 'sql':\n language = [sql()]\n break\n case 'json':\n language = [json()]\n break\n case 'javascript':\n language = [javascript()]\n break\n default:\n break\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n ...language,\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n highlightActiveLine(),\n keymap.of([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n // this._editor.contentDOM.addEventListener('change', async e => {\n // this._self_changing = true\n // this._changed = true\n\n // await this.updateComplete\n\n // this._self_changing = false\n // })\n\n return this._editor\n }\n}\n"]}
|