tiptapify 0.0.6 → 0.0.8

package/src/extensions/components/LinkDialog.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+
+import { useI18n } from 'vue-i18n'
+import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+
+import helpers from '@tiptapify/utils/helpers'
+
+defineProps({
+  variantBtn: { type: String, default() { return 'elevated' }},
+  variantField: { type: String, default() { return 'solo' }}
+})
+
+const { ucFirst } = helpers
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = useI18n()
+
+const generateLinkAttrs = () => ({
+  href: '',
+  target: '_blank',
+  cssClass: '',
+  rel: ''
+})
+
+const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'next', 'nofollow', 'noreferrer', 'noopener', 'prev', 'search', 'tag']
+
+const attrs = ref(generateLinkAttrs())
+
+const dialog = ref<boolean>(false)
+
+const isDisabled = computed(() => {
+  const { href } = attrs.value
+  return !href
+})
+
+function apply() {
+  let { href, target, rel, cssClass } = attrs.value
+  target = target ? '_blank' : '_self'
+  rel = rel.join(' ')
+
+  if (href) {
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target, rel, class: cssClass }).run()
+  }
+
+  close()
+}
+
+function clear() {
+  editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+
+  close()
+}
+
+function close() {
+  dialog.value = false
+
+  attrs.value = generateLinkAttrs()
+}
+
+const showLink = (event: CustomEvent) => {
+  attrs.value.href = event.detail.link?.href
+  attrs.value.target = event.detail.link?.target === '_blank'
+  attrs.value.rel = event.detail.link?.rel?.split(' ')
+  attrs.value.cssClass = event.detail.link?.class
+
+  dialog.value = true;
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-link', showLink as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-link', showLink as EventListener)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
+    <VCard>
+      <VToolbar class="px-6" density="compact">
+        <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
+
+        <VSpacer />
+
+        <VBtn class="mx-0" icon @click="close">
+          <VIcon :icon="mdi.mdiClose" />
+        </VBtn>
+      </VToolbar>
+
+      <VCardText>
+        <VRow>
+          <VCol cols="12" md="9">
+            <VTextField v-model="attrs.href" :variant="variantField" :label="ucFirst(t('dialog.link.href'))" autofocus />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VCheckbox v-model="attrs.target" color="primary" :label="ucFirst(t('dialog.link.target'))" />
+          </VCol>
+
+          <VCol cols="12">
+            <VSelect
+                v-model="attrs.rel"
+                :items="relAttrs"
+                :label="ucFirst(t('dialog.link.rel'))"
+                :variant="variantField"
+                multiple
+                chips
+                closable-chips
+                clearable
+            />
+          </VCol>
+
+          <VCol cols="12">
+            <VTextField v-model="attrs.cssClass" :variant="variantField" :label="ucFirst(t('dialog.link.class'))" />
+          </VCol>
+        </VRow>
+      </VCardText>
+
+      <VCardActions>
+        <VRow>
+          <VCol class="d-flex justify-start">
+            <VBtn color="warning" v-if="editor.isActive('link')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+              {{ ucFirst(t('dialog.clear')) }}
+            </VBtn>
+          </VCol>
+          <VCol class="d-flex justify-end">
+            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+              {{ ucFirst(t('dialog.close')) }}
+            </VBtn>
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+              {{ ucFirst(t('dialog.apply')) }}
+            </VBtn>
+          </VCol>
+        </VRow>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

package/src/extensions/components/PreviewDialog.vue

@@ -0,0 +1,44 @@
+<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) => {
+  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,21 @@
 <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 },
+  variantBtn: { type: String, default: 'elevated' },
+  variantField: { type: String, default: 'solo' }
 })
 
