Extend shadcn/ui Typeset to the live Plate editor

Wrap the editing surface in .typeset (editor content variants) and strip the
prose typography from the live *-node.tsx components, mirroring the read-only
static nodes, so Typeset owns typography/rhythm/colour in edit mode too.

Import typeset.css into the cmsui style bundle and make typeset.css UNLAYERED:
the cmsui editor bundles Tailwind preflight (h1-h6 { font-size: inherit }) into
the 'cmsui' cascade layer, declared last, which would beat an @layer components
variant. Unlayered rules win over every layer, so Typeset applies in both the
read-only renderer and the live editor.

Author: sneridagh

packages/plate/components/ui/block-list.tsx

@@ -42,11 +42,7 @@ function List(props: PlateElementProps) {
   const List = isOrderedList(props.element) ? 'ol' : 'ul';
 
   return (
-    <List
-      className="relative m-0 p-0"
-      style={{ listStyleType }}
-      start={listStart}
-    >
+    <List className="relative" style={{ listStyleType }} start={listStart}>
       {Marker && <Marker {...props} />}
       {Li ? <Li {...props} /> : <li>{props.children}</li>}
     </List>

packages/plate/components/ui/blockquote-node.tsx

@@ -2,12 +2,11 @@ import { type PlateElementProps, PlateElement } from 'platejs/react';
 
 import { BlockInnerContainer } from './block-inner-container';
 
+// Blockquote styling (border, padding, colour) is owned by shadcn/ui Typeset.
 export function BlockquoteElement(props: PlateElementProps) {
   return (
     <PlateElement as="blockquote" {...props}>
-      <BlockInnerContainer className="my-1 border-l-2 pl-6 italic">
-        {props.children}
-      </BlockInnerContainer>
+      <BlockInnerContainer>{props.children}</BlockInnerContainer>
     </PlateElement>
   );
 }

packages/plate/components/ui/code-block-node.tsx

@@ -30,7 +30,6 @@ export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
   return (
     <PlateElement
       className={`
-        py-1
         **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a]
         dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5]
         **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5]
@@ -57,10 +56,12 @@ export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
       {...props}
     >
       <BlockInnerContainer>
-        <div className="relative rounded-md bg-muted/50">
+        {/* The `pre` panel (background, padding, radius, mono font) is owned by
+            shadcn/ui Typeset. `relative` stays to anchor the edit-mode toolbar;
+            hljs token colours live on the PlateElement above. */}
+        <div className="relative">
           <pre
             className={`
-              overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal]
               [tab-size:2]
               print:break-inside-avoid
             `}

packages/plate/components/ui/code-node.tsx

@@ -2,13 +2,10 @@ import type { PlateLeafProps } from 'platejs/react';
 
 import { PlateLeaf } from 'platejs/react';
 
+// Inline code styling is owned by shadcn/ui Typeset (`.typeset :not(pre) > code`).
 export function CodeLeaf(props: PlateLeafProps) {
   return (
-    <PlateLeaf
-      {...props}
-      as="code"
-      className="rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap"
-    >
+    <PlateLeaf {...props} as="code">
       {props.children}
     </PlateLeaf>
   );

packages/plate/components/ui/editor.tsx

@@ -106,18 +106,18 @@ export const editorVariants = cva(
         `,
         comment: cn('rounded-none border-none bg-transparent text-sm'),
         default: `
-          size-full px-16 pt-4 pb-72 text-base
+          typeset size-full px-16 pt-4 pb-72 text-base
           sm:px-[max(64px,calc(50%-350px))]
         `,
         demo: `
-          size-full px-16 pt-4 pb-72 text-base
+          typeset size-full px-16 pt-4 pb-72 text-base
           sm:px-[max(64px,calc(50%-350px))]
         `,
         fullWidth: `
-          size-full px-16 pt-4 pb-72 text-base
+          typeset size-full px-16 pt-4 pb-72 text-base
           sm:px-24
         `,
-        block: 'px-6',
+        block: 'typeset px-6',
         none: '',
         select: `
           px-3 py-2 text-base

packages/plate/components/ui/heading-node.tsx

@@ -1,33 +1,19 @@
 import type { PlateElementProps } from 'platejs/react';
 
-import { type VariantProps, cva } from 'class-variance-authority';
 import { PlateElement } from 'platejs/react';
 
 import { BlockInnerContainer } from './block-inner-container';
 
-const headingVariants = cva('relative mb-1', {
-  variants: {
-    variant: {
-      h1: 'font-heading mt-[1.6em] pb-1 text-4xl font-bold',
-      h2: 'font-heading mt-[1.4em] pb-px text-2xl font-semibold tracking-tight',
-      h3: 'font-heading mt-[1em] pb-px text-xl font-semibold tracking-tight',
-      h4: 'font-heading mt-[0.75em] text-lg font-semibold tracking-tight',
-      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
-      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
-    },
-  },
-});
+type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
+// Heading typography (size, weight, rhythm) is owned by shadcn/ui Typeset —
+// see `styles/typeset.css`. The component only selects the semantic tag.
 export function HeadingElement({
   variant = 'h1',
   ...props
-}: PlateElementProps & VariantProps<typeof headingVariants>) {
+}: PlateElementProps & { variant?: HeadingVariant }) {
   return (
-    <PlateElement
-      as={variant!}
-      className={headingVariants({ variant })}
-      {...props}
-    >
+    <PlateElement as={variant} {...props}>
       <BlockInnerContainer>{props.children}</BlockInnerContainer>
     </PlateElement>
   );

packages/plate/components/ui/hr-node.tsx

@@ -16,10 +16,11 @@ export function HrElement(props: PlateElementProps) {
 
   return (
     <PlateElement {...props}>
-      <div className="py-6" contentEditable={false}>
+      <div contentEditable={false}>
+        {/* Divider visual (border, spacing) is owned by shadcn/ui Typeset;
+            only the edit-mode selection/cursor affordances remain here. */}
         <hr
           className={cn(
-            'h-0.5 rounded-sm border-none bg-muted bg-clip-content',
             selected && focused && 'ring-2 ring-ring ring-offset-2',
             !readOnly && 'cursor-pointer',
           )}

packages/plate/components/ui/link-node.tsx

@@ -18,8 +18,9 @@ export function LinkElement(props: PlateElementProps<TLinkElement>) {
     <PlateElement
       {...props}
       as="span"
+      // Link appearance (colour, underline) is owned by shadcn/ui Typeset;
+      // only the suggestion (track-changes) affordances remain here.
       className={cn(
-        'font-medium text-primary underline decoration-primary underline-offset-4',
         suggestionData?.type === 'remove' && 'bg-red-100 text-red-700',
         suggestionData?.type === 'insert' && 'bg-emerald-100 text-emerald-700',
       )}

packages/plate/components/ui/paragraph-node.tsx

@@ -3,11 +3,12 @@ import type { PlateElementProps } from 'platejs/react';
 import { PlateElement } from 'platejs/react';
 
 import { BlockInnerContainer } from './block-inner-container';
-import { cn } from '../../lib/utils';
 
+// Prose styling (spacing, colour) is owned by shadcn/ui Typeset — see
+// `styles/typeset.css` and the `.typeset` wrapper on the editor surface.
 export function ParagraphElement(props: PlateElementProps) {
   return (
-    <PlateElement {...props} className={cn('m-0 px-0 py-1')}>
+    <PlateElement {...props}>
       <BlockInnerContainer>{props.children}</BlockInnerContainer>
     </PlateElement>
   );

packages/plate/styles/cmsui.css

@@ -1,6 +1,10 @@
 /* Do not remove, it's necessary for the registry to detect Tailwind and load
 the styles for @plone/plate in the cmsui */
 
+/* shadcn/ui Typeset — styles the live editor content (the .typeset wrapper on
+   the editing surface). */
+@import './typeset.css';
+
 .block-inner-container {
   display: block;
   width: 100%;