From 295c90508aced379291d79971ce547f378ec2ee3 Mon Sep 17 00:00:00 2001 From: choj Date: Sat, 10 Oct 2020 20:33:31 +0200 Subject: [PATCH] =?UTF-8?q?cutomstyle=20g=C3=A9n=C3=A9rique=20+=20possibil?= =?UTF-8?q?it=C3=A9=20de=20styles=20imbriqu=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/dedediteur.css | 28 +++++------ src/components/Dedediteur.vue | 61 ++++++++++++---------- src/components/extensions/CustomStyle.js | 64 ------------------------ src/environments/Environement.js | 28 +++++------ src/extensions/CustomStyle.js | 55 ++++++++++++++++++++ 5 files changed, 116 insertions(+), 120 deletions(-) delete mode 100644 src/components/extensions/CustomStyle.js create mode 100644 src/extensions/CustomStyle.js diff --git a/src/assets/dedediteur.css b/src/assets/dedediteur.css index 4d7a5d3..494d52b 100644 --- a/src/assets/dedediteur.css +++ b/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{ } } - - diff --git a/src/components/Dedediteur.vue b/src/components/Dedediteur.vue index 54fd1c4..49fcb4b 100644 --- a/src/components/Dedediteur.vue +++ b/src/components/Dedediteur.vue @@ -67,8 +67,8 @@ @@ -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}) }) diff --git a/src/components/extensions/CustomStyle.js b/src/components/extensions/CustomStyle.js deleted file mode 100644 index ca1ae7d..0000000 --- a/src/components/extensions/CustomStyle.js +++ /dev/null @@ -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);} - } -} diff --git a/src/environments/Environement.js b/src/environments/Environement.js index a51afb8..a2ac306 100644 --- a/src/environments/Environement.js +++ b/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" } ] diff --git a/src/extensions/CustomStyle.js b/src/extensions/CustomStyle.js new file mode 100644 index 0000000..c4e1402 --- /dev/null +++ b/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);} + } +}