@wiris/mathtype-ckeditor5 8.9.1 → 8.10.0

package/README.md

@@ -1,68 +1,93 @@
-MathType for CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/wirismath)
-===
-
-Type and handwrite mathematical notation with MathType.
-
-Easily include quality math equations in your documents and digital content.
-
-# Table of Contents
-
-- [Install instructions](#install-instructions)
-- [Services](#services)
-- [Documentation](#documentation)
-- [Displaying on Target Page](#displaying-on-target-page)
-- [Privacy policy](#privacy-policy)
-
-## Install instructions
-
-1. Install the npm module:
-
-   ```
-   npm install @wiris/mathtype-ckeditor5
-   ```
-
-2. Update the CKEditor configuration by adding the new plugin and including the MathType and ChemType buttons:
-
-   ```js
-   import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
-
-   ...
-
-   ClassicEditor
-        .create( editorElement, {
-            plugins: [ ..., MathType, ... ],
-            toolbar: {
-                items: [
-                    ...
-                    'MathType',
-                    'ChemType',
-                    ...
-                ]
-            },
-   ```
-
-## Services
-
-This npm module uses remotely hosted services to render MathML data. In case of wanting to install these services on your own backend, please contact <support@wiris.com>.
-
-[comment]: <> (TODO: fill this section when the documentation is ready)
-
-## Displaying on Target Page
-
-In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the [MathType script](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode#add_a_script_to_head). For example for the default setting this would be:
-```html
-<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
-```
-
-## Documentation
-
-To find out more information about MathType, please go to the following documentation:
-
-[comment]: <> (TODO: link to install instructions)
-* [MathType documentation](https://docs.wiris.com/en/mathtype/mathtype_web/start?utm_source=npmjs&utm_medium=referral)
-* [Introductory tutorials](https://docs.wiris.com/en/mathtype/mathtype_web/intro_tutorials?utm_source=npmjs&utm_medium=referral)
-* [Service customization](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/config-table?utm_source=npmjs&utm_medium=referral)
-* [Testing](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/plugins-test?utm_source=npmjs&utm_medium=referral)
-## Privacy policy
-
-The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.
+# MathType for CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/wirismath)
+
+Type and handwrite mathematical notation with MathType.
+
+Easily include quality math equations in your documents and digital content.
+
+# Table of Contents
+
+- [Install instructions](#install-instructions)
+- [Services](#services)
+- [Documentation](#documentation)
+- [Displaying on Target Page](#displaying-on-target-page)
+- [Privacy policy](#privacy-policy)
+
+## Install instructions
+
+1. Install the npm module:
+
+   ```
+   npm install @wiris/mathtype-ckeditor5
+   ```
+
+2. Update the CKEditor configuration by adding the new plugin and including the MathType and ChemType buttons:
+
+   Using the legacy methods of installation:
+
+   ```js
+   import MathType from '@wiris/mathtype-ckeditor5';
+
+   ...
+
+   ClassicEditor
+        .create( editorElement, {
+            plugins: [ ..., MathType, ... ],
+            toolbar: {
+                items: [
+                    ...
+                    'MathType',
+                    'ChemType',
+                    ...
+                ]
+            },
+   ```
+
+   And when uses `CKEditor5` without legacy methods of installation:
+
+   ```js
+   import { ClassicEditor } from 'ckeditor5';
+   import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';
+
+   ...
+
+   ClassicEditor
+        .create( editorElement, {
+            plugins: [ ..., MathType, ... ],
+            toolbar: {
+                items: [
+                    ...
+                    'MathType',
+                    'ChemType',
+                    ...
+                ]
+            },
+   ```
+
+## Services
+
+This npm module uses remotely hosted services to render MathML data. In case of wanting to install these services on your own backend, please contact <support@wiris.com>.
+
+[comment]: <> (TODO: fill this section when the documentation is ready)
+
+## Displaying on Target Page
+
+In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the [MathType script](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode#add_a_script_to_head). For example for the default setting this would be:
+
+```html
+<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
+```
+
+## Documentation
+
+To find out more information about MathType, please go to the following documentation:
+
+[comment]: <> (TODO: link to install instructions)
+
+- [MathType documentation](https://docs.wiris.com/en/mathtype/mathtype_web/start?utm_source=npmjs&utm_medium=referral)
+- [Introductory tutorials](https://docs.wiris.com/en/mathtype/mathtype_web/intro_tutorials?utm_source=npmjs&utm_medium=referral)
+- [Service customization](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/config-table?utm_source=npmjs&utm_medium=referral)
+- [Testing](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/plugins-test?utm_source=npmjs&utm_medium=referral)
+
+## Privacy policy
+
+The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.

package/dist/browser/index-editor.css

@@ -0,0 +1,502 @@
+.wrs_modal_overlay {
+position: fixed;
+font-family: arial, sans-serif;
+top: 0;
+right: 0;
+left: 0;
+bottom: 0;
+background: rgba(0, 0, 0, 0.8);
+z-index: 999998;
+opacity: 0.65;
+pointer-events: auto;
+}
+.wrs_modal_overlay.wrs_modal_ios {
+visibility: hidden;
+display: none;
+}
+.wrs_modal_overlay.wrs_modal_android {
+visibility: hidden;
+display: none;
+}
+.wrs_modal_overlay.wrs_modal_ios.moodle {
+position: fixed;
+}
+.wrs_modal_overlay.wrs_modal_desktop.wrs_stack {
+background: rgba(0, 0, 0, 0);
+display: none;
+}
+.wrs_modal_overlay.wrs_modal_desktop.wrs_maximized {
+background: rgba(0, 0, 0, 0.8);
+}
+.wrs_modal_overlay.wrs_modal_desktop.wrs_minimized {
+background: rgba(0, 0, 0, 0);
+display: none;
+}
+.wrs_modal_overlay.wrs_modal_desktop.wrs_closed {
+background: rgba(0, 0, 0, 0);
+display: none;
+}
+.wrs_modal_title {
+color: #fff;
+padding: 5px 0 5px 10px;
+-moz-user-select: none;
+-webkit-user-select: none;
+-ms-user-select: none;
+user-select: none;
+text-align: left;
+}
+.wrs_modal_close_button {
+float: right;
+cursor: pointer;
+color: #fff;
+padding: 5px 10px 5px 0;
+margin: 10px 7px 0 0;
+background-repeat: no-repeat;
+}
+.wrs_modal_minimize_button {
+float: right;
+cursor: pointer;
+color: #fff;
+padding: 5px 10px 5px 0;
+top: inherit;
+margin: 10px 7px 0 0;
+}
+.wrs_modal_stack_button {
+float: right;
+cursor: pointer;
+color: #fff;
+margin: 10px 7px 0 0;
+padding: 5px 10px 5px 0;
+top: inherit;
+}
+.wrs_modal_stack_button.wrs_stack {
+visibility: hidden;
+margin: 0;
+padding: 0;
+}
+.wrs_modal_stack_button.wrs_minimized {
+visibility: hidden;
+margin: 0;
+padding: 0;
+}
+.wrs_modal_maximize_button {
+float: right;
+cursor: pointer;
+color: #fff;
+margin: 10px 7px 0 0;
+padding: 5px 10px 5px 0;
+top: inherit;
+}
+.wrs_modal_maximize_button.wrs_maximized {
+visibility: hidden;
+margin: 0;
+padding: 0;
+}
+.wrs_modal_title_bar {
+display: block;
+background-color: #778e9a;
+}
+.wrs_modal_dialogContainer {
+border: none;
+background: #fafafa;
+z-index: 999999;
+}
+.wrs_modal_dialogContainer.wrs_modal_desktop {
+font-size: 14px;
+}
+.wrs_modal_dialogContainer.wrs_modal_desktop.wrs_maximized {
+position: fixed;
+}
+.wrs_modal_dialogContainer.wrs_modal_desktop.wrs_minimized {
+position: fixed;
+top: inherit;
+margin: 0;
+margin-right: 10px;
+}
+.wrs_modal_dialogContainer.wrs_closed {
+visibility: hidden;
+display: none;
+opacity: 0;
+}
+.wrs_modal_dialogContainer.wrs_modal_desktop.wrs_stack {
+position: fixed;
+bottom: 0;
+right: 0;
+box-shadow: rgba(0, 0, 0, 0.5) 0 2px 8px;
+}
+.wrs_modal_dialogContainer.wrs_drag {
+box-shadow: rgba(0, 0, 0, 0.5) 0 2px 8px;
+}
+.wrs_modal_dialogContainer.wrs_modal_desktop.wrs_drag {
+box-shadow: rgba(0, 0, 0, 0.5) 0 2px 8px;
+}
+.wrs_modal_dialogContainer.wrs_modal_android {
+margin: auto;
+position: fixed;
+width: 99%;
+height: 99%;
+overflow: hidden;
+transform: translate(50%, -50%);
+top: 50%;
+right: 50% !important;
+}
+.wrs_modal_dialogContainer.wrs_modal_ios {
+margin: auto;
+position: fixed;
+width: 100%;
+height: 100%;
+overflow: hidden;
+transform: translate(50%, -50%);
+top: 50%;
+right: 50% !important;
+}
+.wrs_content_container.wrs_minimized {
+display: none;
+}
+.wrs_content_container.wrs_modal_android {
+width: 100%;
+height: 0%;
+flex-grow: 1;
+display: flex;
+flex-direction: column;
+}
+.wrs_content_container.wrs_modal_android > div:first-child {
+flex-grow: 1;
+}
+.wrs_content_container.wrs_modal_ios > div:first-child {
+flex-grow: 1;
+}
+.wrs_content_container.wrs_modal_desktop > div:first-child {
+flex-grow: 1;
+}
+.wrs_modal_wrapper.wrs_modal_android {
+margin: auto;
+display: flex;
+flex-direction: column;
+height: 100%;
+width: 100%;
+}
+.wrs_content_container.wrs_modal_desktop {
+width: 100%;
+flex-grow: 1;
+display: flex;
+flex-direction: column;
+}
+.wrs_content_container.wrs_modal_ios {
+width: 100%;
+height: 0%;
+flex-grow: 1;
+display: flex;
+flex-direction: column;
+}
+.wrs_modal_wrapper.wrs_modal_ios {
+margin: auto;
+display: flex;
+flex-direction: column;
+height: 100%;
+width: 100%;
+}
+.wrs_virtual_keyboard {
+height: 100%;
+width: 100%;
+top: 0;
+left: 50%;
+transform: translate(-50%, 0%);
+}
+.wrs_modal_dialogContainer.wrs_modal_badStock {
+width: 100%;
+height: 280px;
+margin: 0 auto;
+border-width: 0;
+}
+.wrs_modal_wrapper.wrs_modal_badStock {
+width: 100%;
+height: 280px;
+margin: 0 auto;
+border-width: 0;
+}
+.wrs_noselect {
+-moz-user-select: none;
+-khtml-user-select: none;
+-webkit-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
+.wrs_bottom_right_resizer {
+width: 10px;
+height: 10px;
+color: #778e9a;
+position: absolute;
+right: 4px;
+bottom: 8px;
+cursor: se-resize;
+-moz-user-select: none;
+-webkit-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
+.wrs_bottom_left_resizer {
+width: 15px;
+height: 15px;
+color: #778e9a;
+position: absolute;
+left: 0;
+top: 0;
+cursor: se-resize;
+}
+.wrs_modal_controls {
+height: 42px;
+margin: 3px 0;
+overflow: hidden;
+line-height: normal;
+}
+.wrs_modal_links {
+margin: 10px auto;
+margin-bottom: 0;
+font-family: arial, sans-serif;
+padding: 6px;
+display: inline;
+float: right;
+text-align: right;
+}
+.wrs_modal_links > a {
+text-decoration: none;
+color: #778e9a;
+font-size: 16px;
+}
+.wrs_modal_button_cancel {
+min-width: 80px;
+font-size: 14px;
+border-radius: 3px;
+border: 1px solid #778e9a;
+padding: 6px 8px;
+margin: 10px auto;
+margin-left: 5px;
+margin-bottom: 0;
+cursor: pointer;
+font-family: arial, sans-serif;
+background-color: #ddd;
+height: 32px;
+}
+.wrs_modal_button_accept {
+min-width: 80px;
+font-size: 14px;
+border-radius: 3px;
+border: 1px solid #778e9a;
+padding: 6px 8px;
+margin: 10px auto;
+margin-right: 5px;
+margin-bottom: 0;
+color: #fff;
+background: #778e9a;
+cursor: pointer;
+font-family: arial, sans-serif;
+height: 32px;
+}
+.wrs_editor_vertical_bar {
+height: 20px;
+float: right;
+background: none;
+width: 20px;
+cursor: pointer;
+}
+.wrs_modal_buttons_container {
+display: inline;
+float: left;
+}
+.wrs_modal_buttons_container.wrs_modalAndroid {
+padding-left: 6px;
+}
+.wrs_modal_buttons_container.wrs_modalDesktop {
+padding-left: 0;
+}
+.wrs_modal_buttons_container > button {
+line-height: normal;
+background-image: none;
+}
+.wrs_modal_wrapper {
+margin: 6px;
+display: flex;
+flex-direction: column;
+}
+.wrs_modal_wrapper.wrs_modal_desktop.wrs_minimized {
+display: none;
+}
+.wrs_popupmessage_overlay_envolture {
+display: none;
+width: 100%;
+}
+.wrs_popupmessage_overlay {
+position: absolute;
+width: 100%;
+height: 100%;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background-color: rgba(0, 0, 0, 0.5);
+z-index: 4;
+cursor: pointer;
+}
+.wrs_popupmessage_panel {
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+position: absolute;
+background: white;
+max-width: 500px;
+width: 75%;
+border-radius: 2px;
+padding: 20px;
+font-family: sans-serif;
+font-size: 15px;
+text-align: left;
+color: #2e2e2e;
+z-index: 5;
+max-height: 75%;
+overflow: auto;
+}
+.wrs_popupmessage_button_area {
+margin: 10px 0 0 0;
+}
+.wrs_panelContainer * {
+border: 0;
+}
+.wrs_button_cancel {
+min-width: 80px;
+font-size: 14px;
+border-radius: 3px;
+border: 1px solid #778e9a;
+padding: 6px 8px;
+margin: 10px auto;
+margin-left: 5px;
+margin-bottom: 0;
+cursor: pointer;
+font-family: arial, sans-serif;
+background-color: #ddd;
+background-image: none;
+height: 32px;
+}
+.wrs_button_accept {
+min-width: 80px;
+font-size: 14px;
+border-radius: 3px;
+border: 1px solid #778e9a;
+padding: 6px 8px;
+margin: 10px auto;
+margin-right: 5px;
+margin-bottom: 0;
+color: #fff;
+background: #778e9a;
+cursor: pointer;
+font-family: arial, sans-serif;
+height: 32px;
+}
+.wrs_editor button {
+box-shadow: none;
+}
+.wrs_editor .wrs_header button {
+border-bottom: none;
+border-bottom-left-radius: 0;
+border-bottom-right-radius: 0;
+}
+.wrs_modal_overlay.wrs_modal_desktop.wrs_stack.wrs_overlay_active {
+display: block;
+}
+.wrs_toolbar tr:focus {
+background: none;
+}
+.wrs_toolbar tr:hover {
+background: none;
+}
+.wrs_modal_rtl .wrs_modal_button_cancel {
+margin-right: 5px;
+margin-left: 0;
+}
+.wrs_modal_rtl .wrs_modal_button_accept {
+margin-right: 0;
+margin-left: 5px;
+}
+.wrs_modal_rtl .wrs_button_cancel {
+margin-right: 5px;
+margin-left: 0;
+}
+.wrs_modal_rtl .wrs_button_accept {
+margin-right: 0;
+margin-left: 5px;
+}
+.wrs_modal_offline {
+display: none;
+position: fixed;
+z-index: 2;
+padding-top: 150px;
+left: 0;
+top: 0;
+width: 100%;
+height: 100%;
+overflow: auto;
+background-color: rgb(0, 0, 0);
+background-color: rgba(0, 0, 0, 0.4);
+margin: auto;
+}
+.wrs_modal_content_offline {
+margin: auto;
+padding: 16px;
+background: #fff7ed;
+border-radius: 6px;
+width: 517px;
+height: 100px;
+position: relative;
+}
+.wrs_modal_offline_close {
+color: #c2410c;
+font-size: 24px;
+font-weight: bold;
+left: 95.7%;
+right: 2.08%;
+top: 7.6%;
+bottom: 75%;
+font-family: "Inter";
+font-style: normal;
+font-weight: 400;
+position: absolute;
+}
+.wrs_modal_offline_warn {
+position: absolute;
+left: 2.08%;
+right: 94%;
+top: 11.6%;
+bottom: 75%;
+font-size: 24px;
+color: #fb923c;
+background-repeat: no-repeat;
+}
+.wrs_modal_offline_text_container {
+position: absolute;
+left: 6.8%;
+right: 6.08%;
+top: 10.4%;
+bottom: 2%;
+}
+.wrs_modal_offline_text {
+font-family: "Inter";
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 20px;
+color: #c2410c;
+}
+.wrs_modal_offline_text_warn {
+height: 25px;
+font-family: "Inter";
+font-style: normal;
+font-size: 14px;
+line-height: 20px;
+font-weight: bold;
+color: #c2410c;
+}
+.wrs_modal_offline_close:hover {
+color: #000;
+text-decoration: none;
+cursor: pointer;
+}