tiptapify 0.0.5 → 0.0.7

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import { Editor, useEditor } from "@tiptap/vue-3";
+import { editorExtensions } from "@tiptapify/components/editorExtensions";
+import { ShallowRef } from "vue";
+
+export function getTiptapEditor (content: any, placeholder: string, slashCommands: boolean = true): ShallowRef<Editor | undefined> {
+  const extensions = editorExtensions(placeholder, slashCommands)
+  const editor: ShallowRef<Editor | undefined> = useEditor({
+    content,
+    extensions,
+  })
+
+  return editor
+}

package/src/{components/extensions → extensions}/components/LinkDialog.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 
 import * as mdi from '@mdi/js'
-import { useEditor } from "@tiptapify/composable/useEditor";
+import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, ref, watch } from 'vue'
+import { computed, inject, Ref, ref, watch } from 'vue'
+
+import helpers from '@tiptapify/utils/helpers'
 
 defineExpose({ open })
 
+const { ucFirst } = helpers
+
 interface Props {
   value?: string
   target?: '_self' | '_blank'
@@ -20,8 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   destroy: undefined
 })
 
-const editor = useEditor().editor
-const editorInstance = editor.getInstance()
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = useI18n()
 
@@ -45,7 +48,7 @@ function apply() {
   const { href, target } = attrs.value
 
   if (href) {
-    editorInstance.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
   }
   close()
 }
