chapitre et emphase dans l'env par défaut. Conservation de la bottom bar pour aperçu, fontes spécifiques à l'env par défaut, tests sur courrier avec template propre à un env

public/env/basic.json → public/env/basic/basic.json

@@ -1,5 +1,5 @@
 {
-  "name" : "basic",
+  "name" : "basicplus",
   "characters" : [
     {
       "label" : "mot",

public/env/basicplus.json

@@ -1,40 +0,0 @@
-{
-  "name" : "basicplus",
-  "characters" : [
-    {
-      "label" : "mot",
-      "styles": [
-        {
-          "label" : "étranger",
-          "class" : "foreign"
-        },
-        {
-          "label" : "acronyme",
-          "class" : "acronym"
-        }
-      ]
-    },
-
-    {
-      "label" : "numéral",
-      "styles": [
-        {
-          "label" : "siècle",
-          "class" : "century"
-        },
-        {
-          "label" : "date",
-          "class" : "date"
-        }
-      ]
-    }
-  ],
-
-  "paragraphs": {
-    "T1": true,
-    "T2": true,
-    "T3": true,
-    "T4": false,
-    "quote" : false
-  }
-}

public/env/courrier/courrier.css

@@ -0,0 +1,46 @@
+ul:nth-last-of-type(1),ul:nth-last-of-type(2){
+    list-style-type: none;
+    font-size: 1rem;
+    line-height: 1rem;
+}
+
+ul:nth-of-type(1){
+    border-bottom: 1px solid #ccc;
+}
+ul:nth-of-type(1):before{
+    content: 'Expéditeur';
+    display: block;
+    color : #888;
+
+}
+
+ul:nth-of-type(2):before{
+    content: 'Destinataire';
+    display: block;
+    color : #888;
+}
+
+.courrier-name:before{
+    content:'Nom : ';
+
+}
+.courrier-address:before{
+    content:'Adresse : ';
+}
+.courrier-zipcode:before{
+    content:'Code postal : ';
+}
+.courrier-city:before{
+    content:'Ville : ';
+}
+
+/* preview */
+.preview .editor__content{
+    font-family: Courier New,Courier,Lucida Sans Typewriter;
+    color: black;
+}
+
+.preview *:before,.preview ul:nth-of-type(2):before,.preview ul:nth-of-type(1):before{
+    content: '';
+    display: none;
+}

public/env/courrier/courrier.json

@@ -0,0 +1,57 @@
+{
+  "name" : "courrier",
+  "characters" : [
+    {
+      "label" : "expéditeur",
+      "styles": [
+        {
+          "label" : "nom",
+          "class" : "exp-name"
+        },
+        {
+          "label" : "adresse",
+          "class" : "exp-address"
+        },
+        {
+          "label" : "code postal",
+          "class" : "exp-zipcode"
+        },
+        {
+          "label" : "ville",
+          "class" : "exp-city"
+        }
+      ]
+    },
+
+    {
+      "label" : "destinataire",
+      "styles": [
+        {
+          "label" : "nom",
+          "class" : "dest-name"
+        },
+        {
+          "label" : "adresse",
+          "class" : "dest-address"
+        },
+        {
+          "label" : "code postal",
+          "class" : "dest-zipcode"
+        },
+        {
+          "label" : "ville",
+          "class" : "dest-city"
+        }
+      ]
+    }
+  ],
+
+  "paragraphs": {
+    "T1": true,
+    "T2": true,
+    "T2": false,
+    "T3": false,
+    "T4": false,
+    "quote" : false
+  }
+}

public/env/courrier/template.html

@@ -0,0 +1,23 @@
+
+<ul>
+    <li><span class="dede-style courrier-name exp-name">&nbsp;</span></li>
+    <li><span class="dede-style courrier-address exp-address">&nbsp;</span></li>
+    <li><span class="dede-style courrier-zipcode exp-zipcode">&nbsp;</span></li>
+    <li><span class="dede-style courrier-city exp-city">&nbsp;</span></li>
+</ul>
+
+<ul>
+    <li><span class="dede-style courrier-name dest-name">&nbsp;</span></li>
+    <li><span class="dede-style courrier-address dest-address">&nbsp;</span></li>
+    <li><span class="dede-style courrier-zipcode dest-zipcode">&nbsp;</span></li>
+    <li><span class="dede-style courrier-city dest-city">&nbsp;</span></li>
+</ul>
+
+
+<h1>
+   <span class="dede-style object">Objet ...</span>
+</h1>
+
+<p data-type="plop">
+
+</p>

src/assets/dedediteur.css

@@ -1,5 +1,7 @@
+@import 'alegreya.css';
 body{
-  --txt-font-size: 1.2rem
+  --txt-font-size: 1.4rem
+
 }
 
 .editor{
@@ -10,11 +12,21 @@ body{
   margin: auto;
 }
 .editor__content {
+  font-family:  'alegreya_sansregular';
   margin: auto;
   margin-top: 100px;
-  line-height: 1.58;
   text-rendering: optimizelegibility;
   font-size: var(--txt-font-size);
+  line-height: 2rem;
+}
+
+.preview .editor__content{
+  font-family: 'alegreyaregular';
+  color: black;
+}
+
+h1{
+  line-height: 3rem;
 }
 
 /* MOTS */
@@ -77,15 +89,12 @@ body{
     font-variant-position: sub;
 
 }
-/*// — Typo - Particulier*/
-
 
-
-
-p:nth-child(1){
-  text-indent: 75px;
+.emphasis{
+  font-style: italic;
 }
 
+
 @import '~gutenberg-css'  print;
 
 @media print {
@@ -96,3 +105,5 @@ p:nth-child(1){
   }
 
 }
+
+

src/components/Dedediteur.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="editor">
+    <div class="editor" v-bind:class="{ preview: isPreviewMode }">
 
         <meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/>
 
@@ -8,25 +8,36 @@
                 <label>Paragraphes :</label><span>{{nbParagraphs}}</span>
                 <label>Phrases :</label><span>{{nbSentences}}</span>
                 <label>Mots :</label><span>{{nbWords}}</span>
+                <label>Caractères :</label><span>{{nbCharacters}}</span>
             </div>
-            <div class="env-select" >
-                <!--<label>Environnement </label>-->
-                <select v-model="environmentName" @change="loadEnvironment()">
-                    <option value="ar">AR</option>
-                    <option value="basic">Basic</option>
-                    <option value="basicplus">Basic +</option>
-                </select>
-            </div>
+            <!--<div class="env-select">-->
+                <!--<select v-model="environmentName" @change="installEnvironment()">-->
+                    <!--<option value="typobasic">Typobasic</option>-->
+                    <!--<option value="courrier">Courrier</option>-->
+                <!--</select>-->
+            <!--</div>-->
         </div>
 
 
         <div id="file_actions">
+            <button class="square_btn" title="Nouveau fichier" id="new_button"
+                    v-on:click="newFile"></button>
             <button class="square_btn" title="Ouvrir un fichier" id="input_button"
                     onclick="document.getElementById('input').click()"></button>
             <button class="square_btn" title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
             <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
-            <a style="display:none;" id="download_link" download="dedediteur-export-demo.html" href=”” >Download as Text File</a>
+            <a style="display:none;" id="download_link" download="dedediteur-export-demo.html" href=””>Download as Text
+                File</a>
+
+
             <button class="square_btn" title="Export PDF" id="pdf_button" v-on:click="pdfExport"></button>
+            <button class="square_btn" title="Export HTML" id="html_button"
+                    v-on:click="htmlExport"></button>
+            <button class="square_btn" title="Aperçu HTML" id="preview_button"
+                    v-on:click="htmlPreview">
+
+            </button>
+
         </div>
 
         <div id="meta_action">
@@ -49,21 +60,20 @@
                     <div class="menubar char-menubar">
 
                         <div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
-                            <button class="dropbtn border-left">{{opt.label}}</button>
+                            <button class="dropbtn border-left">{{opt.label|capitalize}}</button>
                             <div class="dropdown-content">
                                 <a v-for="style in opt.styles" v-bind:key="style.label">
                                     <button
                                             class="menubar__button"
                                             :class="{ 'is-active': isActive.customstyle({ type: style.class }) }"
                                             @click="commands.customstyle({ type: style.class })">
-                                        {{style.label}}
+                                        {{style.label | capitalize}}
                                     </button>
                                 </a>
                             </div>
                         </div>
 
 
-
                         <form class="menububble__form" v-if="linkMenuIsActive"
                               @submit.prevent="setLinkUrl(commands.link, linkUrl)">
                             <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
@@ -138,16 +148,17 @@
             </editor-menu-bar>
 
 
-
             <editor-content id="dedediteur" class="editor__content" :editor="editor"/>
 
+
         </div>
     </div>
 </template>
 
 <script>
     import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap'
-    import Countable from 'countable'
+    import Countable from 'countable';
+
     import {
         Blockquote,
         Heading,
@@ -159,6 +170,7 @@
 
     import MetaEditor from './MetaEditor';
 
+
     import Environment from "../environments/Environement"
     import CustomStyle from "./extensions/CustomStyle"
 
@@ -172,12 +184,15 @@
         },
         data() {
             return {
-                nbWords : 0,
+                nbWords: 0,
                 nbParagraphs: 0,
-                nbSentences : 0,
-                environmentName: 'ar',
+                nbSentences: 0,
+                nbCharacters : 0,
+                environmentName: 'typobasic',
+                cssEnvElement : null,
                 isMetaEditorVisible: false,
-                environment : new Environment(),
+                isPreviewMode: false,
+                environment: new Environment(),
                 keepInBounds: true,
                 editor: new Editor({
                     extensions: [
@@ -189,24 +204,14 @@
                         new Link(),
                         new CustomStyle()
                     ],
-                    content: `
-<p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> &amp; son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> &amp; installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
-</p>
-        `,
+                    content: ``,
 
                     onInit: () => {
-
-                        //Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: true})
                     },
                     onUpdate: () => {
 
-                        Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false})
+                        Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false});
+
 
                     }
 
@@ -219,7 +224,7 @@
             this.editor.destroy()
         },
 
-        mounted(){
+        mounted() {
             let self = this;
             fetch('/dedediteur/sample-mounier.html').then(function (response) {
                 return response.text();
@@ -233,11 +238,8 @@
                 console.warn('Something went wrong.', err);
             });
 
+            this.addPrettyBackground();
 
-            // const area = document.getElementById('dedediteur')
-            //
-            // const callback = counter => this.updateCountInfos(counter)
-            // Countable.on(area, callback, {stripTags: true})
 
         },
 
@@ -278,23 +280,65 @@
             },
 
 
-            loadEnvironment(){
+             installEnvironment() {
                 let self = this;
-                Environment.loadEnvironment(this.environmentName).then(function(env){
-                    self.environment = env;
+                Environment.getEnvironment(this.environmentName).then(async function (env) {
+                    if(!env)
+                        alert('À venir.');
+                    else {
+                        self.uninstallEnvironement();
+                        self.environment = env;
+                        let template = await self.environment.getTemplate();
+                        if(template)
+                            self.editor.setContent(template);
+                        let css = await self.environment.getStyleSheetPath();
+                        if(css){
+                            let link =document.createElement('link');
+                            link.setAttribute('type','text/css');
+                            link.setAttribute('rel','stylesheet');
+                            link.setAttribute('href',css);
+                            document.head.appendChild(link);
+                            self.cssEnvElement = link;
+
+                        }
+                    }
                 })
             },
 
-           updateCountInfos(counter){
-                console.log(counter);
+            uninstallEnvironement(){
+                if(this.cssEnvElement){
+                    this.cssEnvElement.remove();
+                }
+            },
+
+            updateCountInfos(counter) {
                 this.nbWords = counter.words;
                 this.nbSentences = counter.sentences;
                 this.nbParagraphs = document.getElementById("dedediteur").querySelectorAll('p').length;
-           },
+                this.nbCharacters = counter.characters;
+            },
+
+            pdfExport() {
+                window.print();
+            },
+
+            newFile() {
+                this.editor.setContent('<p></p>');
+            },
+
+            htmlExport() {
+                alert('Fonctionnalité à venir.');
+            },
 
-           pdfExport(){
-               window.print();
-           }
+            htmlPreview(){
+                this.isPreviewMode = ! this.isPreviewMode;
+                //document.getElementById('preview_button').innerHTML = this.isPreviewMode ? '&times;' :'';
+            },
+
+            addPrettyBackground(){
+                let editorElement = document.querySelector('.ProseMirror');
+                console.log(editorElement);
+            }
 
         }
     }
@@ -307,31 +351,35 @@
     @import '../assets/dedediteur.css';
 
 
-    .bottom-bar{
+    .bottom-bar {
         position: fixed;
         width: 100vw;
         height: 25px;
         background-color: $bg-color;
         bottom: 0px;
         z-index: 50;
-        border-top:1px solid #ccc;
+        border-top: 1px solid #ccc;
         font-size: 0.8rem;
         display: flex;
         align-items: center;
+
         div {
             display: flex;
+
             span {
                 margin-right: 10px;
-                padding-left : 5px;
+                padding-left: 5px;
             }
         }
     }
-    .env-select{
+
+    .env-select {
         font-size: 0.8rem;
-        position : fixed;
-        right : 2px;
-        bottom:2px;
+        position: fixed;
+        right: 2px;
+        bottom: 2px;
         z-index: 100;
+
         select {
             min-width: 80px;
             border: $button-border;
@@ -339,6 +387,15 @@
         }
     }
 
+    ::-moz-focus-inner {
+        border: 0;
+    }
+
+    button:focus {
+        outline: 0 none !important;
+
+    }
+
     #file_actions {
         /*border-bottom : 1px solid #2c3e50;*/
         position: fixed;
@@ -354,44 +411,77 @@
         top: $button-width;
         right: $button-width;
 
-        button{
-            width:  $button-width;
+        button {
+            width: $button-width;
             height: $button-width;
             background-color: $txt-color;
-            border-radius: calc(#{$button-width} /2);
+            border-radius: calc(#{$button-width} / 2);
             border: none;
             cursor: pointer;
         }
 
     }
 
-    .square_btn  {
+    .square_btn {
         border: 1px solid black;
-        width:  $button-width;
+        width: $button-width;
         height: $button-width;
         cursor: pointer;
-        outline:none;
+        outline: none;
+
         &:focus {
             outline: none;
         }
     }
 
-    #input_button {
+    #new_button {
         background-color: white;
     }
 
+
+    #input_button {
+        margin-top: $button-width;
+        background-color: #ccc;
+    }
+
     #output_button {
         background-color: black;
         margin-top: $button-width;
     }
-    #pdf_button{
+
+    #pdf_button {
         background-color: red;
         margin-top: $button-width
     }
 
+    #html_button {
+        background-color: forestgreen;
+        margin-top: $button-width
+    }
+
+    #preview_button {
+        background-color: royalblue;
+        color : white;
+        margin-top: $button-width;
+        font-size: calc(#{$button-width} / 2);
+    }
+
     /* editor*/
     .editor {
         position: relative;
+
+        &.preview{
+            .square_btn:not(#preview_button){
+                visibility: hidden;
+
+            }
+            #meta_action, .menubar {
+                display: none;
+            }
+
+        }
+
+
     }
 
 
@@ -402,5 +492,4 @@
 
 
 
-
 </style>

src/components/MetaEditor.vue

@@ -2,18 +2,18 @@
     <div class="meta-editor">
         <div class="meta-editor-content">
             <button title="fermer" class="close-btn" v-on:click="hide">
-
-                <svg viewPort="0 0 42 42" version="1.1"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <line x1="0" y1="42"
-                          x2="42" y2="0"
-                          stroke="black"
-                          stroke-width="1"/>
-                    <line x1="0" y1="0"
-                          x2="42" y2="42"
-                          stroke="black"
-                          stroke-width="1"/>
-                </svg>
+                &times;
+                <!--<svg viewPort="0 0 42 42" version="1.1"-->
+                     <!--xmlns="http://www.w3.org/2000/svg">-->
+                    <!--<line x1="0" y1="42"-->
+                          <!--x2="42" y2="0"-->
+                          <!--stroke="black"-->
+                          <!--stroke-width="1"/>-->
+                    <!--<line x1="0" y1="0"-->
+                          <!--x2="42" y2="42"-->
+                          <!--stroke="black"-->
+                          <!--stroke-width="1"/>-->
+                <!--</svg>-->
 
             </button>
             <h3>Métadonnées</h3>
@@ -113,11 +113,12 @@
                 border: none;
                 cursor: pointer;
                 background-color: $bg-color;
-                height: $button-width;
-                svg{
+                //height: $button-width;
+                font-size: $button-width;
+                /*svg{
                     width: $button-width;
                     height: 4$button-width;
-                }
+                }*/
             }
 
         }

src/environments/Environement.js

@@ -1,4 +1,4 @@
-const defaultEnvName = "ar";
+const defaultEnvName = "typobasic";
 
 
 export default class Environment {
@@ -19,7 +19,7 @@ export default class Environment {
 
             characters: [
                 {
-                    label: "mot",
+                    label: "Mot",
                     styles: [
                         {
                             "label": "étranger",
@@ -68,6 +68,10 @@ export default class Environment {
                         {
                             "label": "date",
                             "class": "date"
+                        },
+                        {
+                            "label": "chapitre",
+                            "class": "chapter"
                         }
                     ]
                 },
@@ -81,6 +85,10 @@ export default class Environment {
                         {
                             "label": "exposant",
                             "class": "superscript"
+                        },
+                        {
+                            "label": "emphase",
+                            "class": "emphasis"
                         }
                     ]
                 }
@@ -111,24 +119,42 @@ export default class Environment {
         return this.options.characters;
     }
 
+    async getTemplate(){
+        let template = await fetch('/dedediteur/env/' + this.name + '/template.html').catch(() =>  null);
+        if(template){
+            let html = await template.text();
+            return html;
+        }
+        return null;
+
+    }
+
+    async getStyleSheetPath(){
+        let css = await fetch('/dedediteur/env/' + this.name + '/' + this.name +'.css').catch(() =>  null);
+        if(css)
+            return '/dedediteur/env/' + this.name + '/' + this.name +'.css';
+        return null
+    }
+
+
+    static async getEnvironment(envName) {
 
-    static async loadEnvironment(envName) {
         if (envName === defaultEnvName)
             return new Environment();
         else
-            return Environment.loadEnvironmentFromJSONFile('/dedediteur/env/' + envName + '.json')
+            return Environment.getEnvironmentFromJSONFile('/dedediteur/env/' + envName + '/'+envName+ '.json')
 
     }
 
-    static async loadEnvironmentFromJSONFile(filePath) {
+    static async getEnvironmentFromJSONFile(filePath) {
         let res = await fetch(filePath);
-        let json = await res.json();
-        return Environment.loadEnvironmentFromJSON(json);
+        let json = await res.json().catch(() =>  null);
+        return json ? Environment.getEnvironmentFromJSON(json) : null;
 
 
     }
 
-    static loadEnvironmentFromJSON(json) {
+    static getEnvironmentFromJSON(json) {
         return new Environment(json);
     }
 

src/main.js

@@ -3,6 +3,12 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+Vue.filter('capitalize', function (value) {
+  if (!value) return ''
+  value = value.toString()
+  return value.charAt(0).toUpperCase() + value.slice(1)
+})
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')