# HG changeset patch
# User souliane <souliane@mailoo.org>
# Date 1381234358 -7200
# Node ID 0ed09cc0566fae9be73fb11d02e90afef2f117d3
# Parent  fab7aa3665764a762d4e44dab6b0bba0f187029b
browser_side: added UIs for rich text editor and addressing to multiple recipients
The rich text format is set according to a user parameter which is for now not created,
so you will get a warning on the backend and no toolbar will be displayed.

For testing purpose:
- you can set _debug to True in RichTextEditor: that will display one toolbar per format.
- you can add this parameter to any plugin (the same will be added later in XEP-0071):

    # DEBUG: TO BE REMOVED LATER, THIS BELONGS TO RICH TEXT EDITOR
    FORMATS = {"markdown": {}, "bbcode": {}, "dokuwiki": {}, "html": {}}
    FORMAT_PARAM_KEY = "Composition and addressing"
    FORMAT_PARAM_NAME = "Format for rich text message composition"

    # In the parameter definition:
    <category name="%(format_category_name)s" label="%(format_category_label)s">
        <param name="%(format_param_name)s" label="%(format_param_label)s"
           value="%(format_param_default)s" type="list" security="0">
            %(format_options)s
        </param>
    </category>

    # Strings for the placeholders:
        'format_category_name': FORMAT_PARAM_KEY,
        'format_category_label': _(FORMAT_PARAM_KEY),
        'format_param_name': FORMAT_PARAM_NAME,
        'format_param_label': _(FORMAT_PARAM_NAME),
        'format_param_default': FORMATS.keys()[0],
        'format_options': ['<option value="%s"/>' % format for format in FORMATS.keys()]

diff -r fab7aa366576 -r 0ed09cc0566f browser_side/base_widget.py
--- a/browser_side/base_widget.py	Tue Oct 08 13:38:42 2013 +0200
+++ b/browser_side/base_widget.py	Tue Oct 08 14:12:38 2013 +0200
@@ -112,6 +112,9 @@
             widgets_panel.removeWidget(_new_panel)
         elif item_type in self.drop_keys:
             _new_panel = self.drop_keys[item_type](self.host, item)
+        elif item_type == "RECIPIENT_TEXTBOX":
+            # eventually open a window?
+            pass
         else:
             print "WARNING: unmanaged item type"
             return
@@ -620,6 +623,9 @@
             _new_panel.getWidgetsPanel().removeWidget(_new_panel)
         elif item_type in DropCell.drop_keys:
             _new_panel = DropCell.drop_keys[item_type](self.tab_panel.host, item)
+        elif item_type == "RECIPIENT_TEXTBOX":
+            # eventually open a window?
+            pass
         else:
             print "WARNING: unmanaged item type"
             return
diff -r fab7aa366576 -r 0ed09cc0566f browser_side/panels.py
--- a/browser_side/panels.py	Tue Oct 08 13:38:42 2013 +0200
+++ b/browser_side/panels.py	Tue Oct 08 14:12:38 2013 +0200
@@ -24,6 +24,7 @@
 from pyjamas.ui.AbsolutePanel import AbsolutePanel
 from pyjamas.ui.VerticalPanel import VerticalPanel
 from pyjamas.ui.HorizontalPanel import HorizontalPanel
+from pyjamas.ui.DialogBox import DialogBox
 from pyjamas.ui.HTMLPanel import HTMLPanel
 from pyjamas.ui.Frame import Frame
 from pyjamas.ui.TextArea import TextArea
@@ -45,20 +46,48 @@
 from time import time
 import dialog
 import base_widget
+from richtext import RichTextEditor
 from plugin_xep_0085 import ChatStateMachine
 from pyjamas import Window
 from __pyjamas__ import doc
 
 
-class UniBoxPanel(SimplePanel):
+class UniBoxPanel(HorizontalPanel):
     """Panel containing the UniBox"""
 
     def __init__(self, host):
-        SimplePanel.__init__(self)
+        HorizontalPanel.__init__(self)
+        self.host = host
         self.setStyleName('uniBoxPanel')
+
+        self.button = Button ('<img src="media/icons/tango/actions/32/format-text-italic.png" class="richTextIcon"/>')
+        self.button.setTitle('Open the rich text editor')
+        self.button.addStyleName('uniBoxButton')
+        self.add(self.button)
+
         self.unibox = UniBox(host)
-        self.unibox.setWidth('100%')
         self.add(self.unibox)
+        self.setCellWidth(self.unibox, '100%')
+
+        self.button.addClickListener(self.openRichTextEditor)
+        self.unibox.addDoubleClickListener(self.openRichTextEditor)
+
+    def openRichTextEditor(self):
+        """Open the rich text editor."""
+        self.button.setVisible(False)
+        self.unibox.setVisible(False)
+        self.setCellWidth(self.unibox, '0px')
+        self.host.panel._contactsMove(self)
+
+        def onCloseCallback():
+            self.host.panel._contactsMove(self.host.panel._hpanel)
+            self.setCellWidth(self.unibox, '100%')
+            self.button.setVisible(True)
+            self.unibox.setVisible(True)
+            self.host.resize()
+
+        RichTextEditor.getOrCreate(self.host, self, onCloseCallback)
+        self.host.resize()
 
 
 class UniBox(TextArea, MouseHandler): #AutoCompleteTextBox):
@@ -848,12 +877,12 @@
         status = host.status_panel
 
         # contacts