+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 +82,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>
@@ -93,18 +99,18 @@ watch(() => formatted.value, () => {
             v-model="sourceCode"
             no-resize
             rows="100"
-            variant="outlined"
+            :variant="variantField"
             class="source-code-area"
         />
       </VCardText>
 
       <VCardActions>
         <VSpacer></VSpacer>
-        <VBtn color="primary" @click="dialog = false">
-          {{ t('dialog.close') }}
+        <VBtn :variant="variantBtn" @click="dialog = false">
+          {{ ucFirst(t('dialog.close')) }}
         </VBtn>
-        <VBtn color="primary" @click="saveChanges">
-          {{ t('dialog.apply') }}
+        <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
+          {{ 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('media.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('media.tables.rows')) }}: {{ rowHover }}
+        {{ ucFirst(t('media.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/image.ts

@@ -0,0 +1,31 @@
+import { Extension } from '@tiptap/core'
+
+const name: string = 'tiptapifyImage'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tiptapifyImage: {
+      showTiptapifyImage: () => ReturnType
+    }
+  }
+}
+
+export const TiptapifyImage = Extension.create({
+  name,
+
+  addCommands() {
+    return {
+      showTiptapifyImage: () => ({ editor }) => {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
+          detail: {
+            image: editor.getAttributes('image')
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+})

package/src/extensions/link.ts

@@ -0,0 +1,24 @@
+import Link from "@tiptap/extension-link";
+
+const name: string = 'link'
+
+export const TiptapifyLink = Link.extend({
+  name,
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      showLink: () => ({ editor }) => {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
+          detail: {
+            link: editor.getAttributes('link')
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+})

package/src/extensions/preview.ts

@@ -0,0 +1,40 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+const name: string = 'preview'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    preview: {
+      showPreview: () => ReturnType
+    }
+  }
+}
+
+export const Preview = Extension.create({
+  name,
+
+  addCommands() {
+    return {
+      showPreview: () => ({ editor }) => {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
+          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

@@ -8,9 +8,6 @@ export interface ViewSourceOptions {
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     viewSource: {
-      /**
-       * Показать исходный HTML-код
-       */
       showSource: () => ReturnType
     }
   }
@@ -30,9 +27,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,100 @@
 {
   "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": "harter umbruch",
+    "highlight": "hervorheben",
+    "line": "horizontale linie",
+    "blockquote": "zitat",
+    "code": "code",
+    "codeblock": "code block",
+    "formatClear": "formatierung löschen"
+  },
+  "media": {
+    "link": "externer link",
+    "image": "bild",
+    "tables": {
+      "table": "tabelle",
+      "insertTable": "tabelle einfügen",
+      "deleteTable": "tabelle löschen",
+      "insertWithHeaderRow": "tabelle mit kopfzeile einfügen",
+      "rows": "zeilen",
+      "row": "zeile",
+      "insertRowBefore": "zeile davor einfügen",
+      "insertRowAfter": "zeile danach einfügen",
+      "deleteRow": "zeile löschen",
+      "cols": "spalten",
+      "col": "spalte",
+      "insertColBefore": "spalte davor einfügen",
+      "insertColAfter": "spalte danach einfügen",
+      "deleteCol": "spalte löschen",
+      "mergeCells": "zellen verbinden",
+      "splitCell": "zelle teilen"
+    }
   },
   "action": {
-    "undo": "Rückgängig",
-    "redo": "Wiederherstellen"
+    "undo": "rückgängig",
+    "redo": "wiederholen"
   },
-  "alignment": "Ausrichtung",
+  "alignment": "ausrichtung",
   "alignments": {
-    "left": "Linksbündig",
-    "center": "Zentriert",
-    "right": "Rechtsbündig",
-    "justify": "Blocksatz"
+    "left": "links ausrichten",
+    "center": "zentriert ausrichten",
+    "right": "rechts ausrichten",
+    "justify": "blocksatz"
   },
-  "list": "Liste",
+  "list": "liste",
   "lists": {
-    "bullet": "Aufzählungsliste",
-    "numbered": "Nummerierte Liste",
-    "task": "Aufgabenliste",
-    "indent": "Einzug vergrößern",
-    "outdent": "Einzug verkleinern"
+    "bullet": "ungeordnete liste",
+    "numbered": "geordnete liste",
+    "task": "aufgabenliste",
+    "indent": "listenelement einrücken",
+    "outdent": "listenelement ausrücken"
   },
   "dialog": {
-    "close": "Schließen",
-    "apply": "Anwenden",
+    "apply": "anwenden",
+    "clear": "löschen",
+    "close": "schließen",
+    "image": {
+      "title": "bild hinzufügen/bearbeiten",
+      "src": "quelle",
+      "alt": "alt",
+      "width": "breite",
+      "height": "höhe"
+    },
     "link": {
-      "title": "Link hinzufügen/bearbeiten",
-      "placeholder": "Linkadresse"
+      "title": "link hinzufügen/bearbeiten",
+      "href": "link-adresse",
+      "target": "in neuem fenster öffnen",
+      "rel": "rel",
+      "class": "css-klasse"
     },
     "source": {
-      "title": "Quellcode anzeigen",
-      "prettify": "prettify"
+      "title": "quellcode anzeigen",
+      "prettify": "verschönern"
     }
   },
   "misc": {
-    "source": "Quellcode anzeigen"
+    "source": "quellcode anzeigen",
+    "preview": "vorschau"
   }
 }