"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Callout} = _components; if (!Callout) _missingMdxReference("Callout", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["This guide explains how administrators can publish rich text blog posts with images and media in a Next.js app using ", _jsx(_components.strong, { children: "Portable Text" }), " (structured JSON content) and a custom editor built with ", _jsx(_components.strong, { children: "ShadCN UI" }), " components. We cover the overall architecture, data model, admin authoring interface, media handling pipeline, front-end rendering of content, ways to extend the editor, and known limitations. The implementation uses Next.js (App Router) and is backed by AWS Amplify Gen2 (AWS AppSync GraphQL with DynamoDB for data storage)."] }), "\n", _jsx(_components.h2, { id: "key-outcomes", children: _jsx(_components.a, { className: "anchor-link", href: "#key-outcomes", children: "Key Outcomes" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Structured content with Portable Text (JSON):" }), " Blog post content is stored as structured JSON (Portable Text blocks) rather than raw HTML. Portable Text is a JSON-based rich text specification that represents content as an array of block objects with styles, types, and mark definitions ", _jsx(_components.a, { href: "https://www.sanity.io/guides/top-5-rich-text-react-components#:~:text=Portable%20Text%20is%20a%20JSON,presentation%20in%20various%20differing%20interfaces", children: "sanity.io" }), " ", _jsx(_components.a, { href: "https://www.sanity.io/guides/top-5-rich-text-react-components#:~:text=Portable%20Text%20returns%20content%20in,HTML%20and%20Markdown%20with%20serializers", children: "sanity.io" }), ". This approach makes content more future-proof and safer to render across different interfaces."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Rich text editor with ShadCN UI:" }), " Admins compose posts in a WYSIWYG editor built on ", _jsx(_components.a, { href: "https://tiptap.dev/", children: "Tiptap" }), " (a ProseMirror-based rich text toolkit) and ", _jsx(_components.strong, { children: "ShadCN UI" }), " components for the toolbar, dialogs, and form controls. The editor supports formatting (headings, bold, lists, etc.), links, and image insertion, all with a modern React/Tailwind UI."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Media uploads via cloud storage:" }), " Images and other media are uploaded to a cloud storage bucket (e.g. Amazon S3). Custom serverless functions handle upload processing, image optimization, and provide a media library browser for selecting previously uploaded images. The editor integrates with this media pipeline to embed images in content."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Portable Text rendering on the front-end:" }), " The public blog pages render the stored JSON content using a Portable Text React component, converting the structured blocks into proper HTML elements. This ensures the blog displays rich text and media as intended, and we can easily adjust the rendering (for example, customizing how images or code blocks appear)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Seamless integration with Amplify & AppSync:" }), " The solution is built for AWS Amplify Hosting (Gen 2) with an ", _jsx(_components.strong, { children: "AppSync GraphQL" }), " API. Blog posts are fetched and mutated via GraphQL. The content JSON is stored in DynamoDB (via AppSync) using the AWSJSON scalar type (which allows any JSON structure) ", _jsx(_components.a, { href: "https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html#:~:text=", children: "docs.aws.amazon.com" }), "."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "architecture-overview", children: _jsx(_components.a, { className: "anchor-link", href: "#architecture-overview", children: "Architecture Overview" }) }), "\n", _jsxs(_components.p, { children: ["The blogging system consists of an ", _jsx(_components.strong, { children: "admin portal" }), " for content authors and the ", _jsx(_components.strong, { children: "public blog" }), " for readers. Key points of the architecture include:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Next.js App structure:" }), " The admin interface lives under the ", _jsx(_components.code, { children: "/admin" }), " route and is protected by role-based access (only users with an editor/admin role can access it). The public blog pages live under ", _jsx(_components.code, { children: "/blog/[slug]" }), " routes. Both are part of the same Next.js application (using the App Router for routing and React server components where appropriate)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Admin post creation/editing:" }), " Authorized users can create and edit blog posts via a form (", _jsx(_components.code, { children: "BlogPostForm" }), "). This form includes fields like title, slug, excerpt, publish status, cover image, categories, and the main content editor. The content editor is a ", _jsx(_components.strong, { children: "rich text editor" }), " component (built with Tiptap + ShadCN UI) where authors write the post body. All form state is managed on the client (with possible use of React Hook Form for integration)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Content format and storage:" }), " Each post is stored with a format identifier and content fields in a DynamoDB table (exposed via AppSync GraphQL). In our case we use ", _jsx(_components.code, { children: "content_format = 'portable-text'" }), " for rich text posts. The post’s content is saved as JSON in a ", _jsx(_components.code, { children: "content" }), " field (Portable Text block array). For example, in the GraphQL schema the ", _jsx(_components.code, { children: "content" }), " field might be of type ", _jsx(_components.code, { children: "AWSJSON" }), " to accommodate arbitrary JSON structure ", _jsx(_components.a, { href: "https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html#:~:text=", children: "docs.aws.amazon.com" }), ". Other fields (title, slug, author, etc.) are stored as normal strings or IDs. This structured content approach allows mixing text, images, and other elements safely."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publishing flow:" }), " When an admin saves or publishes a post, the app calls an AppSync GraphQL mutation to upsert the record in DynamoDB. If the post is marked “published”, a timestamp is set. After a successful save/publish, the system triggers a revalidation of relevant Next.js pages (using Incremental Static Regeneration) so that public pages show the updated content on the next visit."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Public blog rendering:" }), " The blog page (", _jsx(_components.code, { children: "app/blog/[slug]/page.tsx" }), ") fetches the post data (via a GraphQL query by slug). Based on the ", _jsx(_components.code, { children: "content_format" }), ", it chooses the appropriate renderer. For Portable Text, it uses a custom ", _jsx(_components.code, { children: "PortableTextRenderer" }), " React component (wrapping the ", _jsx(_components.code, { children: "@portabletext/react" }), " library) to render the JSON into HTML elements. This separation means the front-end does not rely on ", _jsx(_components.code, { children: "dangerouslySetInnerHTML" }), "; instead it iterates over the structured content and renders images, headings, paragraphs, etc. with proper components and styling."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Key files in the project structure:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Admin post list page: ", _jsx(_components.code, { children: "app/admin/blog/page.tsx" }), " (lists existing posts, with links to edit or create new)"] }), "\n", _jsxs(_components.li, { children: ["Admin create page: ", _jsx(_components.code, { children: "app/admin/blog/new/page.tsx" }), " (form for a new post)"] }), "\n", _jsxs(_components.li, { children: ["Admin edit page: ", _jsx(_components.code, { children: "app/admin/blog/[id]/edit-client.tsx" }), " (form for editing an existing post)"] }), "\n", _jsxs(_components.li, { children: ["Blog post form component: ", _jsx(_components.code, { children: "components/admin/blog-post-form.tsx" }), " (implements the form inputs and content editor integration)"] }), "\n", _jsxs(_components.li, { children: ["Rich text editor component: ", _jsx(_components.code, { children: "components/admin/rich-text-editor.tsx" }), " (the WYSIWYG editor built with Tiptap/ShadCN UI)"] }), "\n", _jsxs(_components.li, { children: ["Media management components: ", _jsx(_components.code, { children: "components/admin/media-selector.tsx" }), ", ", _jsx(_components.code, { children: "components/admin/enhanced-media-catalog.tsx" }), ", ", _jsx(_components.code, { children: "components/admin/image-uploader.tsx" }), " (for image upload & selection dialogs)"] }), "\n", _jsxs(_components.li, { children: ["Storage utility library: ", _jsx(_components.code, { children: "lib/storage.ts" }), " (abstraction for interacting with storage bucket and signing upload URLs or requests)"] }), "\n", _jsxs(_components.li, { children: ["Content serialization and validation: ", _jsx(_components.code, { children: "lib/content-api.ts" }), " (e.g., functions to validate Portable Text structure)"] }), "\n", _jsxs(_components.li, { children: ["Public blog page and renderer: ", _jsx(_components.code, { children: "app/blog/[slug]/page.tsx" }), " (fetches post and renders), and ", _jsx(_components.code, { children: "app/blog/[slug]/blog-content.tsx" }), " (contains the logic to render Portable Text content via the renderer component)"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "data-model-and-content-format", children: _jsx(_components.a, { className: "anchor-link", href: "#data-model-and-content-format", children: "Data Model and Content Format" }) }), "\n", _jsxs(_components.p, { children: ["We use a single database table/GraphQL type for all blog posts, with fields to accommodate the rich text content. Key fields in the ", _jsx(_components.strong, { children: "Post" }), " model include:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "id" }), " – unique identifier (primary key, e.g. UUID)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "title" }), " – text title of the post."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "slug" }), " – URL slug."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "excerpt" }), " – short summary."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "cover_image" }), " – URL or storage key for the cover image."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "published" }), " – boolean flag or status (and possibly ", _jsx(_components.code, { children: "published_at" }), " timestamp)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "content_format" }), " – a string flag indicating the format of ", _jsx(_components.code, { children: "content" }), ". For our use-case this will be ", _jsx(_components.code, { children: "'portable-text'" }), " for all rich text posts (we include this field for extensibility, but currently only one format is used)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "content" }), " – a JSON field storing the Portable Text block array (in DynamoDB via AppSync, this is stored as an ", _jsx(_components.code, { children: "AWSJSON" }), " scalar, which accepts any valid JSON structure ", _jsx(_components.a, { href: "https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html#:~:text=", children: "docs.aws.amazon.com" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why Portable Text (JSON)?" }), " Portable Text is an open specification for rich text content that stores text along with its formatting and embedded objects in a structured JSON format ", _jsx(_components.a, { href: "https://www.sanity.io/guides/top-5-rich-text-react-components#:~:text=Portable%20Text%20is%20a%20JSON,presentation%20in%20various%20differing%20interfaces", children: "sanity.io" }), ". Instead of storing HTML (which can be error-prone or a security risk to render directly), we store an array of content ", _jsx(_components.em, { children: "blocks" }), ". Each block can have a type (paragraph, heading, image, list, etc.), textual spans with marks (bold, italic, links), and child elements. This structure makes it easier to transform or render content in different contexts (web, email, native apps) without brittle HTML parsing. It’s essentially a more portable and robust representation of rich text ", _jsx(_components.a, { href: "https://www.sanity.io/guides/top-5-rich-text-react-components#:~:text=Portable%20Text%20returns%20content%20in,HTML%20and%20Markdown%20with%20serializers", children: "sanity.io" }), ". For example, a simple Portable Text document might look like:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"_type\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"block\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"style\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"normal\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"children\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"_type\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"span\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"text\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Hello \"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"marks\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"_type\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"span\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"text\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"World\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " ", _jsx(_components.span, { className: "hljs-attr", children: "\"marks\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), _jsx(_components.span, { className: "hljs-string", children: "\"strong\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"_type\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"image\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"url\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"https://example.com/image.jpg\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"alt\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"An example image\"" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "In the above JSON, the first element is a text block with a bold text span (“World”), and the second element is an image block with a URL and alt text. By using JSON, we avoid directly storing HTML, and we can validate the structure (for instance, ensuring that only allowed tags or attributes are present)." }), "\n", _jsxs(_components.p, { children: ["The AppSync GraphQL schema uses ", _jsx(_components.code, { children: "AWSJSON" }), " for the ", _jsx(_components.code, { children: "content" }), " field to store this JSON. The AWSJSON scalar essentially means the data is stored as a JSON string in DynamoDB but parsed to native JSON in resolvers ", _jsx(_components.a, { href: "https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html#:~:text=", children: "docs.aws.amazon.com" }), ". This allows us to send/receive the content as a JSON object in our GraphQL queries and mutations."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "admin-authoring-experience", children: _jsx(_components.a, { className: "anchor-link", href: "#admin-authoring-experience", children: "Admin Authoring Experience" }) }), "\n", _jsx(_components.p, { children: "The admin UI for blog authors provides a form-driven interface to compose posts, including rich text editing and media management." }), "\n", _jsx(_components.h3, { id: "blog-post-form-ui", children: _jsx(_components.a, { className: "anchor-link", href: "#blog-post-form-ui", children: "Blog Post Form UI" }) }), "\n", _jsxs(_components.p, { children: ["The main component driving post creation/editing is the ", _jsx(_components.strong, { children: "BlogPostForm" }), " (found in ", _jsx(_components.code, { children: "components/admin/blog-post-form.tsx" }), "). This form presents:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Text fields:" }), " Inputs for title, slug (which can be auto-generated from title), and excerpt. These are basic text or textarea fields."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cover Image:" }), " An image uploader/selector for the post’s cover image. The form shows a preview of the selected image and allows uploading a new image or choosing from the media library (more on the media pipeline below)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Categories/Tags:" }), " (If applicable) a multi-select or checkbox group for categorizing the post."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publish toggle:" }), " A switch or checkbox to mark the post as \"Published\". If published, the post will be visible on the public blog (once deployed) and a publication timestamp is recorded."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Content editor:" }), " The rich text editor component for the post body. This is the most complex part of the form, described in detail below."] }), "\n"] }), "\n", _jsx(_components.p, { children: "All these fields are managed together. When the admin submits the form, a server action or handler will validate the input (for example, ensuring slug uniqueness, validating that content JSON isn’t empty), then call a GraphQL mutation to save the post. On success, it might redirect the user back to the list or to the newly created post’s edit screen." }), "\n", _jsx(_components.h3, { id: "rich-text-editor-portable-text-wysiwyg", children: _jsx(_components.a, { className: "anchor-link", href: "#rich-text-editor-portable-text-wysiwyg", children: "Rich Text Editor (Portable Text WYSIWYG)" }) }), "\n", _jsxs(_components.p, { children: ["The content editor in the admin form is a custom ", _jsx(_components.strong, { children: "rich text editor" }), " built with the ", _jsx(_components.a, { href: "https://tiptap.dev/", children: "Tiptap" }), " library and UI components from ", _jsx(_components.strong, { children: "ShadCN UI" }), ". This editor provides a user-friendly way to format text and embed media, while ultimately producing Portable Text JSON under the hood. Key aspects of the editor:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["It is implemented as a React component (e.g., ", _jsx(_components.code, { children: "RichTextEditor" }), ") using Tiptap’s ", _jsx(_components.code, { children: "useEditor" }), " hook. Tiptap is based on ProseMirror, which uses a JSON document model for rich text."] }), "\n", _jsxs(_components.li, { children: ["We include the ", _jsx(_components.strong, { children: "StarterKit" }), " extension from Tiptap, which brings common formatting nodes and marks (paragraphs, headings, bold, italic, bullet list, ordered list, blockquote, code block, etc.) so we don’t have to configure each basic feature from scratch."] }), "\n", _jsxs(_components.li, { children: ["The editor is rendered in the form as a stylized contenteditable area (", _jsx(_components.code, { children: "" }), " from Tiptap) along with a custom ", _jsx(_components.strong, { children: "toolbar" }), " of buttons for formatting actions. We use ShadCN UI’s pre-built components like ", _jsx(_components.strong, { children: "Button" }), ", ", _jsx(_components.strong, { children: "Toggle" }), ", ", _jsx(_components.strong, { children: "Dialog" }), ", and icons from ", _jsx(_components.strong, { children: "Lucide" }), " to create this toolbar."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Toolbar features:" }), " The editor’s toolbar provides controls for all the major rich text functions:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Text styles: ", _jsx(_components.strong, { children: "Bold" }), ", ", _jsx(_components.strong, { children: "Italic" }), " (and we could easily add underline, strikethrough, etc. with additional extensions)."] }), "\n", _jsxs(_components.li, { children: ["Headings: ", _jsx(_components.strong, { children: "H1" }), ", ", _jsx(_components.strong, { children: "H2" }), ", ", _jsx(_components.strong, { children: "H3" }), " block styles for section headings."] }), "\n", _jsxs(_components.li, { children: ["Lists: ", _jsx(_components.strong, { children: "Bulleted list" }), " and ", _jsx(_components.strong, { children: "Numbered list" }), " toggles."] }), "\n", _jsxs(_components.li, { children: ["Blocks: ", _jsx(_components.strong, { children: "Blockquote" }), " and ", _jsx(_components.strong, { children: "Code block" }), " formatting."] }), "\n", _jsxs(_components.li, { children: ["Insert elements: ", _jsx(_components.strong, { children: "Horizontal rule" }), " (divider line) and ", _jsx(_components.strong, { children: "Link" }), " insertion (hyperlinking selected text)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Image" }), " insertion: a button that opens an image selection dialog (allowing upload or choosing an existing image) and then inserts an image block at the cursor position."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Undo/Redo" }), ": to revert or reapply changes (integrated with Tiptap’s history extension, which StarterKit includes)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Each toolbar control is wired to a Tiptap command. For example, clicking the Bold button will execute ", _jsx(_components.code, { children: "editor.chain().focus().toggleBold().run()" }), ", which toggles the ", _jsx(_components.strong, { children: "strong" }), " mark on the selected text. The buttons also reflect the editor’s current state: e.g., the Bold button is highlighted (active) if the cursor is inside bold text. We achieve this using ShadCN UI’s ", _jsx(_components.strong, { children: "Toggle" }), " component, setting its ", _jsx(_components.code, { children: "pressed" }), " state based on ", _jsx(_components.code, { children: "editor.isActive('bold')" }), ". This way, the button appears pressed when bold is active ", _jsx(_components.a, { href: "https://www.shadcn.io/components/forms/minimal-tiptap#:~:text=%3CBold%20className%3D%22h,Toggle", children: "shadcn.io" }), ". Similarly, heading buttons check for ", _jsx(_components.code, { children: "editor.isActive('heading', { level: 1 })" }), " and so on for H1, H2, H3 ", _jsx(_components.a, { href: "https://www.shadcn.io/components/forms/minimal-tiptap#:~:text=pressed%3D,Toggle", children: "shadcn.io" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Implementation steps:" }), " To integrate the Portable Text editor into your app:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Install dependencies." }), " Add Tiptap and its extensions (e.g. StarterKit, Link, Placeholder, Image) to your project, as well as Lucide icons if not already included via ShadCN UI."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Create the editor component." }), " In a client-side React component (e.g. ", _jsx(_components.code, { children: "RichTextEditor.tsx" }), "), use ", _jsx(_components.code, { children: "useEditor" }), " from Tiptap to initialize an editor instance. Include ", _jsx(_components.code, { children: "StarterKit" }), " in ", _jsx(_components.code, { children: "extensions" }), " and set an ", _jsx(_components.code, { children: "onUpdate" }), " callback to handle content changes (e.g. update form state with ", _jsx(_components.code, { children: "editor.getJSON()" }), " output ", _jsx(_components.a, { href: "https://tiptap.dev/docs/guides/output-json-html#:~:text=JSON%20is%20probably%20easier%20to,retrieve%20the%20content%20as%20JSON", children: "tiptap.dev" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Build the toolbar UI." }), " Use ShadCN UI components to create buttons/toggles for each formatting action. For example, a Toggle for bold that calls ", _jsx(_components.code, { children: "editor.chain().focus().toggleBold().run()" }), " and is ", _jsx(_components.code, { children: "pressed" }), " when ", _jsx(_components.code, { children: "editor.isActive('bold')" }), " ", _jsx(_components.a, { href: "https://www.shadcn.io/components/forms/minimal-tiptap#:~:text=%3CBold%20className%3D%22h,Toggle", children: "shadcn.io" }), ". Repeat for italic, headings, lists, etc., grouping and styling buttons as needed (you can use icons from Lucide for each)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Handle special actions." }), " Implement dialogs for actions like inserting links or images. For a link, open a small input dialog and on submit call ", _jsx(_components.code, { children: "editor.chain().focus().extendMarkRange('link').setLink({ href }).run()" }), ". For images, open the media selector dialog and upon choosing an image, call ", _jsx(_components.code, { children: "editor.chain().focus().setImage({ src: imageUrl, alt: '...' }).run()" }), " (after installing an Image extension)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Render the editor." }), " Include the ", _jsx(_components.code, { children: "" }), " component in your JSX to render the editable area. Apply Tailwind classes (e.g. using the Typography plugin) to style content inside the editor, and a placeholder text for when it's empty."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Once this component is ready, integrate it into the BlogPostForm and pass the current content value and onChange handler so that the form captures the JSON output." }), "\n", _jsx(_components.p, { children: "Below is a simplified example of how the toolbar is implemented in the React component:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " editor = ", _jsx(_components.span, { className: "hljs-title function_", children: "useEditor" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "extensions" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "StarterKit" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": initialContent, ", _jsx(_components.span, { className: "hljs-comment", children: "// could be an HTML string or JSON" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onUpdate" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ editor }" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Sync content to form state on each change" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " json = editor.", _jsx(_components.span, { className: "hljs-title function_", children: "getJSON" }), "();\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onChange" }), "(json);\n },\n});\n...\n", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"border rounded-lg overflow-hidden\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"border-b p-2 flex flex-wrap items-center gap-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Toggle" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "pressed" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{editor?.isActive(" }), "'", _jsx(_components.span, { className: "hljs-attr", children: "bold" }), "')}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onPressedChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " editor?.chain().focus().toggleBold().run()}\n disabled={!editor?.can().chain().focus().toggleBold().run()}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Bold" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Toggle" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "pressed" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{editor?.isActive(" }), "'", _jsx(_components.span, { className: "hljs-attr", children: "italic" }), "')}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onPressedChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " editor?.chain().focus().toggleItalic().run()}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Italic" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n {/* ...other formatting buttons like headings, lists... */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " editor?.chain().focus().undo().run()}\n disabled={!editor?.can().chain().focus().undo().run()}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Undo" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " editor?.chain().focus().redo().run()}\n disabled={!editor?.can().chain().focus().redo().run()}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Redo" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "EditorContent" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "editor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{editor}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Start writing your post...\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"prose max-w-none p-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n);\n"] }) }), "\n", _jsxs(_components.p, { children: ["In the code above, we initialize Tiptap with ", _jsx(_components.code, { children: "StarterKit" }), " and set an ", _jsx(_components.code, { children: "onUpdate" }), " callback to get the editor’s JSON content whenever it changes (using ", _jsx(_components.code, { children: "editor.getJSON()" }), " – Tiptap can output content as JSON or HTML ", _jsx(_components.a, { href: "https://tiptap.dev/docs/guides/output-json-html#:~:text=Editor", children: "tiptap.dev" }), " ", _jsx(_components.a, { href: "https://tiptap.dev/docs/guides/output-json-html#:~:text=JSON%20is%20probably%20easier%20to,retrieve%20the%20content%20as%20JSON", children: "tiptap.dev" }), "). We then render a series of Toggle buttons for bold, italic, etc., using Lucide icons. The ", _jsx(_components.code, { children: "EditorContent" }), " component is where the editable area renders, with some Tailwind CSS classes (using the Typography plugin to style prose, etc.)."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Handling content state:" }), " We typically lift the editor content state up to the form. The ", _jsx(_components.code, { children: "BlogPostForm" }), " might hold a state variable for ", _jsx(_components.code, { children: "content" }), " (the JSON), and pass an ", _jsx(_components.code, { children: "onChange" }), " handler into the ", _jsx(_components.code, { children: "RichTextEditor" }), " component as shown. When the form is submitted, this JSON content is included in the data and sent to the backend via GraphQL mutation. Alternatively, if using react-hook-form, the ", _jsx(_components.code, { children: "RichTextEditor" }), " can be integrated as a controlled component by registering a custom field that updates on editor changes."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Link and image dialogs:" }), " Some toolbar actions require additional UI, such as inserting a hyperlink (needing a URL input) or choosing an image. For these, we use ShadCN UI’s ", _jsx(_components.strong, { children: "Dialog" }), " component:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Clicking the ", _jsx(_components.strong, { children: "Link" }), " button could open a small modal dialog prompting for a URL, and then the editor command ", _jsx(_components.code, { children: "setLink" }), " is executed with that href on confirmation."] }), "\n", _jsxs(_components.li, { children: ["Clicking the ", _jsx(_components.strong, { children: "Image" }), " button opens a larger dialog – implemented in the ", _jsx(_components.code, { children: "MediaSelector" }), " component – which contains two tabs: one for uploading a new image, and one for browsing the existing media library."] }), "\n"] }), "\n", _jsx(_components.h3, { id: "media-management-images--media-pipeline", children: _jsx(_components.a, { className: "anchor-link", href: "#media-management-images--media-pipeline", children: "Media Management (Images & Media Pipeline)" }) }), "\n", _jsx(_components.p, { children: "In a rich blog, authors need to include images or other media in their posts. Our admin interface provides an integrated media management system powered by cloud storage and serverless functions:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Storage bucket:" }), " We use an Amazon S3 bucket (or similar) to store images. Authors can upload images through the admin UI. For example, the ", _jsx(_components.code, { children: "ImageUploader" }), " component might use a pre-signed URL or an API call (to an AWS Lambda function) to upload the file to the bucket. The image files could be organized in folders (e.g., a ", _jsx(_components.code, { children: "blog/" }), " prefix, or separate folders for covers vs in-post images)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Edge function / Lambda for upload:" }), " Instead of directly exposing S3, the app could call a secure endpoint (like an AWS Lambda) to handle the upload. In our case, the admin UI calls an API route or function (with the user’s auth token) to handle the upload. This function verifies the user’s permissions and either generates a pre-signed upload URL or streams the upload to the bucket. It may also perform image processing (e.g., creating thumbnails, optimizing image format) or simply store the original and rely on on-the-fly resizing later."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Media library browsing:" }), " The ", _jsx(_components.code, { children: "MediaSelector" }), " component opens a dialog with two ", _jsx(_components.strong, { children: "Tabs" }), " (ShadCN UI ", _jsx(_components.code, { children: "Tabs" }), " component): “Upload” and “Library”. The Upload tab contains the ", _jsx(_components.code, { children: "ImageUploader" }), " (file picker and upload button). The Library tab displays a grid of previously uploaded images – this is implemented by the ", _jsx(_components.code, { children: "EnhancedMediaCatalog" }), " component, which likely calls a backend function to list files in the S3 bucket (for example, an AWS Lambda that lists objects with a certain prefix, returning metadata and URLs). The images are shown as thumbnails; the author can search or filter (if implemented), and select an image."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Selecting & inserting images:" }), " When the author selects an image from the library (or after a new upload is completed), the media dialog closes and returns the image’s public URL (or a reference ID). The editor then inserts an image node into the document at the current cursor location. In Tiptap, this could be done via an ", _jsx(_components.code, { children: "Image" }), " extension (if using Tiptap’s built-in image extension) or by directly manipulating the JSON. For example, if using a Tiptap image extension, one would call ", _jsx(_components.code, { children: "editor.chain().focus().setImage({ src: imageUrl, alt: altText }).run()" }), ". In the Portable Text JSON, we represent this as an ", _jsx(_components.code, { children: "{ \"_type\": \"image\", \"url\": \"...\", \"alt\": \"...\" }" }), " block, as shown earlier."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Image rendering:" }), " We store just the image URL (which could be an S3 signed URL or a CloudFront URL). On the public site, the Portable Text renderer will create an ", _jsx(_components.code, { children: "" }), " tag with that URL, or possibly use Next.js’ ", _jsx(_components.code, { children: "" }), " component if further optimization is desired. (If using Next ", _jsx(_components.code, { children: "" }), ", ensure to configure the domain in ", _jsx(_components.code, { children: "next.config.js" }), " for remote images.)"] }), "\n"] }), "\n", _jsx(_components.p, { children: "All media operations are secured: only authorized users can upload or delete images. The Amplify Auth context (or AppSync authentication) is used to ensure the functions are called with proper privileges. For example, an AppSync mutation for image management could be restricted to admins, or if using a REST API route, it checks the user’s JWT for admin role." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "rendering-on-the-public-blog", children: _jsx(_components.a, { className: "anchor-link", href: "#rendering-on-the-public-blog", children: "Rendering on the Public Blog" }) }), "\n", _jsx(_components.p, { children: "Once a post is written and published, it needs to be displayed to end users on the blog. Our blog pages use the stored content to render a rich reading experience:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The Next.js page component for a blog post (e.g. ", _jsx(_components.code, { children: "app/blog/[slug]/page.tsx" }), ") will fetch the post data, typically using a server-side GraphQL query via AppSync to get the post by slug. This returns the title, author, date, and importantly the ", _jsx(_components.code, { children: "content" }), " field which is a Portable Text JSON array."] }), "\n", _jsxs(_components.li, { children: ["We then use a component called ", _jsx(_components.code, { children: "BlogContent" }), " (or directly in the page) to render the content. If the ", _jsx(_components.code, { children: "content_format" }), " indicates Portable Text, we use our ", _jsx(_components.strong, { children: "PortableTextRenderer" }), " component to output the content."] }), "\n"] }), "\n", _jsx(_components.h3, { id: "portabletextrenderer-component", children: _jsx(_components.a, { className: "anchor-link", href: "#portabletextrenderer-component", children: "PortableTextRenderer Component" }) }), "\n", _jsxs(_components.p, { children: ["We utilize the ", _jsx(_components.code, { children: "@portabletext/react" }), " package to help convert Portable Text JSON into React elements. This package is typically used with content from Sanity.io, but since Portable Text is an open spec, we can use it for our content structure as well. We define a set of React component mappings for the various block types and marks in our content. For example:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableText" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextReactComponents" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@portabletext/react'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "components" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextReactComponents" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "types" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ value }" }), ") =>"] }), " (\n ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "img" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.url}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.alt" }), " || ''} ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"my-4 rounded-md\"" }), " />"] }) }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "code" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ value }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "pre" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-muted p-4 rounded\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "code" }), ">"] }), "{value.code}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ... you can add custom types like video, tweet embeds, etc." }), "\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "marks" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children, value }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.href}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "target" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"_blank\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "rel" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"noopener noreferrer\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"underline text-blue-600\"" }), ">"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "strong" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "strong" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "em" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "em" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ... marks for underline, highlight could be added" }), "\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "block" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "h1" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-bold my-6\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "h2" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-semibold my-4\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "h3" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-semibold my-3\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "blockquote" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "blockquote" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"border-l-4 pl-4 italic text-gray-600 my-4\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "normal" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"my-2\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Note: \"normal\" is default for paragraph text" }), "\n }\n};\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "PortableTextRenderer" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ content }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"prose prose-lg max-w-none\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PortableText" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{content}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "components" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{components}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n"] }) }), "\n", _jsx(_components.p, { children: "In the above code, we specify how to render:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Block types:" }), " e.g., if a block has ", _jsx(_components.code, { children: "_type: \"image\"" }), ", we render an ", _jsx(_components.code, { children: "" }), " with the given URL and alt text, adding some Tailwind classes for styling. For ", _jsx(_components.code, { children: "_type: \"code\"" }), " (if we choose to include code blocks in Portable Text), we render a ", _jsx(_components.code, { children: "

