From 5dd98a831af81b34cbc9419c4244a94fbf8c8bd8 Mon Sep 17 00:00:00 2001
From: Oliver Studer <oliver.studer@tegonal.com>
Date: Sun, 4 Jun 2023 22:39:24 +0200
Subject: [PATCH] add plaintext helper

---
 package-lock.json                           |  9 ++++---
 package.json                                |  4 +--
 src/components/portabletext/to-plaintext.ts | 29 +++++++++++++++++++++
 src/demo/demo-page.tsx                      |  7 ++++-
 src/index.ts                                |  1 +
 5 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 src/components/portabletext/to-plaintext.ts

diff --git a/package-lock.json b/package-lock.json
index 3693d93..152ebf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@tegonal/portabletext-qwik",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@tegonal/portabletext-qwik",
-      "version": "1.0.1",
+      "version": "1.0.3",
       "license": "MIT",
       "dependencies": {
         "@portabletext/toolkit": "^2.0.1",
@@ -25,7 +25,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",
@@ -4698,8 +4698,9 @@
     },
     "node_modules/np": {
       "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/np/-/np-7.6.1.tgz",
+      "integrity": "sha512-EHr5PtMPzNmkM/trnWQWTKAogJnVP1RzTFfIyvPK2COvLN6Vqut4gFXuWNng15xuqnTgmUPzKYbpQAZsYR+Dkw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@samverschueren/stream-to-observable": "^0.3.1",
         "any-observable": "^0.5.1",
diff --git a/package.json b/package.json
index 8ce509b..d4c1b32 100644
--- a/package.json
+++ b/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 <oliver.studer@tegonal.com> (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",
diff --git a/src/components/portabletext/to-plaintext.ts b/src/components/portabletext/to-plaintext.ts
new file mode 100644
index 0000000..3facac2
--- /dev/null
+++ b/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');
+};
diff --git a/src/demo/demo-page.tsx b/src/demo/demo-page.tsx
index 96cc42e..75ec92d 100644
--- a/src/demo/demo-page.tsx
+++ b/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>
     </>
   );
diff --git a/src/index.ts b/src/index.ts
index d5c47a0..8c4a47e 100644
--- a/src/index.ts
+++ b/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,