Lurch web app user interface

Namespace

Lurch

This namespace is installed globally when importing editor.js. It allows the client to customize the behavior of the Lurch app, then install that app wherever in their page they want it installed.

To customize the default settings for the application and any documents it loads, see setAppDefaults() and setDocumentDefaults(). To create an instance of the Lurch app on your page, see createApp().

Methods

static

createApp(element, optionsnullable) → {Promise}

This is the main function that is to be used by clients. It creates an instance of the Lurch app in any element on the page. Typically, one calls this on a textarea to be used as the editor, or on a DIV into which you want this function to automatically create a new texteditor to use as the base for the app.

It returns a Promise that resolves when TinyMCE (the underlying editor technology on which Lurch is built) has completed its setup phase (though the editor instance may not yet have had its init event called). The resolve call will be passed the new TinyMCE editor instance.

The options object can have any subset of the following fields:

  • options.menuData will be used to override default menus. The format is the same as it is for TinyMCE menu specifications.
  • options.menuItems will be used to override the attributes of the menu items that Lurch adds to TinyMCE. (This does not apply to built-in TinyMCE menu items, like headings and undo and so forth, only to Lurch menu items like inserting math or environments, showing feedback, etc.) The format is a mapping from internal menu item names (e.g., "expositorymath") to an object containing attributes to override. For example, to change the text of the "expositorymath" menu item from "Expository math" to "LaTeX", use the code "menuItems": { "expositorymath": { text: "LaTeX" } }. All other menu item attributes are also available, including "text", "icon", "shortcut", and "tooltip". Even the menu item's action can be overridden in this way by specifying "onAction": myFunction, except when loading these options from a configuration file in JSON format, because that format does not support functions.
  • options.toolbarData will be used to override default toolbars. The format is the same as it is for TinyMCE toolbar specifications.
  • options.editor will be used to override anything passed to TinyMCE's init() call. This is inherently stronger than the previous two combined, because menu and toolbar data is part of what is passed to the init() call, but it can be cumbersome to override the entire menu or toolbar setup, and thus the previous two options are available for overriding just pieces of them. E.g., you can provide menuData as { 'file' : { ... } } and it will affect only the file menu, because it is incorporated into the defaults using Object.assign().
  • options.preventLeaving enables or disables the feature that prompts the user to confirm before leaving the page, so that they do not lose their work by accidentally reloading the page or closing a tab. If this value is not set, the default is true for the main app and false for embedded version of the app (e.g., in our documentation site, where users typically are not creating documents they care to save).
  • options.fileOpenTabs can be used to reorder or subset the list of tabs in the File > Open dialog box, which defaults to [ 'From in-browser storage', 'From your computer', 'From the web', 'From Dropbox', 'From my course' ]. Each of these corresponds to a subclass of the FileSystem class, and those are (respectively) BrowserFileSystem, OfflineFileSystem, WebFileSystem, and MyCourseFileSystem.
  • options.fileSaveTabs can be used to reorder or subset the list of tabs in the File > Save dialog box, which defaults to [ 'To in-browser storage', 'To your computer', 'To Dropbox' ]. See above for documentation on the relevant FileSystem subclasses.
  • options.fileDeleteTabs can be used to reorder or subset the list of tabs in the File > Delete dialog box, which defaults to [ 'In in-browser storage', 'In Dropbox' ]. See above for documentation on the relevant FileSystem subclasses.
  • options.helpPages can be an array of objects of the form { title : '...', url : '...' }. These will be displayed in the help menu (which is omitted if no such pages are provided) in the order they appear in this option. Clicking any one of them just opens the URL in a new window. This allows each Lurch installation to have its own custom set of help pages for students or other users.
  • options.autoSaveEnabled enables or disables the feature of auto-saving the user's work into the browser's local storage every few seconds. This is true (enabled) by default for the main app, but false by default for embedded copies of the app. You can use this setting to change that default.
  • options.appRoot can be a relative path from the index.html file to the root of the repository in which editor.js is located. If you are using the index.html provided in the Lurch repository, then you do not need to provide this path, and it will default to '.', which is correct. If your HTML page is in a different folder than this repository, you will need to provide the path from the HTML page to the repository. This is essential so that the app can find CSS and JS files in the repository to load programmatically as needed.
  • options.appDefaults can be a dictionary that overrides the default application settings. Doing so may not affect the experience of a user who has already customized their own application settings, because this set of key-value pairs supplies only the default settings. The user's chosen settings naturally override the defaults. To see which keys and values are available, see the settings installer module, and view the source code for the appSettings object.
  • options.documentDefaults can be a dictionary that overrides the default document settings. Doing so may not affect the experience of a user who loads a document that includes its own settings, because this set of key-value pairs supplies only the default settings. The current document's settings naturally override the defaults. To see which keys and values are available, see the document settings metadata in the LurchDocument class.
  • options.myCourse can be a hierarchical structure that will be used to populate the contents of the "My course" file system. See the documentation of the MyCourseFileSystem class for details.
  • options.documentStylesheets can be an array of URLs that will be appended to the TinyMCE editor's list of stylesheets for the document (named content_css in TinyMCE).

The options object is stored as an appOptions member in the TinyMCE editor instance once it is created, so that any part of the app can refer back to these options later.

Parameters

  • element HTMLElement

    the element into which to install the app

  • options Object <nullable>

    the options to use for the new app

Returns

  • Promise

    a promise that resolves as documented above

Source