mathlive
mathlive copied to clipboard
Published
20 hours ago •
arnog
arnog
Use vue3 + vite + mathlive in dev mode. Have fonts and sounds 404 error.
I work in vue3 + vite environment
package.json
{
"name": "vue_src",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@bokeh/bokehjs": "^2.4.3",
"mathbox": "^2.2.0",
"vue": "^3.2.37",
"mathlive": "^0.77.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vue-tsc": "^0.38.4",
"vue": "^3.2.37"
}
}
npm create [email protected] vue_src npm run install npm run dev
I set my custom fonts directory, but it isn't work
fontsDirectory doesn't rewrited
And how to set right DEFAULT fontsDirectory (as global)
App:
```vue
<script setup lang="ts">
</script>
<template>
<div>
My Site </div>
<mathlive-mathfield ref="functionEl" :options="{virtualKeyboardMode:'onfocus', smartFence:false, fontsDirectory:'./fonts'}">1\frac{2}{4}</mathlive-mathfield>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
MathliveField.vue:
<script>
export default {
name: 'mathlive-mathfield',
props: {
id: {
type: String,
default: '',
},
value: {
type: String,
default: '',
},
options: {
type: Object,
default: () => ({}),
},
onKeystroke: {
type: Function,
default(_keystroke, _ev) {
return true;
},
},
onMoveOutOf: {
type: Function,
default(_direction) {
return true;
},
},
onTabOutOf: {
type: Function,
default(_direction) {
return true;
},
},
},
/*
* To register this component, call:
* ```
* import * as MathLive from './mathlive.mjs';
* import MathfieldComponent from './vue-mathlive.mjs';
* Vue.use(MathfieldComponent, MathLive);
* ```
*
* The HTML tag for this component is `<mathlive-mathfield>`
*
* @param {object} vue - This module, as returned from an import statement
* @param {object} mathlive - The MathLive module, as returned from an import
* statement
*/
install(vue, mathlive) {
// When the component is installed (with Vue.use()), the first argument
// should be the component (as received from import) and the second
// should be the MathLive module (also as received from import).
// The MathLive module then gets stashed as a property of the Vue
// object to be accessed later by the component implementation.
// This allows the user of the component to control which version of
// the MathLive module gets used.
if (vue?.version && +vue.version.split('.')[0] >= 3) {
// Vue >= 3.x
vue.config.globalProperties.$mathlive = mathlive;
} else {
// Vue < 3.x
Object.defineProperty(vue.prototype, '$mathlive', { value: mathlive });
}
vue.component('mathlive-mathfield', this);
},
watch: {
value(newValue, _oldValue) {
// When the `value` prop (from the model) is modified
// update the mathfield to stay in sync, but don't send back content
// change notifications, to avoid infinite loops.
const oldMathfieldValue = this.$el.getValue();
if (newValue !== oldMathfieldValue) {
this.$el.setValue(newValue, {
suppressChangeNotifications: true,
});
}
},
options: {
deep: true,
handler(newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue))
this.$el.setOptions(newValue);
},
},
},
mounted() {
// A new instance is being created
// Wait until the DOM has been constructed...
this.$nextTick(() => {
// ... then configure the mathfield
this.$el.setOptions({
...this.options,
// To support the 'model' directive, this handler will connect
// the content of the mathfield to the ViewModel
onContentDidChange: (_) => {
// When the mathfield is updated, notify the model.
// The initial input value is generated from the <slot>
// content, so it may need to be updated.
this.$emit('input', this.$el.getValue());
},
// Those asynchronous notification handlers are translated to events
onFocus: (_) => {
this.$emit('focus');
},
onBlur: (_) => {
this.$emit('blur');
},
onUndoStateDidChange: (_, command) => {
this.$emit('undo-state-did-change', command);
},
onReadAloudStatus: (_, status) => {
this.$emit('read-aloud-status-change', status);
},
// Those notification handlers expect an answer back, so translate
// them to callbacks via props
onKeystroke: (_, keystroke, ev) => {
return this.onKeystroke(keystroke, ev);
},
onMoveOutOf: (_, direction) => {
return this.onMoveOutOf(direction);
},
onTabOutOf: (_, direction) => {
return this.onTabOutOf(direction);
},
});
});
},
methods: {
/*
*
* @param {string} selector
*/
executeCommand(selector) {
this.$el.executeCommand(selector);
},
/*
* @return {boolean}
*/
hasFocus() {
return this.$el.hasFocus();
},
focus() {
this.$el.focus();
},
blur() {
this.$el.blur();
},
getValue(format) {
return this.$el.getValue(format);
},
insert(text, options) {
this.$el.insert(text, options);
},
select() {
this.$el.select();
},
},
}
</script>
<template>
<math-field :id="id"><slot></slot></math-field>
</template>
Result in browser:
downloadable font: download failed (font-family: "KaTeX_Main" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Main-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Main" style:italic weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Main-BoldItalic.woff2
downloadable font: download failed (font-family: "KaTeX_Main" style:normal weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Main-Bold.woff2
downloadable font: download failed (font-family: "KaTeX_Main" style:italic weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Main-Italic.woff2
downloadable font: download failed (font-family: "KaTeX_Math" style:italic weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Math-Italic.woff2
downloadable font: download failed (font-family: "KaTeX_Math" style:italic weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Math-BoldItalic.woff2
downloadable font: download failed (font-family: "KaTeX_AMS" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_AMS-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Caligraphic" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Caligraphic-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Caligraphic" style:normal weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Caligraphic-Bold.woff2
downloadable font: download failed (font-family: "KaTeX_Fraktur" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Fraktur-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Fraktur" style:normal weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Fraktur-Bold.woff2
downloadable font: download failed (font-family: "KaTeX_SansSerif" style:italic weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_SansSerif-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_SansSerif" style:normal weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_SansSerif-Bold.woff2
downloadable font: download failed (font-family: "KaTeX_SansSerif" style:italic weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_SansSerif-Italic.woff2
downloadable font: download failed (font-family: "KaTeX_Script" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Script-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Typewriter" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Typewriter-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Size1" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Size1-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Size2" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Size2-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Size3" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Size3-Regular.woff2
downloadable font: download failed (font-family: "KaTeX_Size4" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:5173/node_modules/.vite/deps/fonts/KaTeX_Size4-Regular.woff2
The fontsDirectory is relative to the location of the mathlive library. In your case, ./fonts resolves to http://localhost:5173/node_modules/.vite/deps/fonts.
As part of your build process you need to copy the fonts to this location.
Alternatively, you could host the fonts in a folder at the root of your project, i.e. /assets/fonts/, which would resolve to http://localhost:5173/assets/fonts. You would also need to copy the fonts to this directory as part of your build process.
