Document editor main content (#546)

.changeset/witty-bats-listen.md

@@ -0,0 +1,13 @@
+---
+'@example/next-app': patch
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Optimise the editor appearance when `entryLayout="content"` for a more focused experience.
+
+Component library:
+
+- Update the antialiasing behaviour everywhere 
+- New `Prose` component from "@keystar/ui/typography" package.
+- Improve `Field` implementation and types

design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx

@@ -50,8 +50,8 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
               fontSize: tokenSchema.typography.text.regular.size,
               fontFamily: tokenSchema.typography.fontFamily.base,
               fontWeight: tokenSchema.typography.fontWeight.medium,
-              WebkitFontSmoothing: 'antialiased',
-              MozOsxFontSmoothing: 'grayscale',
+              MozOsxFontSmoothing: 'auto',
+              WebkitFontSmoothing: 'auto',
 
               '&[data-size=small]': {
                 fontSize: tokenSchema.typography.text.small.size,

design-system/pkg/src/date-time/InputSegment.tsx

@@ -67,8 +67,8 @@ function EditableSegment({ segment, state }: InputSegmentProps) {
         fontWeight: tokenSchema.typography.fontWeight.regular,
         lineHeight: tokenSchema.typography.lineheight.small,
         whiteSpace: 'nowrap',
-        WebkitFontSmoothing: 'antialiased',
-        MozOsxFontSmoothing: 'grayscale',
+        MozOsxFontSmoothing: 'auto',
+        WebkitFontSmoothing: 'auto',
 
         '[dir=ltr] &': { textAlign: 'right' },
         '[dir=rtl] &': { textAlign: 'left' },

design-system/pkg/src/field/Field.tsx

@@ -19,6 +19,7 @@ export const Field = (props: InternalFieldProps) => {
     isReadOnly,
     isRequired,
     label,
+    ...otherProps
   } = props;
   let { labelProps, fieldProps, descriptionProps, errorMessageProps } =
     useField(props);
@@ -40,6 +41,7 @@ export const Field = (props: InternalFieldProps) => {
       descriptionProps={descriptionProps}
       errorMessage={errorMessage}
       errorMessageProps={errorMessageProps}
+      {...otherProps}
     >
       {children(renderProps)}
     </FieldPrimitive>

design-system/pkg/src/field/FieldPrimitive.tsx

@@ -59,6 +59,7 @@ export const FieldPrimitive: ForwardRefExoticComponent<
       ref={forwardedRef}
       direction="column"
       gap="medium"
+      minWidth={0}
       UNSAFE_className={styleProps.className}
       UNSAFE_style={styleProps.style}
     >

design-system/pkg/src/field/types.tsx

@@ -9,7 +9,15 @@ import { ReactElement, ReactNode } from 'react';
 
 import { BaseStyleProps } from '@keystar/ui/style';
 
-export type FieldRenderProp = (props: LabelAria['fieldProps']) => ReactElement;
+type FieldRenderInputProps = LabelAria['fieldProps'] & {
+  disabled?: boolean;
+  readOnly?: boolean;
+  'aria-required'?: boolean;
+  'aria-invalid'?: boolean;
+};
+export type FieldRenderProp = (
+  inputProps: FieldRenderInputProps
+) => ReactElement;
 
 export type FieldProps = {
   /**

design-system/pkg/src/text-field/TextFieldPrimitive.tsx

@@ -189,8 +189,8 @@ function useTextFieldStyles() {
     textOverflow: 'ellipsis',
     verticalAlign: 'top',
     width: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
+    MozOsxFontSmoothing: 'auto',
+    WebkitFontSmoothing: 'auto',
 
     '::placeholder': {
       color: tokenSchema.color.foreground.neutralTertiary,

design-system/pkg/src/typography/Prose.tsx

@@ -0,0 +1,191 @@
+import { ReactNode } from 'react';
+
+import {
+  BaseStyleProps,
+  FontSizeText,
+  classNames,
+  css,
+  filterStyleProps,
+  tokenSchema,
+  useStyleProps,
+} from '@keystar/ui/style';
+import { forwardRefWithAs } from '@keystar/ui/utils/ts';
+import { toDataAttributes } from '../utils';
+
+export type ProseProps = {
+  /** The content to render. */
+  children?: ReactNode;
+  /**
+   * The size of body text.
+   * @default 'medium'
+   */
+  size?: FontSizeText;
+} & BaseStyleProps;
+
+/** A typographic component that adds styles for rendering remote HTML content. */
+export const Prose = forwardRefWithAs<ProseProps, 'div'>((props, ref) => {
+  const { children, elementType: ElementType = 'div', ...otherProps } = props;
+  const styleProps = useProseStyles(otherProps);
+
+  return (
+    <ElementType ref={ref} {...filterStyleProps(otherProps)} {...styleProps}>
+      {children}
+    </ElementType>
+  );
+});
+
+function useProseStyles(props: ProseProps) {
+  const { size = 'medium', ...otherProps } = props;
+  const styleProps = useStyleProps(otherProps);
+
+  return {
+    ...styleProps,
+    ...toDataAttributes({ size }),
+    className: classNames(
+      'ksv:Prose',
+      css({
+        color: tokenSchema.color.foreground.neutral,
+        fontFamily: tokenSchema.typography.fontFamily.base,
+        height: '100%',
+        maxWidth: '100%',
+        minHeight: 0,
+        minWidth: 0,
+        MozOsxFontSmoothing: 'auto',
+        WebkitFontSmoothing: 'auto',
+
+        '&[data-size="small"]': {
+          fontSize: tokenSchema.typography.text.small.size,
+          lineHeight: 1.6,
+        },
+        '&[data-size="regular"]': {
+          fontSize: tokenSchema.typography.text.regular.size,
+          lineHeight: 1.5,
+        },
+        '&[data-size="medium"]': {
+          fontSize: tokenSchema.typography.text.medium.size,
+          lineHeight: 1.5,
+        },
+        '&[data-size="large"]': {
+          fontSize: tokenSchema.typography.text.large.size,
+          lineHeight: 1.4,
+        },
+
+        // Elements
+        // ---------------------------------------------------------------------
+
+        '& :is(blockquote, p, pre, ol, ul)': {
+          marginBlock: '1em',
+
+          ':first-child': { marginTop: 0 },
+          ':last-child': { marginBottom: 0 },
+        },
+        'ol ol, ul ul, ol ul, ul ol': {
+          marginBlock: 0,
+        },
+        a: {
+          color: tokenSchema.color.foreground.accent,
+        },
+        blockquote: {
+          borderInlineStart: `${tokenSchema.size.border.large} solid ${tokenSchema.color.border.neutral}`,
+          marginInline: '1em',
+          paddingInlineStart: '1em',
+        },
+        hr: {
+          marginBlock: '1.5em',
+          backgroundColor: tokenSchema.color.alias.borderIdle,
+          border: 0,
+          height: tokenSchema.size.border.medium,
+        },
+        img: {
+          height: 'auto',
+          maxWidth: '100%',
+        },
+
+        // code block
+        pre: {
+          backgroundColor: tokenSchema.color.background.surface,
+          borderRadius: tokenSchema.size.radius.medium,
+          color: tokenSchema.color.foreground.neutralEmphasis,
+          fontFamily: tokenSchema.typography.fontFamily.code,
+          fontSize: '0.85em',
+          lineHeight: tokenSchema.typography.lineheight.medium,
+          minWidth: 0,
+          maxWidth: '100%',
+          overflow: 'auto',
+          padding: tokenSchema.size.space.medium,
+        },
+        'pre > code': {
+          fontFamily: 'inherit',
+        },
+        // inline code
+        '& :not(pre) > code': {
+          backgroundColor: tokenSchema.color.background.accent,
+          borderRadius: tokenSchema.size.radius.small,
+          color: tokenSchema.color.foreground.neutralEmphasis,
+          display: 'inline-block',
+          fontSize: '0.85em',
+          fontFamily: tokenSchema.typography.fontFamily.code,
+          paddingInline: tokenSchema.size.space.small,
+        },
+
+        // Headings
+        // ---------------------------------------------------------------------
+
+        'h1, h2, h3, h4, h5, h6': {
+          color: tokenSchema.color.foreground.neutralEmphasis,
+          fontWeight: tokenSchema.typography.fontWeight.semibold,
+          lineHeight: 1.25,
+          marginTop: '1.5em',
+          marginBottom: '0.67em',
+
+          ':first-child': { marginTop: 0 },
+          ':last-child': { marginBottom: 0 },
+        },
+        h1: {
+          fontSize: '2em',
+          fontWeight: tokenSchema.typography.fontWeight.bold,
+        },
+        h2: {
+          fontSize: '1.5em',
+        },
+        h3: {
+          fontSize: '1.25em',
+          fontWeight: tokenSchema.typography.fontWeight.bold,
+        },
+        h4: {
+          fontSize: '1.1em',
+        },
+        h5: {
+          fontSize: '1em',
+          fontWeight: tokenSchema.typography.fontWeight.bold,
+        },
+        h6: {
+          fontSize: '0.9em',
+        },
+        ...getListStyles(),
+      }),
+      styleProps.className
+    ),
+  };
+}
+
+function getListStyles() {
+  let styles: any = {};
+
+  let listDepth = 10;
+  const orderedListStyles = ['lower-roman', 'decimal', 'lower-alpha'];
+  const unorderedListStyles = ['square', 'disc', 'circle'];
+
+  while (listDepth--) {
+    let arr = Array.from({ length: listDepth });
+    if (arr.length) {
+      styles[arr.map(() => `ol`).join(' ')] = {
+        listStyle: orderedListStyles[listDepth % 3],
+      };
+      styles[arr.map(() => `ul`).join(' ')] = {
+        listStyle: unorderedListStyles[listDepth % 3],
+      };
+    }
+  }
+  return styles;
+}

design-system/pkg/src/typography/index.ts

@@ -7,6 +7,7 @@ export { Text, textClassList, useTextStyles, useTextContext } from './text';
 export { Emoji } from './Emoji';
 export { Kbd } from './Kbd';
 export { Numeral } from './Numeral';
+export { Prose } from './Prose';
 
 // types
 export type { EmojiProps } from './Emoji';