Merge branch 'master' into next

CHANGELOG.md

@@ -7,6 +7,11 @@
 
 # [2.12.0](https://github.com/iliyaZelenko/tiptap-vuetify/compare/v2.11.1...v2.12.0) (2020-02-13)
 
+### Improvements
+
+* **i18n:** add missing spanish translations ([bb52851](https://github.com/iliyaZelenko/tiptap-vuetify/commit/bb52851292dc52c69d06cea852da4786652053b6)), closes [#137](https://github.com/iliyaZelenko/tiptap-vuetify/issues/137)
+
+
 ## [2.11.1](https://github.com/iliyaZelenko/tiptap-vuetify/compare/v2.11.0...v2.11.1) (2020-01-31)
 
 

demo/App.vue

@@ -12,7 +12,7 @@
             The Tiptap Editor Package
           </h1>
 
-          <div class="mt-4">
+          <div class="element-with-relative-position-to-test-bugs">
             <router-view />
           </div>
         </v-container>
@@ -22,9 +22,10 @@
 </template>
 
 <script>
-export default {
-  data: () => ({
-
-  })
-}
+export default {}
 </script>
+
+<style lang="stylus">
+.element-with-relative-position-to-test-bugs
+  position: relative
+</style>

demo/main.js

@@ -49,7 +49,7 @@ MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
   })
   Vue.use(TiptapVuetifyPlugin, {
     vuetify,
-    iconsGroup: 'mdiSvg' // VuetifyIconsGroups (fa, md, mdi, mdiSvg)
+    iconsGroup: 'mdi' // VuetifyIconsGroups (fa, md, mdi, mdiSvg)
   })
 
   Vue.config.productionTip = false

demo/pages/Index.vue

@@ -4,12 +4,12 @@
     min-height="500"
     max-height="600"
     :editor-properties="editorProperties"
+    output-format="json"
    -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"
       placeholder="Write something …"
-      output-format="json"
       @keydown="onkeydown"
     />
 

plan.txt

@@ -1,5 +1,5 @@
-TODO: не включать не нужные иконки в бандл. Например, позволять пользователю импортировать нужные ему иконки, но не забыть что сторонние плагины должны иметь возможность включать иконки.
-
+TODO идея по тому что ниже: импортировать иконки из @mdi/js если используется mdiSvg, только тогда. У пользователя должен быть установлен @mdi/js.
+TODO не включать не нужные иконки в бандл. Например, позволять пользователю импортировать нужные ему иконки, но не забыть что сторонние плагины должны иметь возможность включать иконки.
 Написать гайд как добавлять свои расширения и менять уже существующие.
 
 Важно:

src/components/Bubble.vue

@@ -135,11 +135,12 @@ export default class Menu extends mixins(I18nMixin) {
     }
 
     setTimeout(() => {
-      const pop = document.querySelector('.tiptap-vuetify-editor-pop')!
+      const pop = document.querySelector<HTMLElement>('.tiptap-vuetify-editor-pop')!
       const rangeRef: any = new RangeRef()
       const popper = new Popper(rangeRef, pop, {
         placement: 'top',
-        modifiers: { offset: { offset: '0,5' } }
+        modifiers: { offset: { offset: '0,5' } },
+        positionFixed: true
       })
 
       rangeRef.rectChangedCallback = ({ width }) => {
@@ -157,7 +158,7 @@ export default class Menu extends mixins(I18nMixin) {
 
 <style lang="stylus">
 .tiptap-vuetify-editor-pop {
-  position: absolute
+  position: fixed;
   z-index 1;
   opacity: 0.9 !important
   transition: transform 100ms ease-in-out;
@@ -199,7 +200,7 @@ export default class Menu extends mixins(I18nMixin) {
 }
 
 [x-arrow] {
-  position: absolute;
+  position: fixed;
   width: 14px;
   height: 14px;
   background-color: #262625;

src/components/TiptapVuetify.vue

@@ -256,6 +256,8 @@ export default class TiptapVuetify extends Vue {
 
 <style lang="stylus">
   .tiptap-vuetify-editor
+    position: relative
+
     .ProseMirror
       outline: none !important
       margin: 20px !important

src/configs/theme.ts

@@ -1,11 +1,27 @@
+import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
+
 export const enum VuetifyIconsGroups {
   // default icons in vuetify (official material design icons)
   md = 'md',
   mdi = 'mdi',
   fa = 'fa',
+  /*
+    Для получения mdiSvg иконки, можно в RunKit запустить код:
+    const js = require("@mdi/js")
+    console.log(js.mdiClose)
+   */
   mdiSvg = 'mdiSvg'
 }
 
 export default {
   defaultIconsGroup: VuetifyIconsGroups.md
 }
+
+export const COMMON_ICONS = {
+  close: {
+    [VuetifyIconsGroups.md]: new VuetifyIcon('close'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-times'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-close'),
+    [VuetifyIconsGroups.mdiSvg]: new VuetifyIcon('M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+  }
+}

src/extensions/nativeExtensions/image/ImageWindow.vue

@@ -15,7 +15,7 @@
           icon
           @click="close"
         >
-          <v-icon>close</v-icon>
+          <v-icon>{{ COMMON_ICONS.close[$tiptapVuetify.iconsGroup] }}</v-icon>
         </v-btn>
       </v-card-title>
       <v-card-text>
@@ -93,6 +93,7 @@ import { VRow, VCol, VImg, VDialog, VCard, VCardTitle, VCardText, VCardActions,
 import I18nMixin from '~/mixins/I18nMixin'
 import ImageUploadArea from '~/extensions/nativeExtensions/image/ImageUploadArea.vue'
 import { VExpandTransition } from 'vuetify/lib/components/transitions'
+import { COMMON_ICONS } from '~/configs/theme'
 
 export const PROPS = {
   VALUE: 'value' as const,
@@ -129,6 +130,8 @@ export default class ImageWindow extends mixins(I18nMixin) {
   })
   readonly [PROPS.EDITOR]: any
 
+  readonly COMMON_ICONS = COMMON_ICONS
+
   form: {
     src: null | string
   } = {

src/extensions/nativeExtensions/link/LinkWindow.vue

@@ -15,7 +15,7 @@
           icon
           @click="close"
         >
-          <v-icon>close</v-icon>
+          <v-icon>{{ COMMON_ICONS.close[$tiptapVuetify.iconsGroup] }}</v-icon>
         </v-btn>
       </v-card-title>
       <v-card-text>
@@ -57,6 +57,7 @@ import { mixins } from 'vue-class-component'
 import { Component, Prop } from 'vue-property-decorator'
 import { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn, VSpacer, VIcon, VTextField } from 'vuetify/lib'
 import I18nMixin from '~/mixins/I18nMixin'
+import { COMMON_ICONS } from '~/configs/theme'
 
 export const PROPS = {
   VALUE: 'value' as const,
@@ -99,6 +100,8 @@ export default class LinkWindow extends mixins(I18nMixin) {
   })
   readonly [PROPS.HREF]: null | string
 
+  readonly COMMON_ICONS = COMMON_ICONS
+
   form = {
     href: this[PROPS.HREF],
     blank: false