fix(pte): tools are active only when all blocks use the tool

packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx

@@ -181,6 +181,12 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static activeAnnotations = (editor: PortableTextEditor): PortableTextObject[] => {
     return editor && editor.editable ? editor.editable.activeAnnotations() : []
   }
+  static isAnnotationActive = (
+    editor: PortableTextEditor,
+    annotationType: PortableTextObject['_type'],
+  ): boolean => {
+    return editor && editor.editable ? editor.editable.isAnnotationActive(annotationType) : false
+  }
   static addAnnotation = (
     editor: PortableTextEditor,
     type: ObjectSchemaType,

packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextLists.test.tsx

@@ -0,0 +1,65 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
+import {PortableTextEditor} from '../../PortableTextEditor'
+
+describe('plugin:withPortableTextLists', () => {
+  it('should return active list styles that cover the whole selection', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'a',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: 'a1',
+            _type: 'span',
+            marks: [],
+            text: '12',
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+      {
+        _key: 'b',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: '2',
+            _type: 'span',
+            marks: [],
+            text: '34',
+            level: 1,
+            listItem: 'bullet',
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ]
+    const onChange = jest.fn()
+    await waitFor(() => {
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+    })
+    const editor = editorRef.current!
+    expect(editor).toBeDefined()
+    await waitFor(() => {
+      PortableTextEditor.focus(editor)
+      PortableTextEditor.select(editor, {
+        focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+        anchor: {path: [{_key: '2'}, 'children', {_key: '2'}], offset: 2},
+      })
+      expect(PortableTextEditor.hasListStyle(editor, 'bullet')).toBe(false)
+    })
+  })
+})

packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -360,23 +360,25 @@ describe('plugin:withPortableTextMarksModel', () => {
           })
           PortableTextEditor.toggleMark(editor, 'bold')
           expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        Array [
-          Object {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "a1",
-                "_type": "span",
-                "marks": Array [],
-                "text": "1234",
-              },
-            ],
-            "markDefs": Array [],
-            "style": "normal",
-          },
-        ]
-      `)
+Array [
+  Object {
+    "_key": "a",
+    "_type": "myTestBlockType",
+    "children": Array [
+      Object {
+        "_key": "a1",
+        "_type": "span",
+        "marks": Array [
+          "bold",
+        ],
+        "text": "1234",
+      },
+    ],
+    "markDefs": Array [],
+    "style": "normal",
+  },
+]
+`)
         }
       })
     })
@@ -765,7 +767,110 @@ describe('plugin:withPortableTextMarksModel', () => {
       expect(currentSelectionObject === nextSelectionObject).toBe(false)
       expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: nextSelectionObject})
     })
+
+    it('should return active marks that cover the whole selection', async () => {
+      const editorRef: RefObject<PortableTextEditor> = createRef()
+      const initialValue = [
+        {
+          _key: 'a',
+          _type: 'myTestBlockType',
+          children: [
+            {
+              _key: 'a1',
+              _type: 'span',
+              marks: ['bold'],
+              text: '12',
+            },
+            {
+              _key: '2',
+              _type: 'span',
+              marks: [],
+              text: '34',
+            },
+          ],
+          markDefs: [{_key: 'bold', _type: 'strong'}],
+          style: 'normal',
+        },
+      ]
+      const onChange = jest.fn()
+      await waitFor(() => {
+        render(
+          <PortableTextEditorTester
+            onChange={onChange}
+            ref={editorRef}
+            schemaType={schemaType}
+            value={initialValue}
+          />,
+        )
+      })
+      const editor = editorRef.current!
+      expect(editor).toBeDefined()
+      await waitFor(() => {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, {
+          focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: '2'}], offset: 2},
+        })
+        expect(PortableTextEditor.isMarkActive(editor, 'bold')).toBe(false)
+        PortableTextEditor.toggleMark(editor, 'bold')
+        expect(PortableTextEditor.isMarkActive(editor, 'bold')).toBe(true)
+      })
+    })
+
+    it('should return active annotation types that cover the whole selection', async () => {
+      const editorRef: RefObject<PortableTextEditor> = createRef()
+      const initialValue = [
+        {
+          _key: 'a',
+          _type: 'myTestBlockType',
+          children: [
+            {
+              _key: 'a1',
+              _type: 'span',
+              marks: ['bab319ad3a9d'],
+              text: '12',
+            },
+            {
+              _key: '2',
+              _type: 'span',
+              marks: [],
+              text: '34',
+            },
+          ],
+          markDefs: [
+            {
+              _key: 'bab319ad3a9d',
+              _type: 'link',
+              href: 'http://www.123.com',
+            },
+          ],
+          style: 'normal',
+        },
+      ]
+      const onChange = jest.fn()
+      await waitFor(() => {
+        render(
+          <PortableTextEditorTester
+            onChange={onChange}
+            ref={editorRef}
+            schemaType={schemaType}
+            value={initialValue}
+          />,
+        )
+      })
+      const editor = editorRef.current!
+      expect(editor).toBeDefined()
+      await waitFor(() => {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, {
+          focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: '2'}], offset: 2},
+        })
+        expect(PortableTextEditor.isAnnotationActive(editor, 'link')).toBe(false)
+      })
+    })
   })
