You can access a document in edit mode in two ways:

• in the document dashboard, select the Inline edit item in the Action menu for your document
• from the View page of your document, select the Inline edit item in the View menu

Apart from some initial code, most of this documentation was written interactively using the Inline Editor.

Note: before reading what follows, make sure you have understood the help text about the Documents Live workflow and the internal model.

To edit an element, hover over it. In most of the cases, clicking on the elemnt will open the editor for that content.

In some cases, there may be several elements stacked on top of each other. To select the right element, hover on the content and watch the tooltips that appear. They indicate which kind of element you will edit. When you are satisfied with the element type, just click to open the editor.

Here is a screenshot.

Pan/Zoom

Note: if you click on a section title, this will collapse/expand the corresponding section. This functionality is active to let you to organize your work space. To open a section in the Inline Editor, press the alt/option key while clicking on the section title. This will edit the section.

If you click the Edit button, this will open the Inline Editor for the selected object. Here we have opened the editor for this very paragraph. Here is the screenshot.

Pan/Zoom

3.1 The editor panes

3.2 The code editor

Th code editor has two parts: on top is the toolbar, and below is the code editor itself. The editor is powered by Ace .

3.2.1 The toolbar

The left part is devoted to the search and replace operations. At its right is a collection of LaTeX-related editing buttons. Finally, at the right, you have the Inline Editor dropdown menu that lets you perform top-level operations related to the Inline Editor.

3.2.1.1 Search and replace

The input field on the left is where you enter the string you are looking for. The search is case-sensitive. To launch the search, click on the magnifier icon next to it. Pressing the enter/return key will not initiate the search. Actually, the keyboard action is first intercepted by the browser which, in this case, will reload the page. Doing so would lose your unsaved changes.

You can initiate four types of searches:

• standard search
• case insensitive search
• use a regular expression
• seach for a whole word

When you have found your first match, hit Ctrl-K (Windows/Linux) or Command-G (Mac) to search for the next occurence.

At the right of the replace field are two search and replace buttons. The first one will do a single search and replace operation. Hitting it repeatedly will repeat the process for the next occurences. The second button performs a global search and replace.

3.2.1.2 LaTeX tools

Here is a quick description of the LaTeX related dropdown menus, as seen in figure 2.

• This dropdown menu lets you insert a sectioning command. If some text was selected before performing the action, it will be used as the parameter of the sectioning command, i.e., the section title. This is a general behavior (when applicable) of the LaTeX editor actions.
• This lets you style the selected text.
• gives you access to some common LaTeX commands.
• gives you access to some common LaTeX environments.
• gives access to Documents Live specific commands. The environment action creates an environment whose name is the selected text. For instance, to create a verbatim environment, type verbatim in the editor, select the word, and use the environment action on it.
• is dedicated to Documents Live styling commands fo the web (borders, margins, etc...)

3.2.1.3 Keyboard shortcuts

Keyboard shortcuts are available in all of LaTeX editors. Make sure you are editing code, or the shortcut may have undesirable results. Most of the shortcuts apply to the selection, if any. Here is a list.

Ctrl/Cmd M	inserts \item
Ctrl/Cmd L	inserts/makes a label
Ctrl/Cmd R	inserts/makes a reference
Ctrl/Cmd I	applies italic style
Ctrl/Cmd B	applies bold style
Ctrl/Cmd E	makes an environment out of the selection
Ctrl/Cmd shift C	inserts/make a caption

3.2.1.4 Editor help

The question mark reveals help for the editor.

3.2.1.5 The Edit dropdown menu

Below is a snapshot of the Edit menu in context.

Pan/Zoom

Here are the actions available

• Render This renders the current code in the top render pane. This lets you preview if the output of your code will be correct.
• Revert to saved This reset the editor state to the HTML and LaTeX code corresponding to the last save.
• Close This closes the Inline Editor. You cannot have to editors open at the same time. This will not reload the page. To recover the saved HTML version of the document, just reload the page.
• Save to model This saves the currently edited object to the model. The next Revert to saved action wil revert to this.
• Save to model and update HTML This saves the currently edited object to the model and to HTML. This only modifies the part of the document that correspond to the edited objects. The next Revert to saved action wil revert to this.
• Export model to HTML This exports the saved model to HTML and reloads the page. This is a global export to HTML, you should avoid it on large documents.

3.2.2 The editor

The editor is Ace .

It has a full undo/redo system.

It has an excellent syntax coloring for LaTeX code. We use the Cobalt theme.

You can navigate using the arrow keys.

It is quite helpful with delimiters. For the parentheses, curly braces and bracket delimiters, it will create an open/close pair when typing the opening character. It will enclose the selection (if present) with the chosen delimiter pair. Clicking near an opening delimiter will reveal the scope of it.

It also has a auto-complete feature.

A full list of Ace’s default shorcuts in available in the Documents Live online help .

Chosing the Render menu item of the Edit dropdown menu will render the Web version of the current code that is in the editor. This gives you an instant preview of what your code will produce.

Render does not alter your data in any way. It just generates HTML code from the code in the editor and renders it in the top pane of the Inline Editor. Most of the Documents Live functionalities are available in the preview, including reference inclusion, etc....

