Merge branch 'develop'

Alex-D · Dec 6, 2020 · 750644a · 750644a
2 parents f5765a7 + 58777b9
commit 750644a
Show file tree

Hide file tree

Showing 27 changed files with 353 additions and 110 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "trumbowyg",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "homepage": "https://github.com/Alex-D/Trumbowyg",
   "authors": [
     {

diff --git a/docs/css/main.css b/docs/css/main.css
diff --git a/docs/demos/core/dark-theme.html b/docs/demos/core/dark-theme.html
@@ -44,26 +44,26 @@ <h3>Basic usage</h3>
             </p>
 
             <div class="trumbowyg-dark">
-                <div id="editor">
-                    <h2>Welcome to the dark side of Trumbowyg!</h2>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
-                        optio nam reiciendis eius beatae quibusdam!
-                    </p>
-                    <p>
-                        The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
-                        alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
-                        qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: &quot;Neither is there
-                        anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
-                    </p>
-                </div>
+                <textarea id="editor">
+<h2>Welcome to the dark side of Trumbowyg!</h2>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
+    optio nam reiciendis eius beatae quibusdam!
+</p>
+<p>
+    The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
+    alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
+    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: &quot;Neither is there
+    anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
+</p>
+                </textarea>
             </div>
 
             <h4>The code</h4>
             <pre><code class="html">
 &lt;!-- Wrap the editor with an element with the class trumbowyg-dark -->
 &lt;div class="trumbowyg-dark">
-    &lt;div id="editor">&lt;/div>
+    &lt;textarea id="editor">&lt;/textarea>
 &lt;/div>
             </code></pre>
             <pre><code class="js-code-to-eval javascript">

diff --git a/docs/demos/index.html b/docs/demos/index.html
@@ -59,6 +59,7 @@ <h1 class="documentation-title">
                         <li><a href="./plugins/giphy.html">Giphy</a></li>
                         <li><a href="./plugins/highlight.html">Highlight</a></li>
                         <li><a href="./plugins/history.html">History</a></li>
+                        <li><a href="./plugins/indent.html">Indent</a></li>
                         <li><a href="./plugins/insertaudio.html">Insert audio</a></li>
                         <li><a href="./plugins/lineheight.html">Line height</a></li>
                         <li><a href="./plugins/mathml.html">MathML</a></li>

diff --git a/docs/demos/js/loader.js b/docs/demos/js/loader.js
@@ -1,4 +1,4 @@
-var baseURL = window.location.hostname.indexOf('github.') !== -1 ? '//rawcdn.githack.com/Alex-D/Trumbowyg/v2.19.1/' : '../../../';
+var baseURL = window.location.hostname.indexOf('github.') !== -1 ? '//rawcdn.githack.com/Alex-D/Trumbowyg/v2.22.0/' : '../../../';
 var styleLoadingContainer = document.querySelector('.loading-head');
 var scriptLoadingContainer = document.querySelector('.loading-body');
 

diff --git a/docs/demos/plugins/indent.html b/docs/demos/plugins/indent.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Indent plugin | Trumbowyg</title>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="../../css/main.css">
+</head>
+<body class="documentation-body">
+<div class="main main-demo-inner">
+    <section class="wrapper section">
+        <h2 class="section-title">Indent plugin</h2>
+
+        <div class="feature">
+            <h3>Basic usage</h3>
+            <p>
+                This plugin allow you to indent or oudent into your page creating vibrante documents.
+            </p>
+
+            <a href="../../documentation/plugins/#plugin-indent" class="button button-demo">Read insert indent plugin documentation</a>
+
+            <div id="editor">
+                <h2>You can make me come alive!</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
+                    optio nam reiciendis eius beatae quibusdam!
+                </p>
+                <p>
+                    The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
+                    alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
+                    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: &quot;Neither is there
+                    anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
+                </p>
+            </div>
+
+            <h3>The code</h3>
+            <pre><code class="js-code-to-eval javascript">
+$('#editor')
+.trumbowyg({
+    btns: ['indent', 'outdent']
+});
+            </code></pre>
+        </div>
+
+        <div class="feature">
+            <h3>Setup</h3>
+
+            <h4>In head tag</h4>
+            <pre><code class="html loading-head">
+            </code></pre>
+            <h4>At the end of body</h4>
+            <pre><code class="html loading-body">
+&lt;!-- Import jQuery -->
+&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
+&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/script>
+            </code></pre>
+        </div>
+    </section>
+</div>
+
+
+<!-- Import jQuery -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+
+<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
+<script src="../js/loader.js"></script>
+<script>
+    loadStyle('dist/ui/trumbowyg.min.css');
+    loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
+    loadScript('dist/plugins/indent/trumbowyg.indent.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
+</script>
+<script src="../js/runExampleCode.js"></script>
+<script src="../js/highlight.js"></script>
+</body>
+</html>
diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -76,6 +76,7 @@ <h1 class="documentation-title">
                         <li><a href="#url-protocol">URL protocol</a></li>
                         <li><a href="#minimal-links">Minimal links</a></li>
                         <li><a href="#default-link-target">Default link target</a></li>
+                        <li><a href="#tag-classes">Tag classes</a></li>
                     </ul>
                 </li>
                 <li>
@@ -394,6 +395,28 @@ <h4>Change SVG path or disable SVG icons locally</h4>
 });
             </code></pre>
 
+            <h4>Use absolute path to SVG sprite</h4>
+            <p class="added-feature">Added in 2.22.0</p>
+            <p class="note">
+                If you want to be IE-complient you should use this option.
+            </p>
+            <p>
+                This will load icons directly from the sprite file.
+                Instead of loading the sprite inline into the page, you can directly set this global option to true.
+            </p>
+            <pre><code class="javascript">
+$.trumbowyg.svgAbsoluteUsePath = true;
+            </code></pre>
+            <p>
+                This option is useful to avoid issues with <code>baseURL</code>.
+            </p>
+            <p class="note">
+                This global way needs to be done before initialize any Trumbowyg instance.
+            </p>
+            <p class="note">
+                Default value for <code>svgAbsoluteUsePath</code> is <code>false</code>.
+            </p>
+
             <h4>Use SVG icons without XHR or via an another protocol than HTTP(S)</h4>
             <p class="note">
                 If you want to be IE9-complient you should use this option.
@@ -801,6 +824,26 @@ <h3 id="default-link-target">Default link target</h3>
                 <code>undefined</code>).
             </p>
         </div>