@@ -75,7 +78,7 @@ watch(dialog, val => {
   <VDialog v-model="dialog" max-width="400" absolute @click:outside="close">
     <VCard>
       <VToolbar class="px-6" density="compact">
-        <span class="headline">{{ t('dialog.link.title') }}</span>
+        <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
 
         <VSpacer />
 
@@ -85,12 +88,12 @@ watch(dialog, val => {
       </VToolbar>
 
       <VCardText>
-        <VTextField v-model="attrs.href" :label="t('dialog.link.placeholder')" autofocus />
+        <VTextField v-model="attrs.href" :label="ucFirst(t('dialog.link.placeholder'))" autofocus />
       </VCardText>
 
       <VCardActions>
         <VBtn :disabled="isDisabled" @click="apply">
-          {{ t('dialog.apply') }}
+          {{ ucFirst(t('dialog.apply')) }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/extensions/components/PreviewDialog.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from "vue-i18n";
+import * as mdi from '@mdi/js'
+
+const { t } = useI18n();
+
+const content = ref()
+
+const dialog = ref(false)
+
+const showDialog = (event: CustomEvent) => {
+  console.log('preview event', event)
+  content.value = event.detail.html
+  dialog.value = true;
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-preview', showDialog as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-preview', showDialog as EventListener)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" fullscreen>
+    <VCard>
+      <VToolbar>
+        <VBtn :icon="mdi.mdiClose" @click="dialog = false" />
+
+        <VToolbarTitle>Preview</VToolbarTitle>
+      </VToolbar>
+
+      <VCardItem>
+        <div class="tiptap" v-html="content"></div>
+      </VCardItem>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+
+</style>

package/src/{components/extensions/components/ShowSource.vue → extensions/components/ShowSourceDialog.vue}

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
+import helpers from "@tiptapify/utils/helpers";
+
 const props = defineProps({
   indent: { type: Number, default: 2 },
 })
 
+const { ucFirst } = helpers;
+
 const { t } = useI18n();
 
-const editor = useEditor().editor.getInstance()
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const dialog = ref(false)
 const formatted = ref(false)
@@ -76,14 +80,14 @@ watch(() => formatted.value, () => {
 <template>
   <VDialog v-model="dialog" max-width="1500">
     <VCard>
-      <VCardTitle>{{ t('dialog.source.title') }}</VCardTitle>
+      <VCardTitle>{{ ucFirst(t('dialog.source.title')) }}</VCardTitle>
 
       <VCardText>
         <VContainer fluid class="pt-0 pl-0 pr-0">
           <VRow>
             <VCol>
               <VBtn v-model="formatted" :color="`${formatted ? 'primary' : ''}`" @click="formatted = !formatted">
-                {{ t('dialog.source.prettify') }}
+                {{ ucFirst(t('dialog.source.prettify')) }}
               </VBtn>
             </VCol>
           </VRow>
@@ -101,10 +105,10 @@ watch(() => formatted.value, () => {
       <VCardActions>
         <VSpacer></VSpacer>
         <VBtn color="primary" @click="dialog = false">
-          {{ t('dialog.close') }}
+          {{ ucFirst(t('dialog.close')) }}
         </VBtn>
         <VBtn color="primary" @click="saveChanges">
-          {{ t('dialog.apply') }}
+          {{ ucFirst(t('dialog.apply')) }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/extensions/components/TableBuilder.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import helpers from '@tiptapify/utils/helpers'
+import { useI18n } from 'vue-i18n'
+
+import { inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+const { ucFirst } = helpers
+
+defineExpose({ open })
+
+defineProps({
+  show: { type: Boolean, default: false },
+  maxCols: { type: Number, default: 10 },
+  maxRows: { type: Number, default: 10 },
+})
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const withHeaderRow = ref(false)
+
+const colHover = ref(0)
+const rowHover = ref(0)
+
+function hoverCell(elm: Element, row: number, col: number) {
+  rowHover.value = row
+  colHover.value = col
+  elm.classList.add('tiptapify-insert-table-col-hover')
+}
+
+function leaveCell(elm: Element) {
+  rowHover.value = 0
+  colHover.value = 0
+  elm.classList.remove('tiptapify-insert-table-col-hover')
+}
+
+function insertTable(rows: number, cols: number) {
+  editor.value.chain().focus().insertTable({ rows, cols, withHeaderRow: withHeaderRow.value }).run()
+
+  emit('close')
+}
+
+function printSelection() {
+  return rowHover.value && colHover.value ? `${rowHover.value} x ${colHover.value}` : ''
+}
+</script>
+
+<template>
+  <VSheet class="pa-2">
+    <VCheckbox
+        v-model="withHeaderRow"
+        density="compact"
+        color="primary"
+        :label="ucFirst(t('format.tables.insertWithHeaderRow'))" hide-details
+    />
+
+    <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
+      <div
+          v-for="colNum in maxCols"
+          class="tiptapify-insert-table-col"
+          :class="{'tiptapify-insert-table-col-hovered': rowNum <= rowHover && colNum <= colHover}"
+          @click="insertTable(rowNum, colNum)"
+          @mouseover="hoverCell($el.querySelector('.tiptapify-insert-table-col'), rowNum, colNum)"
+          @mouseout="leaveCell($el.querySelector('.tiptapify-insert-table-col'))"
+      >
+        <div class="tiptapify-insert-table-col-button"></div>
+      </div>
+    </div>
+
+    <div class="tiptapify-table-builder-info">
+      <span>
+        {{ ucFirst(t('format.tables.rows')) }}: {{ rowHover }}
+        {{ ucFirst(t('format.tables.cols')) }}: {{ colHover }}
+      </span>
+      <span>
+        {{ printSelection() }}
+      </span>
+    </div>
+  </VSheet>
+</template>
+
+<style lang="scss">
+:root {
+  --tiptapify-table-builder-col-hover: #5454ff88;
+}
+
+$primaryColor: var(--v-theme-primary-color, var(--tiptapify-table-builder-col-hover));
+$mutedColor: var(--v-theme-muted-color, #888888);
+
+.tiptapify-insert-table-row {
+  display: flex;
+  justify-content: center;
+}
+
+.tiptapify-insert-table-col {
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  padding: 2px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-insert-table-col-button {
+  margin: 2px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #888;
+  background: #fff;
+  border-radius: 4px;
+  filter: drop-shadow(2px 2px 4px #88888888);
+}
+
+.tiptapify-insert-table-col-hovered {
+  cursor: pointer;
+}
+
+.tiptapify-insert-table-col-hovered > .tiptapify-insert-table-col-button, .tiptapify-insert-table-col-button:hover {
+  background: $primaryColor;
+  border: 1px solid $primaryColor;
+  filter: drop-shadow(2px 2px 4px $primaryColor);
+  cursor: pointer;
+}
+
+.tiptapify-table-builder-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  font-size: 12px;
+  color: $mutedColor;
+}
+</style>

package/src/extensions/preview.ts

@@ -0,0 +1,53 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+const name: string = 'preview'
+
+export interface ViewSourceOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    preview: {
+      /**
+       * Показать исходный HTML-код
+       */
+      showPreview: () => ReturnType
+    }
+  }
+}
+
+export const Preview = Extension.create<ViewSourceOptions>({
+  name,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addCommands() {
+    return {
+      showPreview: () => ({ editor }) => {
+        const event = new CustomEvent('tiptapify-show-preview', {
+          detail: {
+            html: editor.getHTML()
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey(name),
+      }),
+    ]
+  },
+})

package/src/{components/extensions → extensions}/view-source.ts

@@ -30,9 +30,7 @@ export const ViewSource = Extension.create<ViewSourceOptions>({
       showSource: () => ({ editor }) => {
         const event = new CustomEvent('tiptapify-show-source', {
           detail: {
-            // html: editor.getHTML()
-            html: editor.getHTML({ blockSeparator: '\n\n' })
-            // html: editor.getText({ blockSeparator: '\n\n' })
+            html: editor.getHTML()
           }
         })
 

package/src/i18n/locales/de.json

@@ -1,67 +1,86 @@
 {
   "style": {
-    "paragraph": "Absatz",
-    "heading": "Überschrift",
+    "paragraph": "absatz",
+    "heading": "überschrift",
     "headings": {
-      "h1": "Überschrift Ebene 1",
-      "h2": "Überschrift Ebene 2",
-      "h3": "Überschrift Ebene 3",
-      "h4": "Überschrift Ebene 4",
-      "h5": "Überschrift Ebene 5",
-      "h6": "Überschrift Ebene 6"
+      "h1": "überschrift ebene 1",
+      "h2": "überschrift ebene 2",
+      "h3": "überschrift ebene 3",
+      "h4": "überschrift ebene 4",
+      "h5": "überschrift ebene 5",
+      "h6": "überschrift ebene 6"
     },
-    "fontFamily": "Schriftart",
-    "fontSize": "Schriftgröße",
-    "lineHeight": "Zeilenhöhe"
+    "fontFamily": "schriftart",
+    "fontSize": "schriftgröße",
+    "lineHeight": "zeilenhöhe"
   },
   "format": {
-    "bold": "Fett",
-    "italic": "Kursiv",
-    "strike": "Durchgestrichen",
-    "underline": "Unterstrichen",
-    "sup": "Hochgestellt",
-    "sub": "Tiefgestellt",
-    "break": "Zeilenumbruch",
-    "highlight": "Hervorheben",
-    "line": "Horizontale Linie",
-    "blockquote": "Zitat",
-    "code": "Code",
-    "codeblock": "Codeblock",
-    "link": "Externer Link",
-    "formatClear": "Formatierung löschen"
+    "bold": "fett",
+    "italic": "kursiv",
+    "strike": "durchgestrichen",
+    "underline": "unterstrichen",
+    "sup": "hochgestellt",
+    "sub": "tiefgestellt",
+    "break": "zeilenumbruch",
+    "highlight": "hervorheben",
+    "line": "horizontale linie",
+    "blockquote": "zitat",
+    "code": "code",
+    "codeblock": "codeblock",
+    "link": "externer link",
+    "formatClear": "formatierung löschen",
+    "tables": {
+      "table": "tabelle",
+      "insertTable": "tabelle einfügen",
+      "deleteTable": "tabelle löschen",
+      "insertWithHeaderRow": "tabelle mit kopfzeile einfügen",
+      "rows": "zeilen",
+      "row": "zeile",
+      "insertRowBefore": "zeile oberhalb einfügen",
+      "insertRowAfter": "zeile unterhalb einfügen",
+      "deleteRow": "zeile löschen",
+      "cols": "spalten",
+      "col": "spalte",
+      "insertColBefore": "spalte links einfügen",
+      "insertColAfter": "spalte rechts einfügen",
+      "deleteCol": "spalte löschen",
+      "mergeCells": "zellen verbinden",
+      "splitCell": "zelle teilen"
+    }
   },
   "action": {
-    "undo": "Rückgängig",
-    "redo": "Wiederherstellen"
+    "undo": "rückgängig",
+    "redo": "wiederherstellen"
   },
-  "alignment": "Ausrichtung",
+  "alignment": "ausrichtung",
   "alignments": {
-    "left": "Linksbündig",
-    "center": "Zentriert",
-    "right": "Rechtsbündig",
-    "justify": "Blocksatz"
+    "left": "linksbündig",
+    "center": "zentriert",
+    "right": "rechtsbündig",
+    "justify": "blocksatz"
   },
-  "list": "Liste",
+  "list": "liste",
   "lists": {
-    "bullet": "Aufzählungsliste",
-    "numbered": "Nummerierte Liste",
-    "task": "Aufgabenliste",
-    "indent": "Einzug vergrößern",
-    "outdent": "Einzug verkleinern"
+    "bullet": "aufzählungsliste",
+    "numbered": "nummerierte liste",
+    "task": "aufgabenliste",
+    "indent": "einzug vergrößern",
+    "outdent": "einzug verkleinern"
   },
   "dialog": {
-    "close": "Schließen",
-    "apply": "Anwenden",
+    "close": "schließen",
+    "apply": "anwenden",
     "link": {
-      "title": "Link hinzufügen/bearbeiten",
-      "placeholder": "Linkadresse"
+      "title": "link hinzufügen/bearbeiten",
+      "placeholder": "linkadresse"
     },
     "source": {
-      "title": "Quellcode anzeigen",
-      "prettify": "prettify"
+      "title": "quellcode anzeigen",
+      "prettify": "formatieren"
     }
   },
   "misc": {
-    "source": "Quellcode anzeigen"
+    "source": "quellcode anzeigen",
+    "preview": "vorschau"
   }
 }

package/src/i18n/locales/en.json

@@ -28,7 +28,25 @@
     "code": "code",
     "codeblock": "code block",
     "link": "external link",
-    "formatClear": "format clear"
+    "formatClear": "format clear",
+    "tables": {
+      "table": "table",
+      "insertTable": "insert table",
+      "deleteTable": "delete table",
+      "insertWithHeaderRow": "insert table with header row",
+      "rows": "rows",
+      "row": "row",
+      "insertRowBefore": "insert row before",
+      "insertRowAfter": "insert row after",
+      "deleteRow": "delete row",
+      "cols": "columns",
+      "col": "column",
+      "insertColBefore": "insert column before",
+      "insertColAfter": "insert column after",
+      "deleteCol": "delete column",
+      "mergeCells": "merge cells",
+      "splitCell": "split cell"
+    }
   },
   "action": {
     "undo": "undo",
@@ -62,6 +80,7 @@
     }
   },
   "misc": {
-    "source": "view source code"
+    "source": "view source code",
+    "preview": "preview"
   }
 }

package/src/i18n/locales/es.json

@@ -22,13 +22,31 @@
     "sup": "superíndice",
     "sub": "subíndice",
     "break": "salto de línea",
-    "highlight": "resaltado",
+    "highlight": "resaltar",
     "line": "línea horizontal",
     "blockquote": "cita",
     "code": "código",
     "codeblock": "bloque de código",
     "link": "enlace externo",
-    "formatClear": "limpiar formato"
+    "formatClear": "borrar formato",
+    "tables": {
+      "table": "tabla",
+      "insertTable": "insertar tabla",
+      "deleteTable": "eliminar tabla",
+      "insertWithHeaderRow": "insertar tabla con fila de encabezado",
+      "rows": "filas",
+      "row": "fila",
+      "insertRowBefore": "insertar fila antes",
+      "insertRowAfter": "insertar fila después",
+      "deleteRow": "eliminar fila",
+      "cols": "columnas",
+      "col": "columna",
+      "insertColBefore": "insertar columna antes",
+      "insertColAfter": "insertar columna después",
+      "deleteCol": "eliminar columna",
+      "mergeCells": "combinar celdas",
+      "splitCell": "dividir celda"
+    }
   },
   "action": {
     "undo": "deshacer",
@@ -43,25 +61,26 @@
   },
   "list": "lista",
   "lists": {
-    "bullet": "lista con viñetas",
+    "bullet": "lista sin orden",
     "numbered": "lista numerada",
     "task": "lista de tareas",
-    "indent": "aumentar sangría",
-    "outdent": "disminuir sangría"
+    "indent": "sangría de elemento",
+    "outdent": "reducir sangría"
   },
   "dialog": {
     "close": "cerrar",
     "apply": "aplicar",
     "link": {
-      "title": "añadir/editar enlace",
+      "title": "agregar/editar enlace",
       "placeholder": "dirección del enlace"
     },
     "source": {
       "title": "ver código fuente",
-      "prettify": "prettify"
+      "prettify": "embellecer"
     }
   },
   "misc": {
-    "source": "ver código fuente"
+    "source": "ver código fuente",
+    "preview": "vista previa"
   }
 }

package/src/i18n/locales/fr.json

@@ -22,13 +22,31 @@
     "sup": "exposant",
     "sub": "indice",
     "break": "saut de ligne",
-    "highlight": "surbrillance",
+    "highlight": "surligner",
     "line": "ligne horizontale",
     "blockquote": "citation",
     "code": "code",
     "codeblock": "bloc de code",
     "link": "lien externe",
-    "formatClear": "effacer le formatage"
+    "formatClear": "effacer le format",
+    "tables": {
+      "table": "tableau",
+      "insertTable": "insérer un tableau",
+      "deleteTable": "supprimer le tableau",
+      "insertWithHeaderRow": "insérer un tableau avec ligne d'en-tête",
+      "rows": "lignes",
+      "row": "ligne",
+      "insertRowBefore": "insérer une ligne avant",
+      "insertRowAfter": "insérer une ligne après",
+      "deleteRow": "supprimer la ligne",
+      "cols": "colonnes",
+      "col": "colonne",
+      "insertColBefore": "insérer une colonne avant",
+      "insertColAfter": "insérer une colonne après",
+      "deleteCol": "supprimer la colonne",
+      "mergeCells": "fusionner les cellules",
+      "splitCell": "diviser la cellule"
+    }
   },
   "action": {
     "undo": "annuler",
@@ -46,22 +64,23 @@
     "bullet": "liste à puces",
     "numbered": "liste numérotée",
     "task": "liste de tâches",
-    "indent": "augmenter l'indentation",
-    "outdent": "diminuer l'indentation"
+    "indent": "retrait d'élément",
+    "outdent": "réduire le retrait"
   },
   "dialog": {
     "close": "fermer",
     "apply": "appliquer",
     "link": {
-      "title": "ajouter/modifier un lien",
+      "title": "ajouter/modifier le lien",
       "placeholder": "adresse du lien"
     },
     "source": {
       "title": "voir le code source",
-      "prettify": "prettify"
+      "prettify": "embellir"
     }
   },
   "misc": {
-    "source": "voir le code source"
+    "source": "voir le code source",
+    "preview": "aperçu"
   }
 }