cutomstyle générique + possibilité de styles imbriqués

src/assets/dedediteur.css

@@ -31,66 +31,66 @@ h1{
 
 /* MOTS */
 /*// — Mot - Accronyme*/
-.acronym{
+span[data-type=acronym]{
  color: pink;
 }
 /*// — Mot - Etranger*/
-.foreign{
+span[data-type=foreign]{
   color: red;
 }
 
 /* NOMS */
 /*// — Nom - Auteur - Citation*/
-.author-quotation{
+span[data-type=author-quotation]{
   color : yellow;
 
 }
 /*// — Nom - Auteur - Œuvre*/
-.author-work{
+span[data-type=author-work]{
   color: orange;
 }
 /*// — Nom - Marque*/
-.brand{
+span[data-type=brand]{
   color: coral;
 }
 
-.work{
+span[data-type=work]{
   color: brown;
 }
 /*// — Nom - Propre*/
 
-.proper-noun{
+span[data-type=proper-noun]{
   color: darkorange;
 }
 
 /* NOMBRES */
 /*// — Numeral - Chapitre*/
-.chapter{
+span[data-type=chapter]{
   color: blue;
 }
 /*// — Numeral - Date*/
-.date{
+span[data-type=date]{
   color: aqua;
 }
 /*// — Numeral - Siecle*/
-.century{
+span[data-type=century]{
   color: cornflowerblue;
 }
 
 /*TYPO */
 /*// — Typo - Exposant*/
-.superscript{
+span[data-type=superscript]{
   color: green;
    font-variant-position: super;
 }
 /*// — Typo - Indice*/
-.subscript{
+span[data-type=subscript]{
     color:chartreuse;
     font-variant-position: sub;
 
 }
 
-.emphasis{
+span[data-type=emphasis]{
   font-style: italic;
 }
 
@@ -105,5 +105,3 @@ h1{
   }
 
 }
-
-

src/components/Dedediteur.vue

@@ -67,8 +67,8 @@
                                 <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 })">
+                                            :class="{ 'is-active': isActive[style.type]() }"
+                                            @click="commands[style.type]({ type: style.type })">
                                         {{style.label | capitalize}}
                                     </button>
                                 </a>
@@ -188,7 +188,7 @@
     import AboutPane from './AboutPane';
 
     import Environment from "../environments/Environement"
-    import CustomStyle from "./extensions/CustomStyle"
+    import CustomStyle from "../extensions/CustomStyle"
 
 
     export default {
@@ -201,6 +201,8 @@
             AboutPane
         },
         data() {
+
+
             return {
                 nbWords: 0,
                 nbParagraphs: 0,
@@ -213,29 +215,7 @@
                 isPreviewMode: false,
                 environment: new Environment(),
                 keepInBounds: true,
-                editor: new Editor({
-                    extensions: [
-                        new Blockquote(),
-                        new BulletList(),
-                        new Heading({levels: [1, 2, 3]}),
-                        new ListItem(),
-                        new OrderedList(),
-                        new BulletList(),
-                        new Link(),
-                        new CustomStyle()
-                    ],
-                    content: ``,
-
-                    onInit: () => {
-                    },
-                    onUpdate: () => {
-
-                        Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false});
-
-
-                    }
-
-                }),
+                editor: null,
                 linkUrl: null,
                 linkMenuIsActive: false,
             }
@@ -249,7 +229,34 @@
             fetch('/dedediteur/sample-mounier.html').then(function (response) {
                 return response.text();
             }).then(function (html) {
-                self.editor.setContent(html);
+
+              let extensions = [
+                      new Blockquote(),
+                      new BulletList(),
+                      new Heading({levels: [1, 2, 3]}),
+                      new ListItem(),
+                      new OrderedList(),
+                      new BulletList(),
+                      new Link()];
+
+              for(let i = 0; i < self.environment.getCharacterOptions().length; i++){
+                let styles = (self.environment.getCharacterOptions()[i]).styles
+                for(let j = 0; j < styles.length; j++){
+                    extensions.push(new CustomStyle(styles[j].type));
+                }
+              }
+
+              self.editor = new Editor({
+                  extensions: extensions,
+                  content: html,
+                  onInit: () => {
+                  },
+                  onUpdate: () => {
+                      Countable.count(document.getElementById('dedediteur'), counter => self.updateCountInfos(counter), {stripTags: false});
+                  }
+
+              }),
+
                 self.$nextTick().then(() => {
                     Countable.count(document.getElementById('dedediteur'), counter => self.updateCountInfos(counter), {stripTags: false})
                 })

src/components/extensions/CustomStyle.js

@@ -1,64 +0,0 @@
-import {Mark} from "tiptap";
-import {updateMark} from "tiptap-commands";
-
-
-// — Mot - Accronyme
-// — Mot - Etranger
-
-// — Nom - Auteur - Citation
-// — Nom - Auteur - Œuvre
-// — Nom - Marque
-// — Nom - Propre
-
-// — Numeral - Chapitre
-// — Numeral - Date
-// — Numeral - Siecle
-
-
-// — Typo - Particulier
-export default class CustomStyle extends Mark {
-    get name() {
-        return "customstyle";
-    }
-
-    get defaultOptions() {
-        return {
-            types: [
-                // "acronym",
-                // "foreign",
-                // "author-quotation",
-                // "author-work",
-                // "brand",
-                // "proper-noun",
-                // "century",
-                // "date",
-                // "chapter"
-            ]
-        };
-    }
-
-    get schema() {
-        return {
-            attrs: {
-                type: {
-                    default: ""
-                }
-            },
-            parseDOM: [
-                {
-                    tag: "span.dede-style",
-                    getAttrs(dom) {
-                        return {type: dom.classList};
-                    }
-                }
-            ],
-            toDOM: mark => {
-                return ["span", {class: `dede-style ${mark.attrs.type}`}, 0];
-            }
-        };
-    }
-
-    commands({type}) {
-        return attrs => { return updateMark(type, attrs);}
-    }
-}

src/environments/Environement.js

@@ -25,37 +25,37 @@ export default class Environment {
                     styles: [
                         {
                             "label": "étranger",
-                            "class": "foreign"
+                            "type": "foreign"
                         },
                         {
                             "label": "accronyme",
-                            "class": "acronym"
+                            "type": "acronym"
                         }
                     ]
                 },
-
+                //
                 {
                     label: "nom",
                     styles: [
                         {
                             "label": "Auteur - Citation",
-                            "class": "author-quotation"
+                            "type": "author-quotation"
                         },
                         {
                             "label": "Auteur - Œuvre",
-                            "class": "author-work"
+                            "type": "author-work"
                         },
                         {
                             "label": "Marque",
-                            "class": "brand"
+                            "type": "brand"
                         },
                         {
                             "label": "Nom œuvre",
-                            "class": "work"
+                            "type": "work"
                         },
                         {
                             "label": "Nom propre",
-                            "class": "proper-noun"
+                            "type": "proper-noun"
                         }
                     ]
                 },
@@ -65,15 +65,15 @@ export default class Environment {
                     styles: [
                         {
                             "label": "siècle",
-                            "class": "century"
+                            "type": "century"
                         },
                         {
                             "label": "date",
-                            "class": "date"
+                            "type": "date"
                         },
                         {
                             "label": "chapitre",
-                            "class": "chapter"
+                            "type": "chapter"
                         }
                     ]
                 },
@@ -82,15 +82,15 @@ export default class Environment {
                     styles: [
                         {
                             "label": "italique",
-                            "class": "emphasis"
+                            "type": "emphasis"
                         },
                         {
                             "label": "indice",
-                            "class": "subscript"
+                            "type": "subscript"
                         },
                         {
                             "label": "exposant",
-                            "class": "superscript"
+                            "type": "superscript"
                         }
 
                     ]

src/extensions/CustomStyle.js

@@ -0,0 +1,55 @@
+import {Mark} from "tiptap";
+import {toggleMark} from "tiptap-commands";
+
+
+// — Mot - Accronyme
+// — Mot - Etranger
+
+// — Nom - Auteur - Citation
+// — Nom - Auteur - Œuvre
+// — Nom - Marque
+// — Nom - Propre
+
+// — Numeral - Chapitre
+// — Numeral - Date
+// — Numeral - Siecle
+
+
+// — Typo - Particulier
+export default class CustomStyle extends Mark {
+
+    constructor(type){
+      super();
+      this.customType = type;
+    }
+
+    get name() {
+        return this.customType;
+    }
+
+
+    get schema() {
+        return {
+            attrs: {
+                type: {
+                    default: ""
+                }
+            },
+            parseDOM: [
+                {
+                    tag: "span[data-type="+this.customType+"]",
+                    getAttrs(dom) {
+                        return {type: dom.dataset.type};
+                    }
+                }
+            ],
+            toDOM: () => {
+                return ["span", {'data-type': this.customType}, 0];
+            }
+        };
+    }
+
+    commands({type}) {
+        return attrs => { return toggleMark(type, attrs);}
+    }
+}