tiptapify 0.0.4 → 0.0.6

package/src/components/editorExtensions.ts

@@ -25,6 +25,7 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 
 import { Link } from '@tiptap/extension-link'
 import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
+import { ViewSource } from '@tiptapify/components/extensions/view-source'
 import SlashCommands from '@tiptapify/components/extensions/slash-commands'
 import suggestion from '@tiptapify/components/extensions/components/slashCommands/suggestion'
 
@@ -92,7 +93,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
       types: ['heading', 'paragraph'],
     }),
     Placeholder.configure({ placeholder }),
-    CharacterCount
+    CharacterCount,
+    ViewSource
   ]
 
   if (slashCommands) {

package/src/components/extensions/components/LinkDialog.vue

@@ -90,7 +90,7 @@ watch(dialog, val => {
 
       <VCardActions>
         <VBtn :disabled="isDisabled" @click="apply">
-          {{ t('dialog.link.apply') }}
+          {{ t('dialog.apply') }}
         </VBtn>
       </VCardActions>
     </VCard>

package/src/components/extensions/components/ShowSource.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  indent: { type: Number, default: 2 },
+})
+
+const { t } = useI18n();
+
+const editor = useEditor().editor.getInstance()
+
+const dialog = ref(false)
+const formatted = ref(false)
+const sourceCode = ref('')
+
+const formatHtml = (html: string): string => {
+  let formatted = html.replace(/>/g, '>\n');
+
+  formatted = formatted.replace(/\n</g, '\n<');
+  formatted = formatted.replace(/([^>\n])</g, '$1\n<');
+
+  const lines = formatted.split('\n');
+  let indentLevel = 0;
+
+  return lines
+      .map(line => {
+        if (line.match(/<\//)) {
+          indentLevel = Math.max(0, indentLevel - 1);
+        }
+
+        const indentedLine = ' '.repeat(indentLevel * props.indent) + line;
+
+        if (line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
+          indentLevel++;
+        }
+
+        return indentedLine;
+      })
+      .filter(line => line.trim())
+      .join('\n');
+}
+
+const unformatHtml = (html: string): string => {
+  return html
+      .replace(/\n/g, '')
+      .replace(/\s+/g, ' ')
+      .replace(/>\s+</g, '><')
+}
+
+const showDialog = (event: CustomEvent) => {
+  sourceCode.value = event.detail.html
+  dialog.value = true;
+}
+
+const saveChanges = () => {
+  dialog.value = false
+
+  editor.value.commands.setContent(sourceCode.value, true)
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-source', showDialog as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-source', showDialog as EventListener)
+})
+
+watch(() => formatted.value, () => {
+  sourceCode.value = formatted.value ? formatHtml(sourceCode.value) : unformatHtml(sourceCode.value)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" max-width="1500">
+    <VCard>
+      <VCardTitle>{{ 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') }}
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VContainer>
+
+        <VTextarea
+            v-model="sourceCode"
+            no-resize
+            rows="100"
+            variant="outlined"
+            class="source-code-area"
+        />
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn color="primary" @click="dialog = false">
+          {{ t('dialog.close') }}
+        </VBtn>
+        <VBtn color="primary" @click="saveChanges">
+          {{ t('dialog.apply') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped lang="scss">
+.source-code-area {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+:deep(.source-code-area textarea) {
+  max-height: 900px;
+  overflow-y: auto;
+}
+</style>

package/src/components/extensions/view-source.ts

@@ -0,0 +1,53 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface ViewSourceOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    viewSource: {
+      /**
+       * Показать исходный HTML-код
+       */
+      showSource: () => ReturnType
+    }
+  }
+}
+
+export const ViewSource = Extension.create<ViewSourceOptions>({
+  name: 'viewSource',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addCommands() {
+    return {
+      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' })
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('viewSource'),
+      }),
+    ]
+  },
+})

package/src/i18n/locales/de.json

@@ -0,0 +1,67 @@
+{
+  "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"
+    },
+    "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"
+  },
+  "action": {
+    "undo": "Rückgängig",
+    "redo": "Wiederherstellen"
+  },
+  "alignment": "Ausrichtung",
+  "alignments": {
+    "left": "Linksbündig",
+    "center": "Zentriert",
+    "right": "Rechtsbündig",
+    "justify": "Blocksatz"
+  },
+  "list": "Liste",
+  "lists": {
+    "bullet": "Aufzählungsliste",
+    "numbered": "Nummerierte Liste",
+    "task": "Aufgabenliste",
+    "indent": "Einzug vergrößern",
+    "outdent": "Einzug verkleinern"
+  },
+  "dialog": {
+    "close": "Schließen",
+    "apply": "Anwenden",
+    "link": {
+      "title": "Link hinzufügen/bearbeiten",
+      "placeholder": "Linkadresse"
+    },
+    "source": {
+      "title": "Quellcode anzeigen",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "Quellcode anzeigen"
+  }
+}

package/src/i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "style": {
+    "paragraph": "paragraph",
     "heading": "heading",
     "headings": {
       "h1": "heading level 1",
@@ -49,10 +50,18 @@
     "outdent": "list item outdent"
   },
   "dialog": {
+    "close": "close",
+    "apply": "apply",
     "link": {
       "title": "add/edit link",
-      "placeholder": "link address",
-      "apply": "apply"
+      "placeholder": "link address"
+    },
+    "source": {
+      "title": "view source code",
+      "prettify": "prettify"
     }
+  },
+  "misc": {
+    "source": "view source code"
   }
 }

package/src/i18n/locales/es.json

@@ -0,0 +1,67 @@
+{
+  "style": {
+    "paragraph": "párrafo",
+    "heading": "encabezado",
+    "headings": {
+      "h1": "encabezado nivel 1",
+      "h2": "encabezado nivel 2",
+      "h3": "encabezado nivel 3",
+      "h4": "encabezado nivel 4",
+      "h5": "encabezado nivel 5",
+      "h6": "encabezado nivel 6"
+    },
+    "fontFamily": "familia de fuente",
+    "fontSize": "tamaño de fuente",
+    "lineHeight": "altura de línea"
+  },
+  "format": {
+    "bold": "negrita",
+    "italic": "cursiva",
+    "strike": "tachado",
+    "underline": "subrayado",
+    "sup": "superíndice",
+    "sub": "subíndice",
+    "break": "salto de línea",
+    "highlight": "resaltado",
+    "line": "línea horizontal",
+    "blockquote": "cita",
+    "code": "código",
+    "codeblock": "bloque de código",
+    "link": "enlace externo",
+    "formatClear": "limpiar formato"
+  },
+  "action": {
+    "undo": "deshacer",
+    "redo": "rehacer"
+  },
+  "alignment": "alineación",
+  "alignments": {
+    "left": "alinear a la izquierda",
+    "center": "centrar",
+    "right": "alinear a la derecha",
+    "justify": "justificar"
+  },
+  "list": "lista",
+  "lists": {
+    "bullet": "lista con viñetas",
+    "numbered": "lista numerada",
+    "task": "lista de tareas",
+    "indent": "aumentar sangría",
+    "outdent": "disminuir sangría"
+  },
+  "dialog": {
+    "close": "cerrar",
+    "apply": "aplicar",
+    "link": {
+      "title": "añadir/editar enlace",
+      "placeholder": "dirección del enlace"
+    },
+    "source": {
+      "title": "ver código fuente",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "ver código fuente"
+  }
+}

package/src/i18n/locales/fr.json

@@ -0,0 +1,67 @@
+{
+  "style": {
+    "paragraph": "paragraphe",
+    "heading": "titre",
+    "headings": {
+      "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"
+  },
+  "format": {
+    "bold": "gras",
+    "italic": "italique",
+    "strike": "barré",
+    "underline": "souligné",
+    "sup": "exposant",
+    "sub": "indice",
+    "break": "saut de ligne",
+    "highlight": "surbrillance",
+    "line": "ligne horizontale",
+    "blockquote": "citation",
+    "code": "code",
+    "codeblock": "bloc de code",
+    "link": "lien externe",
+    "formatClear": "effacer le formatage"
+  },
+  "action": {
+    "undo": "annuler",
+    "redo": "rétablir"
+  },
+  "alignment": "alignement",
+  "alignments": {
+    "left": "aligner à gauche",
+    "center": "centrer",
+    "right": "aligner à droite",
+    "justify": "justifier"
+  },
+  "list": "liste",
+  "lists": {
+    "bullet": "liste à puces",
+    "numbered": "liste numérotée",
+    "task": "liste de tâches",
+    "indent": "augmenter l'indentation",
+    "outdent": "diminuer l'indentation"
+  },
+  "dialog": {
+    "close": "fermer",
+    "apply": "appliquer",
+    "link": {
+      "title": "ajouter/modifier un lien",
+      "placeholder": "adresse du lien"
+    },
+    "source": {
+      "title": "voir le code source",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "voir le code source"
+  }
+}

package/src/i18n/locales/it.json

@@ -0,0 +1,67 @@
+{
+  "style": {
+    "paragraph": "paragrafo",
+    "heading": "intestazione",
+    "headings": {
+      "h1": "intestazione livello 1",
+      "h2": "intestazione livello 2",
+      "h3": "intestazione livello 3",
+      "h4": "intestazione livello 4",
+      "h5": "intestazione livello 5",
+      "h6": "intestazione livello 6"
+    },
+    "fontFamily": "famiglia del carattere",
+    "fontSize": "dimensione del carattere",
+    "lineHeight": "interlinea"
+  },
+  "format": {
+    "bold": "grassetto",
+    "italic": "corsivo",
+    "strike": "barrato",
+    "underline": "sottolineato",
+    "sup": "apice",
+    "sub": "pedice",
+    "break": "interruzione di riga",
+    "highlight": "evidenziato",
+    "line": "linea orizzontale",
+    "blockquote": "citazione",
+    "code": "codice",
+    "codeblock": "blocco di codice",
+    "link": "link esterno",
+    "formatClear": "cancella formattazione"
+  },
+  "action": {
+    "undo": "annulla",
+    "redo": "ripeti"
+  },
+  "alignment": "allineamento",
+  "alignments": {
+    "left": "allinea a sinistra",
+    "center": "allinea al centro",
+    "right": "allinea a destra",
+    "justify": "giustifica"
+  },
+  "list": "lista",
+  "lists": {
+    "bullet": "lista puntata",
+    "numbered": "lista numerata",
+    "task": "lista di attività",
+    "indent": "aumenta rientro",
+    "outdent": "riduci rientro"
+  },
+  "dialog": {
+    "close": "chiudi",
+    "apply": "applica",
+    "link": {
+      "title": "aggiungi/modifica link",
+      "placeholder": "indirizzo del link"
+    },
+    "source": {
+      "title": "visualizza codice sorgente",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "visualizza codice sorgente"
+  }
+}

package/src/i18n/locales/pl.json

@@ -0,0 +1,67 @@
+{
+  "style": {
+    "paragraph": "akapit",
+    "heading": "nagłówek",
+    "headings": {
+      "h1": "nagłówek poziomu 1",
+      "h2": "nagłówek poziomu 2",
+      "h3": "nagłówek poziomu 3",
+      "h4": "nagłówek poziomu 4",
+      "h5": "nagłówek poziomu 5",
+      "h6": "nagłówek poziomu 6"
+    },
+    "fontFamily": "rodzina czcionek",
+    "fontSize": "rozmiar czcionki",
+    "lineHeight": "wysokość linii"
+  },
+  "format": {
+    "bold": "pogrubienie",
+    "italic": "kursywa",
+    "strike": "przekreślenie",
+    "underline": "podkreślenie",
+    "sup": "indeks górny",
+    "sub": "indeks dolny",
+    "break": "twarda spacja",
+    "highlight": "wyróżnienie",
+    "line": "linia pozioma",
+    "blockquote": "cytat",
+    "code": "kod",
+    "codeblock": "blok kodu",
+    "link": "link zewnętrzny",
+    "formatClear": "wyczyść formatowanie"
+  },
+  "action": {
+    "undo": "cofnij",
+    "redo": "przywróć"
+  },
+  "alignment": "wyrównanie",
+  "alignments": {
+    "left": "wyrównaj do lewej",
+    "center": "wyśrodkuj",
+    "right": "wyrównaj do prawej",
+    "justify": "wyjustuj"
+  },
+  "list": "lista",
+  "lists": {
+    "bullet": "lista wypunktowana",
+    "numbered": "lista numerowana",
+    "task": "lista zadań",
+    "indent": "zwiększ wcięcie",
+    "outdent": "zmniejsz wcięcie"
+  },
+  "dialog": {
+    "close": "zamknij",
+    "apply": "zastosuj",
+    "link": {
+      "title": "dodaj/edytuj link",
+      "placeholder": "adres linku"
+    },
+    "source": {
+      "title": "pokaż kod źródłowy",
+      "prettify": "prettify"
+    }
+  },
+  "misc": {
+    "source": "pokaż kod źródłowy"
+  }
+}

package/src/i18n/locales/ru.json

@@ -1,5 +1,6 @@
 {
   "style": {
+    "paragraph": "абзац",
     "heading": "заголовок",
     "headings": {
       "h1": "заголовок 1-го уровня",
@@ -49,10 +50,18 @@
     "outdent": "уменьшить отступ элемента списка"
   },
   "dialog": {
+    "apply": "применить",
+    "close": "закрыть",
     "link": {
       "title": "добавление/изменение ссылки",
-      "placeholder": "адрес ссылки",
-      "apply": "применить"
+      "placeholder": "адрес ссылки"
+    },
+    "source": {
+      "title": "просмотр исходного кода",
+      "prettify": "prettify"
     }
+  },
+  "misc": {
+    "source": "просмотр исходного кода"
   }
 }

package/src/i18n/locales/ua.json

@@ -1,5 +1,6 @@
 {
   "style": {
+    "paragraph": "абзац",
     "heading": "заголовок",
     "headings": {
       "h1": "заголовок 1-го рівня",
@@ -49,10 +50,18 @@
     "outdent": "зменшити відступ елемента списку"
   },
   "dialog": {
+    "apply": "застосувати",
+    "close": "закрити",
     "link": {
       "title": "додавання/зміна посилання",
-      "placeholder": "адреса посилання",
-      "apply": "застосувати"
+      "placeholder": "адреса посилання"
+    },
+    "source": {
+      "title": "перегляд вихідного коду",
+      "prettify": "prettify"
     }
+  },
+  "misc": {
+    "source": "перегляд вихідного коду"
   }
 }

package/components.d.ts

@@ -1,20 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    CodeBlockComponent: typeof import('./src/components/CodeBlockComponent.vue')['default']
-    CommandsList: typeof import('./src/components/extensions/components/slashCommands/CommandsList.vue')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    Index: typeof import('./src/components/Toolbar/Index.vue')['default']
-    LinkDialog: typeof import('./src/components/extensions/components/LinkDialog.vue')['default']
-    MenuBubble: typeof import('./src/components/MenuBubble.vue')['default']
-    MenuFloating: typeof import('./src/components/MenuFloating.vue')['default']
-    Tiptapify: typeof import('./src/components/Tiptapify.vue')['default']
-  }
-}

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "lib": ["ESNext", "DOM"],
-    "types": ["vite/client", "node"],
-    "declaration": true,
-    "declarationDir": "lib",
-    "baseUrl": ".",
-    "paths": {
-      "@tiptapify/*": ["src/*"]
-    }
-  },
-  "include": ["src/**/*"]
-}