Update to v4.1.0 (#225)

- Fixed, pasting rich content in safari does not work as expected - Fixed, empty paragraphs getting created when merging cells if the table is wrapped using `html.wrap` - Fixed, table row with `display: none` style applied does not get's counted - Fixed, TypeError: Cannot read properties of undefined (reading 'which') - Fixed, font size does not work when `contenteditable="false"` is used - Fixed, errors while dragging a `div` block tries to drop in its own container - Fixed, editor content scrolls up while pressing backspace in `iframe` mode - Fixed, incorrect behavior on iPad safari when backspacing on korean text - Fixed, Toolbar Sizes / Responsiveness is not relative to editor width - Fixed, viewport jumps to top when toggling between fullScreen - Fixed, text overlapping on emoticons - Vue.js 3 support - Fixed, inconsistent API for uploading files - Fixed, adding new row does not work with table header - Fixed, the toolbarBottom on mobile devices - Fixed, markdown UI breaks when enabling the iframe option - Fixed, accessibility features are not working for special character - Fixed, accessibility features are not working for emoticons - Fixed, hovering over the toolbar buttons generates lot of errors in console - Fixed, font formatting gets reset after inserting a table - Fixed, spacing and number lists are not respected when pasting from MS Word - Updated thirdparty plugins in examples - Fixed, editor freezes when pasting a large content - Fixed, support typescript definitions - Fixed, image alignment does not work as expected inside existing Iframe --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Vivek <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: AkshayAccolite <[email protected]> Co-authored-by: AkshayN <[email protected]>
froala · Jul 11, 2023 · 70417b4 · 70417b4
1 parent aa11979
commit 70417b4
Show file tree

Hide file tree

Showing 11 changed files with 7,924 additions and 7,180 deletions.
diff --git a/README.md b/README.md
@@ -8,10 +8,8 @@
 
 ## Compatibility
 
-- v1 later `@legacy`
-  - Vue.js 1.x
-- v2 later
-  - Vue.js 2.x
+- v3 later
+  - Vue.js 3.x
 
 ## Installation
 
@@ -38,32 +36,30 @@ import 'froala-editor/js/third_party/spell_checker.min';
 import 'froala-editor/js/third_party/image_tui.min';
 // Import Froala Editor css files.
 import 'froala-editor/css/froala_editor.pkgd.min.css';
+import 'froala-editor/css/froala_style.min.css';
 
-// Import and use Vue Froala lib.
-import VueFroala from 'vue-froala-wysiwyg'
-Vue.use(VueFroala)
-Vue.config.productionTip = false
+import App from './App'
+import { createApp } from 'vue'
+import VueFroala from 'vue-froala-wysiwyg';
 
-new Vue({
-  render: h => h(App),
-
-}).$mount('#app')
+const app = createApp(App);          
 
+app.use(VueFroala);
+app.mount('#app');
 ```
 
 #### App.vue file:
 ```javascript
 <template>
   <div id="app">
-    <froala id="edit" :tag="'textarea'" :config="config" v-model="model"></froala>
+    <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
   </div>
 </template>
 
 <script>
-import VueFroala from 'vue-froala-wysiwyg';
 
 export default {
-  name: 'app',
+  name: 'App',
   data () {
     return {
       config: {
@@ -97,7 +93,7 @@ module.exports = {
       // Css loader.
       {
         test: /\.css$/,
-        loader: 'vue-style-loader!css-loader'
+        loader: 'cssLoader'
       }
 
     ]
@@ -108,7 +104,7 @@ module.exports = {
       // ...
 
       // Css loader for Webpack 1.x .
-      css: 'vue-style-loader!css-loader'
+      css: 'cssLoader'
     }
   }
 })
@@ -120,7 +116,7 @@ module.exports = {
 
 ```javascript
 // If model is initialized, 'Init text' text child will be overwritten.
-<froala :tag="'textarea'" :config="config" v-model="model">Init text</froala>
+<froala :tag="'textarea'" :config="config" v-model:value="model">Init text</froala>
 ```
 
 **:tag** attr is used to tell on which tag the editor is initialized.
@@ -170,19 +166,19 @@ Froala events are described in the [events docs](https://froala.com/wysiwyg-edit
 
 The WYSIWYG HTML editor content model. Two way binding is suported.
 
-`v-model="model"`
+`v-model:value="model"`
 
 Use the content in other places:
 
 ```javascript
-<input v-model="model"/>
+<input v-model:value="model"/>
 ```
 
 ### Special tags
 You can also use the editor on **img**, **button**, **input** and **a** tags:
 
 ```javascript
-<froala :tag="img" v-model="imgModel"></froala>
+<froala :tag="img" v-model:value="imgModel"></froala>
 ```
 
 The model must be an object containing the attributes for your special tags. Example:
@@ -295,9 +291,9 @@ The object received by the function will contain the following methods:
 To display content created with the froala editor use the `froalaView` component.
 
 ```javascript
-<froala v-model="content"></froala>
+<froala v-model:value="content"></froala>
 
-<froalaView v-model="content"></froalaView>
+<froalaView v-model:value="content"></froalaView>
 ```
 
 

diff --git a/build/dev-server.js b/build/dev-server.js
@@ -26,7 +26,7 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
 
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
 // force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
+compiler.hooks.done.tap('compilation', function (compilation) {
   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
     hotMiddleware.publish({ action: 'reload' })
     cb()

diff --git a/build/utils.js b/build/utils.js
@@ -1,6 +1,6 @@
 var path = require('path')
 var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.assetsPath = function (_path) {
   return path.posix.join(config.build.assetsSubDirectory, _path)
@@ -23,7 +23,7 @@ exports.cssLoaders = function (options) {
     }).join('!')
 
     if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+      return [MiniCssExtractPlugin.loader, sourceLoader]
     } else {
       return ['vue-style-loader', sourceLoader].join('!')
     }

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -3,7 +3,7 @@ var config = require('../config')
 var webpack = require('webpack')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 module.exports = {
   entry: {
     main: './src/main.js',
@@ -18,25 +18,28 @@ module.exports = {
     extensions: ['.js', '.vue'],
     alias: {
       'src': path.resolve(__dirname, '../src'),
-
+      'stream': require.resolve('stream-browserify')
     },
     modules: [path.join(__dirname, '../node_modules'),path.join(__dirname,'../node_modules/froala-editor/js')],
   },
   module: {
     rules: [{
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         include: projectRoot,
         exclude: /node_modules/
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.html$/,
         loader: 'vue-html-loader'
@@ -61,8 +64,9 @@ module.exports = {
   },
   plugins: [
     // make sure to include the plugin!
-    new VueLoaderPlugin()
-  ]
+    new VueLoaderPlugin(),
+  ],
+
   // vue: {
   //   loaders: utils.cssLoaders()
   // }

diff --git a/build/webpack.release.js b/build/webpack.release.js
@@ -1,8 +1,29 @@
 var path = require('path')
 var webpack = require("webpack")
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var MiniCssExtractPlugin = require("mini-css-extract-plugin")
 var projectRoot = path.resolve(__dirname, '../')
-var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+
+const cssLoader = [
+  {
+    loader: MiniCssExtractPlugin.loader,
+    options: {
+      hmr: process.env.NODE_ENV === 'development'
+    }
+  },
+  'css-loader'
+]
+
+const sassLoader = [
+  {
+    loader: MiniCssExtractPlugin.loader,
+    options: {
+      hmr: process.env.NODE_ENV === 'development'
+    }
+  },
+  'css-loader',
+  'sass-loader'
+]
+
 
 module.exports = {
   entry: {
@@ -24,7 +45,14 @@ module.exports = {
     rules: [{
         test: /\.vue$/,
         loader: 'vue-loader',
-        enforce: 'pre'
+        enforce: 'pre',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
       },
       {
         test: /\.js$/,
@@ -43,7 +71,7 @@ module.exports = {
       },
       {
         test: /\.s[a|c]ss$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
+        loader: sassLoader
       }
     ]
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-froala-wysiwyg",
-  "version": "4.0.19",
+  "version": "4.1.0",
   "description": "Vue plugin for Froala WYSIWYG HTML rich text editor.",
   "author": "Froala Labs (https://www.froala.com/)",
   "license": "https://froala.com/wysiwyg-editor/terms/",
@@ -40,10 +40,10 @@
     "prepublish": "yarn run build"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
     "@babel/runtime-corejs2": "^7.7.7",
-    "froala-editor": "^4.0.19",
-    "vue": "2.6.6"
+    "babel-runtime": "^6.26.0",
+    "froala-editor": "^4.1.0",
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
@@ -53,37 +53,37 @@
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.4",
     "@babel/runtime": "^7.3.4",
-    "@babel/runtime-corejs2": "^7.3.4",
+    "@vue/compiler-sfc": "3.2",
     "babel-helpers": "^6.24.1",
     "babel-loader": "^8.0.5",
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
-    "css-loader": "^2.1.0",
+    "css-loader": "^3.6.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.15.2",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^3.0.1",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.19.1",
     "inject-loader": "^4.0.1",
     "isparta-loader": "^2.0.0",
     "jasmine-core": "^3.3.0",
-    "json-loader": "^0.5.4",
     "lolex": "^3.1.0",
-    "nightwatch": "^1.0.19",
+    "mini-css-extract-plugin": "1.6.2",
+    "nightwatch": "^2.6.17",
     "ora": "^3.1.0",
     "shelljs": "^0.8.3",
-    "uglifyjs-webpack-plugin": "2.1.1",
+    "stream-browserify": "^3.0.0",
+    "uglifyjs-webpack-plugin": "^2.1.1",
     "url-loader": "^1.1.2",
     "vue-hot-reload-api": "^2.0.11",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "15.6.2",
+    "vue-loader": "^16.8.3",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "2.6.6",
+    "vue-template-compiler": "^2.7.14",
     "webpack": "^4.29.3",
-    "webpack-cli": "3.2.3",
+    "webpack-cli": "^3.3.12",
     "webpack-dev-middleware": "^3.5.2",
     "webpack-hot-middleware": "^2.17.1",
     "webpack-merge": "4.2.1",
@@ -99,7 +99,7 @@
   },
   "greenkeeper": {
     "ignore": [
-      "extract-text-webpack-plugin",
+      "mini-css-extract-plugin",
       "karma-webpack",
       "webpack",
       "webpack-merge"