Replace initialState by a placeholder in slide and code

customize.dist/messages.js

@@ -121,30 +121,5 @@ define(['/customize/languageSelector.js',
         '</p>',
     ].join('');
 
-    messages.codeInitialState = [
-        '/*\n',
-        '   This is CryptPad, the zero knowledge realtime collaborative editor.\n',
-        '   What you type here is encrypted so only people who have the link can access it.\n',
-        '   Even the server cannot see what you type.\n',
-        '   What you see here, what you hear here, when you leave here, let it stay here.\n',
-        '*/'
-    ].join('');
-
-    messages.slideInitialState = [
-        '# CryptSlide\n',
-        '* This is a zero knowledge realtime collaborative editor.\n',
-        '* What you type here is encrypted so only people who have the link can access it.\n',
-        '* Even the server cannot see what you type.\n',
-        '* What you see here, what you hear here, when you leave here, let it stay here.\n',
-        '\n',
-        '---',
-        '\n',
-        '# How to use\n',
-        '1. Write your slides content using markdown syntax\n',
-        '  - Learn more about markdown syntax [here](http://www.markdowntutorial.com/)\n',
-        '2. Separate your slides with ---\n',
-        '3. Click on the "Play" button to see the result'
-    ].join('');
-
     return messages;
 });

customize.dist/translations/messages.fr.js

