dje
/
dededit


			
							<template>
  <div class="editor">
    <div id="file_actions">
      <button id="input_button" onclick="document.getElementById('input').click()"></button>
      <button id="output_button" v-on:click="saveFile"></button>
      <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
    </div>


    <div class="editor-main">

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

        <div>

        <div class="menubar char-menubar">
          <ul>

            <li>
              Mot
              <ul>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'acronym' }) }"
                          @click="commands.customstyle({ type: 'acronym' })">
                    Acronyme
                  </button>
                </li>
                <li>
                  <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
                        @click="commands.customstyle({ type: 'foreign' })">
                    Étranger
                  </button>
                </li>
              </ul>
            </li>


            <li>
              Nom
              <ul>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'author-quotation' }) }"
                          @click="commands.customstyle({ type: 'author-quotation' })">
                    Auteur - Citation
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'author-work' }) }"
                          @click="commands.customstyle({ type: 'author-work' })">
                    Auteur - Œuvre
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'brand' }) }"
                          @click="commands.customstyle({ type: 'brand' })">
                    Marque
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'proper-noun' }) }"
                          @click="commands.customstyle({ type: 'proper-noun' })">
                    Nom propre
                  </button>
                </li>
              </ul>
            </li>


            <li>
              Numéral
              <ul>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'century' }) }"
                          @click="commands.customstyle({ type: 'century' })">
                    Siècle
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'date' }) }"
                          @click="commands.customstyle({ type: 'date' })">
                    Date
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.customstyle({ type: 'chapter' }) }"
                          @click="commands.customstyle({ type: 'chapter' })">
                    Chapitre
                  </button>
                </li>
              </ul>
            </li>

            <li>
              Typo
              <ul>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.subscriptstyle() }"
                          @click="commands.subscriptstyle()">
                    Indice
                  </button>
                </li>
                <li>
                  <button
                          class="menubar__button"
                          :class="{ 'is-active': isActive.superscriptstyle() }"
                          @click="commands.superscriptstyle()">
                    Exposant
                  </button>
                </li>
              </ul>
            </li>


          </ul>
        </div>


        <div class="menubar paragraph-menubar">

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


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

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

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

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

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

        </div>
        </div>
      </editor-menu-bar>

      <!--
      <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;`"
            >

              <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">
                  DEL
                </button>
              </form>

              <template v-else>
                <button
                  class="menububble__button"
                  @click="showLinkMenu(getMarkAttrs('link'))"
                  :class="{ 'is-active': isActive.link() }"
                >
                  <span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
                  LINK
                </button>
              </template>

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

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

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

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

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

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

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

              <button
              class="menubar__button"
              :class="{ 'is-active': isActive.customstyle({ type: 'dede' }) }"
              @click="commands.customstyle({ type: 'dede' })">DeDe</button>

            </div>
      </editor-menu-bubble>

      -->

  <!--
      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">

        <div class="menubar">


        </div>
      </editor-menu-bar>-->

      <editor-content class="editor__content" :editor="editor" />
    </div>
  </div>
</template>

<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  Blockquote,
  Heading,
  OrderedList,
  BulletList,
  ListItem,
  Link
} from 'tiptap-extensions'

import CustomStyle from "./extensions/CustomStyle";
import SubscriptStyle from "./extensions/SubscriptStyle";
import SuperscriptStyle from "./extensions/SuperscriptStyle";
export default {
  components: {
    EditorContent,
    EditorMenuBar
  },
  data() {
    return {
      keepInBounds: true,
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new Link(),
          new CustomStyle(),
            new SuperscriptStyle(),
            new SubscriptStyle()
        ],
        content: `
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>.
        `,

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

  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())
    },
    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()
    }
  }
}
</script>

<style lang="scss">
  @import '../assets/menubar.scss';
  @import '../assets/dedediteur.css';
.menubar{
  text-align: center;
  margin-top: 12px;
}

#file_actions{
 /*border-bottom : 1px solid #2c3e50;*/
  padding : 12px;
  position: fixed;
  top: 10px;
  left: 10px;
}
#output_button, #input_button{
  border : 1px solid black;
  width: 24px;
  height: 24px;
}
#input_button{
  background-color: white;
}
#output_button{
  background-color: black;
  margin-left: 12px;
}

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


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


/*menububble */
   .menububble{
    /*visibility: hidden;*/
    background-color: black;
    border-radius: 5px;
    z-index: 100;
    padding: 5px;
    position: absolute;
    bottom: 25px;
  }

  .menububble.is-active{
    visibility: visible;
  }

  .menububble button{
    background-color: black;
    border: none;
    color : white;
    border-radius: 5px;
  }


</style>