fix: diff-dom freezing on content refresh: #7460 (#7600)

* fix: add updates same as PR: #7599

Code borrowed from:
#7599
Also, based on on the ticket and work of #7460

Co-Authored-By: Petr Klus <petr@klus.co.uk>
Co-Authored-By: Fabian Braun <fsbraun@gmx.de>

* fix: remove plugin that has been removed from the deps

* fix: polyfill promise to fix lint errors and also support promise in browsers like IE11 and Opera mini

* feat: update to nodejs 18 LTS to see if it builds

* feat: update autoprefixer

* fix: upgrade autoprefixer

* fix: no polyfill only support major browsers with major market share:

* fix: upgrade to nodejs 18 in .nvmrc as well

---------

Co-authored-by: Petr Klus <petr@klus.co.uk>
Co-authored-by: Fabian Braun <fsbraun@gmx.de>

.github/workflows/frontend.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: ['16']
+        node-version: ['18']
 
     steps:
     - uses: actions/checkout@v3

.nvmrc

@@ -1 +1 @@
-16
+18

browserslist

@@ -1,2 +1,35 @@
-last 2 versions
-> 1%
+and_chr 114
+and_ff 113
+and_qq 13.1
+and_uc 13.4
+android 114
+baidu 13.18
+chrome 114
+chrome 113
+chrome 112
+chrome 111
+chrome 109
+edge 114
+edge 113
+edge 112
+firefox 114
+firefox 113
+firefox 112
+ios_saf 16.5
+ios_saf 16.4
+ios_saf 16.3
+ios_saf 16.2
+ios_saf 16.1
+ios_saf 16.0
+ios_saf 15.6
+kaios 3.0-3.1
+kaios 2.5
+op_mob 73
+opera 99
+opera 98
+safari 16.5
+safari 16.4
+safari 16.3
+safari 15.6
+samsung 21
+samsung 20

cms/static/cms/js/modules/cms.structureboard.js

@@ -8,7 +8,7 @@ import Plugin from './cms.plugins';
 import { getPlaceholderIds } from './cms.toolbar';
 import Clipboard from './cms.clipboard';
 import URI from 'urijs';
-import DiffDOM from 'diff-dom';
+import { DiffDOM } from 'diff-dom';
 import PreventParentScroll from 'prevent-parent-scroll';
 import { find, findIndex, once, remove, compact, isEqual, zip, every } from 'lodash';
 import ls from 'local-storage';

cms/static/cms/sass/components/_dialog.scss

@@ -22,7 +22,7 @@
         padding: 0;
     }
     form {
-        margin: 0 -$padding-large;
+        margin: 0 - $padding-large;
         padding: 0 $padding-large !important;
         border-top: 1px solid $gray-lighter;
         label {

cms/tests/frontend/karma.conf.js

@@ -7,7 +7,7 @@
 'use strict';
 
 process.env.NODE_ENV = 'test';
-
+process.env.CHROME_BIN = require('puppeteer').executablePath();
 var baseConf = require('./base.conf');
 var path = require('path');
 var fs = require('fs');
@@ -57,7 +57,7 @@ module.exports = function (config) {
     };
 
     var browsers = {
-        PhantomJS: 'used for local testing'
+        ChromeHeadlessCI: 'used for local testing'
     };
 
     var settings = {
@@ -66,7 +66,7 @@ module.exports = function (config) {
 
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jasmine', 'fixture', 'phantomjs-shim'],
+        frameworks: ['jasmine', 'fixture'],
 
         // list of files / patterns to load in the browser
         files: [
@@ -148,6 +148,14 @@ module.exports = function (config) {
         // start these browsers
         browsers: Object.keys(browsers),
 
+        customLaunchers: {
+            ChromeHeadlessCI: {
+                base: 'ChromeHeadless',
+                flags: ['--window-size=1280,1080']
+            }
+        },
+
+
         concurrency: Infinity,
 
         // we need at least 2 minutes because things are a bit slow