tiptapify 0.0.7 → 0.0.9

package/src/extensions/components/LinkDialog.vue

@@ -4,78 +4,82 @@ import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, inject, Ref, ref, watch } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 import helpers from '@tiptapify/utils/helpers'
 
-defineExpose({ open })
+defineProps({
+  variantBtn: { type: String, default() { return 'elevated' }},
+  variantField: { type: String, default() { return 'solo' }}
+})
 
 const { ucFirst } = helpers
 
-interface Props {
-  value?: string
-  target?: '_self' | '_blank'
-  destroy?: () => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  value: undefined,
-  target: '_blank',
-  destroy: undefined
-})
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-
 const { t } = useI18n()
 
 const generateLinkAttrs = () => ({
   href: '',
-  target: '_blank'
+  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, target } = attrs.value
-  if (!href) return true
-
-  return props.value === href && props.target === target
+  const { href } = attrs.value
+  return !href
 })
 
 function apply() {
-  const { href, target } = attrs.value
+  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 }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target, rel, class: cssClass }).run()
   }
+
   close()
 }
 
-function open() {
-  dialog.value = true
+function clear() {
+  editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+
+  close()
 }
 
 function close() {
   dialog.value = false
+
   attrs.value = generateLinkAttrs()
+}
 
-  setTimeout(() => props.destroy?.(), 300)
+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;
 }
 
-watch(dialog, val => {
-  if (!val) return
+onMounted(() => {
+  window.addEventListener('tiptapify-show-link', showLink as EventListener)
+})
 
-  attrs.value = {
-    href: props.value,
-    target: props.target
-  }
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-link', showLink as EventListener)
 })
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="400" absolute @click:outside="close">
+  <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>
@@ -88,13 +92,50 @@ watch(dialog, val => {
       </VToolbar>
 
       <VCardText>
-        <VTextField v-model="attrs.href" :label="ucFirst(t('dialog.link.placeholder'))" autofocus />
+        <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>
-        <VBtn :disabled="isDisabled" @click="apply">
-          {{ ucFirst(t('dialog.apply')) }}
-        </VBtn>
+        <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>

package/src/extensions/components/PreviewDialog.vue

@@ -10,7 +10,6 @@ const content = ref()
 const dialog = ref(false)
 
 const showDialog = (event: CustomEvent) => {
-  console.log('preview event', event)
   content.value = event.detail.html
   dialog.value = true;
 }

package/src/extensions/components/ShowSourceDialog.vue

@@ -7,6 +7,8 @@ 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;
@@ -97,17 +99,17 @@ 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">
+        <VBtn :variant="variantBtn" @click="dialog = false">
           {{ ucFirst(t('dialog.close')) }}
         </VBtn>
-        <VBtn color="primary" @click="saveChanges">
+        <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
           {{ ucFirst(t('dialog.apply')) }}
         </VBtn>
       </VCardActions>

package/src/extensions/components/StyleColor.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import { useI18n } from 'vue-i18n'
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+defineExpose({ open })
+
+const props = defineProps({
+  show: { type: Boolean, default: true },
+  fontColor: { type: Boolean, default: false },
+  backgroundColor: { type: Boolean, default: false },
+  color: { type: String, default: '' },
+})
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const colorPicker = ref(false)
+const customColor = ref(computed(() => props.color).value)
+
+const colors = {
+  black: '#000',
+  darkgray: '#444',
+  gray: '#888',
+  lightgray: '#ccc',
+  white: '#fff',
+  cyan: '#00FFFF',
+  light: '#0088ff',
+  blue: '#0000ff',
+  indigo: '#4b0082',
+  purple: '#800080',
+  pink: '#ff00ff',
+  red: '#ff0000',
+  orange: '#ff9900',
+  yellow: '#ffff00',
+  green: '#00ff00',
+}
+
+type Color = { r: number, g: number, b: number, a?: number }
+
+function calculateShadowColor(color: string): string {
+  const rgb: Color = hexToRgb(color)
+
+  for (const channel of Object.keys(rgb)) {
+    rgb[channel] = Math.round(rgb[channel] * .35)
+  }
+
+  return Object.values(rgb).join(', ')
+}
+
+function hexToRgb(hex: string): Color {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return {
+    r: result ? parseInt(result[1], 16) : 0,
+    g: result ? parseInt(result[2], 16) : 0,
+    b: result ? parseInt(result[3], 16) : 0
+  };
+}
+
+function setColor(color: string) {
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(color).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color }).run()
+  }
+
+  emit('close')
+}
+
+function unsetColor() {
+  if (props.fontColor) {
+    editor.value.chain().focus().unsetColor().run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().unsetHighlight().run()
+  }
+
+  emit('close')
+}
+
+function isColorActive(color: string): boolean {
+  return props.color === color
+}
+</script>
+
+<template>
+  <VSheet class="pa-2">
+    <div class="tiptapify-style-color-container">
+      <template v-for="colorCode in colors">
+        <div
+            class="tiptapify-style-color-item"
+            :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
+            @click="setColor(colorCode)"
+        >
+          <div
+              class="tiptapify-style-color-picker"
+              :style="`background-color: ${colorCode}; box-shadow: 1px 1px 4px rgb(${calculateShadowColor(colorCode)});`"
+          ></div>
+        </div>
+      </template>
+    </div>
+
+    <VDivider class="mt-2 mb-2" />
+
+    <VMenu v-model="colorPicker" :close-on-content-click="false">
+      <template #activator="{ props: menuProps }">
+        <VBtn v-bind="menuProps" variant="flat" block>
+          <template #prepend>
+            <div
+                class="tiptapify-style-color-picker"
+                :style="`background-color: ${customColor}; box-shadow: 1px 1px 4px rgb(0, 0, 0, .35);`"
+            >
+            </div>
+          </template>
+          <template #default>
+            {{ t('style.color.custom') }}
+          </template>
+        </VBtn>
+      </template>
+
+      <VCard>
+        <VCardItem>
+          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs />
+        </VCardItem>
+
+        <VCardActions>
+          <VBtn variant="flat" color="primary" @click="setColor(customColor)">OK</VBtn>
+          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = color">Cancel</VBtn>
+        </VCardActions>
+      </VCard>
+    </VMenu>
+
+    <VDivider class="mt-2 mb-2" />
+
+    <VBtn @click="unsetColor" block variant="flat">
+      {{ t('style.color.unset') }}
+    </VBtn>
+  </VSheet>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-style-color-container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.tiptapify-style-color-item {
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 5px;
+  transition: background-color .2s;
+}
+
+.tiptapify-style-color-item:hover, .tiptapify-style-color-item-active {
+  background-color: #dedede;
+}
+
+.tiptapify-style-color-picker {
+  width: 24px;
+  height: 24px;
+  margin: 2px;
+  border-radius: 4px;
+}
+</style>

