blocks-dusted 0.1.1 → 0.1.3

package/templates/components/RichText/converter/componentConverter/blocks.tsx

@@ -0,0 +1,43 @@
+import type React from 'react'
+import type { SerializedBlockNode } from '@payloadcms/richtext-lexical'
+
+import { BannerBlock } from '@/blocks/Banner/Component'
+import { CodeBlock } from '@/blocks/Code/Component'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import type { CodeBlockProps } from '@/blocks/Code/Component'
+import type {
+  BannerBlock as BannerBlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
+
+type BlockConverter<T> = (props: { node?: SerializedBlockNode<T> }) => React.ReactNode
+
+const banner: BlockConverter<BannerBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return <BannerBlock className="col-start-2 mb-4" {...node.fields} />
+}
+
+const mediaBlock: BlockConverter<MediaBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return (
+    <MediaBlock
+      className="col-start-1 col-span-3"
+      imgClassName="m-0"
+      {...node.fields}
+      captionClassName="mx-auto max-w-[48rem]"
+      enableGutter={false}
+      disableInnerContainer={true}
+    />
+  )
+}
+
+const code: BlockConverter<CodeBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return <CodeBlock className="col-start-2" {...node.fields} />
+}
+
+export const blockConverters = {
+  banner,
+  mediaBlock,
+  code,
+}

package/templates/components/RichText/converter/componentConverter/types.ts

@@ -0,0 +1,11 @@
+import type { DefaultNodeTypes, SerializedBlockNode } from '@payloadcms/richtext-lexical'
+
+import type { CodeBlockProps } from '@/blocks/Code/Component'
+import type {
+  BannerBlock as BannerBlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
+
+export type RichTextEmbeddedBlock = BannerBlockProps | MediaBlockProps | CodeBlockProps
+
+export type NodeTypes = DefaultNodeTypes | SerializedBlockNode<RichTextEmbeddedBlock>

package/templates/components/RichText/converter/index.tsx

@@ -0,0 +1,18 @@
+import {
+  JSXConvertersFunction,
+  LinkJSXConverter,
+} from '@payloadcms/richtext-lexical/react'
+
+import { internalDocToHref } from '@/components/RichText/converter/internalLinks'
+import { textConverter } from '@/components/RichText/converter/textConverter'
+import { blockConverters } from '@/components/RichText/converter/componentConverter/blocks'
+import type { NodeTypes } from '@/components/RichText/converter/componentConverter/types'
+
+export type { NodeTypes } from '@/components/RichText/converter/componentConverter/types'
+
+export const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
+  ...defaultConverters,
+  ...LinkJSXConverter({ internalDocToHref }),
+  ...textConverter,
+  blocks: blockConverters,
+})

package/templates/components/RichText/converter/internalLinks.tsx

@@ -0,0 +1,45 @@
+import type { SerializedLinkNode } from '@payloadcms/richtext-lexical'
+
+type LinkedDocument = {
+  slug?: string | null
+  breadcrumbs?: Array<{
+    slug?: string | null
+    url?: string | null
+  }> | null
+}
+
+const pagePathFromDoc = (value: LinkedDocument): string => {
+  const crumbs = Array.isArray(value.breadcrumbs) ? value.breadcrumbs : []
+  const lastCrumb = crumbs[crumbs.length - 1]
+
+  if (typeof lastCrumb?.url === 'string' && lastCrumb.url) return lastCrumb.url
+
+  const segments = crumbs
+    .map((crumb) => (typeof crumb?.slug === 'string' ? crumb.slug : ''))
+    .filter(Boolean)
+
+  if (segments.length > 0) return `/${segments.join('/')}`
+
+  const slug = typeof value.slug === 'string' ? value.slug : ''
+  if (!slug || slug === 'home') return '/'
+  return `/${slug.replace(/^\/+/, '')}`
+}
+
+export const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
+  const doc = linkNode.fields.doc
+  const relationTo = doc?.relationTo
+  const value = doc?.value
+
+  if (!relationTo || typeof value !== 'object' || value === null) return '#'
+
+  switch (relationTo) {
+    case 'pages':
+      return pagePathFromDoc(value as LinkedDocument)
+    case 'posts': {
+      const slug = (value as LinkedDocument).slug
+      return typeof slug === 'string' && slug ? `/posts/${slug}` : '#'
+    }
+    default:
+      return '#'
+  }
+}

package/templates/components/RichText/converter/textConverter.tsx

