Item2516: Add new TML syntax to support indented paragraphs

Priority: Enhancement
Current State: Waiting for Release
Released In: 1.2.0
Target Release: minor
Applies To: Engine
Component: TinyMCEPlugin, WysiwygPlugin
Reported By: PaulHarvey
Waiting For:
Last Change By: ArthurClemens
See SupportBlockquoteAndIndenting

  1. Implement the new markup in Render.pm with unit tests
    1. Emit as foswikiIndentLevelN classed <p>s, or style="left-margin: (n x 30)px;" attributes?
      Probably implement as classes, so rtl locales can use right-margin in CSS?
  2. Implement the new markup in WysiwygPlugin - tml2html, html2tml - with unit tests.
    1. How should WysiwygPlugin handle older versions of Render.pm which don't support the new markup?
  3. Test with TinyMCE. Test how indenting applied to non-paragraph block elements behave.
  4. Documentation
  5. Review how application of indenting works or doesn't work with existing PatternSkin, NatSkin, WidgetSkin CSS.
  6. Develop a SEARCH (or script to be shipped in the /foswiki/tools directory) which will report existing topics which already have content that may be interpreted as paragraph indent
    1. Foswiki release upgrades: Should the presence of this tool simply be advertised in the release notes, or should we add a configure checker that adds a warning/error until you run the tool? NB: Upgrade packages are simply a tar -xzf of the upgrade tarball, nobody runs an actual upgrade script as such...
    2. Those upgrading WysiwygPlugin on older Foswikis: Disabling the indent feature should be enough?

-- PaulHarvey - 21 Dec 2009

Although I've added myself in the WaitingFor field, others should feel free to work on this.

-- PaulHarvey - 16 Jan 2010

Just thought I'd mention that I'm looking forward to this feature. I'm migrating some existing content from Mediawiki to Foswiki right now, and this is one of the features that's missing in Foswiki TML, so it will be nice to see this implemented.

-- LeilaPearson - 23 Sep 2010

Crawford is on to it, cool smile

-- PaulHarvey - 03 Dec 2011

See also Item11316 and Item9038.

-- PaulHarvey - 10 Dec 2011

ATTACHURLPATH makes it more difficult to copy/paste the TINYMCEPLUGIN_INIT topic:
+"foswiki_plugin_urls" : {
+    "foswiki" : "%ATTACHURLPATH%/plugins/foswiki/editor_plugin%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.js",
+    "foswikibuttons" : "%ATTACHURLPATH%/plugins/foswikibuttons/editor_plugin%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.js",
+    "foswikiimage" : "%ATTACHURLPATH%/plugins/foswikiimage/editor_plugin%IF{"$TINYMCEPLUGIN_DEBUG" then="_src"}%.js" },

Better use PUBURLPATH/SYSTEMWEB/TinyMCEPlugin/

-- ArthurClemens - 18 Dec 2011

Good point,Arthur. Thanks.

-- CrawfordCurrie - 19 Dec 2011

This will be released in the next Foswiki release (not patch). Until then you can apply the following patch to Foswiki 1.1.4.

