How can I combine placeholder and template in my config?

Most of the elements in my schema are inserted with placeholders, e.g.

<x:node match="para">
  <x:role>paragraph</x:role>
  <x:placeholder>New {name}</x:placeholder>
</x:node>

When the user inserts a para, they see a red New para highlighted and typing in the paragraph will replace this. It's nice.

I have some elements which require a couple of attributes to be supplied; they're fixed in the schema but the Xopus editor does not force them when a user creates a new element. I can get around this by using a template, e.g.

<x:node match="code">
  <x:templates>
    <x:template formatted="Y" xml:space="preserve">
    </x:template>
  </x:templates>
</x:node>

Ideally I would include a placeholder in the template and have the user see New code when they inserted this element. Unfortunately the content of a placeholder is inserted as ordinary text, so it isn't replaced when the user starts typing in the element.

With no placeholder the element has a tendency to disappear completely, and the user has to be very careful positioning the cursor.

Parents
  • To clarify the last sentence above, if the user inserts a code element and starts typing, the code element is replaced by the text they type. The only way to insert a code element is to switch to visible tag view, insert the element, click within the code element to unselect it, and then type. When I explain this to a user their first response is going to be "that's ridiculous", and it is.
  • Hi Trevor!

    I believe you defined placeholder inside template and that is why it is shown as regular text.

    <x:node match="code">
    <x:templates>
    <x:template formatted="Y" xml:space="preserve">
    <x:placeholder>New {name}</x:placeholder>
    </x:template>
    </x:templates>
    </x:node>

    If you define it on node level it should work as expected:

    <x:node match="code">
    <x:templates>
    <x:template formatted="Y" xml:space="preserve">
    </x:template>
    </x:templates>
    <x:placeholder>New {name}</x:placeholder>
    </x:node>
     

    Please also compare to the way we implemented codeblock element in this example.

  • In the foregoing, "code" is an inline element for words or expressions embedded in a paragraph. We have an element equivalent to your "codeblock", which in our schema is named "fragment". A placeholder on the node for fragment behaves differently: when I insert a new fragment several lines open up and "new fragment" is displayed right aligned on the last line. The characters "new fragment" disappear as soon as I start typing, but lots of trailing tabs and spaces are left in the element when I click out of it.

    Your codeblock is much simpler than ours, and in fact if we could get the right behaviour we wouldn't need the template at all. I can't check your fiddle because it's not possible to save the xml and check whether or not newlines are preserved in the codeblock - when we were developing under Xopus 4.something we found that despite the xml:space="preserve" in our schema all the text in our fragments was being collapsed when the document was saved. Hence some extra engineering. Maybe that's unnecessary now.

  • if the placeholder is shown, the element disappears when user starts typing, but it shows when you activate tags in view, it means the element is there.

    I don't know how your xsl looks like, but maybe you should look into the xsl instructions that process the code element. Wrap the content in a <span> element and give it some visibility using css, changing the font or something like that. Hope it helps.
  • The xsl is simple:

    <xsl:template match="code">
      <span class="code"><xsl:apply-templates /></xsl:span>
    </xsl:template>

    I know the element is there, but after the placeholder appears the selection includes the entire element so that if I press a key it replaces the element rather than just replacing the placeholder. If before typing a character I click in the middle of the placeholder, and then type, the placeholder disappears and the newly typed text is styled as a code element, hooray. But it contains trailing spaces which don't disappear and which aren't quite there. If I click after the newly populated code field and use the cursor left key to move the cursor backwards in the field it follows a strange path: end of field, down the page half a line, no movement, no movement, no movement, no movement, no movement, up half a line, back one character to the end of the text I typed.

    I'll try and put it in a xopusfiddle and see if I can reproduce it there.

  • Have a look here: http://xopusfiddle.net/2hcrT/7/

    It's not behaving identically to the example I'm working on in my app but it's broken just as badly and I suspect there's the same basic issue behind it.

  • I don't know what the problem with the template is, but if you remove it and add the "preformatted" role, the code element behaves as expected, showing the placeholder and preserving line breaks. White spaces are not preserved because Xopus collapses them by default, I think.

    The fragment element seems to work fine straight from your fiddle (I'm on Chrome using Xopus 5.4.2)
  • 1. Position yourself after the bracket at the end of the penultimate paragraph. Click + in the toolbar and insert code fragment. The code fragment box appears - no placeholder - type in some text - note that there is an extra line of spaces that you have to delete. After messing around for a bit it looks like a newline and 6 whitespace characters are pre-loaded into the fragment regardless of what the placeholder is.

    2. Right-click in the word "variable" in the paragraph before the first fragment, and insert variable. The word variable is formatted as a variable and I can see variable in the "breadcrumbs". Click to put the cursor in a gap between words, click the + in the toolbar and insert variable. A variable element opens with a placeholder, and if you type it is formatted correctly as a variable.

    3. Right-click in the word "code" in the same paragraph, and insert code. Nothing happens. Click to put the cursor in a gap between words, click the + in the toolbar and insert inline code. Nothing happens.

    4. Very minor concern, but I don't understand why my css instructions

    .xopus-placeholder {
    color: red;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    }

    are producing bold, italic, underlined placeholder text that is grey not red. I have exactly the same css in my application and (when they appear here) the placeholders are red. Both the fiddle and my app are using 5.4.2.

    cheers
    T

  • 1. Ah, I see now. Well, the placeholder is not shown because the cursor is already in the fragment, if you click somewhere else the placeholder is shown. As for the line break and extra spaces in the content, they are caused because there is a line break and spaces in your template, and you are telling xopus to preserve them. Check this out xopusfiddle.net/.../ (empty template for the fragment element).

    2.-3. Couldn't figure this out, but it works fine if you remove the template, tinker with that.

    4. This could be fixed by adding !important to the "color: red " line. It's not proper css but it's the only way to override Xopus' default styling.
  • 1. Ah, that makes perfect sense. Thank you. It was driving me mad.

    2. Yes clearly it's the template & its attributes which are blocking the element insertion here, because that's the only difference between code and var, but (e.g.) a code element should respect multiple spaces, and without those attributes they get stripped out, and the template seems to be the only way to preserve them.

    4. Thanks

  • 2. I know little of Xopus templates, but have you tried using roles instead of template attributes?
  • In our application the config file assigns roles to 47 different elements :-)

    At the moment none of them uses preformatted, which I think one of your fiddles used, but I note that the documentation on the preformatted role says

    The HTML equivalent is <pre>. (Note: Use a xml:space="preserve" attribute on an element to obtain the similar space and newline behavior as in HTML.)

    I'm using a template in the config because that seems the only way to set that attribute on a newly created code element - I can set it in preprocessing for code elements in the unedited document.

Reply
  • In our application the config file assigns roles to 47 different elements :-)

    At the moment none of them uses preformatted, which I think one of your fiddles used, but I note that the documentation on the preformatted role says

    The HTML equivalent is <pre>. (Note: Use a xml:space="preserve" attribute on an element to obtain the similar space and newline behavior as in HTML.)

    I'm using a template in the config because that seems the only way to set that attribute on a newly created code element - I can set it in preprocessing for code elements in the unedited document.

Children
No Data