Kaz'hack

To content | To menu | To search

Tag - editor

Entries feed - Comments feed

Wednesday, July 27 2011

Editor Progress: make <p>, not <br>!

The Mozilla HTML editor creates a bunch of <br> elements for historical reasons. One of the most irritating situations is when you expect a <p> but get a <br>… for example in this ContentEditable demo:

Go ahead, edit away!

Here's a typical paragraph element

  1. and now a list
  2. with only
  3. three items

[Return] in paragraphs

When editing a “contentEditable” element in Firefox, pressing [Return] in a paragraph splits the paragraph: if you press [Return] at the end of a paragraph, a new paragraph is created.

When editing HTML documents in comm-central apps (Thunderbird HTML messages, SeaMonkey Composer documents) the behavior is slightly different:

  • pressing [Return] once at the end of a paragraph creates a <br> element;
  • pressing [Return] twice at the end of a paragraph creates a <p> element.

The reason is, the editor component has a returnInParagraphCreatesNewParagraph property which is true by default on Firefox, but not on Thunderbird and SeaMonkey. You can set this property to false on Firefox (contentEditable) with:

 document.execCommand("insertBrOnReturn", false, "true")

Note that the insertBrOnReturn command is Mozilla-specific.

SeaMonkey and Thunderbird parse the editor.CR_creates_new_p preference (false by default) and apply its value to editor.returnInParagraphCreatesNewParagraph. You can change the value of editor.CR_creates_new_p in “about:config” if you prefer the Firefox behavior (and you probably do).

A trickier case in Firefox is when the active editing host is an inline element:

Try to press [Return] here and complain.

 <p> Try to
     <span contenteditable>press [Return] here</span>
 and complain. </p>

As Firefox always tries to create a new paragraph in such situations, and since the editing host is a <span>, nothing happens when [Return] is pressed. This should be fixed with bug 460740.

Of course, in all cases a [Shift+Return] creates a <br>, which is fine.

[Return] in headers and lists

With current versions of Firefox (5, Beta, Aurora):

  • pressing [Return] at the end of a header element (<h[1…6]>) creates two line breaks (<br>), though most users expect a new paragraph.
  • pressing [Return] once at the end of a list element (<li> or <dt>) creates a new list item (<li> or <dd> respectively); pressing [Return] twice splits the list if necessary and creates a line break, though again, most users expect a new paragraph.

Note that there’s no equivalent to the editor.returnInParagraphCreatesNewParagraph property for headers or lists: pressing [Return] at the end of list or header element never inserts any <br> within this element.

There’s no spec that describe the expected behavior of the HTML editor in such case. I think the only intuitive rule would be to create a new block element (<p>) when we’re getting out of another block element with [Return]. That’s what Chromium and Opera do (and probably IE and Safari as well), and that’s what I’ve done in bug 449243. You can test this behavior in Firefox Nightly.

Note: when editing a list in Thunderbird or SeaMonkey Composer with this patch, if you click on the “list” toolbar button the list content will be converted to body text, not to a paragraph. I’ll have to work on that in order to preserve the consistency.

Consistency: <p> everywhere?

Again, there’s no spec for the behavior of the [Return] key in an editable document fragment but we can assume that the [Return] key action should be as consistent as possible across the different editing situations. That’s the idea behind the new behavior of the [Return] key in headers and lists.

I don’t think the editor should force all text to be enclosed in paragraphs, though. As an example, in this editable <div> there’s no HTML structure so I expect [Return] to create <br>:

Type your text here!
 <div contenteditable>
     Type your text here!
 </div>

When [Return] is pressed at the end of the line of text, I expect to get a <br> (FWIW, that’s what Chromium does, too). I don’t expect [Return] to turn the text into a paragraph, then create another paragraph. If I wanted all text to be enclosed in paragraphs I could just use this instead:

Type your text here!

 <div contenteditable>
   <p> Type your text here! </p>
 </div>

