docs: Update development instructions

docs/development/compiling/README.md

@@ -9,35 +9,43 @@ In order to offer cross-browser compatibility and the latest features, most of t
 
 ## Table of contents
 
-- [Compiling all packages](#compiling-all-packages)
-- [Compiling individual packages](#compiling-individual-packages)
-- [Pointing to your own back-end](#pointing-to-your-own-back-end)
-- [Cleaning up](#cleaning-up)
+- [Bootstrap dependencies](#bootstrap-dependencies)
+- [Compile individual packages](#compile-individual-packages)
+- [Point to your own back-end](#point-to-your-own-back-end)
+- [Clean up](#clean-up)
 
-## Compiling all packages
+## Requirements
 
-When running the following command described in the [Bootstrapping](../../README.md#Bootstrapping) section:
+* [**yarn**](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable) (*currently: v1.22.19*)
+* [**nx**](https://nx.dev/getting-started/installation#installing-nx-globally) (*latest*) - Optional
+
+## Bootstrap dependencies
+
+First run the following command described in the [Bootstrapping](../../README.md#Bootstrapping) section:
 
 ```sh
 $ yarn
 ```
 
-the monorepo will bootstrap all the packages in the monorepo and also compile all the plugins for you.
+the monorepo will bootstrap all the packages in the monorepo and the npm dependencies.
 
-## Compiling individual packages
+## Compile individual packages
 
 To compile a single packages, run:
 
 ```sh
-$ yarn build <PACKAGE>
+$ nx build <PACKAGE>
 ```
 
 You can also build the packages in development mode:
 
 ```sh
-$ yarn build-dev <PACKAGE>
+$ nx build-dev <PACKAGE>
 ```
 
+
+> In case you haven't installed `nx`, you'll have to add `yarn` at the beggining of each one of the previous commands.
+
 Where PACKAGE can be:
 
 * ckeditor4
@@ -47,7 +55,7 @@ Where PACKAGE can be:
 * tinymce5
 * tinymce6
 
-## Pointing to your own back-end
+## Point to your own back-end
 
 If your website hosts its own MathType Web services, instead of using the wiris.net services, then you must pass a flag indicating which technology your server uses (ASPX, Java, Ruby, or PHP), run the following command in the desired package folder:
 
@@ -58,16 +66,14 @@ $ SERVICE_PROVIDER_URI=[url] SERVICE_PROVIDER_SERVER=[tech] yarn build
 
 Where `[tech]` is one of:
 
-- `aspx`
 - `java`
 - `php`
-- `ruby`
 
 and `[url]` is the relative address to the main endpoint of the MathType Web services that you are hosting (e.g. `integration` if your PHP services are in the `integration/` directory).
 
 You can use `build-dev` instead of `build` to build the package in development mode.
 
-## Cleaning up
+## Clean up
 
 To delete files generated during the compilation process, run:
 

docs/development/demos/README.md

@@ -7,12 +7,22 @@ This document explains what to do if you are modifying the source code of the pl
 
 All the commands can be executed either from the root of the project, or from the demo path. We recommend running them on the project root to avoid complexity.
 
+## Requirements
+
+* [**yarn**](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable) (*currently: v1.22.19*)
+* [**nx**](https://nx.dev/getting-started/installation#installing-nx-globally) (*latest*) - Optional
+
+## Build and start a demo in development mode
+
 Assuming that you already executed the `yarn` command, you'll have to build the desired package and start the demo:
 
 ```js
+$ nx build <EDITOR>
 $ nx start <FRAMEWORK>-<EDITOR>
 ```
 
+> In case you haven't installed `nx`, you'll have to add `yarn` at the beggining of each one of the previous commands.
+
 | FRAMEWORK | Editor and Version  | EDITOR/PACKAGE                                                               |
 |-----------|---------------------|--------------------------------------------------------------------|
 | html      | CKEditor V4         | [ckeditor4](../../demos/html/ckeditor4)               |

packages/devkit/doc/src/getting_started.md

@@ -36,7 +36,7 @@ To integrate MathType, please follow the steps below (you may adjust the example
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
     This is the main step of the integration, doing the following:
@@ -73,7 +73,7 @@ The complete HTML code of the previuos example is the following:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
 </html>
 ```

packages/devkit/doc/src/services_generic.md

@@ -29,7 +29,7 @@ To install the Java services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -60,7 +60,7 @@ To install the PHP services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -91,7 +91,7 @@ To install the .NET services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -125,6 +125,6 @@ To install the Ruby on Rails services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```

packages/generic/README.md

@@ -6,18 +6,19 @@ Easily include quality math equations in your documents and digital content.
 
 # Table of contents
 
-- [Getting started](#getting-started)
-- [Known issues](#known-issues)
-- [Parsing data](#parsing-data)
-  * [Setting data](#setting-data)
-  * [Getting data](#getting-data)
-- [Services](#services)
-  * [Install instructions](#install-instructions)
-    * [Java](#java)
-    * [PHP](#php)
-- [Displaying on Target Page](#displaying-on-target-page)
-- [Documentation](#documentation)
-- [Privacy policy](#privacy-policy)
+- [Table of contents](#table-of-contents)
+  - [Getting started](#getting-started)
+  - [Known issues](#known-issues)
+  - [Parsing data](#parsing-data)
+    - [Setting data](#setting-data)
+    - [Getting data](#getting-data)
+  - [Services](#services)
+    - [Install instructions](#install-instructions)
+      - [Java](#java)
+      - [PHP](#php)
+  - [Displaying on Target Page](#displaying-on-target-page)
+  - [Documentation](#documentation)
+  - [Privacy policy](#privacy-policy)
 
 ## Getting started
 
@@ -88,6 +89,8 @@ To integrate MathType, please follow the steps below. Please, note you may adjus
     // Initialyze the editor.
     // optionally, add MathType Properties
     window.wrs_int_init(htmlEditorDiv, toolbarDiv/*, mathTypeParameters*/);
+
+    WirisPlugin.currentInstance = genericIntegrationInstance;
    </script>
    ```
 
@@ -98,6 +101,33 @@ To integrate MathType, please follow the steps below. Please, note you may adjus
    * The **target** property must contain the editable HTML element. This is a mandatory parameter.
    * The **toolbar** property must contain the HTML element representing the toolbar. This parameter is optional.
 
+After following these steps, you should have something like this:
+
+```html
+<html>
+  <head>
+    <script src="node_modules/@wiris/mathtype-generic/wirisplugin-generic.js"></script>
+  </head>
+  <body>
+    <div id="toolbar"></div>
+    <div id="htmlEditor" contenteditable="true">Try me!</div>
+
+    <script>
+      var genericIntegrationProperties = {};
+      genericIntegrationProperties.target = document.getElementById('htmlEditor');
+      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
+
+      // GenericIntegration instance.
+      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
+      genericIntegrationInstance.init();
+      genericIntegrationInstance.listeners.fire('onTargetReady', {});
+
+      WirisPlugin.currentInstance = genericIntegrationInstance;
+    </script>
+  </body>
+</html>
+```
+
 Notice the example assumes this directory structure:
 
 ```
@@ -198,7 +228,7 @@ To install the Java services, please, follow the steps below:
       genericIntegrationInstance.init();
       genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-      WirisPlugin.currentInstance = this.wiris_generic;
+      WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -232,7 +262,7 @@ To install the PHP services, please, follow the steps below:
       genericIntegrationInstance.init();
       genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-      WirisPlugin.currentInstance = this.wiris_generic;
+      WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 

packages/generic/getting_started.md

@@ -36,7 +36,7 @@ To integrate MathType, please follow the steps below (you may adjust the example
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
     This is the main step of the integration, doing the following:
@@ -73,7 +73,7 @@ The complete HTML code of the previuos example is the following:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
 </html>
 ```

packages/generic/services.md

@@ -28,7 +28,7 @@ To install the Java services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -54,7 +54,7 @@ To install the PHP services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -80,7 +80,7 @@ To install the .NET services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>
     ```
 
@@ -110,5 +110,5 @@ To install the Ruby on Rails services follow the steps below:
         genericIntegrationInstance.init();
         genericIntegrationInstance.listeners.fire('onTargetReady', {});
 
-        WirisPlugin.currentInstance = this.wiris_generic;
+        WirisPlugin.currentInstance = genericIntegrationInstance;
     </script>    ```