Feature request: Change table support + 'p' tag breadcrumbs

[wymmy]

The current table implementation is basically broken in Firefox. Once you add a table, you can't add another paragraph after it (unless you remember that the implementation is broken before inserting the table). Or at least I can't figure out how to do so without editing the HTML directly. And if I can't figure it out, neither will the average user. Displaying a table as a table is basically "WYSIWYG" instead of sticking to "WYSIWYM". Instead of displaying a table, why not leverage the existing 'p' (paragraph) tag code to do the same thing with some specialized classes? When extracting the HTML, you could filter out the 'p' tags and convert them to tables (and convert tables to the appropriate 'p' tags on input).

This brings me to my second feature request: 'p' tag breadcrumbs. It is hard to tell what classes are applied to various block and inline elements. When a class is applied to a paragraph (or any other "container"), I'd like to see more than just the visual cue applied to the paragraph. So, when a class like 'PARA: Date' gets applied, it should show 'p >> PARA: Date' or something like that for that paragraph. This, in turn, would help with replacing the existing table implementation. Users could, in theory, build the entire table visually and would allow for complex tables to be built. For example, this would be possible (indented to make it slightly easier to read):

Code: Select all

<p class="begin-table"></p>
  <p class="begin-table-row"></p>
    <p class="table-col colspan-2">Test</p>
  <p class="end-table-row"></p>
  <p class="begin-table-row"></p>
    <p class="table-col">Test</p>
    <p class="table-col">Test 2</p>
  <p class="end-table-row"></p>
<p class="end-table"></p>


[wymmy]

After several days of mulling over this problem, I've come to the realization that WYMeditor already, more or less, supports this! I can use various bits of logic from the examples/demos and, with a few modifications of my original idea, implement this with the existing editor.

Code: Select all

<p class="begin-table"></p>
<p class="table-row"></p>
  <p class="table-col colspan-2">Test paragraph 1</p>
   <p>Test paragraph 2</p>
<p class="table-row"></p>
  <p class="table-col">Test paragraph 1</p>
  <p class="table-col"></p>
   <p class="begin-table"></p>
    <p class="table-row"></p>
     <p class="table-col">Test paragraph 1</p>
     <p class="table-col">Test paragraph 2</p>
    <p class="table-row"></p>
     <p class="table-col">Test paragraph 1</p>
     <p class="table-col">Test paragraph 2</p>
   <p class="end-table"></p>
<p class="end-table"></p>


For the "breadcrumbs", I just need to swap out the background image used for the 'P'. Since it is an image, I could use an icon to represent the current part of the table (or just use text). And parsing the above is pretty easy to do. In my server-side parser, I just have to keep a "stack" handy and track missing rows/columns and close all of the open tags at the appropriate times (notice how there are no "end-table-row" or "end-table-col" classes - they aren't necessary).

Will this confuse users? Perhaps. But that is what iframes are for: Showing a live preview of the content they are creating (i.e. after every change, save the content and reload the iframe). This approach is so much better than trying to use the (broken) WYSIWYG table editor that WYMeditor uses.

[sjors]

Hi wymmy,

I'm very interested in your approach. I'm having a hard time explaining my users how to use tables and your solutions might make things easier. Could you put a demo online?

Thanks