dje
/
dededit


			
							<template>
    <div class="editor">

        <div class="bottom-bar">
            <div>
                <label>Paragraphes :</label><span>{{nbParagraphs}}</span>
                <label>Phrases :</label><span>{{nbSentences}}</span>
                <label>Mots :</label><span>{{nbWords}}</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>


        <div id="file_actions">
            <button title="Ouvrir un fichier" id="input_button"
                    onclick="document.getElementById('input').click()"></button>
            <button 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>
        </div>


        <div class="editor-main">

            <!--<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">-->
            <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu"
                                v-slot="{ commands, isActive, getMarkAttrs, menu }">
                <div
                        class="menububble"
                        :class="{ 'is-active': menu.isActive }"
                        :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
                >


                    <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>
                            <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}}
                                    </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://"
                                   ref="linkInput" @keydown.esc="hideLinkMenu"/>
                            <button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
                                Supprimer le lien
                            </button>
                        </form>

                        <template v-else>
                            <button id="link__button"
                                    class="menububble__button"
                                    @click="showLinkMenu(getMarkAttrs('link'))"
                                    :class="{ 'is-active': isActive.link() }"
                            >
                                <span>{{ isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
                            </button>
                        </template>
                    </div>
                </div>
            </editor-menu-bubble>


            <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
                <div class="menubar paragraph-menubar">

                    <button
                            class="menubar__button"
                            :class="{ 'is-active': isActive.paragraph() }"
                            @click="commands.paragraph">
                        ¶
                    </button>


                    <button v-if="environment.hasParagraphOption('T1')"
                            class="menubar__button"
                            :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                            @click="commands.heading({ level: 1 })">
                        T1
                    </button>

                    <button v-if="environment.hasParagraphOption('T2')"
                            class="menubar__button"
                            :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                            @click="commands.heading({ level: 2 })">
                        T2
                    </button>

                    <button v-if="environment.hasParagraphOption('T3')"
                            class="menubar__button"
                            :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                            @click="commands.heading({ level: 3 })">
                        T3
                    </button>

                    <button v-if="environment.hasParagraphOption('T4')"
                            class="menubar__button"
                            :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                            @click="commands.heading({ level: 3 })">
                        T4
                    </button>

                    <button v-if="environment.hasParagraphOption('quote')"
                            class="menubar__button"
                            :class="{ 'is-active': isActive.blockquote() }"
                            @click="commands.blockquote">
                        « »
                    </button>

                </div>

            </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 {
        Blockquote,
        Heading,
        OrderedList,
        BulletList,
        ListItem,
        Link
    } from 'tiptap-extensions'

    import Environment from "../environments/Environement"
    import CustomStyle from "./extensions/CustomStyle";


    export default {
        components: {
            EditorContent,
            EditorMenuBar,
            EditorMenuBubble
        },
        data() {
            return {
                nbWords : 0,
                nbParagraphs: 0,
                nbSentences : 0,
                environmentName: 'ar',
                environment : new Environment(),
                keepInBounds: true,
                editor: new Editor({
                    extensions: [
                        new Blockquote(),
                        new BulletList(),
                        new Heading({levels: [1, 2, 3]}),
                        new ListItem(),
                        new OrderedList(),
                        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>
        `,

                    onInit: () => {

                        //Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: true})
                    },
                    onUpdate: () => {

                        Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false})

                    }

                }),
                linkUrl: null,
                linkMenuIsActive: false,
            }
        },
        beforeDestroy() {
            this.editor.destroy()
        },

        mounted(){
            let self = this;
            fetch('/dedediteur/sample-mounier.html').then(function (response) {
                return response.text();
            }).then(function (html) {
                self.editor.setContent(html);
                self.$nextTick().then(() => {
                    Countable.count(document.getElementById('dedediteur'), counter => self.updateCountInfos(counter), {stripTags: false})
                })
            }).catch(function (err) {
                // There was an error
                console.warn('Something went wrong.', err);
            });


            // const area = document.getElementById('dedediteur')
            //
            // const callback = counter => this.updateCountInfos(counter)
            // Countable.on(area, callback, {stripTags: true})

        },

        methods: {
            loadFile: function () {
                let ed = this.editor;
                let fr = new FileReader();
                fr.onload = function () {
                    console.log(fr.result);
                    ed.setContent(fr.result)
                };
                fr.readAsText(document.getElementById('input').files[0]);

            },

            saveFile: function () {
                //console.log(this.editor.getHTML())
                var text = this.editor.getHTML()
                var data = new Blob([text], {type: 'text/html'});
                var url = window.URL.createObjectURL(data);
                document.getElementById('download_link').href = url;
                document.getElementById('download_link').click()
            },
            showLinkMenu(attrs) {
                this.linkUrl = attrs.href
                this.linkMenuIsActive = true
                this.$nextTick(() => {
                    this.$refs.linkInput.focus()
                })
            },
            hideLinkMenu() {
                this.linkUrl = null
                this.linkMenuIsActive = false
            },
            setLinkUrl(command, url) {
                command({href: url})
                this.hideLinkMenu()
            },


            loadEnvironment(){
                let self = this;
                Environment.loadEnvironment(this.environmentName).then(function(env){
                    self.environment = env;
                })
            },

           updateCountInfos(counter){
                console.log(counter);
                this.nbWords = counter.words;
                this.nbSentences = counter.sentences;
                this.nbParagraphs = document.getElementById("dedediteur").querySelectorAll('p').length;
           }

        }
    }
</script>

<style lang="scss">
    @import '../assets/_vars';
    @import '../assets/menuchar';
    @import '../assets/menupara';
    @import '../assets/dedediteur.css';

    .bottom-bar{
        position: fixed;
        width: 100vw;
        height: 25px;
        background-color: $bg-color;
        bottom: 0px;
        z-index: 50;
        border-top:1px solid #ccc;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        div {
            display: flex;
            span {
                margin-right: 10px;
                padding-left : 5px;
            }
        }
    }
    .env-select{
        font-size: 0.8rem;
        position : fixed;
        right : 2px;
        bottom:2px;
        z-index: 100;
        select {
            min-width: 80px;
            border: $button-border;
            background-color: $bg-color;
        }
    }

    #file_actions {
        /*border-bottom : 1px solid #2c3e50;*/
        padding: 12px;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 200;
    }

    #output_button, #input_button {
        border: 1px solid black;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    #input_button {
        background-color: white;
    }

    #output_button {
        background-color: black;
        margin-left: 12px;
    }

    /* editor*/
    .editor {
        position: relative;
    }


    .ProseMirror:read-write:focus {
        outline: none;
    }


</style>