ContentSquare · panzerdp · Feb 10, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 26, 2023
diff --git a/apps/chrome-extension/tsconfig.json b/apps/chrome-extension/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json", "vite.config.*", "vitest.config.*", "package.json"],
-  "exclude": ["src/**/*.spec.ts"],
   "compilerOptions": {
     "baseUrl": ".",
     "lib": [

diff --git a/apps/ms-word-addin/.browserslistrc b/apps/ms-word-addin/.browserslistrc
@@ -1,5 +1 @@
 last 2 Chrome versions
-last 2 Firefox versions
-last 2 Safari version
-last 2 Edge versions
-Edge 18
diff --git a/apps/ms-word-addin/.eslintrc.js b/apps/ms-word-addin/.eslintrc.js
@@ -1,22 +1,21 @@
+/* eslint-env node */
+
 module.exports = {
   root: true,
-  env: {
-    node: true
-  },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    'plugin:tailwindcss/recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier'
+  ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
-  overrides: [
-    {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-      env: {
-        jest: true
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        semi: false
       }
-    }
-  ]
+    ]
+  }
 }
diff --git a/apps/ms-word-addin/.gitignore b/apps/ms-word-addin/.gitignore
@@ -2,7 +2,6 @@
 node_modules
 /dist
 
-
 # local env files
 .env.local
 .env.*.local
