juicy/juicy-ace-editor

Custom Element with the Ace code editor

juicy-ace-editor's Issues

Set #juicy-ace-editor-container position to relative

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 ?

Ace-editor style cannot pierce through the shadow DOM.

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.

Change description

From

Custom Element with Ace(http://ace.c9.io/) code editor

To

Custom Element with the Ace code editor

Relevant to Starcounter/TechComm#337

Editor doesn't support attribute update

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'
}

2.0.x does not work in Edge

Steps to reproduce

1. bower install
2. polyserve -o in Edge

Expected result

Ace editor should appear and work.

Actual result

There is white space.

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Comments

This is the reason why Edge was not passing tests at https://github.com/Starcounter/starcounter-layout-html-editor/pull/16

//cc @Mihaiii

Script URLs are not resolved correctly

When used in a partial in a Starcounter app, juicy-ace-editor 1.2.0 and 1.2.1 resolves URLs for Ace scripts relative to the main document:

Dynamic Height

Is it possible to has the editor with Dynamic Height?
If is, can you give an example how to do it.

Thanks

Custom styles

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?

Update dependencies to platform#^0.4.0

Currently old platform#~0.3.3 is required by juicy-ace-editor#0.0.2.

Support distributed content (gold standard)

Currently, the element does ignore the distributed content

Steps to reproduce

  <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>

Live Demo

https://jsbin.com/susiran/1/edit?html,output

Expected result

Distributed content should be rendered as the value of the editor.

Actual result

distributed content is ignored.

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Screenshot

Breaks when used with inlining tools

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.

The editor doesn't work in FF

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?

It doesn't work with webcomponents-lite.min.js only with webcomponents.min.js on safari

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);
  }
})();

ES Modules

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

Consider using `maxLines: Infinity` as default

Steps to reproduce

Use <juicy-ace-editor> without any CSS nor attributes

Live Demo

https://jsbin.com/qodiqep/3/edit?html,css,output

Expected result

UX and DevX of the editor should be pleasing

Actual result

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.)

Browsers affected

all

Screenshot

Discovered by @alshakero
#45 (comment)

Make it Shadow DOM v1 ready

Part of #22

Use v1 API if available.

Update [email protected]

selects all text on every change ( when used in an Elm app )

...i fixed it by doing this:
this.editor.setValue( val, 1 );
Not sure if my problem is related to Elm or not...

Release the gh-pages branch as tag 0.0.3

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?

How to mark a line number

On the website we have:

I cannot find any docs or anything in the source to explain how you get the cross marked for line 4.

I'm hoping that the answer is to add something to the <juicy....> declaration rather than to run some method after the event

Does not work in Firefox/Edge

Description

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.

Steps to reproduce

<!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">&lt;p&gt;Here you have:
  &lt;pre&gt;&amp;lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&amp;gt;
&amp;lt;/juicy-ace-editor&amp;gt;&lt;/pre&gt;element.
&lt;/p&gt;
&lt;p&gt;
  You can switch modes and themes as regular HTML attributes to
  &lt;a href="https://github.com/ajaxorg/ace-builds/tree/master/src"&gt;
    whatever is supported by Ace
  &lt;/a&gt;
&lt;/p&gt;
</juicy-ace-editor>
</body>

</html>

Expected result

Editor is visible.

Actual result

Editor is not visible.

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Screenshot

Update ISSUE_TEMPLATE.md

Update jsbin example

Nothing is working

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>&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>`

Ace.c9.io editor configuration

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

search and replace boxes are not displayed correctly

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;
      }

Weird enlarging effect when loading the juicy-ace-editor element

Steps to reproduce

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?

Live Demo

http://juicy.github.io/juicy-ace-editor/kitchen-sink.html

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

polymer.js not first script tag

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)

Feature request: Autocomplete

I just wish this would work with juicy-ace-editor

Set font size with css calc

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.

Editor not available after "editor-ready" event fired

juicy-ace-editor/juicy-ace-editor.html

Line 91 in b592d8f

this.dispatchEvent(new CustomEvent("editor-ready", {bubbles: true, composed: true, detail: editor}));

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.

Missing editor-ready event

This is merely a suggestion to fire some sort of event once the editor is loaded. It would be useful.

Consider using `maxLines: Infinity` as default

Steps to reproduce

Use <juicy-ace-editor> without any CSS nor attributes

Live Demo

https://jsbin.com/qodiqep/3/edit?html,css,output

Expected result

UX and DevX of the editor should be pleasing

Actual result

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.)

Browsers affected

all

Screenshot

Discovered by @alshakero
#45 (comment)

Polymer 1.0?

is there a plan to port this element to Polymer 1.0? Thanks!

Does not work in FireFox

Steps to reproduce

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.

Expected result

The editor shows up and works

Actual result

The editor does not show up nor does it work

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Screenshot

Migrate to Web Components v1

We need to migrate this element to use Custom Elements and Shadow DOM v1 API.

Switch to npm

Are you planning on making this element available on npm soon?

Polymer 3.0 support?

https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview

Use of `/ace-builds/src-noconflict` instead of `/ace-builds/src-min-noconflict` in v2.0.5

Description

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?