"
        }), " with styling."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Marks:"
        }), " e.g., for ", _jsx(_components.code, {
          children: "marks: { link: ... }"
        }), " we render an anchor tag with target ", _jsx(_components.code, {
          children: "_blank"
        }), ". Bold and italic are straightforward. If we had a custom mark (like highlight), we could map it to a span with a background color."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Block styles:"
        }), " Portable Text uses the concept of block style (like \"normal\" for a paragraph, \"h1\"...\"h6\" for headings, etc.). We map these to actual HTML elements with appropriate CSS classes."]
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Using ", _jsx(_components.code, {
        children: "@portabletext/react"
      }), " simplifies a lot of the work – it will traverse the JSON and call our custom renderers for each piece. The result is we get safe, structured DOM output. We can wrap it in a ", _jsx(_components.code, {
        children: ""
      }), " to apply typography styles globally."]
    }), "\n", _jsxs(Callout, {
      type: "note",
      title: "Implementation note",
      children: [_jsxs(_components.p, {
        children: ["In our current implementation, we are finalizing Portable Text support. Initially, the editor might store content as HTML (via ", _jsx(_components.code, {
          children: "editor.getHTML()"
        }), "), and the public page could inject that HTML. Our goal is to store and render true Portable Text JSON. The code above represents the intended approach."]
      }), _jsxs(_components.p, {
        children: ["If your content is still HTML during a transition, temporarily use a sanitizer with ", _jsx(_components.code, {
          children: "dangerouslySetInnerHTML"
        }), " or convert HTML to Portable Text using a parser. Adopting structured JSON end-to-end is the recommended path for maintainability and consistency."]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["Using the approach above, adding new content types is straightforward – we just define a new ", _jsx(_components.code, {
        children: "_type"
      }), " in the JSON and provide a React component for it in the renderer. This could be used for embedding tweets, videos, etc., without risking arbitrary HTML."]
    }), "\n", _jsx(_components.p, {
      children: _jsxs(_components.em, {
        children: ["(For reference, the ", _jsx(_components.code, {
          children: "@portabletext/react"
        }), " library is commonly used in Sanity projects to render Portable Text content ", _jsx(_components.a, {
          href: "https://www.sanity.io/guides/top-5-rich-text-react-components#:~:text=other%20content%20created%20on%20Sanity",
          children: "sanity.io"
        }), ".)"]
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "extending-the-editor-and-toolbar",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#extending-the-editor-and-toolbar",
        children: "Extending the Editor and Toolbar"
      })
    }), "\n", _jsx(_components.p, {
      children: "One advantage of using Tiptap and a custom toolbar is that we can extend the editor with new features as needed. Here are some ideas and how we could implement them:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Additional text styles:"
        }), " To support underline, strikethrough, or highlight, we can include the corresponding Tiptap extensions (for example, there are built-in extensions or community extensions for these marks). Then add buttons in the toolbar that call ", _jsx(_components.code, {
          children: "toggleUnderline()"
        }), ", ", _jsx(_components.code, {
          children: "toggleStrike()"
        }), ", etc. The pattern follows what we did for bold/italic – include the extension in ", _jsx(_components.code, {
          children: "useEditor"
        }), " and add a Toggle button that checks ", _jsx(_components.code, {
          children: "editor.isActive('underline')"
        }), " to set its state."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Text alignment or indentation:"
        }), " If needed, we could add extensions for text alignment (left/center/right) or indent/outdent for lists. Tiptap has extensions like ", _jsx(_components.code, {
          children: "TextAlign"
        }), " which we can configure with allowed alignments. We would then add, say, a dropdown or a set of buttons for the alignment options that trigger ", _jsx(_components.code, {
          children: "editor.setTextAlign('center')"
        }), " and so on."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Custom Image captions or styles:"
        }), " We currently insert a basic image. If we want to support captions or alignment for images, we might extend the image node schema. For example, include a caption text in the image node’s attributes and provide a UI in the editor to edit that caption (perhaps by selecting the image and showing a caption input). This requires a bit more custom extension work in ProseMirror schema to allow nested content (caption as a child of image)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Syntax-highlighted code blocks:"
        }), " Tiptap’s StarterKit provides a basic code block, but not syntax highlighting. We could integrate a library like ", _jsx(_components.a, {
          href: "https://github.com/lowlightjs/lowlight",
          children: "Lowlight"
        }), " with Tiptap’s CodeBlock extension to highlight code. Another approach is to store code blocks as a custom Portable Text type (as shown in the renderer) and do highlighting at render time. For a richer editing experience, one could implement a dropdown to select the programming language for the code block."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Embed content (videos, tweets, etc.):"
        }), " We can create custom Tiptap node extensions for embeddable content. For instance, a ", _jsx(_components.code, {
          children: "Tweet"
        }), " node that stores a tweet ID and renders an embedded tweet, or a ", _jsx(_components.code, {
          children: "Video"
        }), " node that stores a YouTube URL and renders an iframe. The toolbar would get a new button (perhaps under a dropdown like “Embed”) which opens a ShadCN UI Dialog prompting for the embed link/ID. On confirm, the extension’s insert command is used to add that node to the doc. The Portable Text would then have a block like ", _jsx(_components.code, {
          children: "{ _type: 'video', embedUrl: 'https://...'}"
        }), ", and our renderer needs to handle that."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Keyboard shortcuts:"
        }), " Since Tiptap is built on ProseMirror, many standard shortcuts are already supported (e.g. ", _jsx(_components.strong, {
          children: "Ctrl/Cmd+B"
        }), " for bold, ", _jsx(_components.strong, {
          children: "Ctrl+I"
        }), " for italic, lists, etc. via the StarterKit). We can add more or customize them via the ", _jsx(_components.code, {
          children: "addKeyboardShortcuts()"
        }), " in extensions. For example, adding a shortcut for underline or a custom style."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Placeholder text:"
        }), " We use the Tiptap Placeholder extension (often included by default or easy to add) to show “Start writing…” when the editor is empty. This can be configured (we set a custom placeholder in the code snippet above). For multiple editors or different contexts, ensure each has an appropriate placeholder to guide the user."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "The general process to extend the editor is:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Include or create a Tiptap Extension"
        }), " for the new feature (this could be as simple as adding an existing extension to the extensions array, or writing a new one for completely custom behavior)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Add a UI control"
        }), " in the toolbar or elsewhere in the form. This could be a new Button/Toggle or even a custom React component (for complex inputs). Wire this control to call the editor commands (e.g., ", _jsx(_components.code, {
          children: "editor.chain().focus().toggleSomething().run()"
        }), ")."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Handle the rendering"
        }), " of the new content type in the PortableTextRenderer (if it affects the output). If it’s a new mark or block type that will appear in the JSON, add it to the ", _jsx(_components.code, {
          children: "components"
        }), " mapping so it displays correctly on the blog."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Because our editor is headless (the core logic is separate from UI), we have full control over how we surface new features in the UI using ShadCN components. The ShadCN design system ensures that any new dialogs, buttons, or inputs we add will have a consistent look and feel."
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "access-control-and-roles",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#access-control-and-roles",
        children: "Access Control and Roles"
      })
    }), "\n", _jsx(_components.p, {
      children: "It’s crucial that only authorized users can access the admin interface and perform content changes. We implement security at multiple levels:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Route protection:"
        }), " The Next.js ", _jsx(_components.code, {
          children: "/admin"
        }), " routes are wrapped with an authentication check. For instance, in ", _jsx(_components.code, {
          children: "app/admin/layout.tsx"
        }), " (or a middleware), we might fetch the current user and verify their role includes “admin” or “editor”. If not, we redirect them to a login page or show a 404. This ensures that the admin UI is not even rendered for unauthorized users."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Action authorization:"
        }), " All API calls or GraphQL mutations for creating/updating posts are secured. With AWS AppSync, we can use Cognito or API Key authentication combined with fine-grained AppSync resolvers. For example, we could attach an IAM policy to allow only certain groups to perform mutations, or use AppSync’s @auth directive in the GraphQL schema to restrict operations by user group/role."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Storage security:"
        }), " The image upload and listing functions (whether they are AppSync mutations or REST endpoints) also check the user’s credentials. If using Amplify, the Storage category can be configured such that only certain users can write to the protected bucket paths. If using a Lambda, the Lambda should verify the JWT token it receives from the client before proceeding with the file operation."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Roles definition:"
        }), " In our app, we have roles like “admin”, “editor”, and “reader”. Admins/editors can create and edit content; readers are normal site visitors with no special privileges. These roles might be managed via an Amplify Auth (Cognito User Pool) group or a custom user management system. Regardless, the role information is passed along with requests (e.g., in the JWT) and used in the checks described."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "By combining front-end route guarding and backend authorization, we ensure that even if someone discovers the admin URL, they cannot do anything without proper auth, and any attempted unauthorized API calls will fail."
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "publishing-workflow-and-cache-invalidation",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#publishing-workflow-and-cache-invalidation",
        children: "Publishing Workflow and Cache Invalidation"
      })
    }), "\n", _jsx(_components.p, {
      children: "When a post is ready to go live, the author will toggle “Publish” in the form and save. Publishing involves a couple of important steps:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Setting publish status:"
        }), " The ", _jsx(_components.code, {
          children: "published"
        }), " flag is set to true, and a ", _jsx(_components.code, {
          children: "published_at"
        }), " timestamp is recorded (often set to current time). Unpublished drafts remain with ", _jsx(_components.code, {
          children: "published"
        }), " = false and may not be queryable on the public site depending on how the queries are written."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Revalidating pages:"
        }), " Our blog uses Next.js Incremental Static Regeneration (ISR) to serve pages. This means once a page is generated, it might be cached for a certain revalidate period. To ensure a newly published or updated post is immediately visible, we manually trigger a revalidation for relevant pages. In Next 13+, we can use the ", _jsx(_components.code, {
          children: "revalidatePath"
        }), " or ", _jsx(_components.code, {
          children: "revalidateTag"
        }), " utilities (for example, in a server action or API route) after a successful save. Specifically, we would revalidate the blog index page (listing posts) and the page for the updated slug. This causes Next.js to fetch fresh data on the next request to those paths. In Amplify’s hosting environment, these revalidations are supported similar to Vercel."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Feedback to author:"
        }), " After saving/publishing, the UI can provide feedback like “Post published successfully” and perhaps offer a direct link “View post” which goes to the public URL (which now should show the content)."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Because we separate the concerns, the admin portal uses dynamic (mostly client-side) rendering for flexibility, whereas the public site can use static generation for performance. The revalidation marries these two by invalidating the cache when content changes."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "(If not using ISR, one could also fully server-render the blog pages on each request or implement a caching layer. ISR is a good balance here to cache pages but update them when the CMS changes.)"
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "troubleshooting-and-known-gaps",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#troubleshooting-and-known-gaps",
        children: "Troubleshooting and Known Gaps"
      })
    }), "\n", _jsx(_components.p, {
      children: "Despite the setup above, there are some areas to watch out for or that are in progress:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Portable Text conversion:"
        }), " Ensure that the content saved from the editor is indeed in the expected JSON format. At the moment, our editor captures content as HTML on update (because ", _jsx(_components.code, {
          children: "StarterKit"
        }), " outputs HTML by default). We plan to switch this to capturing the JSON and possibly converting it to the Portable Text structure. If the content in the database is HTML currently, the PortableTextRenderer will not work directly. A temporary measure is to use a library or custom function to parse HTML into Portable Text or to adjust the renderer to accept raw HTML (e.g., by wrapping it in a single block). The ultimate goal is to have the database store proper block JSON. This may involve writing a conversion function or using a ProseMirror to Portable Text serializer."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Edge cases in rendering:"
        }), " The Portable Text React library will ignore unknown types or marks. If you see missing content, check that your JSON structure exactly matches what the renderer expects (e.g., ", _jsx(_components.code, {
          children: "_type: 'block'"
        }), " for paragraphs, etc.). Also, any custom block types need corresponding components. Test with a variety of content (multiple paragraphs, images, links, etc.) to ensure everything appears."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Image domain and optimization:"
        }), " If your image URLs are coming directly from S3 or another CDN, make sure to configure Next.js to recognize those domains (in ", _jsx(_components.code, {
          children: "next.config.js"
        }), " under ", _jsx(_components.code, {
          children: "images.domains"
        }), ") if you use the Next ", _jsx(_components.code, {
          children: ""
        }), " component. If you just use ", _jsx(_components.code, {
          children: ""
        }), " tags, this is not an issue, but you then rely on the browser to load the full image. Ideally, use a combination of Next Image or a CloudFront distribution that auto-optimizes images. Amplify Hosting supports Next’s Image component, but you need to declare the domains."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "ShadCN UI styling issues:"
        }), " If toolbar buttons or dialogs don’t look right, verify that the ShadCN UI styles (Tailwind CSS and Radix CSS) are properly configured. For example, toggles should show a pressed state (usually a different background) when active. If not, ensure the CSS from ShadCN UI is included and the class names haven’t been purged by accident."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Collaborative editing or locking:"
        }), " Currently, the editor is single-user. If multiple admins try to edit the same post simultaneously, they might overwrite each other’s changes. AppSync does not automatically handle concurrency on the same item. In the future, consider adding a “locking” mechanism (e.g., mark a post as “being edited by X”) or merging changes carefully. Tiptap does have collaboration capabilities (using Y.js), but that’s an advanced setup."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Validation:"
        }), " Since the content is complex, ensure you validate on the backend as well. For example, an AppSync resolver (or DynamoDB Streams trigger) could validate that the JSON structure of ", _jsx(_components.code, {
          children: "content"
        }), " fits the Portable Text schema and reject invalid input. This is extra safe if you ever expose an API for content creation beyond the admin UI."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "By being mindful of these areas, you can avoid common pitfalls. The system is built to be robust, but as with any CMS, thorough testing with real-world content and media is important."
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "quick-start-for-authors-using-the-admin-ui",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#quick-start-for-authors-using-the-admin-ui",
        children: "Quick Start for Authors (Using the Admin UI)"
      })
    }), "\n", _jsx(_components.p, {
      children: "For completeness, here’s how an author would use the system to publish a blog post:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Access the Admin Portal:"
        }), " Log in with an account that has the editor or admin role. Navigate to ", _jsx(_components.code, {
          children: "/admin/blog"
        }), " in the application. You’ll see a list of posts (drafts and published)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Create a New Post:"
        }), " Click the “New Post” button. This opens the blog post form."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Fill in the basics:"
        }), " Enter a title for the post. The slug may auto-fill (and can be edited). Write a short excerpt/summary."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Cover Image:"
        }), " Click “Upload Cover Image” to select a cover picture. You can upload a new file or choose from the library of images. After selecting, you’ll see a preview of the cover image."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Write Content:"
        }), " In the rich text editor area, start writing your post. Use the toolbar to format headings, emphasize text, create lists, etc. For example, make your section titles as H2 or H3, highlight key terms in bold, etc."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Insert Images in content:"
        }), " To add an image inside the post, click the image button on the toolbar. In the dialog, upload a new image or choose one from your library. Once selected, it will be inserted at the cursor position in the editor. You might add alt text by editing the image block (depending on the editor’s capabilities, perhaps via a right-click or a side input)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Links and other embeds:"
        }), " Select text and click the link icon to add a hyperlink (enter the URL when prompted). For any custom embeds (if supported, e.g., a YouTube video), use the respective toolbar option and follow the prompt."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Publish:"
        }), " If you’re ready to go live, toggle the “Publish this post” option. If you just want to save a draft, leave it unchecked. Click the ", _jsx(_components.strong, {
          children: "Save"
        }), " button."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Revisions:"
        }), " After saving, you can continue editing if needed. If it was published, you can also unpublish (depending on if we built that feature – likely by toggling off publish and saving again)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "View on Site:"
        }), " Once published, go to the public blog (usually ", _jsx(_components.code, {
          children: "/blog/[slug]"
        }), "). You should see your new post with all the formatting and images in place. If it doesn’t show up immediately, there might be a slight delay due to caching (or you may need to ensure the site revalidated as described above)."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "The workflow is designed to be similar to familiar blog CMS experiences (like WordPress or Sanity Studio), but all within our Next.js app."
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
      id: "appendix-component-responsibilities",
      children: _jsx(_components.a, {
        className: "anchor-link",
        href: "#appendix-component-responsibilities",
        children: "Appendix: Component Responsibilities"
      })
    }), "\n", _jsx(_components.p, {
      children: "To summarize, here are the key components/modules and their roles in this Portable Text blogging system:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "BlogPostForm (component):"
        }), " The primary form used in admin create/edit pages. It gathers all post fields (metadata and content) and handles form submission via actions or mutations."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "RichTextEditor (component):"
        }), " The portable text editor UI used inside the form for the content field. Built with Tiptap, this encapsulates the editor instance and toolbar logic."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "MediaSelector (component):"
        }), " A dialog for inserting media. It contains the Tabs for “Upload” vs “Library” and uses the ImageUploader and EnhancedMediaCatalog."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "ImageUploader (component):"
        }), " Handles uploading a new image file from the user’s computer to the storage (S3). It shows a file picker, upload progress, and returns the uploaded file URL."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "EnhancedMediaCatalog (component):"
        }), " Displays existing media items (thumbnails with possibly name/size). It may allow selecting an item, deleting, or organizing files. “Enhanced” indicates it might have search/filter or pagination of media."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "StorageManager (utility module):"
        }), " An abstraction for all storage operations. For example, it might have methods like ", _jsx(_components.code, {
          children: "uploadImage(file)"
        }), ", ", _jsx(_components.code, {
          children: "listImages(folder)"
        }), ", ", _jsx(_components.code, {
          children: "getImageUrl(path, transformations)"
        }), ". This centralizes how we talk to S3 or our Lambdas. It likely wraps AWS SDK calls or AppSync mutations for media."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "BlogContent (component):"
        }), " Used on the public blog page, it takes a post record and decides how to render the content. In our case, it will call PortableTextRenderer for portable text content."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "PortableTextRenderer (component):"
        }), " As shown above, it defines the mapping for Portable Text to React elements. It’s a reusable renderer – you pass it the JSON content and it outputs a styled article."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "AppSync GraphQL API (backend):"
        }), " While not a component in code, it’s worth noting: the GraphQL schema and resolvers handle the data fetching/saving. For instance, a ", _jsx(_components.code, {
          children: "createPost"
        }), " mutation will take the input (including the JSON content, likely passed as a string or JSON object), and store it in DynamoDB. A ", _jsx(_components.code, {
          children: "getPost(slug)"
        }), " query will retrieve the item and return the JSON content (AppSync will serialize it as a JSON string in the JSON response, which our Next.js app then parses)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "AWS Amplify configuration:"
        }), " Also not a front-end component, but Amplify ties together the hosting and API. Amplify CLI or console was used to set up the Auth (for roles) and the AppSync API + DynamoDB. The Amplify Hosting (Gen 2) is used to deploy the Next.js app with SSR/ISR support."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Each of these pieces works in concert to provide a smooth content authoring and publishing experience entirely within our application stack."
    }), "\n", _jsxs(_components.p, {
      children: ["By following this guide, you can build a full-featured blog system that empowers content editors with rich text editing (backed by a structured JSON format) and delivers content to end users with reliable rendering and performance. ", _jsx(_components.a, {
        href: "https://tiptap.dev/docs/guides/output-json-html#:~:text=Editor",
        children: "tiptap.dev"
      }), " ", _jsx(_components.a, {
        href: "https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html#:~:text=",
        children: "docs.aws.amazon.com"
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}

Rich Text Publishing with Portable Text and ShadCN UI