feat: add vue + ckeditor5 demo

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.19.0.cjs"

demos/vue/ckeditor5/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

demos/vue/ckeditor5/README.md

@@ -0,0 +1,153 @@
+# CKEditor integration in Vue
+
+A simple Vue App integrating WIRIS MathType on a CKEditor 5 and step-by-step information on how to build it. The  code of this example loads a rich text editor instance with a default value.
+
+## Requirements
+
+* npm
+* Vue (*Currently* v11.2.10)
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## How to run the demo
+
+```sh
+$ npm install
+$ npm run dev
+```
+
+*More information on the different ways to run a demo [here](../../README.md)*
+
+Runs the app in the development mode.<br />
+Open [http://localhost:5173/](http://localhost:5173/) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## How to add MathType to CKEditor from scratch
+
+1. Run the following through the terminal to install needed dependencies:
+
+    ```sh
+    $ npm init vue@latest
+    $ cd $APP_NAME
+    $ npm install --save @ckeditor/ckeditor5-vue
+    $ npm install --save @ckeditor/vite-plugin-ckeditor5
+    $ npm install --save @wiris/mathtype-ckeditor5
+    ```
+
+2. Install CKEditor5 ClassicEditor dependencies:
+
+    ```sh
+    $ npm install --save @ckeditor5-editor-classic
+    $ npm install --save @ckeditor/ckeditor5-essentials
+    $ npm install --save @ckeditor/ckeditor5-basic-styles
+    $ npm install --save @ckeditor/ckeditor5-link
+    $ npm install --save @ckeditor/ckeditor5-paragraph
+    $ npm install --save @ckeditor/ckeditor5-theme-lark
+    ```
+
+3. Open the *vite.config.ts* file and add:
+
+    ```ts
+    import { fileURLToPath, URL } from 'node:url';
+    import { defineConfig } from 'vite';
+    import vue from '@vitejs/plugin-vue';
+    import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
+
+    export default defineConfig( {
+      plugins: [
+        vue(),
+        ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } ),
+      ],
+      resolve: {
+        alias: {
+          '@': fileURLToPath( new URL( './src', import.meta.url ) )
+        }
+      },
+      optimizeDeps: {
+        exclude: ['@wiris/mathtype-html-integration-devkit', 'resources']
+      }
+    } );
+    ```
+
+3. Open *src/main.ts* and replace all with:
+
+    ```ts
+    import { createApp } from 'vue';
+    import App from './App.vue';
+    import CKEditor from '@ckeditor/ckeditor5-vue';
+    import './assets/css/main.css';
+
+    createApp( App ).use( CKEditor ).mount( '#editor' );
+    ```
+
+4. Open *src/App.vue* and replace all with:
+
+    ```html
+    <template>
+      <div id="app">
+        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onEditorReady"></ckeditor>
+      </div>
+    </template>
+
+    <script lang="ts">
+      import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+
+      import { Essentials } from '@ckeditor/ckeditor5-essentials';
+      import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+      import { Link } from '@ckeditor/ckeditor5-link';
+      import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+      // @ts-ignore
+      import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
+
+      // Get the initial content.
+      const content = '';
+
+      const toolbar = ['bold', 'italic', 'link', 'undo', 'redo', 'MathType', 'ChemType'];
+      const plugins = [Essentials, Bold, Italic, Link, Paragraph, MathType];
+      const editorConfig = {
+        iframe: true,
+        charCounterCount: false,
+        plugins,
+        toolbar,
+        htmlAllowedTags: ['.*'],
+        htmlAllowedAttrs: ['.*'],
+        htmlAllowedEmptyTags: ['mprescripts'],
+        imageResize: false,
+        useClasses: false,
+      };
+
+      export default {
+        name: '#app',
+        data() {
+          return {
+            editor: ClassicEditor,
+            editorData: content,
+            editorConfig
+          };
+        }
+      };
+    </script>
+    ```
+
+5. Finally, you are ready to start the demo with the commands:
+
+    ```
+      npm install
+      npm run dev
+    ```

demos/vue/ckeditor5/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

demos/vue/ckeditor5/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <!-- <div id="app"></div> -->
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

demos/vue/ckeditor5/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "demo-vue-ckeditor5",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "prestart-remote": "yarn && yarn unlink @wiris/mathtype-ckeditor5 && yarn unlink @wiris/mathtype-html-integration-devkit && yarn install --force",
+    "start-remote": "vite",
+    "prestart": "yarn && yarn link @wiris/mathtype-ckeditor5 && yarn link @wiris/mathtype-html-integration-devkit",
+    "start": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^38.0.1",
+    "@ckeditor/ckeditor5-editor-classic": "^38.0.1",
+    "@ckeditor/ckeditor5-essentials": "^38.0.1",
+    "@ckeditor/ckeditor5-link": "^38.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^38.0.1",
+    "@ckeditor/ckeditor5-theme-lark": "^38.0.1",
+    "@ckeditor/ckeditor5-vue": "^5.1.0",
+    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
+    "@wiris/mathtype-ckeditor5": "*",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.17",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/tsconfig": "^0.4.0",
+    "npm-run-all": "^4.1.5",
+    "resources": "file:../../../packages/res",
+    "typescript": "~5.0.4",
+    "vite": "^4.3.9",
+    "vite-plugin-string": "^1.2.1",
+    "vue-tsc": "^1.6.5"
+  }
+}

