-
Notifications
You must be signed in to change notification settings - Fork 34
/
juicy-ace-editor.html
215 lines (196 loc) · 8.42 KB
/
juicy-ace-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!--
Custom Element with Ace code editor
http://juicy.github.io/juicy-ace-editor/
version: 2.2.1
@demo index.html
@license MIT
@author
-->
<script src="../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../ace-builds/src-noconflict/ext-searchbox.js" type="text/javascript" charset="utf-8"></script>
<script src="../ace-builds/src-noconflict/ext-beautify.js" type="text/javascript" charset="utf-8"></script>
<template id="juicy-ace-editor">
<style>
:host{
display: flex;
min-height: 1em;
flex-direction: column;
}
#juicy-ace-editor-container{
flex: 1;
height: 100%;
}
</style>
<div id="juicy-ace-editor-container"></div>
</template>
<script>
(function(window, document, undefined) {
// Refers to the "importer", which is index.html
var thatDoc = document;
// Refers to the "importee", which is juicy-ace-editor.html
var thisDoc = (document._currentScript || document.currentScript).ownerDocument;
// Gets content from <template>
var template = thisDoc.querySelector('template#juicy-ace-editor').content;
// Shim Shadow DOM styles if needed
if (window.ShadowDOMPolyfill) {
WebComponents.ShadowCSS.shimStyling(template, 'juicy-ace-editor');
}
// Creates an object based in the HTML Element prototype
window.customElements.define('juicy-ace-editor', class JuicyAceEditor extends HTMLElement {
// getter/setter for value property
get value(){
return this.editor && this.editor.getValue() || this.textContent;
}
set value(val){
if(this.editor){
this._ignoreChange = true;
this.editor.setValue( val );
this._ignoreChange = false;
} else {
this.textContent = val;
}
}
// list of observable attributes
static get observedAttributes() {
return ['theme', 'mode', 'fontsize', 'softtabs', 'tabsize', 'readonly', 'wrapmode', 'min-lines', 'max-lines', 'shadow-style'];
}
// Fires when an instance of the element is created
constructor(self){
// Polyfill ceveat we need to fetch the right context;
// https://github.com/WebReflection/document-register-element/tree/master#v1-caveat
self = super(self);
this._ignoreChange = false;
// Creates the shadow root
var shadowRoot;
if(self.attachShadow && self.getRootNode){
shadowRoot = self.attachShadow({mode:'open'});
} else {
shadowRoot = self.createShadowRoot();
}
// Adds a template clone into shadow root
var clone = thatDoc.importNode(template, true);
// getElementById may not be polyfilled yet
self.container = clone.querySelector('#juicy-ace-editor-container');
shadowRoot.appendChild(clone);
return self;
}
connectedCallback() {
var text = this.childNodes[0];
var container = this.container;
var element = this;
var editor;
if(this.editor){
editor = this.editor;
} else {
// container.appendChild(text);
container.textContent = this.value;
const options = {};
// support autoresizing
this.hasAttribute('max-lines') && (options.maxLines = Number(this.getAttribute('max-lines')));
this.hasAttribute('min-lines') && (options.minLines = Number(this.getAttribute('min-lines')));
editor = ace.edit(container, options);
this.dispatchEvent(new CustomEvent("editor-ready", {bubbles: true, composed: true, detail: editor}));
this.editor = editor;
// inject base editor styles
this.injectTheme('#ace_editor\\.css');
this.injectTheme('#ace-tm');
this.injectTheme('#ace_searchbox');
editor.getSession().on('change', (event) => {
if (!this._ignoreChange) {
element.dispatchEvent(new CustomEvent("change", {bubbles: true, composed: true, detail: event}));
}
});
this._beautify = ace.require("ace/ext/beautify");
}
// handle theme changes
editor.renderer.addEventListener("themeLoaded", this.onThemeLoaded.bind(this));
// initial attributes
editor.setTheme( this.getAttribute("theme") );
editor.setFontSize( Number(this.getAttribute("fontsize")) || 12 );
editor.setReadOnly( this.hasAttribute("readonly") );
var session = editor.getSession();
session.setMode( this.getAttribute("mode") );
session.setUseSoftTabs( this.getAttribute("softtabs") );
this.getAttribute("tabsize") && session.setTabSize( this.getAttribute("tabsize") );
session.setUseWrapMode( this.hasAttribute("wrapmode") );
// non ace specific
this.hasAttribute("shadow-style") && this.injectTheme(this.getAttribute('shadow-style'));
// Observe input textNode changes
// Could be buggy as editor was also added to Light DOM;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// console.log("observation", mutation.type, arguments, mutations, editor, text);
if(mutation.type == "characterData"){
element.value = text.data;
}
});
});
text && observer.observe(text, { characterData: true });
// container.appendChild(text);
this._attached = true;
}
beautify() {
this._beautify.beautify(this.editor.session);
}
disconnectedCallback() {
this._attached = false;
}
attributeChangedCallback(attr, oldVal, newVal) {
if(!this._attached){
return false;
}
switch(attr){
case "theme":
this.editor.setTheme( newVal );
break;
case "mode":
this.editor.getSession().setMode( newVal );
break;
case "fontsize":
this.editor.setFontSize( newVal );
break;
case "softtabs":
this.editor.getSession().setUseSoftTabs( newVal );
break;
case "tabsize":
this.editor.getSession().setTabSize( newVal );
break;
case "readonly":
this.editor.setReadOnly( newVal === '' || newVal );
break;
case "wrapmode":
this.editor.getSession().setUseWrapMode( newVal !== null );
break;
case "max-lines":
this.editor && (this.editor.renderer.$maxLines = Number(newVal));
break;
case "min-lines":
this.editor && (this.editor.renderer.$minLines = Number(newVal));
break;
// non-Ace specific
case 'shadow-style':
if(oldVal){
this.shadowRoot.querySelector(oldVal).remove();
}
this.injectTheme(newVal);
}
}
onThemeLoaded(e){
var themeId = "#" + e.theme.cssClass;
this.injectTheme(themeId);
// Workaround Chrome stable bug, force repaint
this.container.style.display='none';
this.container.offsetHeight;
this.container.style.display='';
}
/**
* Injects a style element into juicy-ace-editor's shadow root
* @param {CSSSelector} selector for an element in the same shadow tree or document as `juicy-ace-editor`
*/
injectTheme(selector){
const lightStyle = this.getRootNode().querySelector(selector) || document.querySelector(selector);
this.shadowRoot.appendChild(lightStyle.cloneNode(true));
}
});
}(window, document));
</script>