+
+
+        <div class="feature" data-added="2.23.0">
+            <h3 id="tag-classes">Tag classes</h3>
+            <p class="added-feature">Added in 2.23.0</p>
+            <p>
+                Add classes to any tag.
+            </p>
+            <pre><code class="javascript">
+$('.trumbowyg').trumbowyg({
+    tagClasses: {
+        h1: 'h1', // Bootstrap example
+        blockquote: 'bg-grey-100 rounded-xl', // Tailwind CSS example
+    }
+});
+            </code></pre>
+            <p class="note">
+                No classes are applied by default.
+            </p>
+        </div>
     </section>
 
 

diff --git a/docs/documentation/plugins/index.html b/docs/documentation/plugins/index.html
@@ -51,6 +51,7 @@ <h1 class="documentation-title">
                         <li><a href="#plugin-giphy">Giphy</a></li>
                         <li><a href="#plugin-highlight">Highlight</a></li>
                         <li><a href="#plugin-history">History</a></li>
+                        <li><a href="#plugin-indent">Indent</a></li>
                         <li><a href="#plugin-insertaudio">Insert audio</a></li>
                         <li><a href="#plugin-lineheight">Line height</a></li>
                         <li><a href="#plugin-mathml">MathML</a></li>
@@ -625,6 +626,37 @@ <h4>How to use it?</h4>
             </code></pre>
         </div>
 
+        <div class="feature">
+            <h3 id="plugin-indent">Indent</h3>
+
+            <p>
+                This plugin allows you to indent or outdent your text.
+            </p>
+
+            <p>
+                <a href="../../demos/#plugins-indent" class="button button-demo">Try indent live demo!</a>
+                <a href="https://github.com/Alex-D/Trumbowyg/tree/develop/plugins/indent/trumbowyg.indent.js" class="button button-demo">
+                    View indent plugin code on GitHub
+                </a>
+            </p>
+
+            <h4>How to use it?</h4>
+            <pre><code class="html">
+&lt;-- Import Trumbowyg indent at the end of &lt;body>... -->
+&lt;script src="trumbowyg/dist/plugins/indent/trumbowyg.indent.min.js">&lt;/script>
+            </code></pre>
+            <p>
+                Then you can use the news buttons definition <code>indent</code> or <code>outdent</code>
+            </p>
+            <pre><code class="javascript">
+$('#my-editor').trumbowyg({
+    btns: [
+        ['indent', 'outdent']
+    ]
+});
+            </code></pre>
+        </div>
+
         <div class="feature">
             <h3 id="plugin-insertaudio">Insert audio</h3>