Merge branch 'main' into ui
This commit is contained in:
commit
35d7cd817f
@ -16,9 +16,10 @@
|
||||
"cd": "pnpm run cd:build && pnpm run cd:push && pnpm run cd:rollout"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuetify/vite-plugin": "1.0.0-alpha.10",
|
||||
"@auth0/auth0-vue": "^1.0.0",
|
||||
"@types/katex": "^0.14.0",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"@vuetify/vite-plugin": "1.0.0-alpha.10",
|
||||
"dependency-graph": "^0.11.0",
|
||||
"install": "^0.13.0",
|
||||
"katex": "^0.15.3",
|
||||
@ -26,8 +27,7 @@
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^3.2.25",
|
||||
"vue-router": "^4.0.14",
|
||||
"vuetify": "3.0.0-beta.0",
|
||||
"@auth0/auth0-vue": "^1.0.0"
|
||||
"vuetify": "3.0.0-beta.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@braks/revue-draggable": "^0.4.2",
|
||||
|
||||
40
src/assets/edit.svg
Normal file
40
src/assets/edit.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612.097 612.097" style="enable-background:new 0 0 612.097 612.097;" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M320.85,151.725l139.6,139.6l-238,237.9l-139.6-139.6L320.85,151.725z M607.65,124.125l-119.7-119.7
|
||||
c-5.9-5.9-15.5-5.9-21.4,0l-104,104l141,141l104-104C613.55,139.525,613.55,130.025,607.65,124.125z M0.55,592.825
|
||||
c-1.4,5.3,0.1,10.9,3.9,14.8c3.9,3.9,9.5,5.4,14.8,3.9l165.5-44.6l-139.6-139.6L0.55,592.825z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 876 B |
@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import {HTMLString} from '../types'
|
||||
import {computed} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
|
||||
@ -8,8 +7,10 @@ const props = defineProps<{
|
||||
size?: 'big' | 'small',
|
||||
}>()
|
||||
|
||||
let displayHtml: HTMLString = props.statement.toHTMLString()
|
||||
computed(() => displayHtml = props.statement.toHTMLString())
|
||||
const getRenderedHTML = () => props.statement.toHTMLString()
|
||||
|
||||
const renderedHtml = getRenderedHTML()
|
||||
computed(getRenderedHTML)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -23,7 +24,7 @@ computed(() => displayHtml = props.statement.toHTMLString())
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div>
|
||||
<div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div>
|
||||
<div v-else v-html="displayHtml"></div>
|
||||
<div ref="container" class="big" v-if="props?.size === 'big'" v-html="renderedHtml"></div>
|
||||
<div ref="container" class="small" v-else-if="props?.size === 'small'" v-html="renderedHtml"></div>
|
||||
<div ref="container" v-else v-html="renderedHtml"></div>
|
||||
</template>
|
||||
|
||||
@ -25,16 +25,32 @@ computed(() => value = getValueStatement())
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="math-statement">
|
||||
|
||||
<div class="content">
|
||||
<Katex :statement="statement" size="big"/>
|
||||
<div class="result" v-if="value">
|
||||
<hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
|
||||
<Katex :statement="value" size="small" style="color: #666"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<button>
|
||||
<img src="../assets/edit.svg" alt="Edit" height="16">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,6 +8,10 @@ import 'vuetify/styles' // Global CSS has to be imported
|
||||
import { createVuetify } from 'vuetify'
|
||||
import * as components from 'vuetify/components'
|
||||
import * as directives from 'vuetify/directives'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import 'katex/dist/contrib/auto-render.min'
|
||||
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
const vuetify = createVuetify({
|
||||
|
||||
@ -284,15 +284,18 @@ export class MathStatement {
|
||||
/** Render the statement as HTML string. */
|
||||
toHTMLString(): HTMLString {
|
||||
return katex.renderToString(this.toLaTeX(), {
|
||||
output: 'mathml',
|
||||
output: 'html',
|
||||
}) as HTMLString
|
||||
}
|
||||
|
||||
/** Render the statement to a DOM element. */
|
||||
toDOM(): HTMLSpanElement {
|
||||
const node = document.createElement('span')
|
||||
toDOM(node?: HTMLElement): HTMLSpanElement {
|
||||
if ( !node ) {
|
||||
node = document.createElement('span')
|
||||
}
|
||||
|
||||
katex.render(this.toLaTeX(), node, {
|
||||
output: 'mathml',
|
||||
output: 'html',
|
||||
})
|
||||
return node
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user