feat(selectors): add getActiveStyle and isActiveStyle

apps/playground/src/portable-text-toolbar.tsx

@@ -9,7 +9,7 @@ import {
 } from '@portabletext/editor'
 import * as selectors from '@portabletext/editor/selectors'
 import {SquareDashedMousePointerIcon} from 'lucide-react'
-import {isValidElement, useMemo} from 'react'
+import {isValidElement} from 'react'
 import {Group, TooltipTrigger} from 'react-aria-components'
 import {isValidElementType} from 'react-is'
 import {Button} from './components/button'
@@ -29,12 +29,7 @@ export function PortableTextToolbar(props: {
 
   return (
     <Toolbar aria-label="Text formatting">
-      <StyleSelector
-        schemaDefinition={props.schemaDefinition}
-        editor={editor}
-        editorInstance={editorInstance}
-        selection={selection}
-      />
+      <StyleSelector schemaDefinition={props.schemaDefinition} />
       <Separator orientation="vertical" />
       <Group aria-label="Decorators" className="contents">
         {props.schemaDefinition.decorators?.map((decorator) => (
@@ -98,32 +93,19 @@ export function PortableTextToolbar(props: {
   )
 }
 
-function StyleSelector(props: {
-  schemaDefinition: SchemaDefinition
-  editor: Editor
-  editorInstance: PortableTextEditor
-  selection: EditorSelection
-}) {
-  const focusBlock = PortableTextEditor.focusBlock(props.editorInstance)
-  const activeStyle = useMemo(
-    () =>
-      focusBlock
-        ? (props.schemaDefinition.styles.find((style) =>
-            PortableTextEditor.hasBlockStyle(props.editorInstance, style.name),
-          )?.name ?? null)
-        : null,
-    [props.editorInstance, focusBlock, props.schemaDefinition],
-  )
+function StyleSelector(props: {schemaDefinition: SchemaDefinition}) {
+  const editor = useEditor()
+  const activeStyle = useEditorSelector(editor, selectors.getActiveStyle)
 
   return (
     <Select
       placeholder="Select style"
       aria-label="Style"
-      selectedKey={activeStyle}
+      selectedKey={activeStyle ?? null}
       onSelectionChange={(style) => {
         if (typeof style === 'string') {
-          props.editor.send({type: 'style.toggle', style})
-          props.editor.send({type: 'focus'})
+          editor.send({type: 'style.toggle', style})
+          editor.send({type: 'focus'})
         }
       }}
     >

packages/editor/src/selectors/index.ts

@@ -8,8 +8,10 @@ export type {
 
 export type {EditorSchema} from '../editor/define-schema'
 export {getActiveListItem} from './selector.get-active-list-item'
+export {getActiveStyle} from './selector.get-active-style'
 export {getSelectedSpans} from './selector.get-selected-spans'
 export {getSelectionText} from './selector.get-selection-text'
 export {getBlockTextBefore} from './selector.get-text-before'
+export {isActiveStyle} from './selector.is-active-style'
 export {isDecoratorActive} from './selector.is-decorator-active'
 export * from './selectors'

packages/editor/src/selectors/selector.get-active-style.ts

@@ -0,0 +1,37 @@
+import type {PortableTextTextBlock} from '@sanity/types'
+import {createGuards} from '../behavior-actions/behavior.guards'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getSelectedBlocks} from './selectors'
+
+/**
+ * @alpha
+ */
+export const getActiveStyle: EditorSelector<PortableTextTextBlock['style']> = ({
+  context,
+}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const guards = createGuards(context)
+  const selectedBlocks = getSelectedBlocks({context}).map((block) => block.node)
+  const selectedTextBlocks = selectedBlocks.filter(guards.isTextBlock)
+
+  const firstTextBlock = selectedTextBlocks.at(0)
+
+  if (!firstTextBlock) {
+    return undefined
+  }
+
+  const firstStyle = firstTextBlock.style
+
+  if (!firstStyle) {
+    return undefined
+  }
+
+  if (selectedTextBlocks.every((block) => block.style === firstStyle)) {
+    return firstStyle
+  }
+
+  return undefined
+}

packages/editor/src/selectors/selector.is-active-style.ts

@@ -0,0 +1,13 @@
+import type {EditorSelector} from '../editor/editor-selector'
+import {getActiveStyle} from './selector.get-active-style'
+
+/**
+ * @alpha
+ */
+export function isActiveStyle(style: string): EditorSelector<boolean> {
+  return (snapshot) => {
+    const activeStyle = getActiveStyle(snapshot)
+
+    return activeStyle === style
+  }
+}