@@ -309,9 +309,11 @@ define(function () {
     out.main_poll = 'Sondages';
     out.main_poll_p = 'Plannifiez vos réunions ou évènements, ou votez pour la meilleure solution concernant votre problème.';
     out.main_drive = 'CryptDrive';
-
+
+    out.footer_applications = "Applications";
     out.footer_contact = "Contact";
     out.footer_aboutUs = "À propos de nous";
+
     out.table_type = 'Type';
     out.table_link = 'Lien';
     out.table_created = 'Créé le';
@@ -373,5 +375,33 @@ define(function () {
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
     out.header_logoTitle = "Aller vers la page d'accueil";
 
+    // Initial states
+
+    out.codeInitialState = [
+        '/*\n',
+        '   Voici CryptPad, l\'éditeur collaboratif en temps-réel Zero Knowledge.\n',
+        '   Ce que vous tapez ici est chiffré de manière que seules les personnes avec le lien peuvent y accéder.\n',
+        '   Même le serveur est incapable de voir ce que vous tapez.\n',
+        '   Ce que vous voyez ici, ce que vous entendez, quand vous partez, ça reste ici.\n',
+        '*/'
+    ].join('');
+
+    out.slideInitialState = [
+        '# CryptSlide\n',
+        '* Voici CryptPad, l\'éditeur collaboratif en temps-réel Zero Knowledge.\n',
+        '* Ce que vous tapez ici est chiffré de manière que seules les personnes avec le lien peuvent y accéder.\n',
+        '* Même le serveur est incapable de voir ce que vous tapez.\n',
+        '* Ce que vous voyez ici, ce que vous entendez, quand vous partez, ça reste ici.\n',
+        '\n',
+        '---',
+        '\n',
+        '# Comment l\'utiliser\n',
+        '1. Écrivez le contenu de votre présentation avec la syntaxe Markdown\n',
+        '  - Apprenez à utiliser markdown en cliquant [ici](http://www.markdowntutorial.com/)\n',
+        '2. Séparez vos slides avec ---\n',
+        '3. Cliquez sur la bouton "lecture" pour afficher le résultat en mode présentation',
+        '  - La présentation est mise à jour en temps-réel'
+    ].join('');
+
     return out;
 });

customize.dist/translations/messages.js

@@ -313,9 +313,11 @@ define(function () {
     out.main_poll = 'Polls';
     out.main_poll_p = 'Plan your meeting or your event, or vote for the best solution regarding your problem.';
     out.main_drive = 'CryptDrive';
-
+
+    out.footer_applications = "Applications";
     out.footer_contact = "Contact";
     out.footer_aboutUs = "About us";
+
     out.table_type = 'Type';
     out.table_link = 'Link';
     out.table_created = 'Created';
@@ -381,5 +383,33 @@ define(function () {
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
     out.header_logoTitle = 'Go to the main page';
 
+    // Initial states
+
+    out.codeInitialState = [
+        '/*\n',
+        '   This is CryptPad, the zero knowledge realtime collaborative editor.\n',
+        '   What you type here is encrypted so only people who have the link can access it.\n',
+        '   Even the server cannot see what you type.\n',
+        '   What you see here, what you hear here, when you leave here, let it stay here.\n',
+        '*/'
+    ].join('');
+
+    out.slideInitialState = [
+        '# CryptSlide\n',
+        '* This is a zero knowledge realtime collaborative editor.\n',
+        '* What you type here is encrypted so only people who have the link can access it.\n',
+        '* Even the server cannot see what you type.\n',
+        '* What you see here, what you hear here, when you leave here, let it stay here.\n',
+        '\n',
+        '---',
+        '\n',
+        '# How to use\n',
+        '1. Write your slides content using markdown syntax\n',
+        '  - Learn more about markdown syntax [here](http://www.markdowntutorial.com/)\n',
+        '2. Separate your slides with ---\n',
+        '3. Click on the "Play" button to see the result',
+        '  - Your slides are updated in realtime'
+    ].join('');
+
     return out;
 });

www/code/inner.html

@@ -30,6 +30,7 @@
     <script src="/bower_components/codemirror/addon/fold/xml-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
+    <script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
     <style>
       html, body{
           height: 100%;

www/code/main.js

@@ -68,6 +68,7 @@ define([
                 mode: "javascript",
                 readOnly: true
             });
+            editor.setOption('placeholder', Messages.codeInitialState);
 
             var setMode = module.setMode = function (mode, $select) {
                 module.highlightMode = mode;
@@ -83,7 +84,7 @@ define([
                 }
             };
 
-            editor.setValue(Messages.codeInitialState); // HERE
+            editor.setValue('');
 
             var setTheme = module.setTheme = (function () {
                 var path = '/common/theme/';
@@ -148,7 +149,6 @@ define([
             };
 
             var config = {
-                //initialState: Messages.codeInitialState,
                 initialState: '{}',
                 websocketURL: Cryptpad.getWebsocketURL(),
                 channel: secret.channel,
@@ -570,7 +570,7 @@ define([
                 // Update the user list (metadata) from the hyperjson
                 updateMetadata(userDoc);
 
-                editor.setValue(newDoc || Messages.codeInitialState);
+                editor.setValue(newDoc || '');
 
                 if (Visible.isSupported()) {
                     Visible.onChange(function (yes) {

www/slide/inner.html

@@ -33,6 +33,7 @@
     <script src="/bower_components/codemirror/addon/fold/xml-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
+    <script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
     <style>
         html, body{
             height: 100%;

www/slide/main.js

@@ -86,6 +86,7 @@ define([
                 mode: "javascript",
                 readOnly: true
             });
+            editor.setOption('placeholder', Messages.slideInitialState);
 
             var setMode = module.setMode = function (mode, $select) {
                 module.highlightMode = mode;
@@ -99,7 +100,7 @@ define([
             };
             setMode('markdown');
 
-            editor.setValue(Messages.slideInitialState); // HERE
+            editor.setValue('');
 
             var setTheme = module.setTheme = (function () {
                 var path = '/common/theme/';
@@ -239,7 +240,7 @@ define([
                 var shjson = stringifyInner(textValue);
 
                 module.patchText(shjson);
-                Slide.update(textValue);
+                Slide.update(textValue || Messages.slideInitialState);
 
                 if (module.realtime.getUserDoc() !== shjson) {
                     console.error("realtime.getUserDoc() !== shjson");
@@ -642,8 +643,8 @@ define([
                 // Update the user list (metadata) from the hyperjson
                 updateMetadata(userDoc);
 
-                editor.setValue(newDoc || Messages.slideInitialState);
-                Slide.update(newDoc);
+                editor.setValue(newDoc || '');
+                Slide.update(newDoc || Messages.slideInitialState);
 
                 if (Visible.isSupported()) {
                     Visible.onChange(function (yes) {