Merge pull request #1 from charlie-tango/main

Sync wtih base repo

Author: fbosch

.github/workflows/ci.yml

@@ -13,6 +13,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
+      - run: npm install --global corepack@latest
       - run: corepack enable
       - uses: actions/checkout@v4
       - name: Setup Node.js
@@ -24,6 +25,8 @@ jobs:
         run: pnpm install
       - name: Lint
         run: pnpm biome ci .
+      - name: Install playwright
+        run: pnpx playwright install chromium
       - name: Test
         run: pnpm test
         env:

.github/workflows/pkg-pr.yml

@@ -0,0 +1,21 @@
+name: Publish Pull Requests
+on: [push, pull_request]
+
+jobs:
+  pr-package:
+    runs-on: ubuntu-latest
+    steps:
+      - run: npm install --global corepack@latest
+      - run: corepack enable
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - name: Publish preview package
+        run: pnpx pkg-pr-new publish --no-template --compact

.github/workflows/release.yml

@@ -12,6 +12,7 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
+      - run: npm install --global corepack@latest
       - run: corepack enable
       - uses: actions/checkout@v4
         with:

.gitignore

@@ -9,3 +9,4 @@ lib-cov
 logs
 node_modules
 temp
+__screenshots__

README.md

@@ -15,9 +15,9 @@ choice.
 npm install @charlietango/react-umbraco
 ```
 
-### `<UmbracoRichText>`
+## `<UmbracoRichText>`
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/charlie-tango/react-umbraco/tree/main/examples/UmbracoRichText?file=src/RichText.tsx)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/charlie-tango/react-umbraco/tree/main?file=examples/UmbracoRichText/src/RichText.tsx)
 
 Takes the rich text property from the Umbraco Content Delivery API and renders
 it with React.
@@ -28,6 +28,10 @@ it with React.
 - `renderBlock`: Render a specific block type.
 - `renderNode`: Overwrite the default rendering of a node. Return `undefined` to
   render the default node. Return `null` to skip rendering the node.
+- `htmlAttributes`: Default attributes to set on the defined HTML elements.
+  These will be used, unless the element already has the attribute set. The only
+  exception is the `className` attribute, which will be merged with the default
+  value.
 
 When passing the `renderBlock` and `renderNode` props, consider making them
 static functions (move them outside the consuming component) to avoid
@@ -74,12 +78,13 @@ function RichText({ data }) {
       element={data.richText}
       renderNode={renderNode}
       renderBlock={renderBlock}
+      htmlAttributes={{ p: { className: "mb-4" }}
     />
   );
 }
 ```
 
-#### Blocks
+### Blocks
 
 You can augment the `renderBlock` method with the generated OpenAPI types from
 Umbraco Content Delivery API. That way you can correctly filter the blocks you
@@ -105,6 +110,50 @@ declare module "@charlietango/react-umbraco" {
 }
 ```
 
+## `richTextToPlainText`
+
+A utility function to convert an Umbraco RichText element to plain text. This
+can be useful for generating meta descriptions or other text-based properties.
+
+### Parameters
+
+- `data` (`RichTextElementModel`): The rich text element to be converted.
+- `options` (`Options`, _optional_): An object to specify additional options.
+  - `firstParagraph` (`boolean`, _optional_): If `true`, only the first
+    paragraph with text content will be returned.
+  - `maxLength` (`number`, _optional_): The maximum length of the returned text.
+    If the text exceeds this length, it will be truncated to the nearest word
+    and an ellipsis will be added.
+  - `ignoreTags` (`Array<string>`, _optional_): An array of tags to be ignored
+    during the conversion.
+
+### Returns
+
+- `string`: The plain text representation of the rich text element.
+
+### Example
+
+```ts
+import { richTextToPlainText } from "@charlietango/react-umbraco";
+
+const plainText = richTextToPlainText(richTextData);
+
+// Just the first paragraph
+const firstParagraph = richTextToPlainText(richTextData, {
+  firstParagraph: true,
+});
+
+// Just the first 100 characters, truncated at the nearest word with an ellipsis
+const first100Characters = richTextToPlainText(richTextData, {
+  maxLength: 100,
+});
+
+// Ignore certain tags, skipping their content
+const ignoreTags = richTextToPlainText(richTextData, {
+  ignoreTags: ["h1", "h2", "ol", "figure"],
+});
+```
+
 <!-- Badges -->
 
 [npm-version-src]:

biome.json

@@ -8,7 +8,8 @@
       "coverage/**",
       "storybook-static/**",
       "pnpm-lock.yaml",
-      "examples/**"
+      "examples/**",
+      "package.json"
     ]
   },
   "organizeImports": {