@operato/input 1.18.0 → 1.19.6
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 +17 -0
- package/dist/src/locale/localization.d.ts +2 -2
- package/dist/src/ox-input-code.d.ts +1 -2
- package/dist/src/ox-input-code.js +7 -13
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/ox-input-code.ts +5 -11
- package/yarn-error.log +0 -17084
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,23 @@
|
|
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.19.6](https://github.com/hatiolab/operato/compare/v1.19.5...v1.19.6) (2024-07-02)
|
7
|
+
|
8
|
+
|
9
|
+
### :bug: Bug Fix
|
10
|
+
|
11
|
+
* ox-input-code 에서 엔터키가 작동안되는 문제 ([4734337](https://github.com/hatiolab/operato/commit/473433759e1af435c0d96228b1ec3af9cc40b1cf))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
## [1.19.0](https://github.com/hatiolab/operato/compare/v1.18.0...v1.19.0) (2024-05-27)
|
16
|
+
|
17
|
+
**Note:** Version bump only for package @operato/input
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
|
6
23
|
## [1.18.0](https://github.com/hatiolab/operato/compare/v1.17.9...v1.18.0) (2024-05-24)
|
7
24
|
|
8
25
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
export declare const getLocale: (() => string) & {
|
2
|
-
_LIT_LOCALIZE_GET_LOCALE_?:
|
2
|
+
_LIT_LOCALIZE_GET_LOCALE_?: never;
|
3
3
|
}, setLocale: ((newLocale: string) => Promise<void>) & {
|
4
|
-
_LIT_LOCALIZE_SET_LOCALE_?:
|
4
|
+
_LIT_LOCALIZE_SET_LOCALE_?: never;
|
5
5
|
};
|
6
6
|
export declare const setLocaleFromUrl: () => Promise<void>;
|
@@ -18,8 +18,7 @@ export declare class OxInputCode extends OxFormField {
|
|
18
18
|
* `value`는 에디터에서 작성중인 contents이다.
|
19
19
|
*/
|
20
20
|
value: string;
|
21
|
-
|
22
|
-
tabAsSpace: boolean;
|
21
|
+
showLineNumbers: boolean;
|
23
22
|
language?: string;
|
24
23
|
private _self_changing;
|
25
24
|
private _editor?;
|
@@ -4,6 +4,7 @@
|
|
4
4
|
import { __decorate } from "tslib";
|
5
5
|
import { css } from 'lit';
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
7
|
+
import { minimalSetup } from 'codemirror';
|
7
8
|
import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
|
8
9
|
import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
|
9
10
|
import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
|
@@ -30,8 +31,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
30
31
|
* `value`는 에디터에서 작성중인 contents이다.
|
31
32
|
*/
|
32
33
|
this.value = '';
|
33
|
-
this.
|
34
|
-
this.tabAsSpace = true;
|
34
|
+
this.showLineNumbers = false;
|
35
35
|
this.language = 'javascript';
|
36
36
|
this._self_changing = false;
|
37
37
|
this._changed = false;
|
@@ -45,6 +45,8 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
45
45
|
position: relative;
|
46
46
|
background: white;
|
47
47
|
overflow: auto;
|
48
|
+
border:1px solid var(--md-sys-color-outline, #111);
|
49
|
+
border-radius:var(--md-sys-shape-corner-small, 4px);
|
48
50
|
}
|
49
51
|
|
50
52
|
.cm-editor {
|
@@ -79,6 +81,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
79
81
|
this._editor = new EditorView({
|
80
82
|
doc: this.value,
|
81
83
|
extensions: [
|
84
|
+
minimalSetup,
|
82
85
|
...language,
|
83
86
|
bracketMatching(),
|
84
87
|
closeBrackets(),
|
@@ -113,12 +116,6 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
113
116
|
this.value = this._editor.state.doc.toString();
|
114
117
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
115
118
|
});
|
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
|
-
// })
|
122
119
|
return this._editor;
|
123
120
|
}
|
124
121
|
};
|
@@ -126,11 +123,8 @@ __decorate([
|
|
126
123
|
property({ type: String })
|
127
124
|
], OxInputCode.prototype, "value", void 0);
|
128
125
|
__decorate([
|
129
|
-
property({ type:
|
130
|
-
], OxInputCode.prototype, "
|
131
|
-
__decorate([
|
132
|
-
property({ type: Boolean, attribute: 'tab-as-space' })
|
133
|
-
], OxInputCode.prototype, "tabAsSpace", void 0);
|
126
|
+
property({ type: Boolean, attribute: 'show-line-numbers' })
|
127
|
+
], OxInputCode.prototype, "showLineNumbers", void 0);
|
134
128
|
__decorate([
|
135
129
|
property({ type: String })
|
136
130
|
], OxInputCode.prototype, "language", void 0);
|
@@ -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;;
|
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 { minimalSetup } from 'codemirror'\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 border:1px solid var(--md-sys-color-outline, #111);\n border-radius:var(--md-sys-shape-corner-small, 4px);\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: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\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 minimalSetup,\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 return this._editor\n }\n}\n"]}
|