I think comm-central apps (Thunderbird, SeaMonkey…) might want to adapt to this new behavior: since HTML messages in Thunderbird and documents in SeaMonkey Composer are structured HTML documents, these apps could initialize the editor not on “about:blank” as they do now, but on an empty HTML document containing a paragraph. In this case, changing the default value of editor.CR_creates_new_p would make sense.

I’m pretty sure that’s what SeaMonkey Composer users want, but I don’t know if this applies to Thunderbird. In fact, Thunderbird might even prefer creating <br> instead of <p> when [Return] is pressed… if that’s the case, please let me know.

[update 2011-07-28] Aryeh Gregor (WhatWG) has just published a preliminary draft of the HTML Editing APIs specification. Thanks Anthony for the link!

Monday, June 13 2011

One Year At INRIA

I have been working for INRIA for one year now. I am still alive, though extremely busy… and it is high time to give a quick update.

About My Work

timesheets.js: I have been hired to develop a FLOSS, cross-browser implementation of SMIL Timing and SMIL Timesheets. I learned a lot about SMIL and I believe that we are bringing a modern approach of SMIL, reusing HTML/SVG and CSS wherever possible. Most use cases so far are related to multimedia annotations but I think the true power of this technology is to design interactive slideshows in a declarative way — i.e. relying on a standard W3C markup.

My contract has just been extended a bit to work on a wysiwyg editor for timesheets. I am rushing to deliver something usable, I hope I will be able to write another blogpost about this when it is ready.

As this work was a research program focussing on XML edition, I learned a lot on XML and XML editors. I am pretty disappointed by most XML editors so far, mainly because they are often misused — I am more and more convinced that an HTML-based, template-oriented document processing tool-chain would suit most needs.

Unexpected Side-Effects

I was accepted as a member of the SYMM Working Group at W3C. Not as fancy as being part of the HTML5 WG but still, that means something to me.

I wrote a paper that has been accepted by the DocEng2011 conference, which will take place in Mountain View in September.

I learned much more than I would have liked to on cross-browser compatibility issues — read: IE-related issues. I thought I was a good JavaScript developer, but writing JS for Mozilla applications is very different than writing a JS library. As a result, I spent more time struggling with IE (MediaElement.js was a rescuer to me) or designing demos than working on the JavaScript library itself… *sigh*

I have been working a whole year with a non-free OS! Now, I have a lot to say about MacOSX… and I am happily getting back to GNU/Linux. I have to admit that there are a few OSX features that I would like to see in GNU/Linux, though.

The Bad Part

I thought I could still work on Kompozer while at INRIA. Unfortunately, I had absolutely no time to take any vacation during this year and very little free time to work on other free projects.

Just to make it clear:

  • yes, the KompoZer project is stalled at the moment since I am the only regular developer and I am too busy;
  • no, there is no so-called “successor” for KompoZer; there are other projects which address the same needs but with another codebase…
  • yes, I am still interested in finishing the job I have been doing on KompoZer, i.e. backporting the codebase to comm-central / SeaMonkey.

I think dom2text editors are not relevant any more for modern web development. They are still useful and appreciated to learn the basics of web design, a wysiwyg CSS editor can be useful as well, but they will never be an alternative to text2dom editors like DreamWeaver™ or Komodo.

I am convinced that wysiwyg HTML editors should be focussed on content instead of presentation. I am thinking of a “Web Processing Suite” that could be a real-world alternative to word processors and slideshow editors, and we need a modern, stable, community-maintained editor for that. This has always been my main motivation with KompoZer, and after my work at INRIA I have a pretty sharp idea of what a “Web Processor” should look like.

The Best Part

I am not looking for any job at the moment. I have just signed a 6-month contract with Mozilla and I will start working with Ehsan Akhgari on the <editor> back-end in mid-July.

Needless to say, I am more than thrilled about this new challenge. More on this subject soon. :-)

Thursday, August 26 2010

HTML Timing