Index: pub/System/SkinTemplates/base_src.css
===================================================================
--- pub/System/SkinTemplates/base_src.css   (revision 13466)
+++ pub/System/SkinTemplates/base_src.css   (working copy)
@@ -202,4 +202,7 @@
 }
 .foswikiHorizontalList ul li.foswikiLast {
    border:none;
-}
\ No newline at end of file
+}
+.foswikiIndent {
+   padding-left: 3em;
+}
Index: lib/Foswiki/Render.pm
===================================================================
--- lib/Foswiki/Render.pm   (revision 13466)
+++ lib/Foswiki/Render.pm   (working copy)
@@ -259,7 +259,7 @@
 # Add a list item, of the given type and indent depth. The list item may
 # cause the opening or closing of lists currently being handled.
 sub _addListItem {
-    my ( $this, $result, $type, $element, $indent ) = @_;
+    my ( $this, $result, $type, $element, $css, $indent ) = @_;
 
     $indent =~ s/   /\t/g;
     my $depth = length($indent);
@@ -272,8 +272,9 @@
         my $firstTime = 1;
         while ( $size < $depth ) {
             push( @{ $this->{LIST} }, { type => $type, element => $element } );
-            push @$result, ' <' . $element . ">\n" unless ($firstTime);
-            push @$result, ' <' . $type . ">\n";
+            push( @$result, " <$element" . ($css ? " class='$css'" : "") .">\n" )
+      unless ($firstTime);
+            push( @$result, ' <' . $type . ">\n" ) if $type;
             $firstTime = 0;
             $size++;
         }
@@ -281,25 +282,30 @@
     else {
         while ( $size > $depth ) {
             my $tags = pop( @{ $this->{LIST} } );
-            push @$result,
-              "\n</" . $tags->{element} . '></' . $tags->{type} . '> ';
+       my $r = "\n</" . $tags->{element} . '>';
+       $r .= '</' . $tags->{type} . '> ' if $tags->{type};
+            push( @$result, $r );
             $size--;
         }
         if ($size) {
-            push @$result,
-              "\n</" . $this->{LIST}->[ $size - 1 ]->{element} . '> ';
+            push( @$result,
+              "\n</" . $this->{LIST}->[ $size - 1 ]->{element} . '> ' );
         }
         else {
-            push @$result, "\n";
+            push( @$result, "\n" );
         }
     }
 
     if ($size) {
         my $oldt = $this->{LIST}->[ $size - 1 ];
         if ( $oldt->{type} ne $type ) {
-            push @$result, ' </' . $oldt->{type} . '><' . $type . ">\n";
+       my $r = '';
+       $r .= ' </' . $oldt->{type} . '>' if $oldt->{type};
+       $r .= '<' . $type . ">\n" if $type;
+            push( @$result, $r ) if $r;
             pop( @{ $this->{LIST} } );
-            push( @{ $this->{LIST} }, { type => $type, element => $element } );
+            push( @{ $this->{LIST} }, {
+      type => $type, element => $element } );
         }
     }
 }
@@ -1265,7 +1271,7 @@
             if ($isList) {
 
                 # Table start should terminate previous list
-                _addListItem( $this, \@result, '', '', '' );
+                _addListItem( $this, \@result, '', '', '', '' );
                 $isList = 0;
             }
 
@@ -1299,21 +1305,27 @@
             {
 
                 # Definition list
-                _addListItem( $this, \@result, 'dl', 'dd', $1 );
+                _addListItem( $this, \@result, 'dl', 'dd', '', $1 );
                 $isList = 1;
             }
             elsif ( $line =~ s/^((\t|   )+)(\S+?):\s/<dt> $3<\/dt><dd> /o ) {
 
                 # Definition list
-                _addListItem( $this, \@result, 'dl', 'dd', $1 );
+                _addListItem( $this, \@result, 'dl', 'dd', '', $1 );
                 $isList = 1;
             }
             elsif ( $line =~ s/^((\t|   )+)\* /<li> /o ) {
 
                 # Unnumbered list
-                _addListItem( $this, \@result, 'ul', 'li', $1 );
+                _addListItem( $this, \@result, 'ul', 'li', '', $1 );
                 $isList = 1;
             }
+            elsif ( $line =~ s/^((\t|   )+): /<div class='foswikiIndent'> /o ) {
+
+                # Indent pseudo-list
+                _addListItem( $this, \@result, '', 'div', 'foswikiIndent', $1 );
+                $isList = 1;
+            }
             elsif ( $line =~ m/^((\t|   )+)([1AaIi]\.|\d+\.?) ?/ ) {
 
                 # Numbered list
@@ -1326,7 +1338,7 @@
                     $ot = '';
                 }
                 $line =~ s/^((\t|   )+)([1AaIi]\.|\d+\.?) ?/<li$ot> /;
