Skip to content

Commit

Permalink
feat(core): add default markdown behaviors to PTE
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
christianhg committed Jan 3, 2025
1 parent 1d25b3c commit 102f290
Showing 1 changed file with 16 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -384,6 +385,21 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
<PortableTextMemberItemsProvider memberItems={portableTextMemberItems}>
<EditorProvider
initialConfig={{
behaviors: [
...coreBehaviors,
...createMarkdownBehaviors({
defaultStyle: ({schema}) =>
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,
Expand Down

0 comments on commit 102f290

Please sign in to comment.