tiptapify 0.0.9 → 0.0.11

package/src/extensions/components/StyleColor.vue

@@ -7,7 +7,7 @@ import { computed, inject, Ref, ref } from 'vue'
 
 const { t } = useI18n()
 
-defineExpose({ open })
+defineExpose({ open, close })
 
 const props = defineProps({
   show: { type: Boolean, default: true },
@@ -21,25 +21,52 @@ const emit = defineEmits(['close'])
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const colorPicker = ref(false)
+const initialColor = ref(computed(() => props.color).value)
 const customColor = ref(computed(() => props.color).value)
 
-const colors = {
+const colorSelected = ref<boolean>(false)
+
+const greyShades = {
   black: '#000',
+  '#222': '#222',
   darkgray: '#444',
   gray: '#888',
   lightgray: '#ccc',
   white: '#fff',
-  cyan: '#00FFFF',
-  light: '#0088ff',
+}
+const blueShades = {
+  '#000044': '#000044',
+  '#00006e': '#00006e',
+  '#0000bb': '#0000bb',
   blue: '#0000ff',
-  indigo: '#4b0082',
-  purple: '#800080',
-  pink: '#ff00ff',
+  lightblue: '#0088ff',
+  cyan: '#00FFFF',
+}
+const greenShades = {
+  '#003100': '#003100',
+  '#005200': '#005200',
+  '#007000': '#007000',
+  '#00b700': '#00b700',
+  green: '#00ff00',
+  '#70ff70': '#70ff70',
+}
+const redShades = {
+  '#520000': '#520000',
+  '#810000': '#810000',
+  '#b20000': '#b20000',
   red: '#ff0000',
+  '#ff2323': '#ff2323',
+  '#ff5c5c': '#ff5c5c',
+}
+const otherShades = {
+  brown: '#964B00',
   orange: '#ff9900',
   yellow: '#ffff00',
-  green: '#00ff00',
+  pink: '#ff00ff',
+  purple: '#800080',
+  indigo: '#4b0082',
 }
+const colors = { ...greyShades, ...blueShades, ...greenShades, ...redShades, ...otherShades }
 
 type Color = { r: number, g: number, b: number, a?: number }
 
@@ -67,14 +94,38 @@ function hexToRgb(hex: string): Color {
   };
 }
 
-function setColor(color: string) {
+function hoverColor(color: string) {
+  colorSelected.value = false
+
   if (props.fontColor) {
     editor.value.chain().focus().setColor(color).run()
   }
 
   if (props.backgroundColor) {
-    editor.value.chain().focus().setHighlight({ color }).run()
+    editor.value.chain().focus().setHighlight({ color: color }).run()
+  }
+}
+
+function close() {
+  resetColor()
+}
+
+function resetColor() {
+  if (colorSelected.value) {
+    return
+  }
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(initialColor.value).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
   }
+}
+
+function setColor() {
+  colorSelected.value = true
 
   emit('close')
 }
@@ -103,7 +154,9 @@ function isColorActive(color: string): boolean {
         <div
             class="tiptapify-style-color-item"
             :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
-            @click="setColor(colorCode)"
+            @mouseenter="hoverColor(colorCode)"
+            @mouseleave="resetColor()"
+            @click="setColor"
         >
           <div
               class="tiptapify-style-color-picker"
@@ -133,12 +186,12 @@ function isColorActive(color: string): boolean {
 
       <VCard>
         <VCardItem>
-          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs />
+          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs @update:model-value="hoverColor($event)" />
         </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>
+          <VBtn variant="flat" color="primary" @click="setColor">OK</VBtn>
+          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">Cancel</VBtn>
         </VCardActions>
       </VCard>
     </VMenu>
@@ -154,7 +207,7 @@ function isColorActive(color: string): boolean {
 <style lang="scss" scoped>
 .tiptapify-style-color-container {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(6, 1fr);
 }
 
 .tiptapify-style-color-item {

package/src/extensions/components/TableBuilder.vue

@@ -1,15 +1,12 @@
 <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({
@@ -55,7 +52,7 @@ function printSelection() {
         v-model="withHeaderRow"
         density="compact"
         color="primary"
-        :label="ucFirst(t('media.tables.insertWithHeaderRow'))" hide-details
+        :label="t('media.tables.insertWithHeaderRow')" hide-details
     />
 
     <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
@@ -73,8 +70,8 @@ function printSelection() {
 
     <div class="tiptapify-table-builder-info">
       <span>
-        {{ ucFirst(t('media.tables.rows')) }}: {{ rowHover }}
-        {{ ucFirst(t('media.tables.cols')) }}: {{ colHover }}
+        {{ t('media.tables.rows') }}: {{ rowHover }}
+        {{ t('media.tables.cols') }}: {{ colHover }}
       </span>
       <span>
         {{ printSelection() }}

package/src/extensions/link.ts

@@ -2,6 +2,14 @@ import Link from "@tiptap/extension-link";
 
 const name: string = 'link'
 
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    link: {
+      showLink: () => ReturnType
+    }
+  }
+}
+
 export const TiptapifyLink = Link.extend({
   name,
 

package/src/extensions/slash-commands.ts

@@ -9,7 +9,7 @@ export default Extension.create(
       return {
         suggestion: {
           char: '/',
-          command: ({editor, range, props}) => {
+          command: ({ editor, range, props }) => {
             props.command({editor, range})
           },
         },

package/src/i18n/index.ts

@@ -11,7 +11,6 @@ let _i18n: any = null
 export const getI18n = (locale: string) => {
   if (_i18n === null) {
     _i18n = createI18n({
-      legacy: false,
       locale: locale,
       fallbackLocale: 'en',
       messages

package/src/i18n/locales/ch.json

@@ -0,0 +1,119 @@
+{
+  "defaultValue": "默认值",
+  "content": {
+    "placeholder": "写点什么..."
+  },
+  "style": {
+    "paragraph": "段落",
+    "heading": "标题",
+    "headings": {
+      "h1": "1级标题",
+      "h2": "2级标题",
+      "h3": "3级标题",
+      "h4": "4级标题",
+      "h5": "5级标题",
+      "h6": "6级标题"
+    },
+    "fontFamily": "字体",
+    "fontSize": "大小",
+    "lineHeight": "行高",
+    "color": {
+      "highlight": "高亮颜色",
+      "text": "文本颜色",
+      "unset": "清除颜色",
+      "custom": "自定义选择"
+    }
+  },
+  "format": {
+    "bold": "粗体",
+    "italic": "斜体",
+    "strike": "删除线",
+    "underline": "下划线",
+    "sup": "上标",
+    "sub": "下标",
+    "break": "换行",
+    "line": "水平线",
+    "blockquote": "引用",
+    "code": "代码",
+    "codeblock": "代码块",
+    "formatClear": "清除格式"
+  },
+  "media": {
+    "link": "外部链接",
+    "image": "图片",
+    "tables": {
+      "table": "表格",
+      "insertTable": "插入表格",
+      "deleteTable": "删除表格",
+      "insertWithHeaderRow": "插入带标题的表格",
+      "rows": "行",
+      "row": "行",
+      "insertRowBefore": "在前面插入行",
+      "insertRowAfter": "在后面插入行",
+      "deleteRow": "删除行",
+      "cols": "列",
+      "col": "列",
+      "insertColBefore": "在前面插入列",
+      "insertColAfter": "在后面插入列",
+      "deleteCol": "删除列",
+      "mergeCells": "合并单元格",
+      "splitCell": "拆分单元格"
+    }
+  },
+  "action": {
+    "undo": "撤销",
+    "redo": "重做"
+  },
+  "alignment": "对齐",
+  "alignments": {
+    "left": "左对齐",
+    "center": "居中对齐",
+    "right": "右对齐",
+    "justify": "两端对齐"
+  },
+  "list": "列表",
+  "lists": {
+    "bullet": "无序列表",
+    "numbered": "有序列表",
+    "task": "任务列表",
+    "indent": "增加列表项缩进",
+    "outdent": "减少列表项缩进"
+  },
+  "dialog": {
+    "apply": "应用",
+    "clear": "清除",
+    "close": "关闭",
+    "image": {
+      "title": "添加/修改图片",
+      "src": "源",
+      "alt": "替代文本",
+      "width": "宽度",
+      "height": "高度"
+    },
+    "link": {
+      "title": "添加/修改链接",
+      "href": "链接地址",
+      "href_error": "无效的链接地址",
+      "target": "打开方式...",
+      "target_blank": "新窗口",
+      "target_self": "当前窗口",
+      "rel": "rel",
+      "class": "CSS类"
+    },
+    "preview": {
+      "title": "预览"
+    },
+    "source": {
+      "title": "查看源代码",
+      "prettify": "美化"
+    }
+  },
+  "misc": {
+    "source": "查看源代码",
+    "preview": "预览"
+  },
+  "footer": {
+    "words": "单词",
+    "chars": "字符"
+  }
+}

package/src/i18n/locales/cz.json

@@ -0,0 +1,119 @@
+{
+  "defaultValue": "Výchozí hodnota",
+  "content": {
+    "placeholder": "Napište něco..."
+  },
+  "style": {
+    "paragraph": "odstavec",
+    "heading": "Nadpis",
+    "headings": {
+      "h1": "Nadpis 1. úrovně",
+      "h2": "Nadpis 2. úrovně",
+      "h3": "Nadpis 3. úrovně",
+      "h4": "Nadpis 4. úrovně",
+      "h5": "Nadpis 5. úrovně",
+      "h6": "Nadpis 6. úrovně"
+    },
+    "fontFamily": "Písmo",
+    "fontSize": "Velikost",
+    "lineHeight": "Výška řádku",
+    "color": {
+      "highlight": "Barva zvýraznění",
+      "text": "Barva textu",
+      "unset": "Vymazat barvu",
+      "custom": "Vlastní výběr"
+    }
+  },
+  "format": {
+    "bold": "Tučné",
+    "italic": "Kurzíva",
+    "strike": "Přeškrtnuté",
+    "underline": "Podtržené",
+    "sup": "Horní index",
+    "sub": "Dolní index",
+    "break": "Zalomení řádku",
+    "line": "Horizontální čára",
+    "blockquote": "Citát",
+    "code": "Kód",
+    "codeblock": "Blok kódu",
+    "formatClear": "Vymazat formátování"
+  },
+  "media": {
+    "link": "Externí odkaz",
+    "image": "Obrázek",
+    "tables": {
+      "table": "Tabulka",
+      "insertTable": "Vložit tabulku",
+      "deleteTable": "Smazat tabulku",
+      "insertWithHeaderRow": "Vložit tabulku s hlavičkou",
+      "rows": "Řádky",
+      "row": "Řádek",
+      "insertRowBefore": "Vložit řádek před",
+      "insertRowAfter": "Vložit řádek za",
+      "deleteRow": "Smazat řádek",
+      "cols": "Sloupce",
+      "col": "Sloupec",
+      "insertColBefore": "Vložit sloupec před",
+      "insertColAfter": "Vložit sloupec za",
+      "deleteCol": "Smazat sloupec",
+      "mergeCells": "Sloučit buňky",
+      "splitCell": "Rozdělit buňku"
+    }
+  },
+  "action": {
+    "undo": "Zpět",
+    "redo": "Znovu"
+  },
+  "alignment": "Zarovnání",
+  "alignments": {
+    "left": "Zarovnání vlevo",
+    "center": "Zarovnání na střed",
+    "right": "Zarovnání vpravo",
+    "justify": "Zarovnání do bloku"
+  },
+  "list": "Seznam",
+  "lists": {
+    "bullet": "Odrážkový seznam",
+    "numbered": "Číslovaný seznam",
+    "task": "Seznam úkolů",
+    "indent": "Zvětšit odsazení položky seznamu",
+    "outdent": "Zmenšit odsazení položky seznamu"
+  },
+  "dialog": {
+    "apply": "Použít",
+    "clear": "Vymazat",
+    "close": "Zavřít",
+    "image": {
+      "title": "Přidání/úprava obrázku",
+      "src": "Zdroj",
+      "alt": "alt",
+      "width": "Šířka",
+      "height": "Výška"
+    },
+    "link": {
+      "title": "Přidání/úprava odkazu",
+      "href": "Adresa odkazu",
+      "href_error": "Neplatná adresa odkazu",
+      "target": "Otevřít v...",
+      "target_blank": "Novém okně",
+      "target_self": "Aktuálním okně",
+      "rel": "rel",
+      "class": "CSS třída"
+    },
+    "preview": {
+      "title": "Náhled"
+    },
+    "source": {
+      "title": "Zobrazit zdrojový kód",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "Zobrazit zdrojový kód",
+    "preview": "Náhled"
+  },
+  "footer": {
+    "words": "slova",
+    "chars": "znaky"
+  }
+}

package/src/i18n/locales/de.json

@@ -1,112 +1,119 @@
 {
+  "defaultValue": "Standardwert",
   "content": {
-    "placeholder": "schreib hier etwas..."
+    "placeholder": "Schreiben Sie etwas..."
   },
   "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 1. Ebene",
+      "h2": "Überschrift 2. Ebene",
+      "h3": "Überschrift 3. Ebene",
+      "h4": "Überschrift 4. Ebene",
+      "h5": "Überschrift 5. Ebene",
+      "h6": "Überschrift 6. Ebene"
     },
-    "fontFamily": "schriftart",
-    "fontSize": "schriftgröße",
-    "lineHeight": "zeilenhöhe",
+    "fontFamily": "Schriftart",
+    "fontSize": "Größe",
+    "lineHeight": "Zeilenhöhe",
     "color": {
-      "highlight": "hervorhebungsfarbe",
-      "text": "textfarbe",
-      "unset": "farbe zurücksetzen",
-      "custom": "benutzerdefinierte farbe"
+      "highlight": "Hervorhebungsfarbe",
+      "text": "Textfarbe",
+      "unset": "Farbe löschen",
+      "custom": "Eigene Auswahl"
     }
   },
   "format": {
-    "bold": "fett",
-    "italic": "kursiv",
-    "strike": "durchgestrichen",
-    "underline": "unterstrichen",
-    "sup": "hochgestellt",
-    "sub": "tiefgestellt",
-    "break": "harter umbruch",
-    "line": "horizontale linie",
-    "blockquote": "zitat",
-    "code": "code",
-    "codeblock": "code block",
-    "formatClear": "formatierung löschen"
+    "bold": "Fett",
+    "italic": "Kursiv",
+    "strike": "Durchgestrichen",
+    "underline": "Unterstrichen",
+    "sup": "Hochgestellt",
+    "sub": "Tiefgestellt",
+    "break": "Zeilenumbruch",
+    "line": "Horizontale Linie",
+    "blockquote": "Zitat",
+    "code": "Code",
+    "codeblock": "Code-Block",
+    "formatClear": "Formatierung löschen"
   },
   "media": {
-    "link": "externer link",
-    "image": "bild",
+    "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"
+      "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 zusammenführen",
+      "splitCell": "Zelle teilen"
     }
   },
   "action": {
-    "undo": "rückgängig",
-    "redo": "wiederholen"
+    "undo": "Rückgängig",
+    "redo": "Wiederholen"
   },
-  "alignment": "ausrichtung",
+  "alignment": "Ausrichtung",
   "alignments": {
-    "left": "links ausrichten",
-    "center": "zentriert ausrichten",
-    "right": "rechts ausrichten",
-    "justify": "blocksatz"
+    "left": "Linksbündig",
+    "center": "Zentriert",
+    "right": "Rechtsbündig",
+    "justify": "Blocksatz"
   },
-  "list": "liste",
+  "list": "Liste",
   "lists": {
-    "bullet": "ungeordnete liste",
-    "numbered": "geordnete liste",
-    "task": "aufgabenliste",
-    "indent": "listenelement einrücken",
-    "outdent": "listenelement ausrücken"
+    "bullet": "Aufzählung",
+    "numbered": "Nummerierte Liste",
+    "task": "Aufgabenliste",
+    "indent": "Einzug vergrößern",
+    "outdent": "Einzug verkleinern"
   },
   "dialog": {
-    "apply": "anwenden",
-    "clear": "löschen",
-    "close": "schließen",
+    "apply": "Anwenden",
+    "clear": "Löschen",
+    "close": "Schließen",
     "image": {
-      "title": "bild hinzufügen/bearbeiten",
-      "src": "quelle",
+      "title": "Bild hinzufügen/ändern",
+      "src": "Quelle",
       "alt": "alt",
-      "width": "breite",
-      "height": "höhe"
+      "width": "Breite",
+      "height": "Höhe"
     },
     "link": {
-      "title": "link hinzufügen/bearbeiten",
-      "href": "link-adresse",
-      "target": "in neuem fenster öffnen",
+      "title": "Link hinzufügen/ändern",
+      "href": "Link-Adresse",
+      "href_error": "Ungültige Link-Adresse",
+      "target": "Öffnen in...",
+      "target_blank": "Neuem Fenster",
+      "target_self": "Aktuellem Fenster",
       "rel": "rel",
-      "class": "css-klasse"
+      "class": "CSS-Klasse"
+    },
+    "preview": {
+      "title": "Vorschau"
     },
     "source": {
-      "title": "quellcode anzeigen",
-      "prettify": "verschönern"
+      "title": "Quellcode anzeigen",
+      "prettify": "prettify"
     }
   },
   "misc": {
-    "source": "quellcode anzeigen",
-    "preview": "vorschau"
+    "source": "Quellcode anzeigen",
+    "preview": "Vorschau"
   },
   "footer": {
-    "words": "wörter",
-    "chars": "zeichen"
+    "words": "Wörter",
+    "chars": "Zeichen"
   }
 }