Does this shortcodes implementation wrap multiple elements [#1207532]

Thanks for implementing shortcodes in Drupal - i've been wanting to try something like this for a while.

So, i've written a custom shortcode function that wraps some text - however it only seems to wrap the first HTML element it comes to and not a chunk of HTML.

For example, my shortcode is designed to wrap a bunch of markup to make columns in pages:

Btw - i'm not coding the shortcode into my HTML directly, i've just written out the h3 and p tags for illustration.

[one_third]
<h3>Some Title Text <h3>
<p>Some paragraph text </p>
[/one_third]

So, the result that ends up on my page is:

<span class="one_third"><h3>Some Title Text</h3></span>
<p>Some paragraph text</p>

The paragraph that is enclosed in the shortcode is not parsed inside the wrapper.
Is this a limitation of the Drupal shortcode implementaton or am i writing my custom function wrong.

Here it is for reference...

 function shortcode_custom_tags_shortcode_onethird($attrs, $text) {
  extract( shortcode_attrs( array(
      'class'  => '',
      ), $attrs ));

  $class = shortcode_add_class($class, 'onethird');
  return '<span class="' . $class . '">' . $text . '</span>';
}

Any help much appreciated :-)

Comment	File	Size	Author
#6	Screen Shot 2011-08-02 at 10.43.52.png	21.3 KB	hixster
#6	Screen Shot 2011-08-02 at 10.44.00.png	29.25 KB	hixster
#6	Screen Shot 2011-08-02 at 10.43.45.png	26.65 KB	hixster

Comments

Comment #1

hixster commented 2 July 2011 at 23:56

Just tested with some of the default shortcodes and it seems to be the same:

This:

[highlight]
Test heading (note this is in <h2> tags)
Some paragraph (this is in p tags)
[/highlight]

ends up like this

<div><span class="highlight"></div>
<h2>Test heading</h2>
<p>Some paragraph</p>
<div></span></div>

Seems like the HTML filter is mangling the shortcode as it always has to insert a DIV or a P around text.

Comment #2

hixster commented 4 July 2011 at 20:59

Anyone? would like to get this working

Comment #3

hixster commented 8 July 2011 at 00:21

bump - any activity here??

Comment #4

hixster commented 28 July 2011 at 11:46

Has this module been abandoned?

Comment #5

Docc commented 2 August 2011 at 08:30

Well it does support nesting.
Did you try to put the HTML filter after the shortcode filter?

Comment #6

hixster commented 2 August 2011 at 10:28

Status	File	Size
new	Screen Shot 2011-08-02 at 10.43.45.png	26.65 KB
new	Screen Shot 2011-08-02 at 10.44.00.png	29.25 KB
new	Screen Shot 2011-08-02 at 10.43.52.png	21.3 KB

The regular HTML filer or the short codes HTML filter?

I've tried both without luck. The modules seems to trip up on removing internal <p> tags and newline <p> tags.
I'm debugging now but the short codes don't seem to work with TinyMCE WYSIWYG very well.

I can get the short codes to work if I hand code the markup with the WYSIWYG turned off - but as soon as I switch it on it breaks.

Looking at the module there seems to be a bunch of commented out legacy code from the WP port - I've been looking back at how WP implement this because their implementation works really nicely in TinyMCE.

I've attached 3 screenshots so you can see what is happening to the markup.

1) Is the short codes written with rich text editor ON
2) The second is the markup that is generated when looking with the rich text editor off
3) The third is what is printed in the node ( rendered output)

This is what is printed in the node:

<span class="quote">SQ This is a quote, what do you think of my quote?<p></p><h3>This is a heading that is H3</h3><p>
<span class="quote">SQ This is a quote, what do you think of my quote?</span></p><h3>This is a heading that is H3</h3><p>    </p></span>

I've added some CSS to the quote class to help me identify where the closing quote tag is. It should wrap the the h3 tag, but it doesn't.

Are you co-maintaining now?? :-)

Comment #7

Docc commented 2 August 2011 at 12:09

This is an editor issue. The moment you add the editor to the scene it auto formats the code. Wich adds the extra div and p tags.
I can imagine WP disabled this kind of auto formatting or wrote a plugin for this.

Comment #8

hixster commented 2 August 2011 at 12:21

Sure, I understand- it's disappointing though - the main reason for using the short codes is give greater control to editors and contributors.
We'd like to use some layout short codes for creating columns of text etc like this... http://invent-themes.pl/demo/clear-theme/?page_id=46
There's no way that I can expect clients to format pages in the raw editor. Do you use a WYSIWYG with short codes? Can you suggest a WYSIWYG that doesn't break them?

Comment #9

Docc commented 2 August 2011 at 12:28

Status:

Active

» Closed (works as designed)

At the moment no. Im in the process of converting this module D7.
Then im going to dive into WYSIWYG integration. But until then shortcode cannot help with this.

For the time being, you might look into ways to disable autoformatting, for example: http://www.wdtutorials.com/drupal7/50

When the time is there i will open a new issue for WYSIWYG integration.

Comment #10

hixster commented 2 August 2011 at 14:46

o.k cool - i've added that module but having no joy at the moment , but am getting help over on the WYSIWYG issue queue. http://drupal.org/node/313497

I've tried out CKeditor and that seems to work a little better, less mangling of the markup :-)

Comment #11

Docc commented 6 August 2011 at 13:17

Follow up #1241356: WYSIWYG integration

Does this shortcodes implementation wrap multiple elements