Merge pull request summernote#3603 from summernote/develop

[WIP] 0.8.16
hibratt · Feb 19, 2020 · 4854bac · 4854bac
2 parents 926bdb1 + e4f2c89
commit 4854bac
Show file tree

Hide file tree

Showing 51 changed files with 915 additions and 329 deletions.
diff --git a/.agignore b/.agignore
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+  presets: ['@babel/preset-env'],
+  plugins: [
+    ['module-resolver', {
+      'root': ['./src', './']
+    }],
+  ],
+}
diff --git a/.eslintrc b/.eslintrc
@@ -1,21 +1,27 @@
 {
-  "extends": "standard",
-    "plugins": [
-      "chai-friendly"
-    ],
-    "rules": {
-      "indent": ["warn", 2, {"ArrayExpression": "off", "SwitchCase": 1}],
-      "semi": [2, "always"],
-      "space-before-function-paren": ["error", "never"],
-      "no-useless-escape": 0,
-      "no-unused-expressions": 0,
-      "chai-friendly/no-unused-expressions": 2,
-      "comma-dangle": ["error", "always-multiline"]
-    },
-    "env": {
-      "es6": true,
-      "browser": true,
-      "jquery": true,
-      "mocha": true
-    }
+  "extends": "eslint:recommended",
+  "plugins": [
+    "chai-friendly"
+  ],
+  "rules": {
+    "indent": ["warn", 2, {"ArrayExpression": "off", "SwitchCase": 1}],
+    "semi": [2, "always"],
+    "space-before-function-paren": ["error", "never"],
+    "no-useless-escape": 0,
+    "no-unused-expressions": 0,
+    "chai-friendly/no-unused-expressions": 2,
+    "comma-dangle": ["error", "always-multiline"]
+  },
+  "env": {
+    "amd": true,
+    "browser": true,
+    "es6": true,
+    "jquery": true,
+    "mocha": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+  }
 }
diff --git a/config/build-fonts.js b/config/build-fonts.js
@@ -16,6 +16,7 @@ const webfontConfig = {
   normalize: true,
 };
 
+// eslint-disable-next-line
 console.log('Building fonts...');
 
 webfont(webfontConfig).then(result => {
@@ -36,11 +37,13 @@ webfont(webfontConfig).then(result => {
     } else {
       file = path.resolve(webfontConfig['destTemplate']);
     }
+    // eslint-disable-next-line
     console.log('Writing ', file);
 
     fs.writeFileSync(file, content);
   });
 }).catch(error => {
+  // eslint-disable-next-line
   console.log(error);
   throw error;
 });
