https://github.com/leodog896/svelte-mathquill

MathQuill wrapper for Svelte
https://github.com/leodog896/svelte-mathquill

latex libary mathquill npm svelte svelte-component wrapper

Last synced: 1 day ago
JSON representation

MathQuill wrapper for Svelte

• Host: GitHub
• URL: https://github.com/leodog896/svelte-mathquill
• Owner: LeoDog896
• License: mit
• Created: 2022-06-15T12:09:30.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-23T18:35:52.000Z (8 months ago)
• Last Synced: 2024-04-24T16:10:08.244Z (7 months ago)
• Topics: latex, libary, mathquill, npm, svelte, svelte-component, wrapper
• Language: Svelte
• Homepage: https://leodog896.github.io/svelte-mathquill/
• Size: 730 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# [svelte-mathquill](https://leodog896.github.io/svelte-mathquill)

[![npm](https://img.shields.io/npm/v/svelte-mathquill)](https://npmjs.com/package/svelte-mathquill)

A wrapper around MathQuill, a very intuitive math typing editor

`npm i -D svelte-mathquill`

## Usage

Add this to your `+layout.svelte` or any wrapper file where you use MathQuill:

```html

	import { MathQuillSetup } from 'svelte-mathquill';

```

This injects jQuery and MathQuill (+ styles) into the head of the document,

to begin using MathQuill in your components.

Simple example:

```html

	import { MathQuill } from 'svelte-mathquill';

	let latex = '';




```

## Documentation

### Properties

`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.

### Events

Triggers when the text is edited: `on:edit={latex => ...}`

Triggers when the enter key is pressed: `on:enter={() => ...}`

#### Direction Events (L(eft) | R(ight) | U(p) | D(own))

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") => ...}`

### Functions

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)`