Merge pull request #30 from nextcloud-gmbh/feat/fonts

Properly load fonts

package.json

@@ -45,7 +45,8 @@
     "stylelint-config-css-modules": "^4.4.0",
     "typescript": "^5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.2.11"
+    "vite": "^5.2.11",
+    "vite-plugin-static-copy": "^1.0.5"
   },
   "prettier": {
     "useTabs": true,

src/main.tsx

@@ -19,15 +19,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { StrictMode } from 'react'
+
+import { linkTo } from '@nextcloud/router'
+import { StrictMode, lazy } from 'react'
 import { createRoot } from 'react-dom'
-import App from './App'
 
 import './viewer.css'
 
+window.EXCALIDRAW_ASSET_PATH = linkTo('whiteboard', 'dist/')
+
 const Component = {
 	name: 'Whiteboard',
 	render(createElement: (arg0: string, arg1: { attrs: { id: string } }, arg2: string) => any) {
+		const App = React.lazy(() => import('./App'))
 		this.$emit('update:loaded', true)
 		const randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
 		this.$nextTick(() => {

vite.config.ts

@@ -3,14 +3,13 @@
 
 import { createAppConfig } from '@nextcloud/vite-config'
 import react from '@vitejs/plugin-react'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { defineConfig } from 'vite'
 
 const AppConfig = createAppConfig({
 	main: 'src/main.tsx',
 }, {
-	plugins: [react({
-		jsxRuntime: 'classic',
-	})],
-	config: {
+	config: defineConfig({
 		css: {
 			modules: {
 				localsConvention: 'camelCase',
@@ -24,7 +23,20 @@ const AppConfig = createAppConfig({
 		esbuild: {
 			jsxInject: 'import React from \'react\'',
 		},
-	},
+		plugins: [
+			react({
+				jsxRuntime: 'classic',
+			}),
+			viteStaticCopy({
+				targets: [
+					{
+						src: './node_modules/@excalidraw/excalidraw/dist/excalidraw-assets/*',
+						dest: './dist/excalidraw-assets',
+					},
+				],
+			}),
+		],
+	}),
 })
 
 export default AppConfig