Merge branch 'dev' of https://github.com/artf/grapesjs into fix-drop-border

.github/workflows/quailty.yml → .github/workflows/quality.yml

@@ -7,7 +7,7 @@ on:
     branches: [dev]
 
 jobs:
-  quailty:
+  quality:
     runs-on: ubuntu-latest
 
     strategy:

README.md

@@ -1,6 +1,6 @@
 # [GrapesJS](http://grapesjs.com)
 
-[![Build Status](https://github.com/GrapesJS/grapesjs/actions/workflows/build.yml/badge.svg)](https://github.com/GrapesJS/grapesjs/actions)
+[![Build Status](https://github.com/GrapesJS/grapesjs/actions/workflows/quality.yml/badge.svg)](https://github.com/GrapesJS/grapesjs/actions)
 [![Chat](https://img.shields.io/badge/chat-discord-7289da.svg)](https://discord.gg/QAbgGXq)
 [![CDNJS](https://img.shields.io/cdnjs/v/grapesjs.svg)](https://cdnjs.com/libraries/grapesjs)
 [![npm](https://img.shields.io/npm/v/grapesjs.svg)](https://www.npmjs.com/package/grapesjs)

docs/api/component.md

@@ -187,6 +187,24 @@ console.log(allImages[0]) // prints the first found component
 
 Returns **[Array][5]\<Component>** 
 
+## findFirstType
+
+Find the first inner component by component type.
+If no component is found, it returns `undefined`.
+
+### Parameters
+
+*   `type` **[String][1]** Component type
+
+### Examples
+
+```javascript
+const image = component.findFirstType('image');
+if (image) console.log(image)
+```
+
+Returns **Component** Found component, otherwise `undefined`
+
 ## closest
 
 Find the closest parent component by query string.

src/dom_components/model/Component.ts

@@ -507,6 +507,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return result;
   }
 
+  /**
+   * Find the first inner component by component type.
+   * If no component is found, it returns `undefined`.
+   * @param {String} type Component type
+   * @returns {Component|undefined}
+   * @example
+   * const image = component.findFirstType('image');
+   * if (image) {
+   *  console.log(image);
+   * }
+   */
+  findFirstType(type: string): Component | undefined {
+    return this.findType(type).at(0);
+  }
+
   /**
    * Find the closest parent component by query string.
    * **ATTENTION**: this method works only with already rendered component

test/specs/dom_components/model/Component.ts

@@ -273,6 +273,32 @@ describe('Component', () => {
     expect(result.class).toEqual(undefined);
   });
 
+  test('findFirstType returns first component of specified type', () => {
+    const image1 = new ComponentImage({}, compOpts);
+    const text = new ComponentText({}, compOpts);
+    const image2 = new ComponentImage({}, compOpts);
+
+    obj.append([image1, text, image2]);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBe(image1);
+    expect(result instanceof ComponentImage).toBe(true);
+  });
+
+  test('findFirstType returns undefined for non-existent type', () => {
+    const text = new ComponentText({}, compOpts);
+
+    obj.append(text);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBeUndefined();
+  });
+
+  test('findFirstType returns undefined for empty component', () => {
+    const result = obj.findFirstType('div');
+    expect(result).toBeUndefined();
+  });
+
   test('setAttributes', () => {
     obj.setAttributes({
       id: 'test',