-        _contacts = HorizontalPanel()
-        _contacts.addStyleName('globalLeftArea')
+        self._contacts = HorizontalPanel()
+        self._contacts.addStyleName('globalLeftArea')
         contacts_switch = Button(u'«', self._contactsSwitch)
         contacts_switch.addStyleName('contactsSwitch')
-        _contacts.add(contacts_switch)
-        _contacts.add(self.host.contact_panel)
+        self._contacts.add(contacts_switch)
+        self._contacts.add(self.host.contact_panel)
 
         # tabs
         self.tab_panel = base_widget.MainTabPanel(host)
@@ -868,10 +897,10 @@
         header.setStyleName('header')
         self.add(header)
 
-        _hpanel = HorizontalPanel()
-        _hpanel.add(_contacts)
-        _hpanel.add(self.tab_panel)
-        self.add(_hpanel)
+        self._hpanel = HorizontalPanel()
+        self._hpanel.add(self._contacts)
+        self._hpanel.add(self.tab_panel)
+        self.add(self._hpanel)
 
         self.setWidth("100%")
         Window.addWindowResizeListener(self)
@@ -883,6 +912,17 @@
         btn.setText(u"«" if cpanel.getVisible() else u"»")
         self.host.resize()
 
+    def _contactsMove(self, parent):
+        """Move the contacts container (containing the contact list and
+        the "hide/show" button) to another parent, but always as the
+        first child position (insert at index 0).
+        """
+        if self._contacts.getParent():
+            if self._contacts.getParent() == parent:
+                return
+            self._contacts.removeFromParent()
+        parent.insert(self._contacts, 0)
+
     def onWindowResized(self, width, height):
         _elts = doc().getElementsByClassName('gwt-TabBar')
         if not _elts.length:
diff -r fab7aa366576 -r 0ed09cc0566f browser_side/recipients.py
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser_side/recipients.py	Tue Oct 08 14:12:38 2013 +0200
@@ -0,0 +1,492 @@
+#!/usr/bin/python
+# -*- coding: utf-8 -*-
+
+"""
+Libervia: a Salut à Toi frontend
+Copyright (C) 2013 Adrien Cossa <souliane@mailoo.org>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+"""
+
+from pyjamas.ui.Grid import Grid
+from pyjamas.ui.Button import Button
+from pyjamas.ui.ListBox import ListBox
+from pyjamas.ui.FlowPanel import FlowPanel
+from pyjamas.ui.PopupPanel import PopupPanel
+from pyjamas.ui.AutoComplete import AutoCompleteTextBox
+from pyjamas.ui.Label import Label
+from pyjamas.ui.HorizontalPanel import HorizontalPanel
+from pyjamas.ui.VerticalPanel import VerticalPanel
+from pyjamas.ui.DialogBox import DialogBox
+from pyjamas.ui.KeyboardListener import KEY_ENTER, KeyboardHandler
+from pyjamas.ui.MouseListener import MouseHandler
+from pyjamas.ui.FocusListener import FocusHandler
+from pyjamas.ui.DropWidget import DropWidget
+from pyjamas.ui.DragWidget import DragWidget
+from pyjamas.Timer import Timer
+from pyjamas import DOM
+
+# Map the recipient types to their properties. For convenience, the key
+# value is copied during the initialization to its associated sub-map,
+# stored in the value of a new entry which uses "key" as its key.
+RECIPIENT_TYPES = {"To": {"desc": "Direct recipients", "optional": False},
+                   "Cc": {"desc": "Carbon copies", "optional": True},
+                   "Bcc": {"desc": "Blind carbon copies", "optional": True}}
+
+# HTML content for the removal button (image or text)
+REMOVE_BUTTON = '<span class="richTextRemoveIcon">x</span>'
+
+# Item to be considered for an empty list box selection.
+# Could be whatever which doesn't look like a JID or a group name.
+EMPTY_SELECTION_ITEM = ""
+
+
+class RecipientManager():
+    """A manager for sub-panels to set the recipients for each recipient type."""
+
+    def __init__(self, parent):
+        """"""
+        self._parent = parent
+        self.host = parent.host
+
+        self.__list = []
+        # TODO: be sure we also display empty groups and disconnected contacts + their groups
+        # store the full list of potential recipients (groups and contacts)
+        self.__list.extend("@%s" % group for group in self.host.contact_panel.getGroups())
+        self.__list.extend(contact for contact in self.host.contact_panel.getContacts())
+        self.__list.sort()
+        # store the list of recipients that are not selected yet
+        self.__remaining_list = []
+        self.__remaining_list.extend(self.__list)
+        # mark a change to sort the list before it's used
+        self.__remaining_list_sorted = True
+
+    def createWidgets(self):
+        """Fill the parent grid with all the widgets but
+        only show those for non optional recipient types."""
+        self.__children = {}
+        for key in RECIPIENT_TYPES:
+            # copy the key to its associated sub-map
+            RECIPIENT_TYPES[key]["key"] = key
+            self._addChild(RECIPIENT_TYPES[key])
+
+    def _addChild(self, entry):
+        """Add a button and FlowPanel for the corresponding map entry."""
+        button = Button("%s: " % entry["key"], self.selectRecipientType)
+        button.addStyleName("recipientTypeItem")
+        button.setTitle(entry["desc"])
+        button.setVisible(not entry["optional"])
+        self._parent.setWidget(len(self.__children), 0, button)
+        self._parent.getCellFormatter().setStyleName(len(self.__children), 0, "recipientButtonCell")
+
+        _child = RecipientTypePanel(self, entry)
+        self._parent.setWidget(len(self.__children), 1, _child)
+
+        self.__children[entry["key"]] = {}
+        self.__children[entry["key"]]["button"] = button
+        self.__children[entry["key"]]["panel"] = _child
+
+    def _refresh(self):
+        """Set visible the sub-panels that are non optional or non empty, hide the rest."""
+        for key in self.__children:
+            self.setRecipientPanelVisible(key, False)
+        _map = self.getRecipients()
+        for key in _map:
+            if len(_map[key]) > 0 or not RECIPIENT_TYPES[key]["optional"]:
+                self.setRecipientPanelVisible(key, True)
+
+    def setRecipientPanelVisible(self, key, visible=True):
+        self.__children[key]["button"].setVisible(visible)
+        self.__children[key]["panel"].setVisible(visible)
+
+    def getList(self):
+        """Return the full list of potential recipients."""
+        return self.__list
+
+    def getRemainingList(self):
+        """Return the recipients that have not been selected yet."""
+        if not self.__remaining_list_sorted:
+            self.__remaining_list_sorted = True
+            self.__remaining_list.sort()
+        return self.__remaining_list
+
+    def setRemainingListUnsorted(self):
+        """Mark a change (deletion) so the list will be sorted before it's used."""
+        self.__remaining_list_sorted = False
+
+    def removeFromRemainingList(self, recipient):
+        """Remove an available recipient after it has been added to a sub-panel."""
+        if recipient in self.__remaining_list:
+            self.__remaining_list.remove(recipient)
+
+    def addToRemainingList(self, recipient):
+        """Add a recipient after it has been removed from a sub-panel."""
+        self.__remaining_list.append(recipient)
+        self.__sort_remaining_list = True
+
+    def selectRecipients(self):
+        """Display the recipients chooser dialog. This has been implemented while
+        prototyping and is currently not used. Left for an eventual later use.
+        Replaced by self.selectRecipientType.
+        """
+        RecipientChooserPanel(self)
+
+    def selectRecipientType(self, sender):
+        """Display a context menu to add a new recipient type."""
+        self.context_menu = VerticalPanel()
+        self.context_menu.setStyleName("recipientTypeMenu")
+        popup = PopupPanel(autoHide=True)
+
+        for key in RECIPIENT_TYPES:
+            if self.__children[key]["panel"].isVisible():
+                continue
+
+            def showPanel(sender):
+                self.setRecipientPanelVisible(sender.getText())
+                popup.hide(autoClosed=True)
+
+            item = Button(key, showPanel)
+            item.setStyleName("recipientTypeItem")
+            item.setTitle(RECIPIENT_TYPES[key]["desc"])
+            self.context_menu.add(item)
+
+        popup.add(self.context_menu)
+        popup.setPopupPosition(sender.getAbsoluteLeft() + sender.getOffsetWidth(), sender.getAbsoluteTop())
+        popup.show()
+
+    def setRecipients(self, _map={}):
+        """Set the recipients for each recipient types."""
+        for key in RECIPIENT_TYPES:
+            if key in _map:
+                self.__children[key]["panel"].setRecipients(_map[key])
+            else:
+                self.__children[key]["panel"].setRecipients([])
+        self._refresh()
+
+    def getRecipients(self):
+        """Get the recipients for all the recipient types.
+        @return: a mapping between keys from RECIPIENT_TYPES.keys() and recipient arrays."""
+        _map = {}
+        for key in self.__children:
+            _map[key] = self.__children[key]["panel"].getRecipients()
+        return _map
+
+    def setTargetDropCell(self, panel):
+        """Used to drap and drop the recipients from one panel to another."""
+        self._target_drop_cell = panel
+
+    def getTargetDropCell(self):
+        """Used to drap and drop the recipients from one panel to another."""
+        return self._target_drop_cell
+
+
+class DragAutoCompleteTextBox(AutoCompleteTextBox, DragWidget):
+    """A draggable AutoCompleteTextBox which is used for representing a recipient.
+    This class is NOT generic because of the onDragEnd method which call methods
+    from RecipientTypePanel. It's probably not reusable for another scenario.
+    """
+
+    def __init__(self):
+        AutoCompleteTextBox.__init__(self)
+        DragWidget.__init__(self)
+
+    def onDragStart(self, event):
+        dt = event.dataTransfer
+        # The group prefix "@" is already in text so we use only the "CONTACT" type
+        dt.setData('text/plain', "%s\n%s" % (self.getText(), "RECIPIENT_TEXTBOX"))
+
+    def onDragEnd(self, event):
+        if self.getText() == "":
+            return
+        # get the RecipientTypePanel containing self
+        parent = self.getParent()
+        while parent is not None and not isinstance(parent, RecipientTypePanel):
+            parent = parent.getParent()
+        if parent is None:
+            return
+        # it will return parent again or another RecipientTypePanel
+        target = parent.getTargetDropCell()
+        if target == parent:
+            return
+        target.addRecipient(self.getText())
+        if hasattr(self, "remove_btn"):
+            # self is not the last textbox, just remove it
+            self.remove_btn.click()
+        else:
+            # reset the value of the last textbox
+            self.setText("")
+
+
+class DropCell(DropWidget):
+    """A cell where you can drop widgets. This class is NOT generic because of
+    onDrop which uses methods from RecipientTypePanel. It has been created to
+    separate the drag and drop methods from the others and add a bit of
+    lisibility, but it's probably not reusable for another scenario.
+    """
+
+    def __init__(self, host):
+        DropWidget.__init__(self)
+
+    def onDragEnter(self, event):
+        self.addStyleName('dragover-recipientPanel')
+        DOM.eventPreventDefault(event)
+
+    def onDragLeave(self, event):
+        if event.clientX <= self.getAbsoluteLeft() or event.clientY <= self.getAbsoluteTop()\
+            or event.clientX >= self.getAbsoluteLeft() + self.getOffsetWidth() - 1\
+            or event.clientY >= self.getAbsoluteTop() + self.getOffsetHeight() - 1:
+            # We check that we are inside widget's box, and we don't remove the style in this case because
+            # if the mouse is over a widget inside the DropWidget, we don't want the style to be removed
+            self.removeStyleName('dragover-recipientPanel')
+
+    def onDragOver(self, event):
+        DOM.eventPreventDefault(event)
+
+    def onDrop(self, event):
+        DOM.eventPreventDefault(event)
+        dt = event.dataTransfer
+        # 'text', 'text/plain', and 'Text' are equivalent.
+        item, item_type = dt.getData("text/plain").split('\n')  # Workaround for webkit, only text/plain seems to be managed
+        if item_type and item_type[-1] == '\0':  # Workaround for what looks like a pyjamas bug: the \0 should not be there, and
+            item_type = item_type[:-1]           # .strip('\0') and .replace('\0','') don't work. TODO: check this and fill a bug report
+        if item_type == "GROUP":
+            item = "@%s" % item
+            self.addRecipient(item)
+        elif item_type == "CONTACT":
+            self.addRecipient(item)
+        elif item_type == "RECIPIENT_TEXTBOX":
+            self._parent.setTargetDropCell(self)
+            pass
+        else:
+            return
+        self.removeStyleName('dragover-recipientPanel')
+
+
+class RecipientTypePanel(FlowPanel, KeyboardHandler, MouseHandler, FocusHandler, DropCell):
+    """Sub-panel used for each recipient type. Beware that pyjamas.ui.FlowPanel
+    is not fully implemented yet and can not be used with pyjamas.ui.Label."""
+
+    def __init__(self, parent, entry):
+        """Initialization with a button and a DragAutoCompleteTextBox."""
+        FlowPanel.__init__(self, Visible=(False if entry["optional"] else True))
+        DropCell.__init__(self)
+        self.addStyleName("recipientPanel")
+        self._parent = parent
+        self.host = parent.host
+
+        self._last_textbox = None
+        self.__remove_cbs = []
+
+        self.__resetLastTextBox()
+
+    def __resetLastTextBox(self, setFocus=True):
+        """Reset the last input text box with KeyboardListener."""
+        if self._last_textbox is None:
+            self._last_textbox = DragAutoCompleteTextBox()
+            self._last_textbox.addStyleName("recipientTextBox")
+            self._last_textbox.addKeyboardListener(self)
+            self._last_textbox.addFocusListener(self)
+        else:
+            # ensure we move it to the last position
+            self.remove(self._last_textbox)
+        self._last_textbox.setText("")
+        self.add(self._last_textbox)
+        self._last_textbox.setFocus(setFocus)
+
+    def onKeyUp(self, sender, keycode, modifiers):
+        """This is called after DragAutoCompleteTextBox.onKeyDown,
+        so the completion is done before we reset the text box."""
+        if not isinstance(sender, DragAutoCompleteTextBox):
+            return
+        if keycode == KEY_ENTER:
+            self.onLostFocus(sender)
+            self._last_textbox.setFocus(True)
+
+    def onFocus(self, sender):
+        """A DragAutoCompleteTextBox has the focus."""
+        if not isinstance(sender, DragAutoCompleteTextBox):
+            return
+        if sender != self._last_textbox:
+            # save the current value before it's being modified
+            text = sender.getText()
+            self._focused_textbox_previous_value = text
+            self._parent.addToRemainingList(text)
+        sender.setCompletionItems(self._parent.getRemainingList())
+
+    def onLostFocus(self, sender):
+        """A DragAutoCompleteTextBox has lost the focus."""
+        if not isinstance(sender, DragAutoCompleteTextBox):
+            return
+        self.changeRecipient(sender)
+
+    def changeRecipient(self, sender):
+        """Modify the value of a DragAutoCompleteTextBox."""
+        text = sender.getText()
+        if sender == self._last_textbox:
+            if text != "":
+                # a new box is added and the last textbox is reinitialized
+                self.addRecipient(text, setFocusToLastTextBox=False)
+            return
+        if text == "":
+            sender.remove_btn.click()
+            return
+        # text = new value needs to be removed 1. if the value is unchanged, because we
+        # added it when we took the focus, or 2. if the value is changed (obvious!)
+        self._parent.removeFromRemainingList(text)
+        if text == self._focused_textbox_previous_value:
+            return
+        sender.setVisibleLength(len(text))
+        self._parent.addToRemainingList(self._focused_textbox_previous_value)
+
+    def addRecipient(self, recipient, resetLastTextBox=True, setFocusToLastTextBox=True):
+        """Add a recipient and signal it to self._parent panel."""
+        if recipient is None or recipient == "":
+            return
+        textbox = DragAutoCompleteTextBox()
+        textbox.addStyleName("recipientTextBox")
+        textbox.setText(recipient)
+        self.add(textbox)
+        try:
+            textbox.setVisibleLength(len(recipient))
+        except:
+            #TODO: . how come could this happen?! len(recipient) is sometimes 0 but recipient is not empty
+            print "len(recipient) returns %d where recipient == %s..." % (len(recipient), recipient)
+        self._parent.removeFromRemainingList(recipient)
+
+        remove_btn = Button(REMOVE_BUTTON, Visible=False)
+        remove_btn.addStyleName("recipientRemoveButton")
+
+        def remove_cb(sender):
+            """Callback for the button to remove this recipient."""
+            self.remove(textbox)
+            self.remove(remove_btn)
+            self._parent.addToRemainingList(recipient)
+            self._parent.setRemainingListUnsorted()
+
+        remove_btn.addClickListener(remove_cb)
+        self.__remove_cbs.append(remove_cb)
+        self.add(remove_btn)
+        self.__resetLastTextBox(setFocus=setFocusToLastTextBox)
+
+        textbox.remove_btn = remove_btn
+        textbox.addMouseListener(self)
+        textbox.addFocusListener(self)
+        textbox.addKeyboardListener(self)
+
+    def emptyRecipients(self):
+        """Empty the list of recipients."""
+        for remove_cb in self.__remove_cbs:
+            remove_cb()
+        self.__remove_cbs = []
+
+    def onMouseMove(self, sender):
+        """Mouse enters the area of a DragAutoCompleteTextBox."""
+        if hasattr(sender, "remove_btn"):
+            sender.remove_btn.setVisible(True)
+
+    def onMouseLeave(self, sender):
+        """Mouse leaves the area of a DragAutoCompleteTextBox."""
+        if hasattr(sender, "remove_btn"):
+            Timer(1500, lambda: sender.remove_btn.setVisible(False))
+
+    def setRecipients(self, tab):
+        """Set the recipients."""
+        self.emptyRecipients()
+        for recipient in tab:
+            self.addRecipient(recipient, resetLastTextBox=False)
+        self.__resetLastTextBox()
+
+    def getRecipients(self):
+        """Get the recipients
+        @return: an array of string"""
+        tab = []
+        for widget in self.getChildren():
+            if isinstance(widget, DragAutoCompleteTextBox):
+                # not to be mixed with EMPTY_SELECTION_ITEM
+                if widget.getText() != "":
+                    tab.append(widget.getText())
+        return tab
+
+    def getTargetDropCell(self):
+        """Returns self or another panel where something has been dropped."""
+        return self._parent.getTargetDropCell()
+
+
+class RecipientChooserPanel(DialogBox):
+    """Display the recipients chooser dialog. This has been implemented while
+    prototyping and is currently not used. Left for an eventual later use.
+    Replaced by the popup menu which allows to add a panel for Cc or Bcc.
+    """
+
+    def __init__(self, manager, **kwargs):
+        """Display a listbox for each recipient type"""
+        DialogBox.__init__(self, autoHide=False, centered=True, **kwargs)
+        self.setHTML("Select recipients")
+        self.manager = manager
+        self.listboxes = {}
+        self.recipients = manager.getRecipients()
+
+        container = VerticalPanel(Visible=True)
+        container.addStyleName("marginAuto")
+
+        grid = Grid(2, len(RECIPIENT_TYPES))
+        index = -1
+        for key in RECIPIENT_TYPES:
+            index += 1
+            grid.add(Label("%s:" % RECIPIENT_TYPES[key]["desc"]), 0, index)
+            listbox = ListBox()
+            listbox.setMultipleSelect(True)
+            listbox.setVisibleItemCount(15)
+            listbox.addItem(EMPTY_SELECTION_ITEM)
+            for element in manager.getList():
+                listbox.addItem(element)
+            self.listboxes[key] = listbox
+            grid.add(listbox, 1, index)
+        self._reset()
+
+        buttons = HorizontalPanel()
+        buttons.addStyleName("marginAuto")
+        btn_close = Button("Cancel", self.hide)
+        buttons.add(btn_close)
+        btn_reset = Button("Reset", self._reset)
+        buttons.add(btn_reset)
+        btn_ok = Button("OK", self._validate)
+        buttons.add(btn_ok)
+
+        container.add(grid)
+        container.add(buttons)
+
+        self.add(container)
+        self.center()
+
+    def _reset(self):
+        """Reset the selections."""
+        for key in RECIPIENT_TYPES:
+            listbox = self.listboxes[key]
+            for i in xrange(0, listbox.getItemCount()):
+                if listbox.getItemText(i) in self.recipients[key]:
+                    listbox.setItemSelected(i, "selected")
+                else:
+                    listbox.setItemSelected(i, "")
+
+    def _validate(self):
+        """Sets back the selected recipients to the good sub-panels."""
+        _map = {}
+        for key in RECIPIENT_TYPES:
+            selections = self.listboxes[key].getSelectedItemText()
+            if EMPTY_SELECTION_ITEM in selections:
+                selections.remove(EMPTY_SELECTION_ITEM)
+            _map[key] = selections
+        self.manager.setRecipients(_map)
+        self.hide()
diff -r fab7aa366576 -r 0ed09cc0566f browser_side/richtext.py
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser_side/richtext.py	Tue Oct 08 14:12:38 2013 +0200
@@ -0,0 +1,310 @@
+#!/usr/bin/python
+# -*- coding: utf-8 -*-
+
+"""
+Libervia: a Salut à Toi frontend
+Copyright (C) 2013 Adrien Cossa <souliane@mailoo.org>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+"""
+
+from dialog import ConfirmDialog
+from pyjamas.ui.TextArea import TextArea
+from pyjamas.ui.Button import Button
+from dialog import InfoDialog
+from pyjamas.ui.DialogBox import DialogBox
+from pyjamas.ui.Label import Label
+from pyjamas.ui.FlexTable import FlexTable
+from pyjamas.ui.HorizontalPanel import HorizontalPanel
+from recipients import RECIPIENT_TYPES, RecipientManager
+
+BUTTONS = {
+    "bold": {"tip": "Bold", "icon": "media/icons/dokuwiki/toolbar/16/bold.png"},
+    "italic": {"tip": "Italic", "icon": "media/icons/dokuwiki/toolbar/16/italic.png"},
+    "underline": {"tip": "Underline", "icon": "media/icons/dokuwiki/toolbar/16/underline.png"},
+    "code": {"tip": "Code", "icon": "media/icons/dokuwiki/toolbar/16/mono.png"},
+    "strikethrough": {"tip": "Strikethrough", "icon": "media/icons/dokuwiki/toolbar/16/strike.png"},
+    "heading": {"tip": "Heading", "icon": "media/icons/dokuwiki/toolbar/16/hequal.png"},
+    "numberedlist": {"tip": "Numbered List", "icon": "media/icons/dokuwiki/toolbar/16/ol.png"},
+    "list": {"tip": "List", "icon": "media/icons/dokuwiki/toolbar/16/ul.png"},
+    "link": {"tip": "Link", "icon": "media/icons/dokuwiki/toolbar/16/linkextern.png"},
+    "horizontalrule": {"tip": "Horizontal rule", "icon": "media/icons/dokuwiki/toolbar/16/hr.png"}
+    }
+
+# Define here your formats, the key must match the ones used in button.
+# Tupples values must have 3 elements : prefix to the selection or cursor
+# position, sample text to write if the marker is not applied on a selection,
+# suffix to the selection or cursor position.
+FORMATS = {"markdown": {"bold": ("**", "bold", "**"),
+                        "italic": ("*", "italic", "*"),
+                        "code": ("`", "code", "`"),
+                        "heading": ("\n# ", "Heading 1", "\n## Heading 2\n"),
+                        "list": ("\n* ", "item", "\n    + subitem\n"),
+                        "link": ("[desc](", "link", ")"),
+                        "horizontalrule": ("\n***\n", "", "")
+                        },
+           "bbcode": {"bold": ("[b]", "bold", "[/b]"),
+                      "italic": ("[i]", "italic", "[/i]"),
+                      "underline": ("[u]", "underline", "[/u]"),
+                      "strikethrough": ("[s]", "strikethrough", "[/s]"),
+                      "code": ("[code]", "code", "[/code]"),
+                      "link": ("[url=", "link", "]desc[/url]"),
+                      "list": ("\n[list] [*]", "item 1", " [*]item 2 [/list]\n")
+                     },
+           "dokuwiki": {"bold": ("**", "bold", "**"),
+                        "italic": ("//", "italic", "//"),
+                        "underline": ("__", "underline", "__"),
+                        "strikethrough": ("<del>", "strikethrough", "</del>"),
+                        "code": ("<code>", "code", "</code>"),
+                        "heading": ("\n==== ", "Heading 1", " ====\n=== Heading 2 ===\n"),
+                        "link": ("[[", "link", "|desc]]"),
+                        "list": ("\n  * ", "item\n", "\n    * subitem\n"),
+                        "horizontalrule": ("\n----\n", "", "")
+                        },
+           "html": {"bold": ("<b>", "bold", "</b>"),
+                        "italic": ("<i>", "italic", "</i>"),
+                        "underline": ("<u>", "underline", "</u>"),
+                        "strikethrough": ("<s>", "strikethrough", "</s>"),
+                        "code": ("<pre>", "code", "</pre>"),
+                        "heading": ("\n<h3>", "Heading 1", "</h3>\n<h4>Heading 2</h4>\n"),
+                        "link": ("<a href=\"", "link", "\">desc</a>"),
+                        "list": ("\n<ul><li>", "item 1", "</li><li>item 2</li></ul>\n"),
+                        "horizontalrule": ("\n<hr/>\n", "", "")
+                        }
+
+           }
+
+FORMAT_PARAM_KEY = "Composition and addressing"
+FORMAT_PARAM_NAME = "Format for rich text message composition"
+
+
+class RichTextEditor(FlexTable):
+    """Panel for the rich text editor."""
+
+    def __init__(self, host, parent=None, onCloseCallback=None):
+        """Fill the editor with recipients panel, toolbar, text area..."""
+
+        # TODO: don't forget to comment this before commit
+        self._debug = False
+
+        # This must be done before FlexTable.__init__ because it is used by setVisible
+        self.host = host
+
+        offset1 = len(RECIPIENT_TYPES)
+        offset2 = len(FORMATS) if self._debug else 1
+        FlexTable.__init__(self, offset1 + offset2 + 2, 2)
+        self.addStyleName('richTextEditor')
+
+        self._parent = parent
+        self._on_close_callback = onCloseCallback
+
+        # recipient types sub-panels are automatically added by the manager
+        self.recipient = RecipientManager(self)
+        self.recipient.createWidgets()
+
+        # Rich text tool bar is automatically added by setVisible
+
+        self.textarea = TextArea()
+        self.textarea.addStyleName('richTextArea')
+
+        self.command = HorizontalPanel()
+        self.command.addStyleName("marginAuto")
+        self.command.add(Button("Cancel", listener=self.cancelWithoutSaving))
+        self.command.add(Button("Back to quick box", listener=self.closeAndSave))
+        self.command.add(Button("Send message", listener=self.sendMessage))
+
+        self.getFlexCellFormatter().setColSpan(offset1 + offset2, 0, 2)
+        self.getFlexCellFormatter().setColSpan(offset1 + offset2 + 1, 0, 2)
+        self.setWidget(offset1 + offset2, 0, self.textarea)
+        self.setWidget(offset1 + offset2 + 1, 0, self.command)
+
+    @classmethod
+    def getOrCreate(cls, host, parent=None, onCloseCallback=None):
+        """Get or create the richtext editor associated to that host.
+        Add it to parent if parent is not None, otherwise display it
+        in a popup dialog. Information are saved for later the widget
+        to be also automatically removed from its parent, or the
+        popup to be closed.
+        @param host: the host
+        @popup parent: parent panel (in a popup if parent == None) .
+        @return: the RichTextEditor instance if popup is False, otherwise
+        a popup DialogBox containing the RichTextEditor.
+        """
+        if not hasattr(host, 'richtext'):
+            host.richtext = RichTextEditor(host, parent, onCloseCallback)
+
+        def add(widget, parent):
+            if widget.getParent() is not None:
+                if widget.getParent() != parent:
+                    widget.removeFromParent()
+                    parent.add(widget)
+            else:
+                parent.add(widget)
+            widget.setVisible(True)
+
+        if parent is None:
+            if not hasattr(host.richtext, 'popup'):
+                host.richtext.popup = DialogBox(autoHide=False, centered=True)
+                host.richtext.popup.setHTML("Compose your message")
+                host.richtext.popup.add(host.richtext)
+            add(host.richtext, host.richtext.popup)
+            host.richtext.popup.center()
+        else:
+            add(host.richtext, parent)
+        host.richtext.syncFromUniBox()
+        return host.richtext.popup if parent is None else host.richtext
+
+    def setVisible(self, kwargs):
+        """Called each time the widget is displayed, after creation or after having been hidden."""
+        self.host.bridge.call('asyncGetParamA', self.setToolBar, FORMAT_PARAM_NAME, FORMAT_PARAM_KEY)
+        FlexTable.setVisible(self, kwargs)
+
+    def __close(self):
+        """Remove the widget from parent or close the popup."""
+        if self._parent is None:
+            self.popup.hide()
+        else:
+            self.setVisible(False)
+        if self._on_close_callback is not None:
+            self._on_close_callback()
+
+    def setToolBar(self, _format):
+        """This method is called asynchronously after the parameter
+        holding the rich text format is retrieved. It is called at
+        each opening of the rich text editor because the user may
+        have change his setting since the last time."""
+        if _format is None or _format not in FORMATS.keys():
+            _format = FORMATS.keys()[0]
+        if hasattr(self, "_format") and self._format == _format:
+            return
+        self._format = _format
+        offset1 = len(RECIPIENT_TYPES)
+        count = 0
+        for _format in FORMATS.keys() if self._debug else [self._format]:
+            toolbar = HorizontalPanel()
+            toolbar.addStyleName('richTextToolbar')
+            for key in FORMATS[_format].keys():
+                self.addToolbarButton(toolbar, _format, key)
+            label = Label("Format: %s" % _format)
+            label.addStyleName("richTextFormatLabel")
+            toolbar.add(label)
+            self.getFlexCellFormatter().setColSpan(offset1 + count, 0, 2)
+            self.setWidget(offset1 + count, 0, toolbar)
+            count += 1
+
+    def addToolbarButton(self, toolbar, _format, key):
+        """Add a button with the defined parameters."""
+        button = Button('<img src="%s" class="richTextIcon" />' %
+                        BUTTONS[key]["icon"])
+        button.setTitle(BUTTONS[key]["tip"])
+        button.addStyleName('richTextToolButton')
+        toolbar.add(button)
+
+        def button_callback():
+            """Generic callback for a toolbar button."""
+            text = self.textarea.getText()
+            cursor_pos = self.textarea.getCursorPos()
+            selection_length = self.textarea.getSelectionLength()
+            infos = FORMATS[_format][key]
+            if selection_length == 0:
+                middle_text = infos[1]
+            else:
+                middle_text = text[cursor_pos:cursor_pos + selection_length]
+            self.textarea.setText(text[:cursor_pos]
+                                  + infos[0]
+                                  + middle_text
+                                  + infos[2]
+                                  + text[cursor_pos + selection_length:])
+            self.textarea.setCursorPos(cursor_pos + len(infos[0]) + len(middle_text))
+            self.textarea.setFocus(True)
+
+        button.addClickListener(button_callback)
+
+    def syncFromUniBox(self):
+        """Synchronize from unibox."""
+        data, target = self.host.uni_box.getTargetAndData()
+        self.recipient.setRecipients({"To": [target]} if target else {})
+        self.textarea.setText(data if data else "")
+
+    def syncToUniBox(self, recipients=None):
+        """Synchronize to unibox if a maximum of one recipient is set,
+        and it is not set to for optional recipient type. That means
+        synchronization is not done if more then one recipients are set
+        or if a recipient is set to an optional type (Cc, Bcc).
+        @return True if the sync could be done, False otherwise"""
+        if recipients is None:
+            recipients = self.recipient.getRecipients()
+        target = ""
+        # we could eventually allow more in the future
+        allowed = 1
+        for key in recipients:
+            count = len(recipients[key])
+            if count == 0:
+                continue
+            allowed -= count
+            if allowed < 0 or RECIPIENT_TYPES[key]["optional"]:
+                return False
+            # TODO: change this if later more then one recipients are allowed
+            target = recipients[key][0]
+        self.host.uni_box.setText(self.textarea.getText())
+        from panels import ChatPanel, MicroblogPanel
+        if target == "":
+            return True
+        if target.startswith("@"):
+            _class = MicroblogPanel
+            target = None if target == "@@" else target[1:]
+        else:
+            _class = ChatPanel
+        self.host.getOrCreateLiberviaWidget(_class, target)
+        return True
+
+    def cancelWithoutSaving(self):
+        """Ask for confirmation before closing the dialog."""
+        def confirm_cb(answer):
+            if answer:
+                self.__close()
+
+        _dialog = ConfirmDialog(confirm_cb, text="Do you really want to cancel this message?")
+        _dialog.show()
+
+    def closeAndSave(self):
+        """Synchronize to unibox and close the dialog afterward. Display
+        a message and leave the dialog open if the sync was not possible."""
+        if self.syncToUniBox():
+            self.__close()
+            return
+        InfoDialog("Too many recipients",
+                   "A message with more than one direct recipient (To)," +
+                   " or with any special recipient (Cc or Bcc), could not be" +
+                   " stored in the quick box.\n\nPlease finish your composing" +
+                   " in the rich text editor, and send your message directly" +
+                   " from here.", Width="400px").center()
+
+    def sendMessage(self):
+        """Send the message."""
+        recipients = self.recipient.getRecipients()
+        if self.syncToUniBox(recipients):
+            # also check that we actually have a message target and data
+            if len(recipients["To"]) > 0 and self.textarea.getText() != "":
+                from pyjamas.ui.KeyboardListener import KEY_ENTER
+                self.host.uni_box.onKeyPress(self.host.uni_box, KEY_ENTER, None)
+                self.__close()
+            else:
+                InfoDialog("Missing information",
+                           "Some information are missing and the message hasn't been sent," +
+                           " but it has been stored to the quick box instead.", Width="400px").center()
+            return
+        InfoDialog("Feature in development",
+                   "Sending a message to more the one recipient," +
+                   " to Cc or Bcc is not implemented yet!", Width="400px").center()
diff -r fab7aa366576 -r 0ed09cc0566f public/libervia.css
--- a/public/libervia.css	Tue Oct 08 13:38:42 2013 +0200
+++ b/public/libervia.css	Tue Oct 08 14:12:38 2013 +0200
@@ -377,6 +377,14 @@
 
 div.contactBox {
     width: 100%;
+	/* We want the contact panel to not use all the available height when displayed
+	   in the unibox panel (grey part), because the dialogs panels (white part) should
+	   still be visible. The setting max-height: fit-content would be appropriate here
+	   but it doesn't work with firefox 24.0. TODO: check if the current setting works
+	   with other browsers... the panel should of course not be displayed on 100px
+	   but exactly fit the contacts box.
+     */
+	max-height: 100px;
 }
 
 .contactTitle {
@@ -472,6 +480,7 @@
 }
 
 .uniBox {
+    width: 100%;
     height: 45px;
     padding: 5px;
     border: 1px solid #bbb;
@@ -482,6 +491,11 @@
     -moz-box-shadow:inset 0 0 10px #ddd;
 }
 