@@ -15,9 +14,11 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
+.vscode/*.json
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+!.vscode/extensions.json
diff --git a/apps/ms-word-addin/.vscode/extensions.json b/apps/ms-word-addin/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+    "dbaeumer.vscode-eslint",
+    "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
+    "bradlc.vscode-tailwindcss"
+	]
+}
diff --git a/apps/ms-word-addin/README.md b/apps/ms-word-addin/README.md
@@ -2,10 +2,10 @@
 
 ## Introduction
 
-Created by [Contentsquare Foundation](https://contentsquare-foundation.org/), Readapt is a software platform that aims to help those with reading challenges like dyslexia to more easily read digital text. The [Microsoft Word version](https://appsource.microsoft.com/en-us/product/office/WA200004098?tab=Overview) of Readapt allows users to set their reading preferences and see an adaptation of the Word document's text. It also provides reading tools like a screen mask and reading ruler. 
+Created by [Contentsquare Foundation](https://contentsquare-foundation.org/), Readapt is a software platform that aims to help those with reading challenges like dyslexia to more easily read digital text. The [Microsoft Word version](https://appsource.microsoft.com/en-us/product/office/WA200004098?tab=Overview) of Readapt allows users to set their reading preferences and see an adaptation of the Word document's text. It also provides reading tools like a screen mask and reading ruler.
 
 ## Operating system and Microsoft Office compatibility
-### MacOS 
+### MacOS
 Readapt can be used on most recent releases of MacOS and Microsoft Office.
 
 ### Microsoft Office Online

diff --git a/apps/ms-word-addin/babel.config.js b/apps/ms-word-addin/babel.config.js
diff --git a/apps/ms-word-addin/env.d.ts b/apps/ms-word-addin/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/ms-word-addin/index.html b/apps/ms-word-addin/index.html
@@ -0,0 +1,27 @@
+<!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>Readapt by Contentsquare Foundation</title>
+    <link rel="preload" href="/fonts/Luciole-Regular.ttf" type="font/ttf" as="font" crossorigin />
+    <link rel="preload" href="/fonts/Luciole-Bold.ttf" type="font/ttf" as="font" crossorigin />
+    <link rel="preload" href="/fonts/OpenDyslexic-Regular.otf" type="font/otf" as="font" crossorigin/>
+    <link rel="preload" href="/fonts/OpenDyslexic-Bold.otf" type="font/otf" as="font" crossorigin/>
+    <link rel="stylesheet" href="/fonts.css" />
+
+    <link ref="preload" href="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" as="script" crossorigin="true" />
+    <link rel="preload" href="https://appsforoffice.microsoft.com/lib/1/hosted/o15apptofilemappingtable.js" as="script" crossorigin="true" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/app/index.ts"></script>
+
+    <script>
+      if (navigator.userAgent.indexOf('Trident') !== -1) {
+        document.getElementById('app').innerHTML = "We detect that you are using an Office version that uses Internet Explorer 11. This, unfortunately, is not supported by Readapt. We apologise for the incovenience."
+      }
+    </script>
+  </body>
+</html>
diff --git a/apps/ms-word-addin/jest.config.js b/apps/ms-word-addin/jest.config.js
diff --git a/apps/ms-word-addin/package.json b/apps/ms-word-addin/package.json
@@ -3,11 +3,14 @@
   "version": "1.7.4",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test": "yarn test:unit",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "build": "rm -rf ./dist && run-p type-check build-ui",
+    "preview": "vite preview --port 4173",
+    "test": "yarn test:unit --run",
+    "test:unit": "vitest",
+    "build-ui": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "clean": "shx rm -rf dist",
     "start": "office-addin-debugging start manifest.xml",
     "start:desktop": "office-addin-debugging start manifest.xml desktop",
@@ -19,54 +22,50 @@
     "postinstall": "node scripts/init-env"
   },
   "dependencies": {
-    "@readapt/settings": "^1.7.4",
-    "@readapt/shared-components": "^1.7.4",
-    "@readapt/text-engine": "^1.7.4",
-    "@readapt/visual-engine": "^1.7.4",
-    "bootstrap": "~4.6.2",
-    "bootstrap-vue": "~2.23.1",
-    "core-js": "^3.8.3",
-    "lodash": "^4.17.21",
-    "popper.js": "^1.16.1",
-    "vue": "~2.7.14",
-    "vue-i18n": "~8.28.2",
-    "vue-router": "~3.5.1",
-    "vue-sanitize": "^0.2.2",
-    "vuex": "~3.6.2"
+    "@readapt/settings": "^1.7.1",
+    "@readapt/text-engine": "^1.7.1",
+    "@readapt/visual-engine": "^1.7.1",
+    "dotenv": "^16.0.3",
+    "lodash-es": "^4.17.21",
+    "sanitize-html": "^2.8.1",
+    "vue": "~3.2.45",
+    "vue-i18n": "~9.2.2",
+    "vue-router": "~4.1.6",
+    "vue3-promise-dialog": "^0.3.4"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/lodash": "^4.14.179",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^16.18.10",
     "@types/office-js": "^1.0.180",
     "@types/office-runtime": "^1.0.17",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.4",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-plugin-unit-jest": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^27.0.0",
-    "babel-jest": "^27.0.6",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.6.0",
-    "jest": "^27.1.0",
+    "@types/sanitize-html": "^2.8.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.2.8",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.13",
+    "daisyui": "^2.46.1",
+    "eslint": "^8.30.0",
+    "eslint-plugin-tailwindcss": "^3.8.0",
+    "eslint-plugin-vue": "^9.8.0",
+    "jsdom": "^21.1.0",
+    "npm-run-all": "^4.1.5",
     "office-addin-cli": "^1.3.5",
     "office-addin-debugging": "^4.3.8",
     "office-addin-dev-certs": "^1.7.7",
     "office-addin-dev-settings": "^1.10.8",
     "office-addin-lint": "^2.0.0",
     "office-addin-manifest": "^1.7.7",
-    "prettier": "^2.4.1",
+    "postcss": "^8.4.20",
+    "prettier": "^2.8.1",
     "sass": "^1.57.1",
-    "sass-loader": "^12.0.0",
-    "ts-jest": "^27.0.4",
-    "typescript": "~4.9.4"
+    "tailwindcss": "^3.2.4",
+    "terser": "^5.16.1",
+    "typescript": "~4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-static-copy": "^0.13.0",
+    "vitest": "^0.27.0",
+    "vue-tsc": "^1.0.24"
   }
 }
diff --git a/apps/ms-word-addin/postcss.config.js b/apps/ms-word-addin/postcss.config.js
@@ -0,0 +1,8 @@
+/* eslint-env node */
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/apps/ms-word-addin/public/icon-128.png b/apps/ms-word-addin/public/icon-128.png
diff --git a/apps/ms-word-addin/public/icon-16.png b/apps/ms-word-addin/public/icon-16.png
diff --git a/apps/ms-word-addin/public/icon-48.png b/apps/ms-word-addin/public/icon-48.png
diff --git a/apps/ms-word-addin/public/icons/edit.svg b/apps/ms-word-addin/public/icons/edit.svg
diff --git a/apps/ms-word-addin/public/icons/fragments.svg b/apps/ms-word-addin/public/icons/fragments.svg
diff --git a/apps/ms-word-addin/public/index.html b/apps/ms-word-addin/public/index.html
diff --git a/apps/ms-word-addin/src/assets/logo.png → apps/ms-word-addin/public/logo.png b/apps/ms-word-addin/src/assets/logo.png → apps/ms-word-addin/public/logo.png
diff --git a/apps/ms-word-addin/scripts/package-release b/apps/ms-word-addin/scripts/package-release
@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+const pkg = require('../package.json')
+const { execSync } = require('child_process')
+const path = require('path')
+
+const version = pkg.version
+const name = `readapt-chrome-extension-v${version}.zip`
+const distPath = path.join(__dirname, '../dist')
+
+console.log(`package release ${name}...`)
+execSync(`cd ${distPath} && zip -r ${name} .`)
+console.log('package complete!')
+console.log(`Output ${distPath}${name}`)
diff --git a/apps/ms-word-addin/src/app/index.ts b/apps/ms-word-addin/src/app/index.ts
@@ -0,0 +1,3 @@
+import { mountUI } from './mount'
+
+mountUI()
diff --git a/apps/ms-word-addin/src/app/model/useSetup.ts b/apps/ms-word-addin/src/app/model/useSetup.ts
@@ -0,0 +1,7 @@
+import { textPreferencesStatePersist } from '@/entities/textPreferences'
+import { StorageLocal } from '@/shared/lib/storage'
+
+export function useSetup() {
+  const storage = new StorageLocal()
+  textPreferencesStatePersist(storage)
+}
diff --git a/apps/ms-word-addin/src/app/mount.ts b/apps/ms-word-addin/src/app/mount.ts
@@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import App from './ui/App.vue'
+
+import { withOffice } from './providers/withOffice'
+import { withi18n } from './providers/withi18n'
+import { withRouter } from './providers/withRouter'
+
+import './styles/tailwind.scss'
+
+export const mountUI = async () => {
+  const { i18n } = await withi18n()
+  const { router } = withRouter()
+
+  await withOffice()
+
+  const app = createApp(App)
+  app.use(i18n)
+  app.use(router)
+
+  app.mount('#app')
+}
diff --git a/apps/ms-word-addin/src/app/providers/withOffice.ts b/apps/ms-word-addin/src/app/providers/withOffice.ts
@@ -0,0 +1,25 @@
+let promise: Promise<void> | null = null
+
+export const withOffice = async () => {
+  const replaceState = window.history.replaceState
+  const pushState = window.history.pushState
+
+  if (!promise) {
+    promise = new Promise((resolve) => {
+      const script = document.createElement('script')
+      script.src = 'https://appsforoffice.microsoft.com/lib/1/hosted/office.js'
+      script.onload = () => {
+        Office.onReady(() => {
+          // Note: this is a workaround to fix msoffice breaking vue-router
+          // @see https://github.com/OfficeDev/office-js/pull/2808
+          window.history.replaceState = replaceState
+          window.history.pushState = pushState
+
+          resolve()
+        })
+      }
+      document.body.appendChild(script)
+    })
+  }
+  return promise
+}