tiptapify 0.0.10 → 0.0.12

package/src/extensions/components/PreviewDialog.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
-import { ref, onMounted, onUnmounted } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import { ref, onMounted, onUnmounted, inject, Ref } from 'vue'
 
 const content = ref()
 
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
 const dialog = ref(null)
 
 const showDialog = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   content.value = event.detail.html
 
   dialog.value.open()
@@ -22,13 +29,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="preview" fullscreen>
+  <TiptapifyDialog ref="dialog" module="preview" fullscreen>
     <template #content>
       <VCardItem>
         <div class="tiptap" v-html="content"></div>
       </VCardItem>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>
 
 <style lang="scss">

package/src/extensions/components/ShowSourceDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
@@ -19,9 +19,9 @@ const formatted = ref(false)
 const sourceCode = ref('')
 
 const formatHtml = (html: string): string => {
+  const singleTags = ['img', 'hr', 'br', 'input']
   let formatted = html.replace(/>/g, '>\n');
 
-  formatted = formatted.replace(/\n</g, '\n<');
   formatted = formatted.replace(/([^>\n])</g, '$1\n<');
 
   const lines = formatted.split('\n');
@@ -35,7 +35,8 @@ const formatHtml = (html: string): string => {
 
         const indentedLine = ' '.repeat(indentLevel * props.indent) + line;
 
-        if (line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
+        const tag = line.match(/<\/?(\S+).*>/) ?? []
+        if (!singleTags.includes(tag[1] ?? '') && line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
           indentLevel++;
         }
 
@@ -53,6 +54,9 @@ const unformatHtml = (html: string): string => {
 }
 
 const showDialog = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
   sourceCode.value = event.detail.html
 
   dialog.value.open()
@@ -78,7 +82,7 @@ watch(() => formatted.value, () => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="source" :max-width="1500">
+  <TiptapifyDialog ref="dialog" module="source" :max-width="1500">
     <template #content>
       <VCardText>
         <VContainer fluid class="pt-0 pl-0 pr-0">
@@ -104,7 +108,7 @@ watch(() => formatted.value, () => {
     <template #actions>
       <VCardActions>
         <VSpacer></VSpacer>
-        <VBtn :variant="variantBtn" @click="dialog = false">
+        <VBtn :variant="variantBtn" @click="dialog.close()">
           {{ t('dialog.close') }}
         </VBtn>
         <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
@@ -112,7 +116,7 @@ watch(() => formatted.value, () => {
         </VBtn>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>
 
 <style scoped lang="scss">

package/src/extensions/components/StyleColor.vue

@@ -170,7 +170,7 @@ function isColorActive(color: string): boolean {
 
     <VMenu v-model="colorPicker" :close-on-content-click="false">
       <template #activator="{ props: menuProps }">
-        <VBtn v-bind="menuProps" variant="flat" block>
+        <VBtn v-bind="menuProps" color="default" variant="flat" block>
           <template #prepend>
             <div
                 class="tiptapify-style-color-picker"
@@ -198,7 +198,7 @@ function isColorActive(color: string): boolean {
 
     <VDivider class="mt-2 mb-2" />
 
-    <VBtn @click="unsetColor" block variant="flat">
+    <VBtn @click="unsetColor" color="default" block variant="flat">
       {{ t('style.color.unset') }}
     </VBtn>
   </VSheet>

package/src/extensions/components/slashCommands/CommandsList.vue

@@ -77,10 +77,7 @@ defineExpose({
           @click="selectItem(index)"
           size="small"
       >
-        <VIcon v-if="item.icon" :icon="mdi[`mdi${item.icon}`]" size="16" />
-        <span v-else>
-          {{ item.title }}
-        </span>
+        <VIcon :icon="`mdiSvg:${mdi[`mdi${item.icon}`]}` || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="16" />
       </VBtn>
     </template>
     <div class="item" v-else>No result</div>

package/src/extensions/image.ts

@@ -18,7 +18,8 @@ export const TiptapifyImage = Extension.create({
       showTiptapifyImage: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            image: editor.getAttributes('image')
+            image: editor.getAttributes('image'),
+            editorId: editor.instanceId
           }
         })
 

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,
 
@@ -11,7 +19,8 @@ export const TiptapifyLink = Link.extend({
       showLink: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            link: editor.getAttributes('link')
+            link: editor.getAttributes('link'),
+            editorId: editor.instanceId
           }
         })
 

package/src/extensions/preview.ts

@@ -19,7 +19,8 @@ export const Preview = Extension.create({
       showPreview: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            html: editor.getHTML()
+            html: editor.getHTML(),
+            editorId: editor.instanceId
           }
         })
 

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/extensions/view-source.ts

@@ -27,7 +27,8 @@ export const ViewSource = Extension.create<ViewSourceOptions>({
       showSource: () => ({ editor }) => {
         const event = new CustomEvent('tiptapify-show-source', {
           detail: {
-            html: editor.getHTML()
+            html: editor.getHTML(),
+            editorId: editor.instanceId
           }
         })
 

package/src/i18n/locales/ch.json

@@ -1,118 +1,120 @@
 {
+  "defaultValue": "默认值",
   "content": {
-    "placeholder": "Schriibä Sie öppis da..."
+    "placeholder": "写点什么..."
   },
   "style": {
-    "paragraph": "Absatz",
-    "heading": "Überschrift",
+    "paragraph": "段落",
+    "heading": "标题",
     "headings": {
-      "h1": "Überschrift Stufe 1",
-      "h2": "Überschrift Stufe 2",
-      "h3": "Überschrift Stufe 3",
-      "h4": "Überschrift Stufe 4",
-      "h5": "Überschrift Stufe 5",
-      "h6": "Überschrift Stufe 6"
+      "h1": "1级标题",
+      "h2": "2级标题",
+      "h3": "3级标题",
+      "h4": "4级标题",
+      "h5": "5级标题",
+      "h6": "6级标题"
     },
-    "fontFamily": "Schriftart",
-    "fontSize": "Schriftgrösse",
-    "lineHeight": "Zylähöchi",
+    "fontFamily": "字体",
+    "fontSize": "大小",
+    "lineHeight": "行高",
     "color": {
-      "highlight": "Markierigsfäru",
-      "text": "Täxtfäru",
-      "unset": "Färu entfärnä",
-      "custom": "Benutzerdefinierti Färu"
+      "highlight": "高亮颜色",
+      "text": "文本颜色",
+      "unset": "清除颜色",
+      "custom": "自定义选择"
     }
   },
   "format": {
-    "bold": "Fett",
-    "italic": "Kursiv",
-    "strike": "Durchgstrichä",
-    "underline": "Unterstrichä",
-    "sup": "Hochgstellt",
-    "sub": "Tiefgstellt",
-    "break": "Hartä Umbruch",
-    "line": "Horizontali Linie",
-    "blockquote": "Zitat",
-    "code": "Code",
-    "codeblock": "Code-Block",
-    "formatClear": "Formatierig löschä"
+    "bold": "粗体",
+    "italic": "斜体",
+    "strike": "删除线",
+    "underline": "下划线",
+    "sup": "上标",
+    "sub": "下标",
+    "break": "换行",
+    "line": "水平线",
+    "blockquote": "引用",
+    "code": "代码",
+    "codeblock": "代码块",
+    "formatClear": "清除格式"
   },
   "media": {
-    "link": "Äxtärnä Link",
-    "image": "Bild",
+    "link": "外部链接",
+    "image": "图片",
     "tables": {
-      "table": "Tabälle",
-      "insertTable": "Tabälle yfügä",
-      "deleteTable": "Tabälle löschä",
-      "insertWithHeaderRow": "Tabälle mit Chopfzyle yfügä",
-      "rows": "Zylä",
-      "row": "Zyle",
-      "insertRowBefore": "Zyle dervor yfügä",
-      "insertRowAfter": "Zyle dernah yfügä",
-      "deleteRow": "Zyle löschä",
-      "cols": "Spaltä",
-      "col": "Spalte",
-      "insertColBefore": "Spalte dervor yfügä",
-      "insertColAfter": "Spalte dernah yfügä",
-      "deleteCol": "Spalte löschä",
-      "mergeCells": "Zällä zämmäfüärä",
-      "splitCell": "Zälle teilä"
+      "table": "表格",
+      "insertTable": "插入表格",
+      "deleteTable": "删除表格",
+      "insertWithHeaderRow": "插入带标题的表格",
+      "rows": "行",
+      "row": "行",
+      "insertRowBefore": "在前面插入行",
+      "insertRowAfter": "在后面插入行",
+      "deleteRow": "删除行",
+      "cols": "列",
+      "col": "列",
+      "insertColBefore": "在前面插入列",
+      "insertColAfter": "在后面插入列",
+      "deleteCol": "删除列",
+      "mergeCells": "合并单元格",
+      "splitCell": "拆分单元格"
     }
   },
   "action": {
-    "undo": "Rückgängig",
-    "redo": "Wiederholä"
+    "undo": "撤销",
+    "redo": "重做"
   },
-  "alignment": "Usrichtig",
+  "alignment": "对齐",
   "alignments": {
-    "left": "Links usrichtä",
-    "center": "Zentriert usrichtä",
-    "right": "Rächts usrichtä",
-    "justify": "Blocksatz"
+    "left": "左对齐",
+    "center": "居中对齐",
+    "right": "右对齐",
+    "justify": "两端对齐"
   },
-  "list": "Lischtä",
+  "list": "列表",
   "lists": {
-    "bullet": "Ungordneti Lischtä",
-    "numbered": "Nummerierti Lischtä",
-    "task": "Uufgabälischtä",
-    "indent": "Lischtäelemänt yrückä",
-    "outdent": "Lischtäelemänt usrückä"
+    "bullet": "无序列表",
+    "numbered": "有序列表",
+    "task": "任务列表",
+    "indent": "增加列表项缩进",
+    "outdent": "减少列表项缩进"
   },
   "dialog": {
-    "apply": "Awändä",
-    "clear": "Löschä",
-    "close": "Schliässä",
+    "apply": "应用",
+    "clear": "清除",
+    "close": "关闭",
     "image": {
-      "title": "Bild hinzuefügä/bearbyitä",
-      "src": "Quälle",
-      "alt": "Alt-Täxt",
-      "width": "Bryti",
-      "height": "Höchi"
+      "title": "添加/修改图片",
+      "src": "源",
+      "alt": "替代文本",
+      "width": "宽度",
+      "height": "高度"
     },
     "link": {
-      "title": "Link hinzuefügä/bearbyitä",
-      "href": "Link-Adrässe",
-      "href_error": "Ungültigi Link-Adrässe",
-      "target": "Öffnä i...",
-      "target_blank": "Neus Fänschter",
-      "target_self": "Aktuells Fänschter",
-      "rel": "Rel",
-      "class": "CSS-Klasse"
+      "title": "添加/修改链接",
+      "href": "链接地址",
+      "href_error": "无效的链接地址",
+      "target": "打开方式...",
+      "target_blank": "新窗口",
+      "target_self": "当前窗口",
+      "rel": "rel",
+      "class": "CSS类"
     },
     "preview": {
-      "title": "Vorschau"
+      "title": "预览"
     },
     "source": {
-      "title": "Quellcode azygä",
-      "prettify": "Verschönärä"
+      "title": "查看源代码",
+      "prettify": "美化"
     }
   },
   "misc": {
-    "source": "Quellcode azygä",
-    "preview": "Vorschau"
+    "source": "查看源代码",
+    "preview": "预览",
+    "toggleInvisibleCharacters": "显示/隐藏不可见字符"
   },
   "footer": {
-    "words": "Wörter",
-    "chars": "Zeichä"
+    "words": "单词",
+    "chars": "字符"
   }
 }

package/src/i18n/locales/cz.json

@@ -1,26 +1,27 @@
 {
+  "defaultValue": "Výchozí hodnota",
   "content": {
-    "placeholder": "Napište něco zde..."
+    "placeholder": "Napište něco..."
   },
   "style": {
-    "paragraph": "Odstavec",
+    "paragraph": "odstavec",
     "heading": "Nadpis",
     "headings": {
-      "h1": "Nadpis úroveň 1",
-      "h2": "Nadpis úroveň 2",
-      "h3": "Nadpis úroveň 3",
-      "h4": "Nadpis úroveň 4",
-      "h5": "Nadpis úroveň 5",
-      "h6": "Nadpis úroveň 6"
+      "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": "Rodina písma",
-    "fontSize": "Velikost písma",
+    "fontFamily": "Písmo",
+    "fontSize": "Velikost",
     "lineHeight": "Výška řádku",
     "color": {
       "highlight": "Barva zvýraznění",
       "text": "Barva textu",
-      "unset": "Zrušit barvu",
-      "custom": "Vlastní barva"
+      "unset": "Vymazat barvu",
+      "custom": "Vlastní výběr"
     }
   },
   "format": {
@@ -30,9 +31,9 @@
     "underline": "Podtržené",
     "sup": "Horní index",
     "sub": "Dolní index",
-    "break": "Tvrdé zalomení",
-    "line": "Vodorovná čára",
-    "blockquote": "Citace",
+    "break": "Zalomení řádku",
+    "line": "Horizontální čára",
+    "blockquote": "Citát",
     "code": "Kód",
     "codeblock": "Blok kódu",
     "formatClear": "Vymazat formátování"
@@ -65,38 +66,38 @@
   },
   "alignment": "Zarovnání",
   "alignments": {
-    "left": "Zarovnat vlevo",
-    "center": "Zarovnat na střed",
-    "right": "Zarovnat vpravo",
-    "justify": "Zarovnat do bloku"
+    "left": "Zarovnání vlevo",
+    "center": "Zarovnání na střed",
+    "right": "Zarovnání vpravo",
+    "justify": "Zarovnání do bloku"
   },
   "list": "Seznam",
   "lists": {
-    "bullet": "Neuspořádaný seznam",
+    "bullet": "Odrážkový seznam",
     "numbered": "Číslovaný seznam",
     "task": "Seznam úkolů",
-    "indent": "Odsadit položku",
-    "outdent": "Zrušit odsazení"
+    "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řidat/upravit obrázek",
+      "title": "Přidání/úprava obrázku",
       "src": "Zdroj",
-      "alt": "Alternativní text",
+      "alt": "alt",
       "width": "Šířka",
       "height": "Výška"
     },
     "link": {
-      "title": "Přidat/upravit odkaz",
+      "title": "Přidání/úprava odkazu",
       "href": "Adresa odkazu",
       "href_error": "Neplatná adresa odkazu",
       "target": "Otevřít v...",
-      "target_blank": "Nové okno",
-      "target_self": "Aktuální okno",
-      "rel": "Rel",
+      "target_blank": "Novém okně",
+      "target_self": "Aktuálním okně",
+      "rel": "rel",
       "class": "CSS třída"
     },
     "preview": {
@@ -104,12 +105,13 @@
     },
     "source": {
       "title": "Zobrazit zdrojový kód",
-      "prettify": "Formátovat"
+      "prettify": "prettify"
     }
   },
   "misc": {
     "source": "Zobrazit zdrojový kód",
-    "preview": "Náhled"
+    "preview": "Náhled",
+    "toggleInvisibleCharacters": "Zobrazit/skrýt neviditelné znaky"
   },
   "footer": {
     "words": "slova",

package/src/i18n/locales/de.json

@@ -1,26 +1,27 @@
 {
+  "defaultValue": "Standardwert",
   "content": {
-    "placeholder": "Schreiben Sie hier etwas..."
+    "placeholder": "Schreiben Sie etwas..."
   },
   "style": {
     "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",
+    "fontSize": "Größe",
     "lineHeight": "Zeilenhöhe",
     "color": {
-      "highlight": "Markierungsfarbe",
+      "highlight": "Hervorhebungsfarbe",
       "text": "Textfarbe",
-      "unset": "Farbe zurücksetzen",
-      "custom": "Benutzerdefinierte Farbe"
+      "unset": "Farbe löschen",
+      "custom": "Eigene Auswahl"
     }
   },
   "format": {
@@ -30,7 +31,7 @@
     "underline": "Unterstrichen",
     "sup": "Hochgestellt",
     "sub": "Tiefgestellt",
-    "break": "Harter Umbruch",
+    "break": "Zeilenumbruch",
     "line": "Horizontale Linie",
     "blockquote": "Zitat",
     "code": "Code",
@@ -65,38 +66,38 @@
   },
   "alignment": "Ausrichtung",
   "alignments": {
-    "left": "Links ausrichten",
-    "center": "Zentriert ausrichten",
-    "right": "Rechts ausrichten",
+    "left": "Linksbündig",
+    "center": "Zentriert",
+    "right": "Rechtsbündig",
     "justify": "Blocksatz"
   },
   "list": "Liste",
   "lists": {
-    "bullet": "Ungeordnete Liste",
+    "bullet": "Aufzählung",
     "numbered": "Nummerierte Liste",
     "task": "Aufgabenliste",
-    "indent": "Listenelement einrücken",
-    "outdent": "Listenelement ausrücken"
+    "indent": "Einzug vergrößern",
+    "outdent": "Einzug verkleinern"
   },
   "dialog": {
     "apply": "Anwenden",
     "clear": "Löschen",
     "close": "Schließen",
     "image": {
-      "title": "Bild hinzufügen/bearbeiten",
+      "title": "Bild hinzufügen/ändern",
       "src": "Quelle",
-      "alt": "Alt-Text",
+      "alt": "alt",
       "width": "Breite",
       "height": "Höhe"
     },
     "link": {
-      "title": "Link hinzufügen/bearbeiten",
+      "title": "Link hinzufügen/ändern",
       "href": "Link-Adresse",
       "href_error": "Ungültige Link-Adresse",
       "target": "Öffnen in...",
-      "target_blank": "Neues Fenster",
-      "target_self": "Aktuelles Fenster",
-      "rel": "Rel",
+      "target_blank": "Neuem Fenster",
+      "target_self": "Aktuellem Fenster",
+      "rel": "rel",
       "class": "CSS-Klasse"
     },
     "preview": {
@@ -104,12 +105,13 @@
     },
     "source": {
       "title": "Quellcode anzeigen",
-      "prettify": "Verschönern"
+      "prettify": "prettify"
     }
   },
   "misc": {
     "source": "Quellcode anzeigen",
-    "preview": "Vorschau"
+    "preview": "Vorschau",
+    "toggleInvisibleCharacters": "Unsichtbare Zeichen anzeigen/ausblenden"
   },
   "footer": {
     "words": "Wörter",

package/src/i18n/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "defaultValue": "Default value",
   "content": {
     "placeholder": "Write something here..."
   },
@@ -109,7 +110,8 @@
   },
   "misc": {
     "source": "View source code",
-    "preview": "Preview"
+    "preview": "Preview",
+    "toggleInvisibleCharacters": "Show/hide invisible characters"
   },
   "footer": {
     "words": "words",