juicy / juicy-ace-editor Goto Github PK
View Code? Open in Web Editor NEWCustom Element with the Ace code editor
Home Page: http://juicy.github.io/juicy-ace-editor/
License: MIT License
Custom Element with the Ace code editor
Home Page: http://juicy.github.io/juicy-ace-editor/
License: MIT License
Using this component with an inlining tool like vulcanize, breaks it.
This is due to the fact that the lookup for the template is done using this code:
// 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').content;
This works perfectly fine when the file is imported by the browser but fails when inlined cause thisDoc refers now to the whole document and template ends up being the first template in the page, not necessarily the components' template.
Just open kitchen-sink demo, refresh the page and pay close attention to the editor itself, you will notice a sudden "enlarging" effect with the i warning icon appearing.
It is not caused by the i icon. I test a pure simple juicy-ace-editor
element locally and have the same UI effect. Not sure what caused it and is it intended behavior?
http://juicy.github.io/juicy-ace-editor/kitchen-sink.html
Can we move the element to being loaded through an ES Module instead of HTML imports? I'm happy to do the work and make the PR if I can get the go-ahead
I try to use ACE editor in complex card.
I have an error
TypeError: this.createShadowRoot is not a function
How can I fix this?
Currently old platform#~0.3.3
is required by juicy-ace-editor#0.0.2
.
At least it seems like so. I've been fiddling around with Polymer 1.2:
This works:
<juicy-ace-editor
mode="ace/mode/sqlserver">
</juicy-ace-editor>
This doesn't:
<juicy-ace-editor
mode="[[syntax]]">
</juicy-ace-editor>
…
syntax: {
type: String,
value: 'ace/mode/sqlserver'
}
This is merely a suggestion to fire some sort of event once the editor is loaded. It would be useful.
I have an issue when use juicy-ace-editor tag inside my custom Polymer element. The CSS of ace editor is not applied, so the content is broken.
I tried to install use the latest commit and it works:
bower install juicy-ace-editor#38814bef170265156fd94043c4a45a67615392b9 --save
Could you please release the latest commit as tag 0.0.4?
due to css missing...
.ace_search {
background-color: #ddd;
border: 1px solid #cbcbcb;
border-top: 0 none;
max-width: 325px;
overflow: hidden;
margin: 0;
padding: 4px;
padding-right: 6px;
padding-bottom: 0;
position: absolute;
top: 0px;
z-index: 99;
white-space: normal;
}
.ace_search.left {
border-left: 0 none;
border-radius: 0px 0px 5px 0px;
left: 0;
}
.ace_search.right {
border-radius: 0px 0px 0px 5px;
border-right: 0 none;
right: 0;
}
.ace_search_form,
.ace_replace_form {
border-radius: 3px;
border: 1px solid #cbcbcb;
float: left;
margin-bottom: 4px;
overflow: hidden;
}
.ace_search_form.ace_nomatch {
outline: 1px solid red;
}
.ace_search_field {
background-color: white;
border-right: 1px solid #cbcbcb;
border: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 22px;
outline: 0;
padding: 0 7px;
width: 214px;
margin: 0;
}
.ace_searchbtn,
.ace_replacebtn {
background: #fff;
border: 0 none;
border-left: 1px solid #dcdcdc;
cursor: pointer;
float: left;
height: 22px;
margin: 0;
position: relative;
}
.ace_searchbtn:last-child,
.ace_replacebtn:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.ace_searchbtn:disabled {
background: none;
cursor: default;
}
.ace_searchbtn {
background-position: 50% 50%;
background-repeat: no-repeat;
width: 27px;
}
.ace_searchbtn.prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiSU1NZUAC/6E0I0yACYskCpsJiySKIiY0SUZk40FyTEgCjGgKwTRAgAEAQJUIPCE+qfkAAAAASUVORK5CYII=);
}
.ace_searchbtn.next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNpiTE1NZQCC/0DMyIAKwGJMUAYDEo3M/s+EpvM/mkKwCQxYjIeLMaELoLMBAgwAU7UJObTKsvAAAAAASUVORK5CYII=);
}
.ace_searchbtn_close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
border-radius: 50%;
border: 0 none;
color: #656565;
cursor: pointer;
float: right;
font: 16px/16px Arial;
height: 14px;
margin: 5px 1px 9px 5px;
padding: 0;
text-align: center;
width: 14px;
}
.ace_searchbtn_close:hover {
background-color: #656565;
background-position: 50% 100%;
color: white;
}
.ace_replacebtn.prev {
width: 54px
}
.ace_replacebtn.next {
width: 27px
}
.ace_button {
margin-left: 2px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
opacity: 0.7;
border: 1px solid rgba(100, 100, 100, 0.23);
padding: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: black;
}
.ace_button:hover {
background-color: #eee;
opacity: 1;
}
.ace_button:active {
background-color: #ddd;
}
.ace_button.checked {
border-color: #3399ff;
opacity: 1;
}
.ace_search_options {
margin-bottom: 3px;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
This component is just great! Right now the font size can only be set through the fontsize attribute. But that attribute only takes a static value, as in it can't take something like CSS calc
. I need to use that to make the text size responsive like I desire, and right now I'm hacking through shadowRoots in JavaScript to set it.
Is it possible to has the editor with Dynamic Height?
If is, can you give an example how to do it.
Thanks
Use <juicy-ace-editor>
without any CSS nor attributes
https://jsbin.com/qodiqep/3/edit?html,css,output
UX and DevX of the editor should be pleasing
It's single line, does not expand when you type more lines, making it hard to read.
Requires some manual setup work to change it (CSS styles, attributes, etc.)
all
Discovered by @alshakero
#45 (comment)
Update jsbin example
The following basic/demo code simply does not work with Edge/Firefox. I am not sure if it's related to #36.
Similar code in http://juicy.github.io/juicy-ace-editor/ seems to work perfectly with Firefox/Edge, and I can't understand why the following code doesn't work with Firefox/Edge.
<!DOCTYPE html>
<html>
<head>
<!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
</head>
<body>
<juicy-ace-editor style="height: 400px;"></juicy-ace-editor>
<juicy-ace-editor style="height: 400px;"
theme="ace/theme/monokai"
mode="ace/mode/html"><p>Here you have:
<pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt;
&lt;/juicy-ace-editor&gt;</pre>element.
</p>
<p>
You can switch modes and themes as regular HTML attributes to
<a href="https://github.com/ajaxorg/ace-builds/tree/master/src">
whatever is supported by Ace
</a>
</p>
</juicy-ace-editor>
</body>
</html>
Editor is visible.
Editor is not visible.
Part of #22
Use v1 API if available.
I just wish this would work with juicy-ace-editor
...i fixed it by doing this:
this.editor.setValue( val, 1 );
Not sure if my problem is related to Elm or not...
juicy-ace-editor/juicy-ace-editor.html
Line 91 in b592d8f
Tried the following, but getting undefined
for the editor:
this.$input.addEventListener("editor-ready", e => {
//const editor = e.target.editor; // undefined
const editor = e.target.container.env.editor; // this is what I had to do instead.
editor.setOptions({
maxLines: Infinity
});
window.editor = this.$input; // later was able to recover the editor from the $el.value property in the console.
});
Maybe the event shouldn't be fired until after it's been assigned to the element.
Install the editor:
bower install juicy-ace-editor
Create an index.html
file, include all of the necessary stuff:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js"></script>
<link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
</head>
<body>
<juicy-ace-editor></juicy-ace-editor>
</body>
</html>
Run a web server and open up index.html
in FireFox. Nothing is displayed. I've noticed this problem throughout the year, I'm just now formalizing the issue.
The editor shows up and works
The editor does not show up nor does it work
I would like to be able to set styles on the editor, but I'm having a hard time doing it. Could this component possibly provide some custom CSS properties for styling?
is there a plan to port this element to Polymer 1.0? Thanks!
With the current settings, #juicy-ace-editor-container's position is absolute. That means the juicy-ace-editor component will never take on the full height of the editor, and following sibling elements end up over the editor box.
Changing juicy-ace-editor-container's position to relative fixes the issue and does not seem to have any-side effect (as far as I can tell). Is it possible to either change that setting, or at least provide a css variable so an implementer can have control over that ?
Once ace editor is created, the stylesheets are generated by javascript and added to the section of the document. However, the CSS selectors are not able to pierce through the shadow DOM barrier. As the result, it is impossible to use juicy-ace-editor in shadow DOM.
Here is an example of a CSS selector generated by ace:
.ace_editor {position: relative;}
To support the shadow DOM use, all selectors would need to change to something like this:
html /deep/ .ace_editor {position: relative;}
Alternatively, the ace-editor style should be encapsulated inside the juicy-ace-editor component and not leak outside.
Use <juicy-ace-editor>
without any CSS nor attributes
https://jsbin.com/qodiqep/3/edit?html,css,output
UX and DevX of the editor should be pleasing
It's single line, does not expand when you type more lines, making it hard to read.
Requires some manual setup work to change it (CSS styles, attributes, etc.)
all
Discovered by @alshakero
#45 (comment)
From
Custom Element with Ace(http://ace.c9.io/) code editor
To
Custom Element with the Ace code editor
Relevant to Starcounter/TechComm#337
Hello,
i've tried to include this editor which seems cool. Unfortunalely there is just the content that disptay (google or firefox).
I tried to fix it myself but as a ste note there is no ace-build in the project. I don't understand.
`<head>
<!--<script src="//cdn.bower_coponents/.net/webcomponentsjs/0.6.0/webcomponents.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponent.js"></script>
<script src="http://juicy.github.io/ace-builds/src-min-noconflict/mode-html.js"></script>
<script src="http://juicy.github.io/ace-builds/src-min-noconflict/theme-monokai.js"></script>
<link rel="import" src="bower_coponents/juicy-ace-editor/juicy-ace-editor.html">
</head>
<style>
body{
height:100%;
background-color: blue;
}
</style>
<body>
<juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"><p>Here you have:
<pre><juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html">
</juicy-ace-editor></pre>element.
</p>
<p>
You can switch modes and themes as regular HTML attributes to
<a href="https://github.com/ajaxorg/ace-builds/tree/master/src">
whatever is supported by Ace
</a>
</p></juicy-ace-editor>
</body>`
I am using the juicy-ace-editor in a polymer project created with polymer-cli and needed to change the part in my index.html in which the webcomponents are loaded to not use the lite version anymore to make it work on safari.
So, instead of the recommende by the polymer project (https://www.polymer-project.org/1.0/docs/browsers):
// load webcomponents polyfills
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// browser has web components
} else {
// polyfill web components
var e = document.createElement('script');
e.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(e);
}
})();
I needed to use:
// load webcomponents polyfills
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// browser has web components
} else {
// polyfill web components
var e = document.createElement('script');
e.src = '/bower_components/webcomponentsjs/webcomponents.min.js';
document.head.appendChild(e);
}
})();
polymer is complaining that it isnt the first script in the kitchen sink demo... that might be a reason its not working in IE11 (stable and dev) ..
since i am testing/evaluating compatibility of polymer as compared to angular did you do that intentionally ?
cheers (nice work btw)
Are you planning on making this element available on npm soon?
Currently, the element does ignore the distributed content
<shadow-host>
<template is="shadow-root" mode="open">
Does it work get distributed content?
<juicy-ace-editor><slot></slot></juicy-ace-editor>
</template>
does
</shadow-host>
https://jsbin.com/susiran/1/edit?html,output
Distributed content should be rendered as the value of the editor.
distributed content is ignored.
Hi,
I am very new in ace.c9.io editor.
From ace official site I got kitchen-sink demo code which is pretty good.
But I am not understanding how can I able to get editor content(in screen shot rectangular highlighted area).
My requirement is something like,
whenever I click to save button (highlighted area) editor content get saved in some different file. For that reason I need editor content.
Referring screen shot for understanding.
I need some guidance regarding this.
Thanks In advance.
Also demo code of ace editior.
<script src="src/ace.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script> <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script src="src/keybinding-vim.js"></script> <script src="src/keybinding-emacs.js"></script> <script src="demo/kitchen-sink/demo.js"></script> <script type="text/javascript" charset="utf-8"> require("kitchen-sink/demo"); </script>Debayan
I have noticed that juicy-ace-editor
now uses src-noconfilct
build in v2.1, instead of the src-min-noconflict
. Is there a reason for using non-minify build?
bower install
polyserve -o
in EdgeAce editor should appear and work.
There is white space.
This is the reason why Edge was not passing tests at https://github.com/Starcounter/starcounter-layout-html-editor/pull/16
//cc @Mihaiii
We need to migrate this element to use Custom Elements and Shadow DOM v1 API.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.