tiptapify 0.0.8 → 0.0.9

package/src/components/Toolbar/items/format.ts

@@ -55,19 +55,6 @@ export function getFormatItems(editor: Editor) {
       attrs: {
         click: () => editor.chain().focus().toggleUnderline().run()
       }
-    },
-    highlight: {
-      name: 'highlight',
-      tooltip: 'format.highlight',
-      icon: mdi.mdiMarker,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => editor.isActive('highlight') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleHighlight().run()
-      }
     }
   }
 }

package/src/components/Toolbar/items/media.ts

@@ -1,7 +1,7 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
-import { computed, markRaw, Ref } from "vue";
+import { computed, markRaw } from "vue";
 
 export function getMediaItems(editor: Editor) {
   return {

package/src/components/Toolbar/items/misc.ts

@@ -1,6 +1,6 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed, Ref } from "vue";
+import { computed } from "vue";
 
 export function getMiscItems(editor: Editor) {
   return {

package/src/components/Toolbar/items/style.ts

@@ -1,14 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { fonts } from "@tiptapify/components/Toolbar/fonts";
-import { computed, ref } from "vue";
+import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
+import { computed, markRaw, ref } from "vue";
 
 interface MDIIcons {
   [key: string]: string
 }
 const mdiIcons = mdi as MDIIcons
 
-export function getStyleItems(editor: Editor, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
   const headingLevels = ref([1, 2, 3, 4, 5, 6])
   if (customHeadingLevels.length) {
     customHeadingLevels.forEach(level => {
@@ -141,6 +142,46 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
           }
         }
       })
+    },
+    highlight: {
+      name: 'highlight',
+      tooltip: 'style.color.highlight',
+      icon: mdi.mdiFormatColorFill,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      icon2Props: {
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.getAttributes('highlight').color || defaultColor
+        }),
+        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
+      },
+      component: markRaw(StyleColor),
+      componentProps: {
+        fontColor: false,
+        backgroundColor: true,
+        color: computed(() => editor.getAttributes('highlight').color || ''),
+      }
+    },
+    color: {
+      name: 'color',
+      tooltip: 'style.color.text',
+      icon: mdi.mdiFormatColorText,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      icon2Props: {
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.getAttributes('textStyle').color || defaultColor
+        }),
+        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
+      },
+      component: markRaw(StyleColor),
+      componentProps: {
+        fontColor: true,
+        backgroundColor: false,
+        color: computed(() => editor.getAttributes('textStyle').color || ''),
+      }
     }
   }
 }

package/src/components/Toolbar/items.ts

@@ -6,7 +6,7 @@ import { getListItems } from "@tiptapify/components/Toolbar/items/list";
 import { getMediaItems } from "@tiptapify/components/Toolbar/items/media";
 import { getMiscItems } from "@tiptapify/components/Toolbar/items/misc";
 import { getStyleItems } from "@tiptapify/components/Toolbar/items/style";
