Work with PRE elements to preserve spaces

A developer came with a question about editing using code in Xopus. They were making a WIKI and on some of the page they wanted to show code examples. Code always benefits greatly from readability, and a part of that readability is the use of spacing and indentation. In Xopus, when pasting, these spaces and indentations are often lost because of the code to resolve the pasted information. So we created a workaround.

In the schema of the <codeblock> element we added a required attribute called 'lookup'. The schema further specifies the element as containing text.

Then we configured this attribute in Xopus to open a lookup page. This can be configured in such a way that Xopus always opens for the element when added. The value type is not actually important.

  <x:lookupConfig>
    <x:lookup
       parentPattern="self::codeblock"
       name="lookup"
       url="/paste.html"
       forceLookup="true"
       autoOpen="false"/>
...
</x:lookupConfig>

The lookup page itself, paste.html in the above example is a very simple page that contains a textarea and a button. The textarea allows the use to paste any text, indentation and spaces included, and makes sure the pasted stuff contains nothing strange.

<body onload="getCurrentData()">

  <textarea id="codepaste"></textarea>

  <button onclick="doPaste()">ok</button>

Onload we execute the following code in the lookup-page. (This page should contain the lookup.js which can also be found referenced in the Simple Demo example's image or link lookup pages.

function getCurrentData()
{
  var text = top.dialogArguments.node.getTextContent();
  document.getElementById("codepaste").value = text;
}

This makes sure that whatever is in the codeblock gets set into the textarea. Next we make the doPaste function which writes the value on the node.

function doPaste()
{
  var node = top.dialogArguments.node;
  var text  = document.getElementById("codepaste").value;
  node.setTextContent(text);

  top.choose("lookup","true");
}

The last line closes the lookup page and sets the required attribute to a valid value. The XSL for the codeblock element can be enriched with a button or link to open the attributes editor when someone wants to change the value.

<xsl:template match="codeblock">
  <pre>
    <xsl:apply-templates/>
  </pre>
  <button onclick="node.openAttributesEditor()">edit</button>
</xsl:template>

Xopus may not always display the pasted spaced, indents and enters correctly, but they are there in the XML, and can thus be used to show the code as it was written.

Documentation
› How To
› Work with PRE elements to preserve spaces