## Chapter 10. The basics

A few things you need to learn before starting to use XMLmind XML Editor Web Edition (XXEW for short).
XXEW is quite straightforward to use but you simply cannot guess how it works. While what you see resembles your typical word processor, XXEW does not work like a word processor, nor like a text editor, neither like other XML editors. Therefore this chapter is really a must read. (Corresponding 5min screencast .)

### Basic concepts

- Patterns looking like this are text placeholders. You can click into (or tab to) such placeholders and start typing.
- The node path bar, found above the document view, indicates what is selected or when there is no explicit selection, the element containing the caret.
- XXEW has 2 different kinds of selection, the text selection and the node selection.
  1. The text selection, which is given a pink background color, works like in any word processor or text editor. Few editing commands apply to the text selection: Paste, Convert. For example, you can convert the text selection to a bold or italic inline element.
  2. The node selection looks different than the text selection: a thin red frame is drawn around the selected nodes. The simplest way to select a node is to click on its name in the node path bar.
     Most editing commands apply to the node selection.
     The node selection may comprise several sibling nodes, for example, two contiguous paragraphs. The easiest way to extend the node selection is to `Shift-click` before or after the thin red frame.
- The element directly containing the caret is always implicitly selected: no thin red frame around it.
  For example if you want to insert a table before a paragraph, first click inside this paragraph (but not inside any of its child elements, as this would implicitly select the child element) then use Insert Before.
  However, if you want to insert a list after a table, you cannot do that using the implicit element selection because a table cannot directly contain some text. You'll have to first explicitly select this table (e.g. by clicking on "`table`" in the node path bar) then use Insert After.
- Notice that the two editing commands mentioned above are Insert Before, Insert After. XXEW also has less commonly used Insert editing command.
  Insert Before
    Insert an element (or a text node) just before the node selection.
  Insert
    Insert an element right here, at caret position.
  Insert After
    Insert an element (or a text node) just after the node selection.

  | ##### Note Note that XXEW does not work like other XML editors. In other XML editors, Insert Before often means "Insert somewhere before selection". Insert often means "Insert somewhere inside selection". Insert After often means "Insert somewhere after selection".

- For the same reasons, XXEW has 3 paste commands and not just one: Paste Before, Paste, Paste After. Unlike Insert, Paste is commonly used and works as expected by replacing the text or node selection with the contents of the clipboard.
- When XXEW, which is a strictly validating XML editor, does not allow you to perform the editing command you want, it's almost always because you didn't select the right element and/or you are not using the right editing command.
  For example, you have clicked inside a paragraph and attempt to use Insert to add a section after it. This cannot work because a paragraph cannot contain a section. Instead, first select the section which is the ancestor of the paragraph (e.g. click "`section`" in the node path bar) then use Insert After (not Insert) and select "`section`" from the list.

### Basic editing commands

What are the basic editing commands and where to find them?

The contextual menu of the node path bar
  In XXEW, most basic editing commands are invoked by selecting an entry of the contextual menu of the node path bar. While clicking an element name or node type (e.g. "`#text`") in the node path bar just explicitly selects this element or node, right-clicking not only selects this element or node but also displays a contextual menu containing all the basic editing commands.
The contextual menu of the text or node selection
  Right-clicking inside the text selection (having a pink background color) or explicit node selection (inside the thin red frame) displays a contextual menu containing all the basic editing commands.
  Note that right-clicking in the document view when there is no text or explicit node selection displays the contextual menu of the web browser. This contextual menu is only useful for fixing a spell-checking mistake using the spell-checker of the web browser.
The toolbar
  The left side of the toolbar is fixed and contains all the editing commands which are generic, that is, not specific to a given document type (e.g. DocBook, DITA Topic, XHTML). Moreover clicking , a small button found at the left of the Edit label, displays a menu which contains even more generic commands.

### Adding images to your document

1. Use Insert Before, Insert, Insert After or, easier, the Picture button often found in the right side of the toolbar to add an element representing an image to your document.
   The image element will be inserted into your document but at first, you'll only see , the blue image placeholder icon.

   | ##### Note An image placeholder icon is given different colors and different tooltips in order to explain its presence: Blue Image file not yet specified. Green Image file specified but could not be displayed, either because the image format is not supported (e.g. EMF) or because the document being edited was opened from a local file (see note about local images). Red An error occurred when attempting to display the image. The image tooltip contains an error message.

2. Specify an image file. There are 3 different methods to do this.
   Double click or right-click the image placeholder icon
     The quickest way to do this is to double click the image placeholder icon (or the image itself if an image file has already been specified) or right-click image placeholder icon and select the "Change Image" entry from the contextual menu. This invokes the "Change Image" command which changes the image file of an image element.

     #### Figure 10-6. the "Change Image" menu entry

     1. You'll first be prompted to choose an image file. The image file chooser being displayed by the "Change Image" command depends on whether the document being edited was opened from a local file or from a remote file.

        #### Figure 10-7. The local image file chooser dialog box

        #### Figure 10-8. The remote image file chooser dialog box

     2. You'll then be prompted to specify whether the chosen image file is to be referenced by the image element or to be embedded(2) in the document.

        #### Figure 10-9. The "Change Image" dialog box

   Alternatively, drop an image file onto the image placeholder icon
     Alternatively, drag an image file and drop it onto the image placeholder icon (or the image itself if an image file has already been specified). This also invokes the "Change Image" command, sparing you the effort of choosing an image file using a dialog box.

     | ##### Note When the document being edited was opened from a remote file, this method is the only way to add to your document an image coming from a local file.

   Alternatively, specify the attribute of the image element pointing to the image file
     Alternatively:
     1. Click inside the image placeholder icon (or the image itself if an image file has already been specified) to select the corresponding image element. The node path bar will show you the name of this element. This image element depends on the type of the document being edited: DITA Topic `<image>`, DocBook `<imagedata>`, XHTML `<img>`.
     2. Use Edit Attributes to specify the attribute pointing to the image file. This attribute depends on the type of the document being edited: DITA Topic `<image>`/`@href`, DocBook `<imagedata>`/`@fileref`, XHTML `<img>`/`@src`.

     | ##### Note When the document being edited was opened from a local file, there is no way to display an image file specified this way. This has already been explained in note about local images. However, after using this method, the blue image placeholder icon will turn to green .

### Related information

‣ Chapter 11. Being productive

(1) | In this example, we'll assume that case a note must contain paragraphs hence a paragraph may not be converted to a note.

(2) | Not recommended for document size and possible interchange problem reasons.