Merge pull request #5118 from nightwing/add-playground

add playground

index.html

@@ -53,7 +53,7 @@ <h1><img src="./doc/site/images/textimage.png" alt="The high performance code ed
                             <a href="#production" data-toggle="tab">Real World Users</a>
                         </li>
                         <li class="last-tab">
-                            <a href="#support" data-toggle="tab">Support</a>
+                            <a href="https://mkslanc.github.io/ace-playground/" target="_blank" class="external-nav">Try</a>
                         </li>
                     </ul>
                     <div class="tab-content">
@@ -137,6 +137,11 @@ <h2>Related Projects</h2>
                                 <li><a href="https://github.com/cadorn/ace-extjs">Ace wrapper for ExtJS</a></li>
                                 <li><a href="https://github.com/daveho/AceGWT">Ace wrapper for GWT</a></li>
                             </ul>
+                            <h2>Getting Help</h2>
+                            <ul class="content-list">
+                                <li><a href="https://github.com/ajaxorg/ace/issues">Report bugs</a></li>
+                                <li><a href="https://github.com/ajaxorg/ace/discussions">Discuss</a></li>
+                            </ul>
                         </div>
                         <div class="tab-pane fade active in" id="embedding">
                             <h1>Embedding Ace in Your Site</h1>
@@ -220,7 +225,9 @@ <h3>Changing the size of the editor</h3>
                             <h2>Setting Themes</h2>
                             <p>Themes are loaded on demand; all you have to do is pass the string name:</p>
                             <pre><code class="javascript">editor.setTheme("ace/theme/twilight");</code></pre>
-                            <p><span class="expand_arrow">&gt;</span> <a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/theme" target="_blank" rel="noreferer noopener">See all themes</a></p>
+                            <p><span class="expand_arrow">&gt;</span> <a href="https://github.com/ajaxorg/ace/tree/master/src/theme" target="_blank" rel="noreferer noopener">See all themes.</a>
+                            Or use <a href="https://github.com/ajaxorg/ace/blob/master/src/ext/themelist.js" target="_blank" rel="noreferer noopener">themelist extension</a> to get the list of available themes at runtime.
+                            </p>
                             <h2>Setting the Programming Language Mode</h2>
                             <p>By default, the editor supports plain text mode. All other language modes are available as separate modules, loaded on demand like this:</p>
                             <pre><code class="javascript">editor.session.setMode("ace/mode/javascript");</code></pre>
@@ -362,8 +369,10 @@ <h3>Configure dynamic loading of modes and themes</h3>
                             <pre><code class="javascript">ace.config.set("basePath", "https://url.to.a/folder/that/contains-ace-modes");</code></pre>
                             <p>Path for one module alone can be configured with:</p>
                             <pre><code class="javascript">ace.config.setModuleUrl("ace/theme/textmate", "url for textmate.js");</code></pre>
-                            <p>When using ace with webpack, it is possible to configure paths for all submodules using</p>
-                            <pre><code class="javascript">require("ace-builds/webpack-resolver");</code></pre>
+                            <p>When using ace with webpack, it is possible to configure paths for all submodules using</p>                            
+                            <pre><code class="javascript">require("ace-builds/esm-resolver"); // for new bundlers: webpack 5, rollup, vite</code></pre>
+                            For webpack 4 use
+                            <pre><code class="javascript">require("ace-builds/webpack-resolver"); </code></pre>                            
                             <p>which depends on <a href="https://github.com/webpack-contrib/file-loader">file-loader</a></p>
                         </div>
                         <div class="tab-pane fade" id="higlighter">
@@ -1143,15 +1152,6 @@ <h1>Projects Using Ace</h1>
                                 </li>
                             </ul>
                         </div>
-                        <div class="tab-pane fade" id="support">
-                            <h1>Support and User Resources</h1>
-                            <p>Aside from our GitHub page, here's a list of places you can find help for Ace:</p>
-                            <ul class="content-list">
-                                <li><a href="http://groups.google.com/group/ace-discuss">Ace Google Group</a></li>
-                                <li><a href="http://groups.google.com/group/ace-internals">Ace Core Google Group</a></li>
-                                <li><a href="irc://irc.freenode.net/%23ace">irc.freenode.net #ace</a></li>
-                            </ul>
-                        </div>
                     </div>
                 </div>
             </div>