19:I[97471,["567","static/chunks/app/blog/%5Bid%5D/page-961b60afe71ed954.js"],"default"] 1a:T57e, import React, { useEffect, useState } from "react"; import { PlainClientAPI } from "contentful-management"; import { List, ListItem, Note } from "@contentful/f36-components"; import { SidebarExtensionSDK } from "@contentful/app-sdk"; import { /* useCMA, */ useSDK } from "@contentful/react-apps-toolkit"; import readingTime from "reading-time"; import { documentToPlainTextString } from "@contentful/rich-text-plain-text-renderer"; interface SidebarProps { sdk: SidebarExtensionSDK; cma: PlainClientAPI; } const CONTENT_FIELD_ID = "content"; const Sidebar = () => { const sdk = useSDK(); const contentField = sdk.entry.fields[CONTENT_FIELD_ID]; const [blogText, setBlogText] = useState(contentField.getValue()); // Listen for onChange events and update the value useEffect(() => { const detach = contentField.onValueChanged((value) => { setBlogText(value); }); return () => detach(); }, [contentField]); const stats = readingTime(documentToPlainTextString(blogText) || ""); return ( <> Metrics for your blog post: Word count: {stats.words} Reading time: {stats.text} ); }; export default Sidebar;17:[["$","h1",null,{"className":"text-transparent mt-4 pb-6 float-left w-full block text-4xl bg-clip-text bg-linear-to-r from-blue-200 to-purple-600","children":"Contentful UI Read Time App"}],[["$","div","slice-0",{"data-component":"RichText","children":[["$","p","0",{"children":[[false,"Need to add a read time to your Contentful app? Contentful has a great tutorial on how to build a component for the sidebar. Problem is... it doesn't work. To get things functioning I had to convert the Richtext content field to plain text using this"],["