# HG changeset patch
# User souliane <souliane@mailoo.org>
# Date 1392251604 -3600
# Node ID ddb909ab5cbcce16f914c3dbdf7a4c54cf12ab8d
# Parent  2610443b05a2f0dd4c81202f32a184922ebcec79
browser_side: wysiwyg edtion, first steps (do not use the buttons yet)

diff -r 2610443b05a2 -r ddb909ab5cbc browser_side/richtext.py
--- a/browser_side/richtext.py	Thu Feb 13 01:17:07 2014 +0100
+++ b/browser_side/richtext.py	Thu Feb 13 01:33:24 2014 +0100
@@ -19,6 +19,7 @@
 
 from pyjamas.ui.TextArea import TextArea
 from pyjamas.ui.Button import Button
+from pyjamas.ui.CheckBox import CheckBox
 from pyjamas.ui.DialogBox import DialogBox
 from pyjamas.ui.Label import Label
 from pyjamas.ui.HTML import HTML
@@ -140,10 +141,54 @@
             label = Label(_("Syntax: %s") % syntax)
             label.addStyleName("richTextSyntaxLabel")
             self.toolbar.add(label)
+            self.wysiwyg_button = CheckBox('Wysiwyg edition')
+            wysiywgCb = lambda sender: self.setWysiwyg(sender.getChecked())
+            self.wysiwyg_button.addClickListener(wysiywgCb)
+            self.toolbar.add(self.wysiwyg_button)
             self.getFlexCellFormatter().setColSpan(self.toolbar_offset + count, 0, 2)
             self.setWidget(self.toolbar_offset + count, 0, self.toolbar)
             count += 1
 
+    def setWysiwyg(self, wysiwyg, init=False):
+        """Toggle the edition mode between rich content syntax and wysiwyg.
+        @param wysiwyg: boolean value
+        @param init: set to True to re-init without switching the widgets."""
+        def setWysiwyg():
+            self.wysiwyg = wysiwyg
+            if hasattr(self, 'wysiwyg_button'):
+                self.wysiwyg_button.setChecked(wysiwyg)
+            if not wysiwyg:
+                self.display.removeStyleName('richTextWysiwyg')
+
+        if init:
+            setWysiwyg()
+            return
+
+        self.getFlexCellFormatter().setColSpan(self.content_offset, 0, 2)
+        if wysiwyg:
+            def syntaxConvertCb(text):
+                self.display.setContent({'text': text})
+                self.textarea.removeFromParent()  # XXX: force as it is not always done...
+                self.setWidget(self.content_offset, 0, self.display)
+                self.display.addStyleName('richTextWysiwyg')
+                self.display.edit(True)
+            content = self.getContent()
+            if content['text'] and content['syntax'] != Const.SYNTAX_XHTML:
+                self.host.bridge.call('syntaxConvert', syntaxConvertCb, content['text'], content['syntax'], Const.SYNTAX_XHTML)
+            else:
+                syntaxConvertCb(content['text'])
+        else:
+            syntaxConvertCb = lambda text: self.textarea.setText(text)
+            text = self.display.getContent()['text']
+            if text and self.toolbar.syntax != Const.SYNTAX_XHTML:
+                self.host.bridge.call('syntaxConvert', syntaxConvertCb, text)
+            else:
+                syntaxConvertCb(text)
+            self.setWidget(self.content_offset, 0, self.textarea)
+            self.textarea.setWidth('100%')  # CSS width doesn't do it, don't know why
+
+        setWysiwyg()  # do it in the end because it affects self.getContent
+
     def addToolbarButton(self, syntax, key):
         """Add a button with the defined parameters."""
         button = Button('<img src="%s" class="richTextIcon" />' %
@@ -175,7 +220,10 @@
     def getContent(self):
         assert(hasattr(self, 'textarea'))
         assert(hasattr(self, 'toolbar'))
-        content = {'text': self.strproc(self.textarea.getText()), 'syntax': self.toolbar.syntax}
+        if self.wysiwyg:
+            content = {'text': self.display.getContent()['text'], 'syntax': Const.SYNTAX_XHTML}
+        else:
+            content = {'text': self.strproc(self.textarea.getText()), 'syntax': self.toolbar.syntax}
         if hasattr(self, 'title_panel'):
             content.update({'title': self.strproc(self.title_panel.getText())})
         return content
@@ -191,9 +239,11 @@
         """
         self.refresh(edit)
         BaseTextEditor.edit(self, edit, abort, sync)
-        if (edit and abort) or sync:
+        if (edit and abort):
             return
-
+        self.setWysiwyg(False, init=True)  # /!\ it affects self.getContent
+        if sync:
+            return
         # the following must NOT be done at each UI refresh!
         content = self._original_content
         if edit:
diff -r 2610443b05a2 -r ddb909ab5cbc public/libervia.css
--- a/public/libervia.css	Thu Feb 13 01:17:07 2014 +0100
+++ b/public/libervia.css	Thu Feb 13 01:33:24 2014 +0100
@@ -1285,6 +1285,13 @@
     height: 250px;
 }
 
+.richTextWysiwyg {
+    min-height: 50px;
+    background-color: white;
+    border: 1px solid #a0a0a0;
+    border-radius: 5px;
+}
+
 .richTextSyntaxLabel {
 	text-align: right;
 	margin: 14px 0px 0px 14px;