diff --git a/examples/airmode-scroll.html b/examples/airmode-scroll.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Summernote airmode</title>
+
+  <!-- include jquery -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+
+  <!-- include libs stylesheets -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/umd/popper.js"></script>
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
+
+  <!-- include summernote -->
+  <link rel="stylesheet" href="../summernote-bs4.css">
+  <script type="text/javascript" src="../summernote-bs4.js"></script>
+
+  <link rel="stylesheet" href="example.css">
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.summernote').summernote({
+        tabsize: 2,
+        airMode: true
+      });
+    });
+  </script>
+</head>
+<body>
+<div class="container">
+  <h1>Summernote in Airmode</h1>
+  <p><a href="https://summernote.org/examples/#air-mode">https://summernote.org/examples/#air-mode</a></p>
+  <pre>
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test   
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test 
+    Test Test                                           
+  </pre>
+  <div class="summernote">
+    <p>In <a href="http://en.wikipedia.org/wiki/Computer_science" title="Computer science">computer science</a>, <b>functional programming</b> is a <a href="http://en.wikipedia.org/wiki/Programming_paradigm" title="Programming paradigm">programming paradigm</a>, a style of building the structure and elements of computer programs, that treats <a href="http://en.wikipedia.org/wiki/Computation" title="Computation">computation</a> as the evaluation of <a href="http://en.wikipedia.org/wiki/Function_(mathematics)" title="Function (mathematics)">mathematical functions</a> and avoids <a href="http://en.wikipedia.org/wiki/Program_state" title="Program state" class="mw-redirect">state</a> and <a href="http://en.wikipedia.org/wiki/Immutable_object" title="Immutable object">mutable</a> data. Functional programming emphasizes <a href="http://en.wikipedia.org/wiki/Function_(computer_science)" title="Function (computer science)" class="mw-redirect">functions</a> that produce results that depend only on their inputs and not on the program state—i.e. <a href="http://en.wikipedia.org/wiki/Pure_function" title="Pure function">pure</a> <a href="http://en.wikipedia.org/wiki/Function_(mathematics)" title="Function (mathematics)">mathematical functions</a>. It is a <a href="http://en.wikipedia.org/wiki/Declarative_programming" title="Declarative programming">declarative programming</a> paradigm, which means programming is done with <a href="http://en.wikipedia.org/wiki/Expression_(computer_science)" title="Expression (computer science)">expressions</a>. In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function <i>f</i> twice with the same value for an argument <i>x</i> will produce the same result <i>f(x)</i> both times. Eliminating <a href="http://en.wikipedia.org/wiki/Side_effect_(computer_science)" title="Side effect (computer science)">side effects</a>, i.e. changes in state that do not depend on the function inputs, can make it much easier to understand and predict the behavior of a program, which is one of the key motivations for the development of functional programming.</p>
+  </div>
+</div>
+</body>
+</html>
diff --git a/examples/history-limit.html b/examples/history-limit.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Summernote - Bootstrap 4</title>
+  <!-- include jquery -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+
+  <!-- include libs stylesheets -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/umd/popper.js"></script>
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
+
+  <!-- include summernote -->
+  <link rel="stylesheet" href="../summernote-bs4.css">
+  <script type="text/javascript" src="../summernote-bs4.js"></script>
+
+  <link rel="stylesheet" href="example.css">
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.summernote').summernote({
+        height: 300,
+        tabsize: 2,
+        followingToolbar: true,
+        historyLimit: 5
+      });
+    });
+  </script>
+</head>
+<body>
+<div class="container">
+  <h1>Test history limited count </h1>
+  <p>
+    <span class="badge badge-primary">jQuery v3.3.1</span>
+    <span class="badge badge-info">Bootstrap v4.1.3</span>
+  </p>
+  <div class="summernote"><p>Hello World</p></div>
+  <pre>
+
+    $(document).ready(function() {
+      $('.summernote').summernote({
+        height: 300,
+        tabsize: 2,
+        followingToolbar: true,
+        historyLimit: 5
+      });
+    });
+  </pre>
+</div>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -44,11 +44,17 @@ <h1>Summernote Examples </h1>
 
     <script type="text/javascript">
     var samples = [
+      { title: 'Languages', link : 'lang.html', description: 'Support language setting', support: 'bs3, bs4, lite'},      
+      { title: 'Record every key stroke', link : 'recordEveryKeyStroke.html', description: 'Support language setting', support: 'bs3, bs4, lite'},      
       { title: 'hint-emoji', link : 'hint-emoji.html', description: 'test hint ui ', support: 'bs3, bs4, lite'},
       { title: 'hint-userdefine', link : 'hint-userdefine.html', description: 'test hint userdefine ', support: 'bs3, bs4, lite'},
       { title: 'hint-symbol', link : 'hint-symbols_mathematical-symbols_Greek-letters.html', description: 'test hint symbol ', support: 'bs3, bs4, lite'},
       { title: 'jQuery custom event', link : 'jquery-custom-event.html', description: 'test jQuery custom event ', support: 'bs3, bs4, lite'},
       { title: 'Plugin : Hello', link : 'plugin-hello.html', description: 'Plugin sample - Hello', support: 'bs3, bs4, lite'},
+      { title: 'Limited history stack', link : 'history-limit.html', description: 'Limited history stack', support: 'bs3, bs4, lite'},
+      { title: 'Mode Switcher', link : 'mode-switcher.html', description: 'Change mode between Default and Air', support: 'bs3, bs4, lite'},      
+      { title: 'Air Mode', link : 'airmode.html', description: 'run as airmode', support: 'bs3, bs4, lite'},      
+      { title: 'Air Mode with scroll', link : 'airmode-scroll.html', description: 'run as airmode with scroll', support: 'bs3, bs4, lite'},      
     ]
     function generate_sample_pages() {
       var html = samples.map(it => {

diff --git a/examples/mode-switcher.html b/examples/mode-switcher.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Summernote airmode</title>
+
+  <!-- include jquery -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+
+  <!-- include libs stylesheets -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/umd/popper.js"></script>
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
+
+  <!-- include summernote -->
+  <link rel="stylesheet" href="../summernote-bs4.css">
+  <script type="text/javascript" src="../summernote-bs4.js"></script>
+
+  <link rel="stylesheet" href="example.css">
+  <script type="text/javascript">
+    function changeAirMode () {
+      $('.summernote').summernote('destroy');      
+      $('.summernote').summernote({
+        tabsize: 2,
+        airMode: true
+      });
+    }
+
+    function changeDefaultMode() {
+      $('.summernote').summernote('destroy');
+      $('.summernote').summernote({
+        tabsize: 2,
+        callbacks: {
+          onInit: function () {
+            $(".summernote").summernote('codeview.activate')
+          }
+        }
+      });
+    }
+  </script>
+</head>
+<body>
+<div class="container">
+  <h1>Mode Switcher</h1>
+  <p><a href="https://summernote.org/examples/#air-mode">https://summernote.org/examples/#air-mode</a></p>
+  <p>
+    <button type="button" onclick="changeAirMode()">Air Mode</button>
+    <button type="button" onclick="changeDefaultMode()">Default Mode</button>
+  </p>
+  <div class="summernote">
+    <p>In <a href="http://en.wikipedia.org/wiki/Computer_science" title="Computer science">computer science</a>, <b>functional programming</b> is a <a href="http://en.wikipedia.org/wiki/Programming_paradigm" title="Programming paradigm">programming paradigm</a>, a style of building the structure and elements of computer programs, that treats <a href="http://en.wikipedia.org/wiki/Computation" title="Computation">computation</a> as the evaluation of <a href="http://en.wikipedia.org/wiki/Function_(mathematics)" title="Function (mathematics)">mathematical functions</a> and avoids <a href="http://en.wikipedia.org/wiki/Program_state" title="Program state" class="mw-redirect">state</a> and <a href="http://en.wikipedia.org/wiki/Immutable_object" title="Immutable object">mutable</a> data. Functional programming emphasizes <a href="http://en.wikipedia.org/wiki/Function_(computer_science)" title="Function (computer science)" class="mw-redirect">functions</a> that produce results that depend only on their inputs and not on the program state—i.e. <a href="http://en.wikipedia.org/wiki/Pure_function" title="Pure function">pure</a> <a href="http://en.wikipedia.org/wiki/Function_(mathematics)" title="Function (mathematics)">mathematical functions</a>. It is a <a href="http://en.wikipedia.org/wiki/Declarative_programming" title="Declarative programming">declarative programming</a> paradigm, which means programming is done with <a href="http://en.wikipedia.org/wiki/Expression_(computer_science)" title="Expression (computer science)">expressions</a>. In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function <i>f</i> twice with the same value for an argument <i>x</i> will produce the same result <i>f(x)</i> both times. Eliminating <a href="http://en.wikipedia.org/wiki/Side_effect_(computer_science)" title="Side effect (computer science)">side effects</a>, i.e. changes in state that do not depend on the function inputs, can make it much easier to understand and predict the behavior of a program, which is one of the key motivations for the development of functional programming.</p>
+  </div>
+</div>
+</body>
+</html>
diff --git a/examples/recordEveryKeyStroke.html b/examples/recordEveryKeyStroke.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Record every key stroke</title>
+  <!-- include jquery -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+
+  <!-- include libraries BS -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/umd/popper.js"></script>
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
+
+  <!-- include summernote -->
+  <link rel="stylesheet" href="../summernote-bs4.css">
+  <script type="text/javascript" src="../summernote-bs4.js"></script>
+
+  <link rel="stylesheet" href="example.css">
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.summernote').summernote({
+        height: 200,
+        tabsize: 2,
+        recordEveryKeystroke: true 
+      });
+    });
+  </script>
+</head>
+<body>
+<div class="container">
+  <h1>Record every key stroke</h1>
+  <textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
+  <pre>
+
+    $(document).ready(function() {
+      $('.summernote').summernote({
+        height: 200,
+        tabsize: 2,
+        recordEveryKeystroke: true 
+      });
+    });
+  </pre>
+</div>
+</body>
+</html>