-import { ComputedRef, Ref, ref } from "vue";
+import { ComputedRef, ref } from "vue";
 
 interface ToolbarItemAttrs {
   [key: string]: Function | any
@@ -20,12 +20,15 @@ export interface ToolbarItem {
   name: string|number,
   tooltip: string,
   icon: string|ComputedRef<string>,
+  icon2?: string|ComputedRef<string>,
   noI18n?: boolean,
   enabled: boolean,
   component?: any,
   modelValue?: any,
   group?: boolean,
   toggle?: boolean,
+  icon2Props?: ToolbarItemProps,
+  componentProps?: ToolbarItemProps,
   props?: ToolbarItemProps,
   attrs?: ToolbarItemAttrs,
   children?: ToolbarItems|ToolbarItem[],
@@ -47,11 +50,12 @@ export interface ToolbarItemSections {
 
 export function toolbarItems(
   editor: any,
+  theme: any,
   fontMeasure: string,
   items: { list: Array<string>, exclude: boolean },
   customHeadingLevels: Array<number>
 ): ToolbarItemSections {
-  const styleItems = ref(getStyleItems(editor.value, fontMeasure, customHeadingLevels))
+  const styleItems = ref(getStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
   const formatItems = ref(getFormatItems(editor.value))
   const formatExtraItems = ref(getFormatExtraItems(editor.value))
   const alignmentItems = ref(getAlignmentItems(editor.value))
@@ -64,8 +68,6 @@ export function toolbarItems(
     /**
      * todo
      *
-     * font color, backgroundcolor
-     * tables
      * media (image, video)
      */
     style: { group: true, items: styleItems.value },

package/src/components/editorExtensions.ts

@@ -69,7 +69,7 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Dropcursor,
     Typography,
     Underline,
-    Highlight,
+    Highlight.configure({ multicolor: true }),
     TiptapifyLink.configure({
       openOnClick: false,
       defaultProtocol: 'https'
@@ -89,12 +89,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
         },
       })
       .configure({ lowlight }),
-    Selection.configure({
-      className: 'selection',
-    }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
+    Selection.configure({ className: 'selection' }),
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
     ViewSource,

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 },
 })
@@ -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/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",
@@ -22,7 +31,6 @@
     "sup": "hochgestellt",
     "sub": "tiefgestellt",
     "break": "harter umbruch",
-    "highlight": "hervorheben",
     "line": "horizontale linie",
     "blockquote": "zitat",
     "code": "code",
@@ -96,5 +104,9 @@
   "misc": {
     "source": "quellcode anzeigen",
     "preview": "vorschau"
+  },
+  "footer": {
+    "words": "wörter",
+    "chars": "zeichen"
   }
 }

package/src/i18n/locales/en.json

@@ -1,4 +1,7 @@
 {
+  "content": {
+    "placeholder": "write something here..."
+  },
   "style": {
     "paragraph": "paragraph",
     "heading": "heading",
@@ -12,7 +15,13 @@
     },
     "fontFamily": "font family",
     "fontSize": "font size",
-    "lineHeight": "line height"
+    "lineHeight": "line height",
+    "color": {
+      "highlight": "highlight color",
+      "text": "text color",
+      "unset": "unset color",
+      "custom": "custom color"
+    }
   },
   "format": {
     "bold": "bold",
@@ -22,7 +31,6 @@
     "sup": "superscript",
     "sub": "subscript",
     "break": "hard break",
-    "highlight": "highlight",
     "line": "horizontal line",
     "blockquote": "cite",
     "code": "code",
@@ -96,5 +104,9 @@
   "misc": {
     "source": "view source code",
     "preview": "preview"
+  },
+  "footer": {
+    "words": "words",
+    "chars": "characters"
   }
 }

package/src/i18n/locales/es.json

@@ -1,4 +1,7 @@
 {
+  "content": {
+    "placeholder": "escribe algo aquí..."
+  },
   "style": {
     "paragraph": "párrafo",
     "heading": "encabezado",
@@ -12,7 +15,13 @@
     },
     "fontFamily": "familia de fuente",
     "fontSize": "tamaño de fuente",
-    "lineHeight": "altura de línea"
+    "lineHeight": "altura de línea",
+    "color": {
+      "highlight": "color de resaltado",
+      "text": "color de texto",
+      "unset": "quitar color",
+      "custom": "color personalizado"
+    }
   },
   "format": {
     "bold": "negrita",
@@ -21,8 +30,7 @@
     "underline": "subrayado",
     "sup": "superíndice",
     "sub": "subíndice",
-    "break": "salto forzado",
-    "highlight": "resaltar",
+    "break": "salto de línea forzado",
     "line": "línea horizontal",
     "blockquote": "cita",
     "code": "código",
@@ -47,7 +55,7 @@
       "insertColBefore": "insertar columna antes",
       "insertColAfter": "insertar columna después",
       "deleteCol": "eliminar columna",
-      "mergeCells": "combinar celdas",
+      "mergeCells": "fusionar celdas",
       "splitCell": "dividir celda"
     }
   },
@@ -64,7 +72,7 @@
   },
   "list": "lista",
   "lists": {
-    "bullet": "lista desordenada",
+    "bullet": "lista no ordenada",
     "numbered": "lista ordenada",
     "task": "lista de tareas",
     "indent": "sangrar elemento de lista",
@@ -76,7 +84,7 @@
     "close": "cerrar",
     "image": {
       "title": "agregar/editar imagen",
-      "src": "origen",
+      "src": "fuente",
       "alt": "alt",
       "width": "ancho",
       "height": "alto"
@@ -86,7 +94,7 @@
       "href": "dirección del enlace",
       "target": "abrir en nueva ventana",
       "rel": "rel",
-      "class": "clase css"
+      "class": "clase CSS"
     },
     "source": {
       "title": "ver código fuente",
@@ -96,5 +104,9 @@
   "misc": {
     "source": "ver código fuente",
     "preview": "vista previa"
+  },
+  "footer": {
+    "words": "palabras",
+    "chars": "caracteres"
   }
 }

package/src/i18n/locales/fr.json

@@ -1,18 +1,27 @@
 {
+  "content": {
+    "placeholder": "écrivez quelque chose ici..."
+  },
   "style": {
     "paragraph": "paragraphe",
-    "heading": "en-tête",
+    "heading": "titre",
     "headings": {
-      "h1": "en-tête niveau 1",
-      "h2": "en-tête niveau 2",
-      "h3": "en-tête niveau 3",
-      "h4": "en-tête niveau 4",
-      "h5": "en-tête niveau 5",
-      "h6": "en-tête niveau 6"
+      "h1": "titre niveau 1",
+      "h2": "titre niveau 2",
+      "h3": "titre niveau 3",
+      "h4": "titre niveau 4",
+      "h5": "titre niveau 5",
+      "h6": "titre niveau 6"
     },
     "fontFamily": "famille de police",
     "fontSize": "taille de police",
-    "lineHeight": "hauteur de ligne"
+    "lineHeight": "hauteur de ligne",
+    "color": {
+      "highlight": "couleur de surbrillance",
+      "text": "couleur du texte",
+      "unset": "réinitialiser la couleur",
+      "custom": "couleur personnalisée"
+    }
   },
   "format": {
     "bold": "gras",
@@ -21,34 +30,33 @@
     "underline": "souligné",
     "sup": "exposant",
     "sub": "indice",
-    "break": "saut forcé",
-    "highlight": "surligner",
+    "break": "saut de ligne forcé",
     "line": "ligne horizontale",
     "blockquote": "citation",
     "code": "code",
     "codeblock": "bloc de code",
-    "formatClear": "effacer le format"
+    "formatClear": "effacer le formatage"
   },
   "media": {
     "link": "lien externe",
     "image": "image",
     "tables": {
       "table": "tableau",
-      "insertTable": "insérer un tableau",
-      "deleteTable": "supprimer le tableau",
-      "insertWithHeaderRow": "insérer un tableau avec ligne d'en-tête",
+      "insertTable": "insérer tableau",
+      "deleteTable": "supprimer tableau",
+      "insertWithHeaderRow": "insérer 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",
+      "insertRowBefore": "insérer ligne avant",
+      "insertRowAfter": "insérer ligne après",
+      "deleteRow": "supprimer 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"
+      "insertColBefore": "insérer colonne avant",
+      "insertColAfter": "insérer colonne après",
+      "deleteCol": "supprimer colonne",
+      "mergeCells": "fusionner cellules",
+      "splitCell": "diviser cellule"
     }
   },
   "action": {
@@ -58,7 +66,7 @@
   "alignment": "alignement",
   "alignments": {
     "left": "aligner à gauche",
-    "center": "aligner au centre",
+    "center": "centrer",
     "right": "aligner à droite",
     "justify": "justifier"
   },
@@ -67,26 +75,26 @@
     "bullet": "liste non ordonnée",
     "numbered": "liste ordonnée",
     "task": "liste de tâches",
-    "indent": "indenter l'élément de liste",
-    "outdent": "désindenter l'élément de liste"
+    "indent": "indenter élément de liste",
+    "outdent": "désindenter élément de liste"
   },
   "dialog": {
     "apply": "appliquer",
     "clear": "effacer",
     "close": "fermer",
     "image": {
-      "title": "ajouter/modifier l'image",
+      "title": "ajouter/modifier image",
       "src": "source",
       "alt": "alt",
       "width": "largeur",
       "height": "hauteur"
     },
     "link": {
-      "title": "ajouter/modifier le lien",
+      "title": "ajouter/modifier lien",
       "href": "adresse du lien",
       "target": "ouvrir dans une nouvelle fenêtre",
       "rel": "rel",
-      "class": "classe css"
+      "class": "classe CSS"
     },
     "source": {
       "title": "voir le code source",
@@ -96,5 +104,9 @@
   "misc": {
     "source": "voir le code source",
     "preview": "aperçu"
+  },
+  "footer": {
+    "words": "mots",
+    "chars": "caractères"
   }
 }