I’ve just been hired by INRIA to develop a Mozilla-based, multimedia-dedicated, web authoring tool. I’m working in a team that has been very active in the SVG and SMIL working groups and that has developed Amaya a while ago. After three months working here, I came up with two conclusions:

  • the full SMIL spec (≠ SVG animations) is completely overkill for web browsers
  • the SMIL/Timing module is magic: simple to use and offers a lot of cool features to web pages like timing, media synchronization and user interaction management. I wish this could be part of HTML5!

I’m currently working on a JavaScript implementation of the SMIL/Timing module. I’ve had the opportunity to give a lightning talk about this project at the Mozilla Summit in Whistler, and I’ve made significant progress since.

Here’s a quick overview of SMIL/Timing and how we can use it in web pages. The full story and all the demos are on labs.kompozer.net/timesheets.

Timesheet Scheduler (Demo!)

I’ve started to implement the SMIL/Timing and SMIL/Timesheets specs in a JavaScript Timesheet Scheduler: with this small JS lib (less than 4KB for the minified/gzipped version), a lot of timing features and user interactions can be described without writing any specific JavaScript code. This can be easily used to design an slideshow like this one:

The full demo is available here: labs.kompozer.net/timesheets.

Continue reading...

Thursday, April 8 2010

KompoZer 0.8b3 in Ukrainian and Brazilian

KompoZer logo Two new locales have just been added to the official “Download” page: http://kompozer.net/download.php

The Ukrainian one is mainly (only?) the result of Andriy Radyk’s work. He’s done the whole translation on Narro pretty quickly before taking the time to check his langpack carefully in KompoZer itself. Thanks Andriy!

The Brazilian locale is the work of many contributors — Narro can be frustrating for us, but it sure rocks when distributing the work load among several contributors. Unfortunately, and despite the fact that there were only 60 strings to translate, there hasn’t been any activity on this locale lately. So Cédric has decided to take the untranslated strings (all related to the CSS Editor) from the Portuguese langpack: as these strings are very technical, we've supposed there won't be any problem, but let us know if there's a mistake.

We’re still looking for a Brazilian contributor to review and maintain this langpack: please ping us if you want to contribute.

Wednesday, April 7 2010

KompoZer n’est pas Nvu

Daniel Glazman a annoncé qu’il avait trouvé un financement pour BlueGriffon. J’aimerais pouvoir en dire autant pour KompoZer, mais je ne peux que m’associer à la joie de Daniel qui va à nouveau connaître le rêve de tout libriste : être payé pour bosser sur son domaine de prédilection.

En revanche, j’ai sérieusement tiqué en lisant l’entretien publié par Tristan sur son blog. J’ai longtemps hésité à réagir (pas envie de déclencher une flame war), mais la réaction des autres contributeurs KompoZer m’impose de répondre à quelques points en particulier.

Continue reading...

Friday, March 12 2010

KompoZer 0.8b3 in Slovenian

KompoZer logo

While most of the KompoZer 0.7.10 language packs have been upgraded to KompoZer 0.8, we’ve set up a Narro server to help localization teams work on new locales. The Finnish locale has been the first one to be fully translated, other locales are still in progress: Irish, Korean, Ukrainian, Brazilian, Swedish, Turkish, Bulgarian… and Slovenian.

Continue reading...

Tuesday, March 9 2010

KompoZer 0.8b3 in Czech

KompoZer logo

Jaroslav Krejčí (aka “JardaK”) has just submitted a Czech language pack for KompoZer 0.8.

We’ve imported the strings from the langpack JardaK did for KompoZer 0.7.10 and added the Mozilla 1.8 strings. Then, JardaK has translated all the new strings and fixed a few problems we had in the previous version.

As a result, there are now Czech builds of KompoZer 0.8b3 on the official download page for Windows, MacOSX and GNU/Linux. Thanks a lot JardaK!

