tiptapify 0.4.0 → 0.4.1

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.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

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/index.ts

@@ -6,6 +6,7 @@ import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 import { registerSkin, defineSkin } from '@tiptapify/skins/registry'
 import { contentCss, inlineContentStyles } from '@tiptapify/utils/contentStyles'
+import * as imageDialog from '@tiptapify/extensions/components/media/image/imageDialog'
 
 import { Editor as TipTapEditor, nodeViewProps, NodeViewWrapper, VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Node, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
@@ -55,6 +56,7 @@ export {
   defineSkin,
   contentCss,
   inlineContentStyles,
+  imageDialog,
 }
 
 export type { TiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'