package/src/extensions/components/TableBuilder.vue

@@ -13,7 +13,6 @@ const { ucFirst } = helpers
 defineExpose({ open })
 
 defineProps({
-  show: { type: Boolean, default: false },
   maxCols: { type: Number, default: 10 },
   maxRows: { type: Number, default: 10 },
 })
@@ -56,7 +55,7 @@ function printSelection() {
         v-model="withHeaderRow"
         density="compact"
         color="primary"
-        :label="ucFirst(t('format.tables.insertWithHeaderRow'))" hide-details
+        :label="ucFirst(t('media.tables.insertWithHeaderRow'))" hide-details
     />
 
     <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
@@ -74,8 +73,8 @@ function printSelection() {
 
     <div class="tiptapify-table-builder-info">
       <span>
-        {{ ucFirst(t('format.tables.rows')) }}: {{ rowHover }}
-        {{ ucFirst(t('format.tables.cols')) }}: {{ colHover }}
+        {{ ucFirst(t('media.tables.rows')) }}: {{ rowHover }}
+        {{ ucFirst(t('media.tables.cols')) }}: {{ colHover }}
       </span>
       <span>
         {{ printSelection() }}
@@ -111,7 +110,7 @@ $mutedColor: var(--v-theme-muted-color, #888888);
   margin: 2px;
   width: 100%;
   height: 100%;
-  border: 1px solid #888;
+  border: 1px solid #bbb;
   background: #fff;
   border-radius: 4px;
   filter: drop-shadow(2px 2px 4px #88888888);

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

@@ -3,34 +3,21 @@ 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>({
+export const Preview = Extension.create({
   name,
 
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    }
-  },
-
   addCommands() {
     return {
       showPreview: () => ({ editor }) => {
-        const event = new CustomEvent('tiptapify-show-preview', {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
             html: editor.getHTML()
           }

package/src/extensions/view-source.ts

@@ -8,9 +8,6 @@ export interface ViewSourceOptions {
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     viewSource: {
-      /**
-       * Показать исходный HTML-код
-       */
       showSource: () => ReturnType
     }
   }

package/src/i18n/locales/de.json

@@ -1,4 +1,7 @@
 {
+  "content": {
+    "placeholder": "schreib hier etwas..."
+  },
   "style": {
     "paragraph": "absatz",
     "heading": "überschrift",
@@ -12,7 +15,13 @@
     },
     "fontFamily": "schriftart",
     "fontSize": "schriftgröße",
-    "lineHeight": "zeilenhöhe"
+    "lineHeight": "zeilenhöhe",
+    "color": {
+      "highlight": "hervorhebungsfarbe",
+      "text": "textfarbe",
+      "unset": "farbe zurücksetzen",
+      "custom": "benutzerdefinierte farbe"
+    }
   },
   "format": {
     "bold": "fett",
@@ -21,14 +30,16 @@
     "underline": "unterstrichen",
     "sup": "hochgestellt",
     "sub": "tiefgestellt",
-    "break": "zeilenumbruch",
-    "highlight": "hervorheben",
+    "break": "harter umbruch",
     "line": "horizontale linie",
     "blockquote": "zitat",
     "code": "code",
-    "codeblock": "codeblock",
+    "codeblock": "code block",
+    "formatClear": "formatierung löschen"
+  },
+  "media": {
     "link": "externer link",
-    "formatClear": "formatierung löschen",
+    "image": "bild",
     "tables": {
       "table": "tabelle",
       "insertTable": "tabelle einfügen",
@@ -36,13 +47,13 @@
       "insertWithHeaderRow": "tabelle mit kopfzeile einfügen",
       "rows": "zeilen",
       "row": "zeile",
-      "insertRowBefore": "zeile oberhalb einfügen",
-      "insertRowAfter": "zeile unterhalb einfügen",
+      "insertRowBefore": "zeile davor einfügen",
+      "insertRowAfter": "zeile danach einfügen",
       "deleteRow": "zeile löschen",
       "cols": "spalten",
       "col": "spalte",
-      "insertColBefore": "spalte links einfügen",
-      "insertColAfter": "spalte rechts einfügen",
+      "insertColBefore": "spalte davor einfügen",
+      "insertColAfter": "spalte danach einfügen",
       "deleteCol": "spalte löschen",
       "mergeCells": "zellen verbinden",
       "splitCell": "zelle teilen"
@@ -50,37 +61,52 @@
   },
   "action": {
     "undo": "rückgängig",
-    "redo": "wiederherstellen"
+    "redo": "wiederholen"
   },
   "alignment": "ausrichtung",
   "alignments": {
-    "left": "linksbündig",
-    "center": "zentriert",
-    "right": "rechtsbündig",
+    "left": "links ausrichten",
+    "center": "zentriert ausrichten",
+    "right": "rechts ausrichten",
     "justify": "blocksatz"
   },
   "list": "liste",
   "lists": {
-    "bullet": "aufzählungsliste",
-    "numbered": "nummerierte liste",
+    "bullet": "ungeordnete liste",
+    "numbered": "geordnete liste",
     "task": "aufgabenliste",
-    "indent": "einzug vergrößern",
-    "outdent": "einzug verkleinern"
+    "indent": "listenelement einrücken",
+    "outdent": "listenelement ausrücken"
   },
   "dialog": {
-    "close": "schließen",
     "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"
+      "href": "link-adresse",
+      "target": "in neuem fenster öffnen",
+      "rel": "rel",
+      "class": "css-klasse"
     },
     "source": {
       "title": "quellcode anzeigen",
-      "prettify": "formatieren"
+      "prettify": "verschönern"
     }
   },
   "misc": {
     "source": "quellcode anzeigen",
     "preview": "vorschau"
+  },
+  "footer": {
+    "words": "wörter",
+    "chars": "zeichen"
   }
 }