When you are in edit mode, there are two ways to save your work. The first one consists in saving from the Inline Editor itself.

The second one is accessed by selecting the Backup... item from the Edit menu.

5.1 Save and restore from the Inline Editor

5.2 Use the backup system

5.2.1 Saving

When using the Backup... menu item, you will be prompted for a description of the work that was done between the previous backup and now.

After hitting the Save button, a number of tasks will be executed:

1. the model will be exported to LaTeX code
2. the body of the code i.e., what stands between the opening \begin{document} statement and the closing \end{document} statement will be save as a backup file on the server
3. create a backup in the database of the model in its current state, together with the description and backup timestamp
4. insert the computed body into the LaTeX source code and save it to the database

As a summary, three kinds of backups are performed: the model is saved, the LaTeX code is saved to a file, and the LaTeX code is saved to the database.

Subsequently, if you compile the document into a web page, the latest backup code will be used. Note that an initial backup is performed when the document is created.

5.2.2 Restoring

You can access your backups by using the Manage backups menu item in the Edit menu. After that, you are presented with list of your backups. For each backup, you can

• view the backup LaTeX code (which cannot be modified)
• revert the LaTeX code to the previous version
• revert both the code and the model to the previous version
• delete the backup

Pan/Zoom

Both revert operations restore the LaTeX code. The second one also restores the model, which spare you the work of re-creating the model. This can be useful for large documents for which the import process may be complicated.

Important: the restore operations work globally, by contrast to the restore operation in the Inline Editor, which is limited to the scope of the object being edited.

5.2.3 Versioning

From the right sidebar, drag and drop the "Versioning" block to the element you wish yo inspect. here is a screenshot.

Pan/Zoom

You card read the original version in the editor in the left pane, and edit the current version in the right editor pane.

Or, instead of checking the version, you can directly select a version that you wish to restore.

Not that, by contrast to common versioning tools such as git, the Documents Live versioning system lets you act at the object level, which is totally different from classical versioning sytems when you must review the full length of the code, which can be quite tedious.

6.1 Create objects

You can create objects simply by drag and drop. In the "Builder" section of the sidebar, drag a object type block to its destination in the document view. When the drag action begins, available targets in the document will have a blue dashed border. Here is a screenshot.

Pan/Zoom

6.2 Delete objects

To delete an object, drag from the right sidebar the "Delete" block to the document object you wish to delete. Here is a screenshot.

Pan/Zoom

6.3 About HTML update

One of the powerful features of LaTeX (and Documents Live) is its ability to manage cross-references.

But, how can one find the label for a reference when you are in edit mode and it is hidden from view?

Be re-assured that you do not have to look for the label inside your source code.

Before fetching labels interactively, the label fetching must be enabled. This can be done in two ways

• you are in edit mode and the Inline Editor is open
• you are viewing the page in ordinary display mode, but, in the status at the bottom of the page, the status bar has the Fetch labels checkbox activated (see below).

Pan/Zoom

Once this mode is activated, when clicking anywhere in the view, a list of document objects that contain the clicked object will be created, very much like when a list was created before editing an object.

Important: the list will display only objects which can be referenced by some text. This the text that will be displayed as “link” to the reference. For instance, a numbered object can be referenced. A running text paragraph cannot be.

After selection, the browser will put the object reference into the clipboard. Paste the result into a \ref command and you are good to go!

Note that there are two kinds of reference code:

• objects that have a \label will return the label
• The other objects will return the ID of the object in the Documents Live system.

In the object list, objects which have a label have a tag emoji 🏷️ next to the object item

Since it is unlikely that a label be modified inside a document, the label response is more robust than the object ID.

Below is a screenshot that shows the object list in this vary section.

A paragraph was clicked in the section while label fetching was enabled. The paragraph itself has no identifier, so it is not listed. The section itself has a label (it is cross-references). Above that is the document itself, which is not referenced by a sign.

Pan/Zoom

Clicking “Select” will copy the label to the cliboard and you will be notified of the operation success.

Pan/Zoom

Actually, when looking for a reference, you are not limited to the current document. You can go to another document view, and thanks to a cookie that say that you are in a label fetching mode, you will be able to fetch labels from another document. Once the reference label or ID is in your clipboard, you can paste it into a \ref{} command inside the editor, and it will work.

Note: if it happens that you cannot fetch labels, check the corresponding box in the status bar at the bottom of the page to enable the fetch label behavior.

In edit mode, just above the document title, there is a search bar that works a bit differently from usual search. Instead of looking for text in the web page, it looks for content in the document model.

What is returned is a list of matches, each consisting of two lines

• a breadcrumb that represents the object hierarchy above the match
• an extract of the text where the match was found, with the match highlighted

Pan/Zoom

The model search is useful when looking for data that is not visible in the web page render. Here are some examples of usages

• search for a label: the search result will return where the label was found (and it is probably attached to the object itself)
• search for math content
• If the text is a parameter of a LaTeX command, the search will find it

Clicking on any segment of the breadcrumb will open an inline editor to the corresponding object.

Pan/Zoom