feat: support for text ranges

apps/poc-state-plugin/src/app/app.component.ts

@@ -76,6 +76,13 @@ import type { PenpotShape } from '@penpot/plugin-types';
         >
           +COUNTER
         </button>
+        <button
+          type="button"
+          data-appearance="secondary"
+          (click)="stylizeWords()"
+        >
+          WORDS STYLES
+        </button>
       </div>
 
       <p>
@@ -194,6 +201,10 @@ export class AppComponent {
     this.#sendMessage({ content: 'increase-counter' });
   }
 
+  stylizeWords() {
+    this.#sendMessage({ content: 'word-styles' });
+  }
+
   #sendMessage(message: unknown) {
     parent.postMessage(message, '*');
   }

apps/poc-state-plugin/src/plugin.ts

@@ -269,6 +269,40 @@ Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imper
 
     selection[0].setPluginData('counter', '' + counter);
     penpot.ui.sendMessage({ type: 'update-counter', content: { counter } });
+  } else if (message.content === 'word-styles') {
+    const selection = penpot.selection;
+
+    if (selection.length >= 1 && penpot.utils.types.isText(selection[0])) {
+      const shape = selection[0];
+      const text = shape.characters;
+
+      const isSplit = (c: string) => !!c.match(/\W/);
+
+      if (text.trim() === '') {
+        return;
+      }
+
+      let lastWordStart = 0;
+      let gettingWord = !isSplit(text[0]);
+      let wordProcessed = 0;
+
+      for (let i = 1; i < text.length; i++) {
+        if (gettingWord && isSplit(text[i])) {
+          if (wordProcessed % 2 === 0) {
+            const range = shape.getRange(lastWordStart, i);
+            range.fills = [{ fillColor: '#FF0000', fillOpacity: 1 }];
+            range.textTransform = 'uppercase';
+            range.fontSize = '20';
+          }
+
+          wordProcessed++;
+          gettingWord = false;
+        } else if (!gettingWord && !isSplit(text[i])) {
+          lastWordStart = i;
+          gettingWord = true;
+        }
+      }
+    }
   }
 });
 

libs/plugin-types/index.d.ts

@@ -1247,7 +1247,12 @@ export interface PenpotTextRange {
   /**
    * The PenpotText shape to which this text range belongs.
    */
-  shape: PenpotText;
+  readonly shape: PenpotText;
+
+  /**
+   * The characters associated with the current text range.
+   */
+  readonly characters: string;
 
   /**
    * The font ID of the text range. It can be a specific font ID or 'mixed' if multiple fonts are used.
@@ -1293,6 +1298,26 @@ export interface PenpotTextRange {
    * The text transform applied to the text range. It can be a specific text transform or 'mixed' if multiple text transforms are used.
    */
   textTransform: string | 'mixed';
+
+  /**
+   * TODO textDecoration
+   */
+  textDecoration: string | 'mixed';
+
+  /**
+   * TODO direction
+   */
+  direction: string | 'mixed';
+
+  /**
+   * TODO fills
+   */
+  fills: PenpotFill[];
+
+  /**
+   * TODO applyTypography
+   */
+  applyTypography(typography: PenpotLibraryTypography): void;
 }
 
 /**
@@ -1362,7 +1387,25 @@ export interface PenpotText extends PenpotShapeBase {
    */
   textTransform: string | 'mixed';
 
+  /**
+   * TODO textDecoration
+   */
+  textDecoration: string | 'mixed';
+
+  /**
+   * TODO direction
+   */
+  direction: string | 'mixed';
+
+  /**
+   * TODO getRange
+   */
   getRange(start: number, end: number): PenpotTextRange;
+
+  /**
+   * TODO applyTypography
+   */
+  applyTypography(typography: PenpotLibraryTypography): void;
 }
 
 /**
@@ -1609,6 +1652,7 @@ export interface PenpotLibraryTypography extends PenpotLibraryElement {
    * ```
    */
   applyToText(shape: PenpotShape): void;
+
   /**
    * Applies the typography styles to a range of text within a text shape.
    * @param shape The text shape containing the text range to apply the typography styles to.