Note: most of the langpacks we had for KompoZer 0.7.10 have been upgraded to 0.8 by now, but we’re still missing the Brazilian (pt-BR), Slovak (sk) and Bulgarian (bg) ones. Feel free to drop a message if you want to upgrade one of these langpacks. ;-)

Update (2010-03-15): the above note could be misunderstood, let’s clarify:

  • the Brazilian langpack is almost ready (~70 untranslated strings)
  • the Bulgarian langpack is in progress (> 500 untranslated strings)
  • nobody’s working on the Slovak langpack yet

Note that Narro allows several contributors to work on the same language pack simultaneously.

Tuesday, March 2 2010

KompoZer 0.8b3

KompoZer logo

We’ve just released KompoZer 0.8b3:

Localized binaries are available on the official download page: http://kompozer.net/download.php.

Continue reading...

Tuesday, February 23 2010

KompoZer 0.8b2

KompoZer logo

KompoZer 0.8b2 is finally ready. Few visible changes, but a lot of bugfixes and code cleaning under the hood.

You can grab KompoZer 0.8b2 here: http://kompozer.net/download.php

Enjoy, and please report bugs!

Continue reading...

Sunday, February 14 2010

FOSDEM 2010

Another year, another FOSDEM. This year I haven't been surprised by the overall nerd factor, I guess that's a clear sign that I’ve significantly nerdified myself. Never mind — as Seth B. told me:

It’s okay to be a nerd. Look at Staś!

One Year In Review

I've had the opportunity to give a lightning talk about the work that has been done on KompoZer since the last FOSDEM — i.e. since the first alpha release of the 0.8 branch:

  • code cleaning: KompoZer 0.7 was built on Nvu, which required a 15'000 line C++ patch against the Gecko core. Most of this patch concerned UI improvements, which are now implemented in XUL/JavaScript. KompoZer 0.8 builds on an almost pure Gecko core — we just need a little patch for the PHP support.
  • new features: the DOM Explorer sidebar and the split view should help KompoZer users learning HTML and CSS, the new Site Manager (still in development) should solve most of the publication issues we inherited from Mozilla Composer.
  • team building: KompoZer isn't a one-man-project any more. Cédric Corazza and Frédéric Chateaux have joined the team to help me with the localization support and the quality assurance. Thanks to them I can focus on development.

fosdem10-CedricFrederic.jpg

KompoZer Labs

The best news in these last months is that the KompoZer community is growing. Last year, we've set up a KompoZer labs page with a few projects that we’d like to experiment, and five projects have already been selected by CoMETE students:

  • real-time collaborative HTML edition (XMPP/SXE)
  • CMS publication (XML-RPC)
  • enhanced DOM Explorer sidebar
  • easier CSS Editor
  • SFTP support

The CoMETE team is very motivated and these projects are making good progress — I'll detail them in another blogpost soon. In case you’re interested in working on another “Labs” project, or if you’d like to submit another idea for this “Labs” page, feel free to ping us on the #kompozer channel.

KompoZer.next

This FOSDEM has also been the opportunity to organize the development of the next KompoZer branch along with the SeaMonkey team. Last year, we’ve had a simple deal:

This deal is now becoming effective, and I already have a pre-alpha, Gecko 1.9.3 build of KompoZer. So instead of just porting KompoZer to Gecko 1.9.3, we’ll open a few tickets on Bugzilla to backport the main KompoZer features and bugfixes on comm-central: putting the code in a public place like BMO and getting reviews from other Mozilla developers should help keeping the project stable and open in the long-term. I’ll do my best to release an official alpha version before the Firefox Summit, with the features that I’ve announced in the EuMozCamp09: Bespin code editor, xml-rpc publication, collaborative edition…

Back To Real Life

I’m almost done with the urgent work, which means I can focus on KompoZer 0.8b2 again. I realize it’s been a while since the last release (0.8b1), so I’ll probably drop some of the unfinished work I’ve been doing on this branch to release the 0.8b2 version ASAP — hopefully next Sunday.

- page 1 of 4