-                _addListItem( $this, \@result, 'ol', 'li', $1 );
+                _addListItem( $this, \@result, 'ol', 'li', '', $1 );
                 $isList = 1;
             }
             elsif ( $isList && $line =~ /^(\t|   )+\s*\S/ ) {
@@ -1350,7 +1362,7 @@
 
         # Finish the list
         unless ( $isList || $isFirst ) {
-            _addListItem( $this, \@result, '', '', '' );
+            _addListItem( $this, \@result, '', '', '', '' );
         }
 
         push( @result, $line );
@@ -1361,6 +1373,6 @@
         _addTHEADandTFOOT( \@result );
         push( @result, '</table>' );
     }
-    _addListItem( $this, \@result, '', '', '' );
+    _addListItem( $this, \@result, '', '', '', '' );
 
     $text = join( '', @result );

(to apply the patch, copy the above into a local file at the root of your install e.g. indent.patch. Then
$ patch -p0 <indent.patch
You will also have to update WysiwygPlugin and TinyMCEPlugin to the versions attached to this topic.

Targeting this at 1.2.0, as it is new functionality and therefore not allowed in a patch.

-- CrawfordCurrie - 19 Dec 2011

There were some syntax problems in your JS preventing YUI compressor working (and also IE7 errors).

Released to Extensions/Testing.TinyMCEPlugin

-- PaulHarvey - 22 Dec 2011

Re-opened to fix incorrect script path locations which prevented image/attach/colours dialogues from working

-- PaulHarvey - 09 Mar 2012

Re-opened to fix issue with paragraph wrappers causing premature close of blockquote tags.

-- GeorgeClark - 18 May 2012

Testing http://trunk.foswiki.org/Sandbox/TestWysiwyg I notice a couple of things:
  • pressing return inside a blockquote creates new separate blockquotes
    • Unable to recreate this one. Tried both firefox and chrome. Enter multiple lines, highlight, click ["] blockquote button. More newlines, all seems fine.
    • Issue is related to blockquotes entered as a single line, or as multiple lines but using hidden whitespace. TMCE gets confused and newline creates a new block.
    • Later... So "Enter" key consistently in TMCE always continues with a new instance of whatever block element you are in. <li> ... enter creates a new list item. This is consistent for lists, paragraphs, and blockquotes too. If you use the TMCE ["] button to create a blockquote, it also creates a paragraph, so you are actually typing inside a <blockquote><p> block. And enter splits the paragraph. When TML generates the blockquote, it does not create a paragraph block unless there is a blank line after the blockquoted. No blank line creates a hidden whitespace span, but that doesn't create a block element, and the newline still splits the blockquote. (I suspect that this deserves it's own task.)
  • blockquotes make the "de-indent" button active
    • confirmed
  • clicking de-indent in a blockquote makes it actually indent
    • Not on chrome or firefox on Linux. However using Release1.1, any indenting is lost on save.
  • the second blockquote on the page has a gray background, but it is not clear how it got there or how to remove it
    • This is related to tmwiki generating stylized blockquotes, where foswiki uses css
  • a link makes the unlink button highlight
    • Correct. On new Wysiwgy / TMCE, all links are "real" HTML links, and the unlink button is active so that the link can be removed.
  • no feedback is given on a special block like verbatim - the FORMAT dropdown does not show the selected style
    • Agreed, wasn't sure how to fix that.

-- ArthurClemens - 19 May 2012

The fixes work.

There is still an issue with indenting/re-indenting inside a blockquote, but that will be used seldom.

-- ArthurClemens - 20 May 2012

The patch only works if Foswiki.pm contains the line (in sub new, line 1669):
    # This foswiki supports : paragraph indent
    $initialContext->{SUPPORTS_PARA_INDENT} = 1;

-- ArthurClemens - 01 Jun 2012
Topic revision: r40 - 01 Jun 2012, ArthurClemens
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License