From 102f290099abe5a6c13da29f1f15c9590f8fc086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Hamburger=20Gr=C3=B8ngaard?= Date: Fri, 3 Jan 2025 14:22:55 +0100 Subject: [PATCH] feat(core): add default markdown behaviors to PTE This change extends the core behaviors of PTE with default markdown behaviors for a more pleasant writing experience. This allows you to: 1. Use `#` characters to create headings 2. Use `>` to create a blockquote 3. Use `Backspace` at the beginning of block to clear its style 4. Use `-`, `*`, `_` or `1.` to initiate a list This is achieved by providing the `behaviors` configuration for PTE where the `coreBehaviors` are first spread into the array (to preserve core behaviors) and the additional markdown behaviors are added afterwards. The markdown behaviors require us to define what styles to use, and here we just default to the most common names for these. Later, we can figure out how to allow you to configure markdown behaviors through the Schema, but for now these sensible defaults are hard-coded. The only downsides here is that: 1. You can't opt out of markdown behaviors if you for some reason don't like them 2. You can't change the configuration if for example your lists are named something else 3. Things could potentially get confusing if you use unconventional names for styles and lists, for example if `h1` means something completely different in your context. These are downsides we'll have to live with for now. --- .../inputs/PortableText/PortableTextInput.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx b/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx index d048caea4c9..85e8191e97a 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx @@ -14,6 +14,7 @@ import { useEditor, usePortableTextEditor, } from '@portabletext/editor' +import {coreBehaviors, createMarkdownBehaviors} from '@portabletext/editor/behaviors' import {useTelemetry} from '@sanity/telemetry/react' import {isKeySegment, type Path, type PortableTextBlock} from '@sanity/types' import {Box, Flex, Text, useToast} from '@sanity/ui' @@ -384,6 +385,21 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode { + schema.styles.find((style) => style.value === 'normal')?.value, + blockquoteStyle: ({schema}) => + schema.styles.find((style) => style.value === 'blockquote')?.value, + headingStyle: ({schema, level}) => + schema.styles.find((style) => style.value === `h${level}`)?.value, + orderedListStyle: ({schema}) => + schema.lists.find((list) => list.value === 'number')?.value, + unorderedListStyle: ({schema}) => + schema.lists.find((list) => list.value === 'bullet')?.value, + }), + ], initialValue: value, readOnly: readOnly || !ready, keyGenerator,