tiptapify 0.4.1 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -30,6 +30,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "prepublishOnly": "pnpm test && pnpm build",
     "lint": "eslint resources/ts --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/components/Toolbar/actions.ts

@@ -1,5 +1,6 @@
 import { default as UndoButton } from '@tiptapify/extensions/components/actions/undo/Button.vue'
 import { default as RedoButton } from '@tiptapify/extensions/components/actions/redo/Button.vue'
+import { default as ResetButton } from '@tiptapify/extensions/components/actions/reset/Button.vue'
 import { markRaw } from 'vue'
 
 export default {
@@ -13,6 +14,10 @@ export default {
     {
       name: 'redo',
       component: markRaw(RedoButton),
+    },
+    {
+      name: 'resetChanges',
+      component: markRaw(ResetButton),
     }
   ]
 }

package/src/components/editorExtensions.ts

@@ -27,6 +27,7 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
 import { default as Iframe } from '@tiptapify/extensions/components/media/iframe'
+import { ResetChanges } from '@tiptapify/extensions/components/actions/reset/resetChanges'
 import { BulletListCircle, BulletListSquare } from '@tiptapify/extensions/components/list/bullet'
 import { ListStyle } from '@tiptapify/extensions/components/list/styles'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
@@ -149,6 +150,7 @@ export function editorExtensions (
     TableKit,
     Code,
     UndoRedo,
+    ResetChanges,
     Focus,
     CodeBlockLowlight
       .extend({

package/src/extensions/components/actions/reset/Button.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import {
+  resetChanges,
+  resetConfirmationOff,
+  turnOffResetConfirmation,
+} from '@tiptapify/extensions/components/actions/reset/resetChanges'
+import { inject, Ref, ref, useTemplateRef } from 'vue'
+
+import { ComposerTranslation } from 'vue-i18n'
+
+const { variantBtn } = useTiptapifyConfig()
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const dialog = useTemplateRef('dialog')
+const dontAskAgain = ref(false)
+
+function requestReset() {
+  if (resetConfirmationOff()) {
+    reset()
+
+    return
+  }
+
+  dontAskAgain.value = false
+  dialog.value?.open()
+}
+
+function confirmReset() {
+  if (dontAskAgain.value) {
+    turnOffResetConfirmation()
+  }
+
+  dialog.value?.close()
+  reset()
+}
+
+function reset() {
+  resetChanges(editor.value)
+  editor.value.commands.focus()
+}
+
+</script>
+
+<template>
+  <VBtn
+    :disabled="!editor.can().undo() && !editor.can().redo()"
+    size="32"
+    color=""
+    :variant="variantBtn"
+    @click="requestReset"
+  >
+    <Tooltip :label="t('action.reset_changes')" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiRestore}`" />
+  </VBtn>
+
+  <TiptapifyDialog
+    ref="dialog"
+    module="resetChanges"
+    :title="t('action.reset_changes')"
+    :max-width="440"
+    @submit="confirmReset"
+  >
+    <template #content>
+      <VCardText>
+        <p>{{ t('action.reset_changes_confirm') }}</p>
+        <VCheckbox
+          v-model="dontAskAgain"
+          class="tiptapify-reset-changes__dont-ask"
+          :label="t('action.reset_changes_dont_ask')"
+          density="compact"
+          hide-details
+        />
+      </VCardText>
+    </template>
+
+    <template #actions>
+      <VCardActions>
+        <div class="tiptapify-dialog-actions">
+          <div class="tiptapify-dialog-actions__start" />
+          <div class="tiptapify-dialog-actions__end">
+            <VBtn :variant="variantBtn" @click="dialog?.close()">
+              {{ t('dialog.cancel') }}
+            </VBtn>
+            <VBtn type="submit" color="error" :variant="variantBtn">
+              {{ t('action.reset') }}
+            </VBtn>
+          </div>
+        </div>
+      </VCardActions>
+    </template>
+  </TiptapifyDialog>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-reset-changes__dont-ask {
+  margin-top: 12px;
+}
+</style>

package/src/extensions/components/actions/reset/resetChanges.test.ts

@@ -0,0 +1,99 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor } from '@tiptap/vue-3'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { UndoRedo } from '@tiptap/extensions'
+import {
+  ResetChanges,
+  resetChanges,
+  resetConfirmationOff,
+  turnOffResetConfirmation,
+} from '@tiptapify/extensions/components/actions/reset/resetChanges'
+
+let editor: Editor | null = null
+
+function createEditor(content: string, onUpdate: () => void = () => {}) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, UndoRedo, ResetChanges],
+    onUpdate,
+  })
+
+  return editor
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+  vi.restoreAllMocks()
+  localStorage.clear()
+})
+
+describe('the reset confirmation', () => {
+  it('asks until the user turns it off, and remembers that', () => {
+    expect(resetConfirmationOff()).toBe(false)
+
+    turnOffResetConfirmation()
+
+    expect(resetConfirmationOff()).toBe(true)
+    expect(localStorage.getItem('tiptapify:reset-changes:confirm')).toBe('off')
+  })
+
+  it('keeps asking where the storage is blocked', () => {
+    vi.spyOn(window, 'localStorage', 'get').mockImplementation(() => {
+      throw new Error('blocked')
+    })
+
+    expect(() => turnOffResetConfirmation()).not.toThrow()
+    expect(resetConfirmationOff()).toBe(false)
+  })
+})
+
+describe('resetChanges', () => {
+  it('returns the document to the content the editor opened with', () => {
+    const instance = createEditor('<p>Original</p>')
+    instance.commands.insertContentAt(instance.state.doc.content.size, '<p>Added</p>')
+    instance.commands.setContent('<p>Replaced</p>')
+
+    expect(resetChanges(instance)).toBe(true)
+
+    expect(instance.getHTML()).toBe('<p>Original</p>')
+  })
+
+  it('empties the undo and redo history, so the reset itself cannot be undone', () => {
+    const instance = createEditor('<p>Original</p>')
+    instance.commands.insertContentAt(instance.state.doc.content.size, '<p>Added</p>')
+    instance.commands.insertContentAt(instance.state.doc.content.size, '<p>More</p>')
+    instance.commands.undo()
+    expect(instance.can().redo()).toBe(true)
+
+    resetChanges(instance)
+
+    expect(instance.can().undo()).toBe(false)
+    expect(instance.can().redo()).toBe(false)
+
+    instance.commands.insertContentAt(instance.state.doc.content.size, '<p>After</p>')
+    instance.commands.undo()
+    expect(instance.getHTML()).toBe('<p>Original</p>')
+  })
+
+  it('does nothing before the first change', () => {
+    const instance = createEditor('<p>Original</p>')
+
+    expect(resetChanges(instance)).toBe(false)
+    expect(instance.getHTML()).toBe('<p>Original</p>')
+  })
+
+  it('reports the reset as a content change, for the host to save', () => {
+    let updates = 0
+    const instance = createEditor('<p>Original</p>', () => updates++)
+    instance.commands.insertContentAt(instance.state.doc.content.size, '<p>Added</p>')
+    updates = 0
+
+    resetChanges(instance)
+
+    expect(updates).toBe(1)
+  })
+})

package/src/extensions/components/actions/reset/resetChanges.ts

@@ -0,0 +1,78 @@
+import { Editor, Extension, JSONContent } from '@tiptap/core'
+import { EditorState } from '@tiptap/pm/state'
+
+const name = 'resetChanges'
+
+declare module '@tiptap/core' {
+  interface Storage {
+    resetChanges: { initialContent: JSONContent | null }
+  }
+}
+
+/**
+ * Keeps the document the editor opened with, for resetChanges to return to: the document before its first change
+ * (the create event comes later than the first changes can).
+ */
+export const ResetChanges = Extension.create({
+  name,
+
+  addStorage() {
+    return { initialContent: null as JSONContent | null }
+  },
+
+  onTransaction({ transaction }) {
+    if (this.storage.initialContent === null && transaction.docChanged) {
+      this.storage.initialContent = transaction.before.toJSON()
+    }
+  },
+})
+
+const confirmKey = 'tiptapify:reset-changes:confirm'
+
+// Storage may be blocked (private mode, sandboxed iframe): the reset then keeps asking
+function storage(): Storage | null {
+  try {
+    return window.localStorage
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The user chose "Don't ask again" in the reset confirmation (kept in this browser).
+ */
+export function resetConfirmationOff(): boolean {
+  try {
+    return storage()?.getItem(confirmKey) === 'off'
+  } catch {
+    return false
+  }
+}
+
+export function turnOffResetConfirmation(): void {
+  try {
+    storage()?.setItem(confirmKey, 'off')
+  } catch {
+    // The choice is not kept: the next reset asks again
+  }
+}
+
+/**
+ * Returns the document to the content the editor opened with and empties the undo and redo history,
+ * so the reset itself cannot be undone.
+ */
+export function resetChanges(editor: Editor): boolean {
+  const initialContent = editor.storage.resetChanges?.initialContent
+  if (!initialContent) {
+    return false
+  }
+
+  editor.commands.setContent(initialContent, { emitUpdate: true })
+
+  const { state } = editor
+  editor.view.updateState(EditorState.create({ schema: state.schema, doc: state.doc, plugins: state.plugins }))
+  // An empty transaction re-renders what reads the history, as the undo and redo buttons
+  editor.view.dispatch(editor.state.tr.setMeta('addToHistory', false))
+
+  return true
+}

package/src/i18n/locales/ar.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "إعادة",
+    "reset": "إعادة تعيين",
+    "reset_changes": "إعادة تعيين التغييرات",
+    "reset_changes_confirm": "سيتم تجاهل جميع التغييرات منذ فتح المحرر. لا يمكن التراجع عن ذلك.",
+    "reset_changes_dont_ask": "عدم السؤال مرة أخرى",
     "undo": "تراجع"
   },
   "ai": {

package/src/i18n/locales/bg.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Повтори",
+    "reset": "Нулирай",
+    "reset_changes": "Нулиране на промените",
+    "reset_changes_confirm": "Всички промени от отварянето на редактора ще бъдат отхвърлени. Това не може да бъде отменено.",
+    "reset_changes_dont_ask": "Не питай повече",
     "undo": "Отмъкни"
   },
   "ai": {

package/src/i18n/locales/ch.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "重做",
+    "reset": "重置",
+    "reset_changes": "重置更改",
+    "reset_changes_confirm": "自打开编辑器以来的所有更改都将被丢弃。此操作无法撤销。",
+    "reset_changes_dont_ask": "不再询问",
     "undo": "撤销"
   },
   "ai": {

package/src/i18n/locales/cz.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Znovu",
+    "reset": "Obnovit",
+    "reset_changes": "Zahodit změny",
+    "reset_changes_confirm": "Všechny změny od otevření editoru budou zahozeny. Tuto akci nelze vrátit zpět.",
+    "reset_changes_dont_ask": "Příště se neptat",
     "undo": "Zpět"
   },
   "ai": {

package/src/i18n/locales/de.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Wiederholen",
+    "reset": "Zurücksetzen",
+    "reset_changes": "Änderungen zurücksetzen",
+    "reset_changes_confirm": "Alle Änderungen seit dem Öffnen des Editors werden verworfen. Dies kann nicht rückgängig gemacht werden.",
+    "reset_changes_dont_ask": "Nicht mehr fragen",
     "undo": "Rückgängig"
   },
   "ai": {

package/src/i18n/locales/el.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Επανάληψη",
+    "reset": "Επαναφορά",
+    "reset_changes": "Επαναφορά αλλαγών",
+    "reset_changes_confirm": "Όλες οι αλλαγές από το άνοιγμα του επεξεργαστή θα απορριφθούν. Αυτό δεν μπορεί να αναιρεθεί.",
+    "reset_changes_dont_ask": "Να μην ερωτηθώ ξανά",
     "undo": "Αναίρεση"
   },
   "ai": {

package/src/i18n/locales/en.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Redo",
+    "reset": "Reset",
+    "reset_changes": "Reset changes",
+    "reset_changes_confirm": "All changes made since the editor opened will be discarded. This cannot be undone.",
+    "reset_changes_dont_ask": "Don’t ask again",
     "undo": "Undo"
   },
   "ai": {

package/src/i18n/locales/es.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Rehacer",
+    "reset": "Restablecer",
+    "reset_changes": "Restablecer cambios",
+    "reset_changes_confirm": "Se descartarán todos los cambios desde que se abrió el editor. Esta acción no se puede deshacer.",
+    "reset_changes_dont_ask": "No volver a preguntar",
     "undo": "Deshacer"
   },
   "ai": {

package/src/i18n/locales/et.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Tee uuesti",
+    "reset": "Lähtesta",
+    "reset_changes": "Lähtesta muudatused",
+    "reset_changes_confirm": "Kõik muudatused alates redaktori avamisest tühistatakse. Seda ei saa tagasi võtta.",
+    "reset_changes_dont_ask": "Ära küsi enam",
     "undo": "Tühista"
   },
   "ai": {

package/src/i18n/locales/fi.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Tee uudelleen",
+    "reset": "Palauta",
+    "reset_changes": "Palauta muutokset",
+    "reset_changes_confirm": "Kaikki muutokset editorin avaamisen jälkeen hylätään. Tätä ei voi kumota.",
+    "reset_changes_dont_ask": "Älä kysy uudelleen",
     "undo": "Kumoa"
   },
   "ai": {

package/src/i18n/locales/fr.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Refaire",
+    "reset": "Réinitialiser",
+    "reset_changes": "Réinitialiser les modifications",
+    "reset_changes_confirm": "Toutes les modifications depuis l’ouverture de l’éditeur seront abandonnées. Cette action est irréversible.",
+    "reset_changes_dont_ask": "Ne plus demander",
     "undo": "Annuler"
   },
   "ai": {

package/src/i18n/locales/he.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "ביצוע מחדש",
+    "reset": "איפוס",
+    "reset_changes": "איפוס שינויים",
+    "reset_changes_confirm": "כל השינויים מאז פתיחת העורך יבוטלו. לא ניתן לבטל פעולה זו.",
+    "reset_changes_dont_ask": "אל תשאל שוב",
     "undo": "ביטול"
   },
   "ai": {

package/src/i18n/locales/hi.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "फिर से करें",
+    "reset": "रीसेट करें",
+    "reset_changes": "बदलाव रीसेट करें",
+    "reset_changes_confirm": "संपादक खुलने के बाद से किए गए सभी बदलाव हटा दिए जाएंगे। इसे पूर्ववत नहीं किया जा सकता।",
+    "reset_changes_dont_ask": "फिर से न पूछें",
     "undo": "पूर्ववत् करें"
   },
   "ai": {

package/src/i18n/locales/hr.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Ponovno",
+    "reset": "Poništi sve",
+    "reset_changes": "Poništi promjene",
+    "reset_changes_confirm": "Sve promjene od otvaranja uređivača bit će odbačene. Ovo se ne može poništiti.",
+    "reset_changes_dont_ask": "Ne pitaj ponovno",
     "undo": "Poništi"
   },
   "ai": {

package/src/i18n/locales/hu.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Ismétlés",
+    "reset": "Visszaállítás",
+    "reset_changes": "Változtatások visszaállítása",
+    "reset_changes_confirm": "A szerkesztő megnyitása óta végzett összes változtatás elvész. Ez nem vonható vissza.",
+    "reset_changes_dont_ask": "Ne kérdezze újra",
     "undo": "Visszavonás"
   },
   "ai": {

package/src/i18n/locales/id.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Ulang",
+    "reset": "Atur ulang",
+    "reset_changes": "Atur ulang perubahan",
+    "reset_changes_confirm": "Semua perubahan sejak editor dibuka akan dibuang. Tindakan ini tidak dapat diurungkan.",
+    "reset_changes_dont_ask": "Jangan tanya lagi",
     "undo": "Urungkan"
   },
   "ai": {

package/src/i18n/locales/it.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Ripeti",
+    "reset": "Ripristina",
+    "reset_changes": "Ripristina modifiche",
+    "reset_changes_confirm": "Tutte le modifiche dall’apertura dell’editor verranno annullate. L’operazione non può essere annullata.",
+    "reset_changes_dont_ask": "Non chiedere più",
     "undo": "Annulla"
   },
   "ai": {

package/src/i18n/locales/ja.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "やり直し",
+    "reset": "リセット",
+    "reset_changes": "変更をリセット",
+    "reset_changes_confirm": "エディターを開いてからのすべての変更が破棄されます。この操作は元に戻せません。",
+    "reset_changes_dont_ask": "今後は確認しない",
     "undo": "取り消し"
   },
   "ai": {

package/src/i18n/locales/ko.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "다시 실행",
+    "reset": "초기화",
+    "reset_changes": "변경 사항 초기화",
+    "reset_changes_confirm": "편집기를 연 이후의 모든 변경 사항이 삭제됩니다. 이 작업은 되돌릴 수 없습니다.",
+    "reset_changes_dont_ask": "다시 묻지 않기",
     "undo": "실행 취소"
   },
   "ai": {

package/src/i18n/locales/la.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Atcelt atsaukšanu",
+    "reset": "Atiestatīt",
+    "reset_changes": "Atiestatīt izmaiņas",
+    "reset_changes_confirm": "Visas izmaiņas kopš redaktora atvēršanas tiks atmestas. To nevar atsaukt.",
+    "reset_changes_dont_ask": "Vairs nejautāt",
     "undo": "Atsaukt"
   },
   "ai": {

package/src/i18n/locales/lt.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Pakartoti",
+    "reset": "Atkurti",
+    "reset_changes": "Atkurti pakeitimus",
+    "reset_changes_confirm": "Visi pakeitimai nuo redaktoriaus atidarymo bus atmesti. To negalima atšaukti.",
+    "reset_changes_dont_ask": "Daugiau neklausti",
     "undo": "Atšaukti"
   },
   "ai": {

package/src/i18n/locales/nl.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Opnieuw",
+    "reset": "Herstellen",
+    "reset_changes": "Wijzigingen herstellen",
+    "reset_changes_confirm": "Alle wijzigingen sinds het openen van de editor worden verwijderd. Dit kan niet ongedaan worden gemaakt.",
+    "reset_changes_dont_ask": "Niet meer vragen",
     "undo": "Ongedaan maken"
   },
   "ai": {

package/src/i18n/locales/no.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Gjør om",
+    "reset": "Tilbakestill",
+    "reset_changes": "Tilbakestill endringer",
+    "reset_changes_confirm": "Alle endringer siden redigeringsprogrammet ble åpnet, forkastes. Dette kan ikke angres.",
+    "reset_changes_dont_ask": "Ikke spør igjen",
     "undo": "Angre"
   },
   "ai": {

package/src/i18n/locales/pl.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Ponów",
+    "reset": "Resetuj",
+    "reset_changes": "Resetuj zmiany",
+    "reset_changes_confirm": "Wszystkie zmiany od otwarcia edytora zostaną odrzucone. Tej operacji nie można cofnąć.",
+    "reset_changes_dont_ask": "Nie pytaj ponownie",
     "undo": "Cofnij"
   },
   "ai": {

package/src/i18n/locales/pt-BR.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Refazer",
+    "reset": "Redefinir",
+    "reset_changes": "Redefinir alterações",
+    "reset_changes_confirm": "Todas as alterações desde que o editor foi aberto serão descartadas. Isso não pode ser desfeito.",
+    "reset_changes_dont_ask": "Não perguntar novamente",
     "undo": "Desfazer"
   },
   "ai": {

package/src/i18n/locales/pt.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Refazer",
+    "reset": "Repor",
+    "reset_changes": "Repor alterações",
+    "reset_changes_confirm": "Todas as alterações desde que o editor foi aberto serão descartadas. Esta ação não pode ser anulada.",
+    "reset_changes_dont_ask": "Não voltar a perguntar",
     "undo": "Desfazer"
   },
   "ai": {

package/src/i18n/locales/ro.json

@@ -1,6 +1,10 @@
 {
   "action": {
     "redo": "Refăce",
+    "reset": "Resetează",
+    "reset_changes": "Resetează modificările",
+    "reset_changes_confirm": "Toate modificările de la deschiderea editorului vor fi eliminate. Acțiunea nu poate fi anulată.",
+    "reset_changes_dont_ask": "Nu mai întreba",
     "undo": "Anulează"
   },
   "ai": {