add plaintext helper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tegonal/portabletext-qwik",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A portable text component for Qwik",
   "author": "Oliver Studer <[email protected]> (https://tegonal.com)",
   "main": "./dist/index.mjs",
@@ -56,7 +56,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qwik": "latest",
-    "np": "7.6.1",
+    "np": "^7.6.1",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",

src/components/portabletext/to-plaintext.ts

@@ -0,0 +1,29 @@
+import { PortableTextProps } from './types';
+
+// Credit: https://www.sanity.io/schemas/portable-text-to-plain-text-cc845843
+// https://www.sanity.io/exchange/community/rexxars
+
+const defaults = { nonTextBehavior: 'remove' };
+
+type FnArgs = {
+  opts?: typeof defaults;
+  value: PortableTextProps['value'];
+};
+
+/**
+ * Convert a Portable block or array to plain text. Strips the structure of all marks and block types.
+ * @param value
+ * @param opts
+ */
+export const portableTextToPlaintext = ({ value, opts }: FnArgs) => {
+  const options = Object.assign({}, defaults, opts);
+  const array = Array.isArray(value) ? value : [value];
+  return array
+    .map((block) => {
+      if (block._type !== 'block' || !block.children) {
+        return options.nonTextBehavior === 'remove' ? '' : `[${block._type} block]`;
+      }
+      return block.children.map((child: any) => child.text).join('');
+    })
+    .join('\n\n');
+};

src/demo/demo-page.tsx

@@ -7,6 +7,7 @@ import { TermDefinition } from './components/TermDefinition';
 import { Link } from './components/Link';
 import { PortableTextComponents } from '../components/portabletext/types';
 import { SchnauzerList } from './components/SchnauzerList';
+import { portableTextToPlaintext } from '../components/portabletext/to-plaintext';
 
 // Some examples of custom components
 const components: PortableTextComponents = {
@@ -24,9 +25,13 @@ const components: PortableTextComponents = {
 export const DemoPage = component$(() => {
   return (
     <>
-      <div class={'prose mx-auto mt-5 lg:container'}>
+      <div class={'prose mx-auto mt-8 lg:container'}>
         <PortableText value={blocks} components={components} />
       </div>
+      <div class={'prose mx-auto mt-8 lg:container'}>
+        <h2>Plaintext</h2>
+        <p>{portableTextToPlaintext({ value: blocks })}</p>
+      </div>
       <div id={'portals'}></div>
     </>
   );

src/index.ts

@@ -1,4 +1,5 @@
 export { PortableText } from './components/portabletext/portable-text';
+export { portableTextToPlaintext } from './components/portabletext/to-plaintext';
 export type {
   PortableTextCustomComponents,
   PortableTextComponent,