fix: fix applying the default component for components with numbers

Author: arthurlorenz

src/runtime/composables/useDrupalCe/index.ts

@@ -257,15 +257,20 @@ export const useDrupalCe = () => {
     }
 
     // Progressively remove segments from the custom element name to find a matching default component.
-    const regex = /-?[a-z]+$/
+    const regex = /-?[^-]+$/
     let componentName = element
     while (componentName) {
       // Try resolving by adding 'Default' suffix.
       const fallbackComponent = nuxtApp.vueApp.component(formatName(componentName) + 'Default')
       if (typeof fallbackComponent === 'object' && fallbackComponent.name) {
         return fallbackComponent
       }
-      componentName = componentName.replace(regex, '')
+      let newComponentName = componentName.replace(regex, '')
+      if (newComponentName === componentName) {
+        // No more segments to remove, break the loop.
+        break
+      }
+      componentName = newComponentName
     }
 
     // If not found, try with resolveComponent. This provides a warning if the component is not found.

test/unit/renderCustomElements-defaults.test.ts

@@ -56,6 +56,16 @@ describe('Custom Element Fallback Tests', () => {
     expect(wrapper.findComponent(NodeArticleDefault).exists()).toBe(true)
   })
 
+  it('falls back to node-article--default when component name contains special characters', async () => {
+    const elementData = {
+      element: 'node-article-v2$넌😯',
+      content: 'Testing intermediate fallback with special characters'
+    }
+    const wrapper = await mountSuspended(createTestComponent(elementData))
+    expect(wrapper.html()).toContain('Testing intermediate fallback with special characters')
+    expect(wrapper.findComponent(NodeArticleDefault).exists()).toBe(true)
+  })
+
   it('falls back to node--default when no intermediate default found', async () => {
     const elementData = {
       element: 'node-special-custom',