WYSIWYG/TinyMCE enhancements (#2341)

* focus mode

* local storage content modes

* task: create tooltip component

* task: tooltip style

* task: tooltip body styles

* task: tooltip header

* task: tooltip body

* task: buttons wire

* duo mode responsive

* task: fixed props

* task: new field shell

* task: add tooltip text

* task: field shell update

* task: add description

* task: field shell single text

* task: error validation

* task: dynamic input field

* task: dropdown field

* task: markdown & article_writer

* Remove duomode toggle from duomode

* Close action

* reload

* device selector

* task: currency field

* fix: app crashing when select field has no options

* task: required field validation

* task: link & fontawesome

* task: uuid field update

* task: wysiwyg field update

* task: move field components to manager-ui

* task: changed prop names

* task: revert props

* task: revert to input

* task: field color

* task: files and image field update

* task: update several fields

* task: update date and datetime fields

* task: cleanup

* task: rename fieldshell with ai

* task: set date and datetime width

* fix: overflowing text

* task: set default value length

* task: color field width

* task: update types

* task: update types

* task: field shell types update

* task: convert to tsx

* task: react-dom type

* task: fixed field types

* task: additional typing

* task: standardize onetoone and onetomany empty states

* task: function declaration

* task: extract resolved option to separate component

* task: moved linkoption to separate component & simplified sorting

* task: prefetch field data

* task: cleanup

* task: change error handling

* task: render error msg

* fix: crashing when sidebar is opened

* task: updated error handling

* task: change field error structure

* task: don;t refetch data when there are field errors

* task: field error component

* task: move where field errors state are kept

* task: move where field errors state are kept

* task: field error count

* task: add field errors in create item

* Loading state updates on duo mode

* revert protocol

* layout update

* task: update meta fields shell

* task: add field error handling

* duo mode zoom

* protocol revert

* task: use zesty theme

* layout fix

* task: change toggle button color

* fix failing tests for content

* task: fix failing tests in actions.spec

* task: overflow fixes

* task: overflow fixes

* task: item create layout fix

* task: field error banner vqa fix

* task: added error borders

* fix: errors reset on date change

* task: tinymce font change and field error label underline

* protocol revert

* VQA fixes

* global overscroll behavior disable

* use env protocol

* task: add copy/paste

* chore: cleanup

* task: sort error messages

* task: route to model activity log on click

* task: add error border for wysiwyg

* task: markdown and article writer error borders

* task: toggle button error border

* chore: clueanup

* task: fixed scroll to field with error

* Duo mode toggle on title nar

* Scale to 0.35 only on iframe

* remaining vqa fixes

* Media field revamp

* Media field revamp

* task: fix incorrect import name

* task: responsive media field label

* VQA fixes

* task: migrate tree view

* task: update tinymce version

* task: updated free plugins and toolbar layout

* task: remove external skin setting

* task: removed unused css

* task: fixed skin issues

* task: use custom zesty theme for tinymce

* task: updated font fam

* task: rearrange toolbar icons

* task: editor updates

* task: use custom material icons

* task: move blockquote to block formats

* task: remove tinymce modal height override

* task: convert to typescript

* task: fix type

* task: fix missing import

* task: use MUI

* fix: content-app sidebar button overlapping fullscreen tinymce

* task: add character counter support for wysiwyg

* task: move custom plugins to separate folder

* task: create custom slash commands plugin

* task: allow file type filter when opening media browser

* task: customize tinymce fullscreen

* bump material version and use x-tree component

* task: close fullscreen on background click

* task: change insert time icon

* chore: fix conflicts

* task: use theme zindex

* task: fullscreen icon position, highligter default color and blocks styling

* task: toolbar style overrides

* dep: zesty-io/core@1.10.0

* package lock

* chore: cleanup

* chore: cleanup

* task: modal style updates

* task: modal style updates

* task: hide overflow border when there are no content

* task: fix vieo and other file type embeds

* task: remove plugins from help page and fix max height

* task: reoder slash commands

* task: set width and height for autocompleter

* fix: autoscroll items

* task: update icons

* task: change border color

* task: content styling

* task: change icon color

* fix: readd image resize controls

* fix: image width and height modification in url is not saved

* fix: toolbar wrap and border colors

* task: preserve image aspect ration in wysiwyg

* task: create image resizer plugin

* task: wire image resizer functionality

* fix: only allow height distortion when manually inputting dimensions

* task: limit content width to 640px when in fullscreen

* task: toolbar positions

* task: update lock icon

* chore: cleanup

* task: add height auto

* task: update unlock icon

* task: only show editor once skin is fully-loaded

* task: save image dimensions on enter

* fix: editor skin load

* task: only allow numbers in input fields

* fix: ol and ul font colors

* fix: editor not hiding/showign when skin is not yet loaded

---------

Co-authored-by: Andres <agalin920@gmail.com>
Co-authored-by: shrunyan <shrunyan@gmail.com>

package.json

@@ -56,10 +56,10 @@
     "@riotjs/observable": "^4.0.4",
     "@sentry/react": "^6.4.0",
     "@sentry/tracing": "^6.4.0",
-    "@tinymce/tinymce-react": "^3.12.6",
+    "@tinymce/tinymce-react": "^4.3.0",
     "@welldone-software/why-did-you-render": "^6.1.1",
-    "@zesty-io/core": "1.9.1",
-    "@zesty-io/material": "^0.12.1",
+    "@zesty-io/core": "1.10.0",
+    "@zesty-io/material": "^0.12.0",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",
@@ -100,6 +100,7 @@
     "redux-thunk": "2.3.0",
     "reselect": "^4.0.0",
     "showdown": "1.9.1",
+    "tinymce": "^6.7.2",
     "uuid": "^8.3.2",
     "zuid": "github:zesty-io/zuid-js#v1.2.0"
   },
@@ -121,6 +122,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
+    "@types/tinymce": "^4.6.8",
     "@types/uuid": "^8.3.4",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.0",