Lurch web app user interface

Module

Atoms

In a Lurch document, certain sections will be marked as "atoms." These may be an inline section represented by an HTML span or a block section represented by an HTML div. Atoms have the following properties.

  1. The user cannot directly edit their content. Rather, the application determines how the atom appears in the document. (There are also meaningful sections of the document that are not indivisible in this way; see the Shells module.)
  2. The user can indirectly edit the atom's content by clicking on it and interacting with whatever dialog the application pops up in response.
  3. There can be many different types of atoms. For example, one atom may be a mathematical equation while another atom adds an attribute to the document that contains it; these are two different types, and there will be other types as well. The type is stored as an attribute of the atom's HTML element.
  4. Each atom will typically have some meaning that will be important when the document is processed in a mathematical way.

Atoms are represented in the document by spans and divs with a certain class attached to mark them as atoms, and they are also have their contenteditable property set to false, which TinyMCE respects so that the user cannot edit their content (though they can cut, copy, paste, or delete them).

This module contains tools for working with atoms, including the class name we use to distinguish them, the function we use to install their event handlers, and most importantly, the class we use to create an API for working with individual atoms.

See

Source

Classes

Atom

Members

staticconstant

className

Class name used to distinguish HTML elements representing atoms. (For an explanation of what an atom is, see the documentation for the module itself.)

Source

Methods

static

install(editor)

This function should be called in the editor's setup routine. It installs a single mouse event handler into the editor that can watch for click events to any atom, and route control flow to the event handler for that atom's type. It also installs a keydown event handler that watches for the Enter key being pressed on an atom, and routes control flow to the event handler for that atom's type.

Second, it installs an event handler that calls every atom's update handler whenever the editor's content changes. This could be slow if there are many atoms in the document, and therefore we use the forEachWithTimeout() function to let these handlers run only when the UI is idle. We have found this to be necessary, because some atoms (especially those whose representation is generated from MathLive) are not always typeset correctly the first time that their HTML is placed into the atom. For some reason, the stylesheet does not seem to apply correctly until the second insertion of the typeset HTML.

Finally, it installs a context menu function that may create a custom context menu if the user right-clicks on an atom in the document.

Parameters

  • editor tinymce.Editor

    the editor in which to install the event handlers

Source