Seeing some crashes after updating to 0.1.14

[nachodeh]

SyntaxError: 'li, p:not(:first-child), pre, blockquote, h1, h2, h3, h4, h5, h6, ' is not a valid selector.
  at matches([native code])
  at find([native code])
  at <object>.props.handleDOMEvents.mousemove(./node_modules/tiptap-extension-global-drag-handle/dist/index.js:181:1)
  at f(./node_modules/prosemirror-view/dist/index.js:3083:1)
  at EditorView.someProp(./node_modules/prosemirror-view/dist/index.js:5490:1)
  at runCustomHandler(./node_modules/prosemirror-view/dist/index.js:3081:1)
  at view.input.eventHandlers[type](./node_modules/prosemirror-view/dist/index.js:3077:1)
  at sentryWrapped(./node_modules/@sentry/browser/build/npm/esm/helpers.js:96:1)

Reverting to v0.1.13 solves the problem

[NiclasDev63]

Just pushed a commit yesterday, which should fix this issue. Try updating to v0.1.15

[nachodeh]

Awesome, thanks!

On Wed, 30 Oct 2024 at 08:24, Niclas @.***> wrote:

Just pushed commit yesterday, which should fix this issue. Try updating to v0.1.15

— Reply to this email directly, view it on GitHub https://github.com/NiclasDev63/tiptap-extension-global-drag-handle/issues/26#issuecomment-2446161002, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAM44FN5UKGUR27HNYOACP3Z6CJS3AVCNFSM6AAAAABQ3PF7J2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBWGE3DCMBQGI . You are receiving this because you authored the thread.Message ID: <NiclasDev63/tiptap-extension-global-drag-handle/issues/26/2446161002@ github.com>

[nachodeh]

@NiclasDev63 still seeing the issue on 0.1.15

[NiclasDev63]

Can you share your code to reproduce the bug

[nachodeh]

Hey @NiclasDev63, this is my TipTap setup with the Drag Handle.

const editor = useEditor({
        extensions: [
            StarterKit,
            Link.extend({ inclusive: false }).configure({
                openOnClick: false,
                linkOnPaste: true,
            }),
            CustomKeymap,
            GlobalDragHandle,
            AutoJoiner,
            TaskList,
            TaskItem.configure({
                nested: true,
                HTMLAttributes: {
                    class: "task-item",
                },
            }),
            Markdown.configure({
                html: true,
                tightLists: true,
                bulletListMarker: "-",
                linkify: true,
            }),
        ],
        content: initialContent,
        onUpdate: ({ editor }) => {
            debouncedSaveNotesToDb(editor.getHTML(), saveEditorContent)
        },
        immediatelyRender: false,
    })

This is the issue as reported by Sentry, and I haven't seen it again since updating to v0.1.13

SyntaxError: Failed to execute 'matches' on 'Element': 'li, p:not(:first-child), pre, blockquote, h1, h2, h3, h4, h5, h6, ' is not a valid selector.
  at find(./node_modules/tiptap-extension-global-drag-handle/dist/index.js:27:1)
  at Array.find(<anonymous>)
  at nodeDOMAtCoords(./node_modules/tiptap-extension-global-drag-handle/dist/index.js:26:1)
  at <object>.props.handleDOMEvents.mousemove(./node_modules/tiptap-extension-global-drag-handle/dist/index.js:181:1)
  at f(./node_modules/prosemirror-view/dist/index.js:3083:1)
  at EditorView.someProp(./node_modules/prosemirror-view/dist/index.js:5490:1)
  at runCustomHandler(./node_modules/prosemirror-view/dist/index.js:3081:1)
  at view.input.eventHandlers[type](./node_modules/prosemirror-view/dist/index.js:3077:1)
  at sentryWrapped(./node_modules/@sentry/browser/build/npm/esm/helpers.js:96:1)

Let me know if you need any more details

[NiclasDev63]

That's strange, because I can't reproduce the error at the moment. I'll get back to it in the next few days and try to fix it.

[ShadiBlitz]

@nachodeh Which bundler do you have? Also please try to re-install your packages.

@NiclasDev63 The error is caused by an invalid CSS selector syntax in the matches function. There’s a trailing comma in the selector li, p:not(:first-child), pre, blockquote, h1, h2, h3, h4, h5, h6,, most likely caused by the join function.

In addition, this commit https://github.com/NiclasDev63/tiptap-extension-global-drag-handle/commit/40ef85d2345e27496f2acf5baf7855344c345b21 was probably unnecessary since the customNodes list is always initialized with default value of [].

The issue here is that Array.join is being applied to the selector array, but options.customNodes?.map returns an array. This results in an extra comma if customNodes is undefined or empty, or it creates invalid syntax if not handled properly.

You can try to fix this by ensuring that customNodes is flattened into the selector array and excluding any undefined or empty entries.

function nodeDOMAtCoords(options: GlobalDragHandleOptions, coords: { x: number; y: number }) {
  const customNodeSelectors = options.customNodes?.map((node) => `[data-type=${node}]`) || [];
  const selectors = [
    'li',
    'p:not(:first-child)',
    'pre',
    'blockquote',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    ...customNodeSelectors,
  ].join(', ');

  return document
    .elementsFromPoint(coords.x, coords.y)
    .find(
      (elem: Element) =>
        elem.parentElement?.matches?.('.ProseMirror') || elem.matches(selectors),
    );
}

[NiclasDev63]

We can replace

options.customNodes?.map((node) => `[data-type=${node}]`) || [];

with the following

options.customNodes.map((node) => `[data-type=${node}]`)

since "customNodes" is never undefined and thus the selectors array would be.

const selectors = [
    'li',
    'p:not(:first-child)',
    'pre',
    'blockquote',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    ...options.customNodes.map((node) => `[data-type=${node}]`),
  ].join(', ');

I think this should do the trick.