MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 11:04, 7 Dec 2010 by Guerric
User:dev > Specs > Wrapping block styles for the editor
Page Notifications Off

Wrapping block styles for the editor

    Introduction

    Per a customer request, the editor should support the ability to wrap multiple block elements with a single block element. Below outlines the expected functionality for this feature.

    Intended Audience

    Additional information

    Status

    Initial scoping by Guerric

    Functional Specification

    Use Cases

    In the following examples, [sel:X] indicates where the user selection beings & ends. [cursor] indicates where the editor cursor is located.

     

    User wants to add a wrapping style to the style dropdown

    Wrapping styles should be added to the CKEditor style dropdown in a similar manner to the other styles.

    User makes a selection including a single paragraph tag

    The single paragraph should be wrapped.

    Ex. Before style is applied
    [sel:start]
<p>Hello</p>
[sel:end,cursor]
    Ex. After style is applied
    <div class="wrap">
 <p>Hello</p>
</div>

    User makes a selection across multiple paragraph tags and chooses a wrapping style

    The highlighted block elements should be wrapped with the selected wrap style.

    Ex. Before style is applied
    [sel:start]
<p>Hello</p>
<p>World[sel:end,cursor]</p>
    Ex. After style is applied
    <div class="wrap">
 <p>Hello</p>
 <p>World</p>
</div>

    User makes a selection that includes an existing wrap block

    The wrapping blocks should be nested.

    Ex. Before style is applied
    <div class="wrap">
[sel:start]
 <p>Hello</p>
</div>
<p>World</p>
[sel:end,cursor]
    Ex. After style is applied
    <div class="outer-wrap">
 <div class="inner-wrap">
  <p>Hello</p>
 </div>
 <p>World</p>
</div>

    User wants to remove a wrapping style

    User selects the section that has the wrap applied and selects "Normal" which should remove all the wrapping styles within their selection.

    Ex.1 Before style is removed
    <div class="wrap">
 <p>Hello[cursor]</p>
</div>
    Ex.1 After style is removed
    <p>Hello</p>
    Ex.2 Before style is removed
    <div class="wrap">
 <p>That's a wrap</p>
 <div class="wrap">
  <p>Hello[cursor]</p>
 </div>
</div>
    Ex.2 After style is removed
    <div class="wrap">
 <p>That's a wrap</p>
 <p>Hello[cursor]</p>
</div>
    Ex.3 Before style is removed
    <div class="wrap">
 <p>That's a wrap[cursor]</p>
 <div class="wrap">
  <p>Hello</p>
 </div>
</div>
    Ex.3 After style is removed
    <p>That's a wrap</p>
<div class="wrap">
  <p>Hello[cursor]</p>
</div>

    User wants to discover what wrapping style is applied

    When the user moves their cursor to a section that has a wrapping style, that style should show up in the style dropdown. Even though there are multiple block styles at the cursor location, the innermost wrapping style should be displayed.

    Ex.1 Determine style for single wrap - shows wrap style
    <div class="wrap">
 <p>Hello[cursor]</p>
</div>
    Ex.2 Determine style for multi wrap - shows inner-wrap style
    <div class="outer-wrap">
 <div class="inner-wrap">
  <p>Hello[cursor]</p>
 </div>
 <p>World</p>
</div>
    Ex.3 Determine style for multi wrap - shows outer-wrap style
    <div class="outer-wrap">
 <div class="inner-wrap">
  <p>Hello</p>
 </div>
 <p>World[cursor]</p>

    Outstanding questions

    Karen, please respond:

    • When setting up wrapping styles do they need to be configured differently?
    • Should all wrapping styles have a single common class to denote them as wrap styles?
      • This would make searching for wrap styles easier in the DOM

     

    Technical Specification

    UI requirements

    API requirements

    Tag page
    What links here

    Files 0

    Attach file or image
     
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by