@@ -0,0 +1,27 @@
+import type React from 'react'
+import type { SerializedTextNode } from '@payloadcms/richtext-lexical'
+import type { JSXConverters } from '@payloadcms/richtext-lexical/react'
+
+const IS_BOLD = 1
+const IS_ITALIC = 2
+const IS_STRIKETHROUGH = 4
+const IS_UNDERLINE = 8
+const IS_CODE = 16
+const IS_SUBSCRIPT = 32
+const IS_SUPERSCRIPT = 64
+
+export const textConverter: JSXConverters<SerializedTextNode> = {
+  text: ({ node }) => {
+    let output: React.ReactNode = node.text
+
+    if (node.format & IS_BOLD) output = <strong>{output}</strong>
+    if (node.format & IS_ITALIC) output = <em>{output}</em>
+    if (node.format & IS_STRIKETHROUGH) output = <s>{output}</s>
+    if (node.format & IS_UNDERLINE) output = <u>{output}</u>
+    if (node.format & IS_CODE) output = <code>{output}</code>
+    if (node.format & IS_SUBSCRIPT) output = <sub>{output}</sub>
+    if (node.format & IS_SUPERSCRIPT) output = <sup>{output}</sup>
+
+    return output
+  },
+}

package/templates/components/RichText/index.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+import { type DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+import { RichText as ConvertRichText } from '@payloadcms/richtext-lexical/react'
+
+import { jsxConverters } from '@/components/RichText/converter'
+import { cn } from '@/utilities/ui'
+
+type Props = {
+  data?: DefaultTypedEditorState | null
+  enableGutter?: boolean
+  enableProse?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+export default function RichText(props: Props) {
+  const { className, enableProse = true, enableGutter = true, data, ...rest } = props
+
+  if (!data) return null
+
+  return (
+    <ConvertRichText
+      converters={jsxConverters}
+      data={data}
+      className={cn(
+        'payload-richtext',
+        {
+          container: enableGutter,
+          'max-w-none': !enableGutter,
+          'mx-auto prose md:prose-md dark:prose-invert': enableProse,
+        },
+        className,
+      )}
+      {...rest}
+    />
+  )
+}

package/templates/components/RichText/manifest.json

@@ -0,0 +1,80 @@
+{
+    "type":  "component",
+    "name":  "RichText",
+    "label":  "Payload RichText Dusted Standard",
+    "slug":  "RichText",
+    "version":  "0.0.1",
+    "source":  {
+                   "defaultPath":  "src/components/RichText/index.tsx",
+                   "referencePath":  "Raw Dusted Blocks/dusted-src (to add into CLI)/src/components/RichText"
+               },
+    "files":  [
+                  {
+                      "from":  "index.tsx",
+                      "to":  "src/components/RichText/index.tsx"
+                  },
+                  {
+                      "from":  "converter/index.tsx",
+                      "to":  "src/components/RichText/converter/index.tsx"
+                  },
+                  {
+                      "from":  "converter/internalLinks.tsx",
+                      "to":  "src/components/RichText/converter/internalLinks.tsx"
+                  },
+                  {
+                      "from":  "converter/textConverter.tsx",
+                      "to":  "src/components/RichText/converter/textConverter.tsx"
+                  },
+                  {
+                      "from":  "converter/componentConverter/blocks.tsx",
+                      "to":  "src/components/RichText/converter/componentConverter/blocks.tsx"
+                  },
+                  {
+                      "from":  "converter/componentConverter/types.ts",
+                      "to":  "src/components/RichText/converter/componentConverter/types.ts"
+                  }
+              ],
+    "dependencies":  [
+                         {
+                             "name":  "@payloadcms/richtext-lexical"
+                         }
+                     ],
+    "requiredProjectFiles":  [
+                                 {
+                                     "path":  "src/utilities/ui.ts",
+                                     "reason":  "RichText uses cn from @/utilities/ui."
+                                 },
+                                 {
+                                     "path":  "src/blocks/Banner/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for banner."
+                                 },
+                                 {
+                                     "path":  "src/blocks/Code/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for code."
+                                 },
+                                 {
+                                     "path":  "src/blocks/MediaBlock/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for mediaBlock."
+                                 }
+                             ],
+    "optionalProjectFiles":  [
+                                 {
+                                     "path":  "src/collections/Posts/index.ts",
+                                     "reason":  "Inspect RichText editor features and embedded BlocksFeature configuration before installing."
+                                 }
+                             ],
+    "manual":  [
+                   "The existing src/components/RichText folder is backed up before installation; review the backup and copy any project-specific behaviour missing from the newly installed RichText structure.",
+                   "Install this component only after inspecting the target project\u0027s RichText editor configuration.",
+                   "This default template maps only the Payload starter embedded RichText blocks: banner, code, and mediaBlock.",
+                   "Add cta or other block mappings only if the target RichText field\u0027s BlocksFeature actually enables those blocks.",
+                   "Keep internal link routes aligned with the target project\u0027s real pages/posts routes.",
+                   "Run the target project\u0027s Payload type-generation command if generated types are stale.",
+                   "Run formatter, linter, TypeScript, and build checks after installation."
+               ],
+    "notes":  [
+                  "This is a Layer 2 reusable core component template, not a Payload block template.",
+                  "Do not copy reference-project preview-link-card, custom media, custom color state, or non-starter block mappings into default Payload installs."
+              ],
+    "backupExistingDestination":  true
+}