+
   describe('removing annotations', () => {
     it('removes the markDefs if the annotation is no longer in use', async () => {
       const editorRef: RefObject<PortableTextEditor> = createRef()

packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts

@@ -1,4 +1,5 @@
 import {
+  isPortableTextSpan,
   type ObjectSchemaType,
   type Path,
   type PortableTextBlock,
@@ -295,6 +296,47 @@ export function createWithEditableAPI(
           return []
         }
       },
+      isAnnotationActive: (annotationType: PortableTextObject['_type']): boolean => {
+        if (!editor.selection || editor.selection.focus.path.length < 2) {
+          return false
+        }
+
+        try {
+          const spans = [
+            ...Editor.nodes(editor, {
+              at: editor.selection,
+              match: (node) => Text.isText(node),
+            }),
+          ]
+
+          if (
+            spans.some(
+              ([span]) => !isPortableTextSpan(span) || !span.marks || span.marks?.length === 0,
+            )
+          )
+            return false
+
+          const selectionMarkDefs = spans.reduce((accMarkDefs, [, path]) => {
+            const [block] = Editor.node(editor, path, {depth: 1})
+            if (editor.isTextBlock(block) && block.markDefs) {
+              return [...accMarkDefs, ...block.markDefs]
+            }
+            return accMarkDefs
+          }, [] as PortableTextObject[])
+
+          return spans.every(([span]) => {
+            if (!isPortableTextSpan(span)) return false
+
+            const spanMarkDefs = span.marks?.map(
+              (markKey) => selectionMarkDefs.find((def) => def?._key === markKey)?._type,
+            )
+
+            return spanMarkDefs?.includes(annotationType)
+          })
+        } catch (err) {
+          return false
+        }
+      },
       addAnnotation: (
         type: ObjectSchemaType,
         value?: {[prop: string]: unknown},

packages/@sanity/portable-text-editor/src/editor/plugins/createWithPortableTextLists.ts

@@ -143,11 +143,14 @@ export function createWithPortableTextLists(types: PortableTextMemberSchemaTypes
       const selectedBlocks = [
         ...Editor.nodes(editor, {
           at: editor.selection,
-          match: (node) => editor.isListBlock(node) && node.listItem === listStyle,
+          match: (node) => editor.isTextBlock(node),
         }),
       ]
+
       if (selectedBlocks.length > 0) {
-        return true
+        return selectedBlocks.every(
+          ([node]) => editor.isListBlock(node) && node.listItem === listStyle,
+        )
       }
       return false
     }

packages/@sanity/portable-text-editor/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -5,18 +5,9 @@
  *
  */
 
-import {flatten, isEqual, uniq} from 'lodash'
+import {isEqual, uniq} from 'lodash'
 import {type Subject} from 'rxjs'
-import {
-  type Descendant,
-  Editor,
-  Element,
-  type NodeEntry,
-  Path,
-  Range,
-  Text,
-  Transforms,
-} from 'slate'
+import {type Descendant, Editor, Element, Path, Range, Text, Transforms} from 'slate'
 
 import {
   type EditorChange,
@@ -250,9 +241,8 @@ export function createWithPortableTextMarkModel(
           const splitTextNodes = [
             ...Editor.nodes(editor, {at: editor.selection, match: Text.isText}),
           ]
-          const shouldRemoveMark = flatten(
-            splitTextNodes.map((item) => item[0]).map((node) => node.marks),
-          ).includes(mark)
+          const shouldRemoveMark = splitTextNodes.every((node) => node[0].marks?.includes(mark))
+
           if (shouldRemoveMark) {
             editor.removeMark(mark)
             return editor
@@ -345,19 +335,24 @@ export function createWithPortableTextMarkModel(
       if (!editor.selection) {
         return false
       }
-      let existingMarks =
+
+      const selectedNodes = Array.from(
+        Editor.nodes(editor, {match: Text.isText, at: editor.selection}),
+      )
+
+      if (Range.isExpanded(editor.selection)) {
+        return selectedNodes.every((n) => {
+          const [node] = n
+
+          return node.marks?.includes(mark)
+        })
+      }
+
+      return (
         {
           ...(Editor.marks(editor) || {}),
         }.marks || []
-      if (Range.isExpanded(editor.selection)) {
-        Array.from(Editor.nodes(editor, {match: Text.isText, at: editor.selection})).forEach(
-          (n) => {
-            const [node] = n as NodeEntry<Text>
-            existingMarks = uniq([...existingMarks, ...((node.marks as string[]) || [])])
-          },
-        )
-      }
-      return existingMarks.includes(mark)
+      ).includes(mark)
     }
 
     // Custom editor function to toggle a mark

packages/@sanity/portable-text-editor/src/types/editor.ts

@@ -39,6 +39,7 @@ export interface EditableAPIDeleteOptions {
 /** @beta */
 export interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
+  isAnnotationActive: (annotationType: PortableTextObject['_type']) => boolean
   addAnnotation: (
     type: ObjectSchemaType,
     value?: {[prop: string]: unknown},

packages/sanity/src/core/form/inputs/PortableText/toolbar/hooks.ts

@@ -77,14 +77,10 @@ export function useActiveActionKeys({
   return useUnique(
     useMemo(
       () => {
-        const activeAnnotationKeys = PortableTextEditor.activeAnnotations(editor).map(
-          (a) => a._type,
-        )
-
         return actions
           .filter((a) => {
             if (a.type === 'annotation') {
-              return activeAnnotationKeys.includes(a.key)
+              return PortableTextEditor.isAnnotationActive(editor, a.key)
             }
 
             if (a.type === 'listStyle') {