A wrapper around MathQuill, a very intuitive math typing editor
npm i -D svelte-mathquill
Add this to your +layout.svelte
or any wrapper file where you use MathQuill:
<script>
import { MathQuillSetup } from 'svelte-mathquill';
</script>
<MathQuillSetup />
This injects jQuery and MathQuill (+ styles) into the head of the document, to begin using MathQuill in your components.
Simple example:
<script lang="ts">
import { MathQuill } from 'svelte-mathquill';
let latex = '';
</script>
<MathQuill bind:latex="{latex}" />
<br />
<input bind:value="{latex}" />
autofocus: boolean
- if the element should focus on mount
latex: string (bindable & updates)
- the content of the element
noBorderOutline: boolean
- if styling should be applied to remove borders / outlines. Only use if you have a wrapper that's styled (outlines help accessibility!)
class: string
- classes to apply to the math element
config: MathQuillConfig (updateable)
- Apply a config to the element.
Triggers when the text is edited: on:edit={latex => ...}
Triggers when the enter key is pressed: on:enter={() => ...}
Triggers when the up arrow is pressed: on:upOutOf={() => ...}
Triggers when the down arrow is pressed: on:downOutOf={() => ...}
Triggers when the right / left arrows are pressed: on:moveOutOf={("L" | "R") => ...}
Triggers when the content is selected out of: on:selectOutOf={("L" | "R") => ...}
Triggers when the content is deleted: on:deleteOutOf={("L" | "R") => ...}
Triggers when any out of is triggered: on:outOf={("L" | "R" | "U" | "D") => ...}
Triggers when any out of is triggered WITHOUT deleteOutOf: on:outOfOnly={("L" | "R" | "U" | "D") => ...}
Focus the element: mathQuillElement.focus()
Unfocus the element: mathQuillElement.blur()
Refresh the element: mathQuillElement.reflow()
Select the current element: mathQuillElement.select()
Clear any active selection: mathQuillElement.clearSelection()
Mimic a keystroke (ex Shift-Left): mathQuillElement.keystroke(string)
Type Text: mathQuillElement.typedText(string)