search

Juicy / juicy-ace-editor

Custom Element with the Ace code editor
http://juicy.github.io/juicy-ace-editor/
MIT License
93 stars 34 forks source link

Does not work in Firefox/Edge #53

Closed andrewspy closed 2 years ago

andrewspy commented 6 years ago

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

Screenshot

andre-dietrich commented 5 years ago

I have a similar problem, in chrome it seems to work like charm, but in Firefox there is only visible and the the editor is in readonly mode. I had removed :host in the style-tag and the code appeared in multiple lines, as expected, but I cannot figure out how to set the editor into writeable mode. Manually changes do not work either ...

Regards ...