demos/vue/ckeditor5/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue-ckeditor5",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "demos/vue/ckeditor5/src",
+  "targets": {
+    "start": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "start"
+      },
+      "outputs": ["demos/vue/ckeditor5/dist/demo.js"]
+    },
+    "start-remote": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "start-remote"
+      },
+      "outputs": ["demos/vue/ckeditor5/dist/demo.js"]
+    },
+    "build": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build"
+      },
+      "outputs": ["demos/vue/ckeditor5/dist/demo.js"]
+    }
+  }
+}

demos/vue/ckeditor5/src/App.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="app">
+    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onEditorReady"></ckeditor>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+
+  import { Essentials } from '@ckeditor/ckeditor5-essentials';
+  import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+  import { Link } from '@ckeditor/ckeditor5-link';
+  import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+  // @ts-ignore
+  import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
+
+  // @ts-ignore
+  // Import the wiris plugin version.
+  import { version as pluginVersion } from '@wiris/mathtype-ckeditor5/package.json';
+
+  // @ts-ignore
+  // Load the file that contains common imports between demos. (functions, styles, etc)
+  import * as Generic from 'resources/demos/vite-imports';
+
+  // Apply specific demo names to all the objects.
+  document.getElementById('header_title_name')!.innerHTML = 'MathType for CKEditor 5 on Vue';
+  document.getElementById('version_editor')!.innerHTML = 'CKEditor editor: ';
+
+  // Get and set the editor and wiris versions in this order.
+  Generic.setEditorAndWirisVersion('5.0.0', pluginVersion);
+
+  // Get the initial content.
+  const content = Generic.editorContentMathML;
+
+  const toolbar = ['bold', 'italic', 'link', 'undo', 'redo', 'MathType', 'ChemType'];
+  const plugins = [Essentials, Bold, Italic, Link, Paragraph, MathType]
+  const editorConfig = {
+    iframe: true,
+    charCounterCount: false,
+    plugins,
+    toolbar,
+    htmlAllowedTags: ['.*'],
+    htmlAllowedAttrs: ['.*'],
+    htmlAllowedEmptyTags: ['mprescripts'],
+    imageResize: false,
+    useClasses: false,
+  };
+
+  // Function to call when the editor is initialyzed so it can add listeners on buttons.
+  function updateContent(ckeditor: ClassicEditor) {
+    // Set the initial content on the bottom textArea.
+    document.getElementById('transform_content')!.innerHTML = content;
+
+    // Add listener on click button to launch updateContent function.
+    document.getElementById('btn_update')!.addEventListener('click', (e) => {
+      e.preventDefault();
+      Generic.updateContent(ckeditor.getData(), 'transform_content');
+    });
+  }
+
+  export default {
+    name: '#editor',
+    data() {
+      return {
+        editor: ClassicEditor,
+        editorData: content,
+        editorConfig,
+        onEditorReady: updateContent,
+      };
+    }
+  };
+</script>
+

demos/vue/ckeditor5/src/assets/css/main.css

@@ -0,0 +1,28 @@
+body {
+  background-color: #e4e6e7;
+}
+
+.ck-editor {
+  background-color: #fff !important;
+  border-radius: 10px !important;
+  margin: 0 auto !important;
+  max-width: 760px !important;
+  width: 100% !important;
+}
+
+.ck-editor:hover {
+  box-shadow: 0 0 10px #7af78f;
+}
+
+.ck-content {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  min-height: 250px;
+}
+
+.ck-rounded-corners,
+.ck.ck-editor__editable:not(.ck-editor__nested-editable),
+.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-rounded-corners {
+  border-bottom-left-radius: 10px !important;
+  border-bottom-right-radius: 10px !important;
+}

demos/vue/ckeditor5/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import './assets/css/main.css';
+
+createApp( App ).use( CKEditor ).mount( '#editor' );

demos/vue/ckeditor5/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}