tiptapify 0.4.0 → 0.4.2

package/index.d.ts

@@ -360,6 +360,9 @@ export type {
 
 export type { TiptapifyConfig }
 
+/** The logic of the image dialog, for a host that replaces the dialog with its own */
+export * as imageDialog from './src/extensions/components/media/image/imageDialog'
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.4.0",
+  "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/extensions/components/media/image/imageDialog.test.ts

@@ -140,6 +140,16 @@ describe('image dialog apply', () => {
     expect(selectedImageAttrs(editor!.state)).toMatchObject({ src: 'https://example.com/a.png', width: 640 })
   })
 
+  it('reads a node selection made by another copy of prosemirror-state', () => {
+    createEditor('<p>Text</p><img src="https://example.com/a.png" width="640">')
+    const { from, to } = editor!.state.selection
+    const node = editor!.state.doc.nodeAt(6)
+    const foreignSelection = { from, to, node }
+    const state = { ...editor!.state, selection: foreignSelection } as unknown as Parameters<typeof selectedImageAttrs>[0]
+
+    expect(selectedImageAttrs(state)).toMatchObject({ src: 'https://example.com/a.png', width: 640 })
+  })
+
   it('sends the selected image to the dialog, or none to insert one', () => {
     createEditor('<p>Text</p><img src="https://example.com/a.png">')
     const details: Array<{ image: Record<string, unknown> | null }> = []

package/src/extensions/components/media/image/imageDialog.ts

@@ -5,6 +5,8 @@ import { ImageAlign } from '@tiptapify/extensions/components/media/image/caption
 
 export { resizeSide, toSize }
 
+export type { ImageAlign }
+
 export type ImageSizeMode = 'original' | 'text' | 'custom'
 
 export type ImageSize = MediaSize
@@ -27,12 +29,13 @@ const typeName = 'image'
  * The attributes of the image selected as a node, or null when no image is selected (the dialog inserts one).
  */
 export function selectedImageAttrs(state: EditorState): Record<string, unknown> | null {
-  const { selection } = state
-  if (!(selection instanceof NodeSelection) || selection.node.type.name !== typeName) {
+  // Not instanceof: a host that imports this module from the source runs another copy of prosemirror-state than the editor
+  const { node } = state.selection as Partial<NodeSelection>
+  if (node?.type.name !== typeName) {
     return null
   }
 
-  return { ...selection.node.attrs }
+  return { ...node.attrs }
 }
 
 /**

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": {