+.uniBoxButton {
+    width:30px;
+    height:45px;
+}
+
 .statusPanel {
     margin: auto;
     text-align: center;
@@ -1126,3 +1140,106 @@
 a:hover.url {
     text-decoration: underline
 }
+
+/* Rich Text Editor */
+
+.richTextEditor {
+	width: 600px;
+	max-width:600px;
+	min-width: 600px;
+	margin-top: 9px;
+	margin-left:18px;
+}
+
+.richTextToolbar {
+	margin: 15px auto auto 0px;
+}
+
+.richTextFormatLabel {
+	text-align: right;
+	margin: 14px 0px 0px 14px;
+	font-size: 12px;
+}
+
+.richTextArea {
+    width:100%;
+    height:250px;
+}
+
+.richTextToolButton {
+	cursor: pointer;
+    width:26px;
+    height:26px;
+    vertical-align: middle;
+    margin: 2px 1px;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    box-shadow: 0px 1px 4px #000;
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+	border: none;
+	-webkit-transition: color 0.2s linear; 
+    -moz-transition: color 0.2s linear; 
+    -o-transition: color 0.2s linear;
+}
+
+.richTextIcon {
+    width:16px;
+    height:16px;
+    vertical-align: middle;
+}
+
+/* Recipients panel */
+
+.recipientButtonCell {
+	width:55px;
+}
+
+.recipientTypeMenu {
+}
+
+.recipientTypeItem {
+	cursor: pointer;
+    border-radius: 5px;
+    width: 50px;
+}
+
+.recipientPanel {
+}
+
+.recipientTextBox {
+	cursor: pointer;
+    width: auto;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6);
+    -webkit-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
+    -moz-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
+    padding: 2px 1px;
+    margin: 0px;
+    color: #444;
+    font-size: 1em;
+}
+
+.recipientRemoveButton {
+	margin: 0px 10px 0px 0px;
+	padding: 0px;
+	border: 1px dashed red;
+    border-radius: 5px 5px 5px 5px;
+}
+
+.richTextRemoveIcon {
+	color: red;
+    width:15px;
+    height:15px;
+	vertical-align: baseline;
+}
+
+.dragover-recipientPanel {
+	border-radius: 5px;
+    background: none repeat scroll 0% 0% rgb(135, 179, 255);
+    border: 1px dashed rgb(35,79,255);
+}
+