Tutch Component

A CodeMirror component for Tutch.

Creating a Tutch component

A Tutch component is created by passing in a host element that will host the component, a url where the tutch-worker javascript file is located, and an instance of the CodeMirror library.

import Tutch from 'tutch';

Tutch({
    host: document.getElementById('host'),
    url: '/worker.js',
    codemirror: CodeMirror,
});

In addition, there are a number of optional arguments:

• text: string - the initial text in the editor
• onSuccess: (justs: Justification[]) => void - A callback called whenever Tutch successfully parses and check a file.
• onError: (errorMessage: string, loc: SourceLocation | null) => void - A callback called whenever Tutch runs into a syntax error
• onUpdate: (text: string) => void - A callback called whenever the text inside the editor changes

Styling a Tutch component

The component will only look right if you include the CSS file for CodeMirror in your code and give styles to the following four classes:

• TutchSyntaxError - Style for syntax errors
• TutchJustified - Style for propositions that are justified
• TutchNotJustified - Style for propositions that are not justified

A example and reasonable set of defaults are at demo/tutch.css.

Demo

You can see the component in action by downloading this repository, running

npm i
npm start

and going to http://localhost:8080/.