@portabletext/editor 1.0.19 → 1.1.1

package/src/editor/plugins/createWithHotKeys.ts

@@ -1,16 +1,16 @@
-/* eslint-disable max-statements */
-/* eslint-disable complexity */
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
 import {isHotkey} from 'is-hotkey-esm'
-import {type KeyboardEvent} from 'react'
+import type {KeyboardEvent} from 'react'
 import {Editor, Node, Path, Range, Transforms} from 'slate'
-import {type ReactEditor} from 'slate-react'
-
-import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
-import {type HotkeyOptions} from '../../types/options'
-import {type SlateTextBlock, type VoidElement} from '../../types/slate'
+import type {ReactEditor} from 'slate-react'
+import type {
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
+import type {HotkeyOptions} from '../../types/options'
+import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('plugin:withHotKeys')
 
@@ -40,7 +40,6 @@ export function createWithHotkeys(
       // Wire up custom marks hotkeys
       Object.keys(activeHotkeys).forEach((cat) => {
         if (cat === 'marks') {
-          // eslint-disable-next-line guard-for-in
           for (const hotkey in activeHotkeys[cat]) {
             if (reservedHotkeys.includes(hotkey)) {
               throw new Error(`The hotkey ${hotkey} is reserved!`)
@@ -57,7 +56,6 @@ export function createWithHotkeys(
           }
         }
         if (cat === 'custom') {
-          // eslint-disable-next-line guard-for-in
           for (const hotkey in activeHotkeys[cat]) {
             if (reservedHotkeys.includes(hotkey)) {
               throw new Error(`The hotkey ${hotkey} is reserved!`)
@@ -77,22 +75,27 @@ export function createWithHotkeys(
       const isTab = isHotkey('tab', event.nativeEvent)
       const isShiftEnter = isHotkey('shift+enter', event.nativeEvent)
       const isShiftTab = isHotkey('shift+tab', event.nativeEvent)
-      const isBackspace = isHotkey('backspace', event.nativeEvent)
-      const isDelete = isHotkey('delete', event.nativeEvent)
       const isArrowDown = isHotkey('down', event.nativeEvent)
       const isArrowUp = isHotkey('up', event.nativeEvent)
 
       // Check if the user is in a void block, in that case, add an empty text block below if there is no next block
       if (isArrowDown && editor.selection) {
-        const focusBlock = Node.descendant(editor, editor.selection.focus.path.slice(0, 1)) as
-          | SlateTextBlock
-          | VoidElement
+        const focusBlock = Node.descendant(
+          editor,
+          editor.selection.focus.path.slice(0, 1),
+        ) as SlateTextBlock | VoidElement
 
         if (focusBlock && Editor.isVoid(editor, focusBlock)) {
           const nextPath = Path.next(editor.selection.focus.path.slice(0, 1))
           const nextBlock = Node.has(editor, nextPath)
           if (!nextBlock) {
-            Transforms.insertNodes(editor, editor.pteCreateEmptyBlock(), {at: nextPath})
+            Transforms.insertNodes(
+              editor,
+              editor.pteCreateTextBlock({decorators: []}),
+              {
+                at: nextPath,
+              },
+            )
             editor.onChange()
             return
           }
@@ -100,117 +103,20 @@ export function createWithHotkeys(
       }
       if (isArrowUp && editor.selection) {
         const isFirstBlock = editor.selection.focus.path[0] === 0
-        const focusBlock = Node.descendant(editor, editor.selection.focus.path.slice(0, 1)) as
-          | SlateTextBlock
-          | VoidElement
-
-        if (isFirstBlock && focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Transforms.insertNodes(editor, editor.pteCreateEmptyBlock(), {at: [0]})
-          Transforms.select(editor, {path: [0, 0], offset: 0})
-          editor.onChange()
-          return
-        }
-      }
-      if (
-        isBackspace &&
-        editor.selection &&
-        editor.selection.focus.path[0] === 0 &&
-        Range.isCollapsed(editor.selection)
-      ) {
-        // If the block is text and we have a next block below, remove the current block
-        const focusBlock = Node.descendant(editor, editor.selection.focus.path.slice(0, 1)) as
-          | SlateTextBlock
-          | VoidElement
-        const nextPath = Path.next(editor.selection.focus.path.slice(0, 1))
-        const nextBlock = Node.has(editor, nextPath)
-        const isTextBlock = isPortableTextTextBlock(focusBlock)
-        const isEmptyFocusBlock =
-          isTextBlock && focusBlock.children.length === 1 && focusBlock.children?.[0]?.text === ''
-
-        if (nextBlock && isTextBlock && isEmptyFocusBlock) {
-          // Remove current block
-          event.preventDefault()
-          event.stopPropagation()
-          Transforms.removeNodes(editor, {match: (n) => n === focusBlock})
-          editor.onChange()
-          return
-        }
-      }
-      // Disallow deleting void blocks by backspace from another line.
-      // Otherwise it's so easy to delete the void block above when trying to delete text on
-      // the line below or above
-      if (
-        isBackspace &&
-        editor.selection &&
-        editor.selection.focus.path[0] > 0 &&
-        Range.isCollapsed(editor.selection)
-      ) {
-        const prevPath = Path.previous(editor.selection.focus.path.slice(0, 1))
-        const prevBlock = Node.descendant(editor, prevPath) as SlateTextBlock | VoidElement
-        const focusBlock = Node.descendant(editor, editor.selection.focus.path.slice(0, 1))
-        if (
-          prevBlock &&
-          focusBlock &&
-          Editor.isVoid(editor, prevBlock) &&
-          editor.selection.focus.offset === 0
-        ) {
-          debug('Preventing deleting void block above')
-          event.preventDefault()
-          event.stopPropagation()
-
-          const isTextBlock = isPortableTextTextBlock(focusBlock)
-          const isEmptyFocusBlock =
-            isTextBlock && focusBlock.children.length === 1 && focusBlock.children?.[0]?.text === ''
-
-          // If this is a not an text block or it is empty, simply remove it
-          if (!isTextBlock || isEmptyFocusBlock) {
-            Transforms.removeNodes(editor, {match: (n) => n === focusBlock})
-            Transforms.select(editor, prevPath)
-
-            editor.onChange()
-            return
-          }
-
-          // If the focused block is a text node but it isn't empty, focus on the previous block
-          if (isTextBlock && !isEmptyFocusBlock) {
-            Transforms.select(editor, prevPath)
-
-            editor.onChange()
-            return
-          }
-
-          return
-        }
-      }
-      if (
-        isDelete &&
-        editor.selection &&
-        editor.selection.focus.offset === 0 &&
-        Range.isCollapsed(editor.selection) &&
-        editor.children[editor.selection.focus.path[0] + 1]
-      ) {
-        const nextBlock = Node.descendant(
+        const focusBlock = Node.descendant(
           editor,
-          Path.next(editor.selection.focus.path.slice(0, 1)),
+          editor.selection.focus.path.slice(0, 1),
         ) as SlateTextBlock | VoidElement
-        const focusBlockPath = editor.selection.focus.path.slice(0, 1)
-        const focusBlock = Node.descendant(editor, focusBlockPath) as SlateTextBlock | VoidElement
-        const isTextBlock = isPortableTextTextBlock(focusBlock)
-        const isEmptyFocusBlock =
-          isTextBlock && focusBlock.children.length === 1 && focusBlock.children?.[0]?.text === ''
 
-        if (
-          nextBlock &&
-          focusBlock &&
-          !Editor.isVoid(editor, focusBlock) &&
-          Editor.isVoid(editor, nextBlock) &&
-          isEmptyFocusBlock
-        ) {
-          debug('Preventing deleting void block below')
-          event.preventDefault()
-          event.stopPropagation()
-          Transforms.removeNodes(editor, {match: (n) => n === focusBlock})
-          Transforms.select(editor, focusBlockPath)
+        if (isFirstBlock && focusBlock && Editor.isVoid(editor, focusBlock)) {
+          Transforms.insertNodes(
+            editor,
+            editor.pteCreateTextBlock({decorators: []}),
+            {
+              at: [0],
+            },
+          )
+          Transforms.select(editor, {path: [0, 0], offset: 0})
           editor.onChange()
           return
         }
@@ -220,7 +126,9 @@ export function createWithHotkeys(
       // Only steal tab when we are on a plain text span or we are at the start of the line (fallback if the whole block is annotated or contains a single inline object)
       // Otherwise tab is reserved for accessability for buttons etc.
       if ((isTab || isShiftTab) && editor.selection) {
-        const [focusChild] = Editor.node(editor, editor.selection.focus, {depth: 2})
+        const [focusChild] = Editor.node(editor, editor.selection.focus, {
+          depth: 2,
+        })
         const [focusBlock] = isPortableTextSpan(focusChild)
           ? Editor.node(editor, editor.selection.focus, {depth: 1})
           : []
@@ -247,7 +155,9 @@ export function createWithHotkeys(
       // Deal with enter key combos
       if (isEnter && !isShiftEnter && editor.selection) {
         const focusBlockPath = editor.selection.focus.path.slice(0, 1)
-        const focusBlock = Node.descendant(editor, focusBlockPath) as SlateTextBlock | VoidElement
+        const focusBlock = Node.descendant(editor, focusBlockPath) as
+          | SlateTextBlock
+          | VoidElement
 
         // List item enter key
         if (editor.isListBlock(focusBlock)) {
@@ -266,7 +176,10 @@ export function createWithHotkeys(
           const [, end] = Range.edges(editor.selection)
           const endAtEndOfNode = Editor.isEnd(editor, end, end.path)
           if (endAtEndOfNode) {
-            Editor.insertNode(editor, editor.pteCreateEmptyBlock())
+            Editor.insertNode(
+              editor,
+              editor.pteCreateTextBlock({decorators: []}),
+            )
             event.preventDefault()
             editor.onChange()
             return
@@ -274,7 +187,7 @@ export function createWithHotkeys(
         }
         // Block object enter key
         if (focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Editor.insertNode(editor, editor.pteCreateEmptyBlock())
+          Editor.insertNode(editor, editor.pteCreateTextBlock({decorators: []}))
           event.preventDefault()
           editor.onChange()
           return
@@ -298,7 +211,10 @@ export function createWithHotkeys(
         editor.undo()
         return
       }
-      if (isHotkey('mod+y', event.nativeEvent) || isHotkey('mod+shift+z', event.nativeEvent)) {
+      if (
+        isHotkey('mod+y', event.nativeEvent) ||
+        isHotkey('mod+shift+z', event.nativeEvent)
+      ) {
         event.preventDefault()
         editor.redo()
       }

package/src/editor/plugins/createWithInsertBreak.ts

@@ -1,45 +1,184 @@
+import {isEqual} from 'lodash'
 import {Editor, Node, Path, Range, Transforms} from 'slate'
+import type {
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
+import type {SlateTextBlock, VoidElement} from '../../types/slate'
 
-import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
-import {type SlateTextBlock, type VoidElement} from '../../types/slate'
-import {isEqualToEmptyEditor} from '../../utils/values'
-
-/**
- * Changes default behavior of insertBreak to insert a new block instead of splitting current when the cursor is at the
- * start of the block.
- */
 export function createWithInsertBreak(
   types: PortableTextMemberSchemaTypes,
+  keyGenerator: () => string,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  return function withInsertBreak(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+  return function withInsertBreak(
+    editor: PortableTextSlateEditor,
+  ): PortableTextSlateEditor {
     const {insertBreak} = editor
 
     editor.insertBreak = () => {
-      if (editor.selection) {
-        const focusBlockPath = editor.selection.focus.path.slice(0, 1)
-        const focusBlock = Node.descendant(editor, focusBlockPath) as SlateTextBlock | VoidElement
-
-        if (editor.isTextBlock(focusBlock)) {
-          // Enter from another style than the first (default one)
-          const [, end] = Range.edges(editor.selection)
-          // If it's at the start of block, we want to preserve the current block key and insert a new one in the current position instead of splitting the node.
-          const isEndAtStartOfNode = Editor.isStart(editor, end, end.path)
-          const isEmptyTextBlock = focusBlock && isEqualToEmptyEditor([focusBlock], types)
-          if (isEndAtStartOfNode && !isEmptyTextBlock) {
-            Editor.insertNode(editor, editor.pteCreateEmptyBlock())
-            const [nextBlockPath] = Path.next(focusBlockPath)
-            Transforms.select(editor, {
-              anchor: {path: [nextBlockPath, 0], offset: 0},
-              focus: {path: [nextBlockPath, 0], offset: 0},
+      if (!editor.selection) {
+        insertBreak()
+        return
+      }
+
+      const focusBlockPath = editor.selection.focus.path.slice(0, 1)
+      const focusBlock = Node.descendant(editor, focusBlockPath) as
+        | SlateTextBlock
+        | VoidElement
+
+      if (editor.isTextBlock(focusBlock)) {
+        const [start, end] = Range.edges(editor.selection)
+        const isEndAtStartOfBlock = isEqual(end, {
+          path: [...focusBlockPath, 0],
+          offset: 0,
+        })
+
+        if (isEndAtStartOfBlock && Range.isCollapsed(editor.selection)) {
+          const focusDecorators = editor.isTextSpan(focusBlock.children[0])
+            ? (focusBlock.children[0].marks ?? []).filter((mark) =>
+                types.decorators.some((decorator) => decorator.value === mark),
+              )
+            : []
+
+          Editor.insertNode(
+            editor,
+            editor.pteCreateTextBlock({decorators: focusDecorators}),
+          )
+
+          const [nextBlockPath] = Path.next(focusBlockPath)
+
+          Transforms.select(editor, {
+            anchor: {path: [nextBlockPath, 0], offset: 0},
+            focus: {path: [nextBlockPath, 0], offset: 0},
+          })
+
+          editor.onChange()
+          return
+        }
+
+        const lastFocusBlockChild =
+          focusBlock.children[focusBlock.children.length - 1]
+        const isStartAtEndOfBlock = isEqual(start, {
+          path: [...focusBlockPath, focusBlock.children.length - 1],
+          offset: editor.isTextSpan(lastFocusBlockChild)
+            ? lastFocusBlockChild.text.length
+            : 0,
+        })
+        const isInTheMiddleOfNode = !isEndAtStartOfBlock && !isStartAtEndOfBlock
+
+        if (isInTheMiddleOfNode) {
+          Editor.withoutNormalizing(editor, () => {
+            if (!editor.selection) {
+              return
+            }
+
+            Transforms.splitNodes(editor, {
+              at: editor.selection,
             })
 
-            editor.onChange()
-            return
-          }
+            const [nextNode, nextNodePath] = Editor.node(
+              editor,
+              Path.next(focusBlockPath),
+              {depth: 1},
+            )
+
+            Transforms.setSelection(editor, {
+              anchor: {path: [...nextNodePath, 0], offset: 0},
+              focus: {path: [...nextNodePath, 0], offset: 0},
+            })
+
+            /**
+             * Assign new keys to markDefs that are now split across two blocks
+             */
+            if (
+              editor.isTextBlock(nextNode) &&
+              nextNode.markDefs &&
+              nextNode.markDefs.length > 0
+            ) {
+              const newMarkDefKeys = new Map<string, string>()
+
+              const prevNodeSpans = Array.from(
+                Node.children(editor, focusBlockPath),
+              )
+                .map((entry) => entry[0])
+                .filter((node) => editor.isTextSpan(node))
+              const children = Node.children(editor, nextNodePath)
+
+              for (const [child, childPath] of children) {
+                if (!editor.isTextSpan(child)) {
+                  continue
+                }
+
+                const marks = child.marks ?? []
+
+                // Go through the marks of the span and figure out if any of
+                // them refer to annotations that are also present in the
+                // previous block
+                for (const mark of marks) {
+                  if (
+                    types.decorators.some(
+                      (decorator) => decorator.value === mark,
+                    )
+                  ) {
+                    continue
+                  }
+
+                  if (
+                    prevNodeSpans.some((prevNodeSpan) =>
+                      prevNodeSpan.marks?.includes(mark),
+                    ) &&
+                    !newMarkDefKeys.has(mark)
+                  ) {
+                    // This annotation is both present in the previous block
+                    // and this block, so let's assign a new key to it
+                    newMarkDefKeys.set(mark, keyGenerator())
+                  }
+                }
+
+                const newMarks = marks.map(
+                  (mark) => newMarkDefKeys.get(mark) ?? mark,
+                )
+
+                // No need to update the marks if they are the same
+                if (!isEqual(marks, newMarks)) {
+                  Transforms.setNodes(
+                    editor,
+                    {marks: newMarks},
+                    {
+                      at: childPath,
+                    },
+                  )
+                }
+              }
+
+              // Time to update all the markDefs that need a new key because
+              // they've been split across blocks
+              const newMarkDefs = nextNode.markDefs.map((markDef) => ({
+                ...markDef,
+                _key: newMarkDefKeys.get(markDef._key) ?? markDef._key,
+              }))
+
+              // No need to update the markDefs if they are the same
+              if (!isEqual(nextNode.markDefs, newMarkDefs)) {
+                Transforms.setNodes(
+                  editor,
+                  {markDefs: newMarkDefs},
+                  {
+                    at: nextNodePath,
+                    match: (node) => editor.isTextBlock(node),
+                  },
+                )
+              }
+            }
+          })
+          editor.onChange()
+          return
         }
       }
+
       insertBreak()
     }
+
     return editor
   }
 }

package/src/editor/plugins/createWithInsertData.ts

@@ -1,17 +1,20 @@
 import {htmlToBlocks, normalizeBlock} from '@sanity/block-tools'
-import {type PortableTextBlock, type PortableTextChild} from '@sanity/types'
+import type {PortableTextBlock, PortableTextChild} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
-import {type Descendant, Editor, type Node, Range, Transforms} from 'slate'
+import {Editor, Range, Transforms, type Descendant, type Node} from 'slate'
 import {ReactEditor} from 'slate-react'
-
-import {
-  type EditorChanges,
-  type PortableTextMemberSchemaTypes,
-  type PortableTextSlateEditor,
+import type {
+  EditorChanges,
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {validateValue} from '../../utils/validateValue'
-import {fromSlateValue, isEqualToEmptyEditor, toSlateValue} from '../../utils/values'
+import {
+  fromSlateValue,
+  isEqualToEmptyEditor,
+  toSlateValue,
+} from '../../utils/values'
 
 const debug = debugWithName('plugin:withInsertData')
 
@@ -24,10 +27,13 @@ export function createWithInsertData(
   schemaTypes: PortableTextMemberSchemaTypes,
   keyGenerator: () => string,
 ) {
-  return function withInsertData(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+  return function withInsertData(
+    editor: PortableTextSlateEditor,
+  ): PortableTextSlateEditor {
     const blockTypeName = schemaTypes.block.name
     const spanTypeName = schemaTypes.span.name
-    const whitespaceOnPasteMode = schemaTypes.block.options.unstable_whitespaceOnPasteMode
+    const whitespaceOnPasteMode =
+      schemaTypes.block.options.unstable_whitespaceOnPasteMode
 
     const toPlainText = (blocks: PortableTextBlock[]) => {
       return blocks
@@ -39,13 +45,15 @@ export function createWithInsertData(
                   return child.text
                 }
                 return `[${
-                  schemaTypes.inlineObjects.find((t) => t.name === child._type)?.title || 'Object'
+                  schemaTypes.inlineObjects.find((t) => t.name === child._type)
+                    ?.title || 'Object'
                 }]`
               })
               .join('')
           }
           return `[${
-            schemaTypes.blockObjects.find((t) => t.name === block._type)?.title || 'Object'
+            schemaTypes.blockObjects.find((t) => t.name === block._type)
+              ?.title || 'Object'
           }]`
         })
         .join('\n\n')
@@ -82,10 +90,12 @@ export function createWithInsertData(
       }
       // Remove any zero-width space spans from the cloned DOM so that they don't
       // show up elsewhere when pasted.
-      Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach((zw) => {
-        const isNewline = zw.getAttribute('data-slate-zero-width') === 'n'
-        zw.textContent = isNewline ? '\n' : ''
-      })
+      Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(
+        (zw) => {
+          const isNewline = zw.getAttribute('data-slate-zero-width') === 'n'
+          zw.textContent = isNewline ? '\n' : ''
+        },
+      )
       // Clean up the clipboard HTML for editor spesific attributes
       Array.from(contents.querySelectorAll('*')).forEach((elm) => {
         elm.removeAttribute('contentEditable')
@@ -119,7 +129,10 @@ export function createWithInsertData(
       data.setData('application/json', asJSON)
       data.setData('application/x-portable-text', asJSON)
       debug('text', asPlainText)
-      data.setData('application/x-portable-text-event-origin', originEvent || 'external')
+      data.setData(
+        'application/x-portable-text-event-origin',
+        originEvent || 'external',
+      )
       debug('Set fragment data', asJSON, asHTML)
     }
 
@@ -175,12 +188,14 @@ export function createWithInsertData(
         debug('Inserting data', data)
         let portableText: PortableTextBlock[]
         let fragment: Node[]
-        let insertedType
+        let insertedType: string | undefined
 
         if (html) {
           portableText = htmlToBlocks(html, schemaTypes.portableText, {
             unstable_whitespaceOnPasteMode: whitespaceOnPasteMode,
-          }).map((block) => normalizeBlock(block, {blockTypeName})) as PortableTextBlock[]
+          }).map((block) =>
+            normalizeBlock(block, {blockTypeName}),
+          ) as PortableTextBlock[]
           fragment = toSlateValue(portableText, {schemaTypes})
           insertedType = 'HTML'
 
@@ -192,12 +207,14 @@ export function createWithInsertData(
           const blocks = escapeHtml(text)
             .split(/\n{2,}/)
             .map((line) =>
-              line ? `<p>${line.replace(/(?:\r\n|\r|\n)/g, '<br/>')}</p>` : '<p></p>',
+              line
+                ? `<p>${line.replace(/(?:\r\n|\r|\n)/g, '<br/>')}</p>`
+                : '<p></p>',
             )
             .join('')
           const textToHtml = `<html><body>${blocks}</body></html>`
-          portableText = htmlToBlocks(textToHtml, schemaTypes.portableText).map((block) =>
-            normalizeBlock(block, {blockTypeName}),
+          portableText = htmlToBlocks(textToHtml, schemaTypes.portableText).map(
+            (block) => normalizeBlock(block, {blockTypeName}),
           ) as PortableTextBlock[]
           fragment = toSlateValue(portableText, {
             schemaTypes,
@@ -206,7 +223,11 @@ export function createWithInsertData(
         }
 
         // Validate the result
-        const validation = validateValue(portableText, schemaTypes, keyGenerator)
+        const validation = validateValue(
+          portableText,
+          schemaTypes,
+          keyGenerator,
+        )
 
         // Bail out if it's not valid
         if (!validation.valid) {
@@ -221,7 +242,9 @@ export function createWithInsertData(
           debug('Invalid insert result', validation)
           return false
         }
-        debug(`Inserting ${insertedType} fragment at ${JSON.stringify(editor.selection)}`)
+        debug(
+          `Inserting ${insertedType} fragment at ${JSON.stringify(editor.selection)}`,
+        )
         _insertFragment(editor, fragment, schemaTypes)
         change$.next({type: 'loading', isLoading: false})
         return true
@@ -312,8 +335,9 @@ function _regenerateKeys(
                 ...child,
                 marks:
                   child.marks && child.marks.includes(oldKey)
-                    ? // eslint-disable-next-line max-nested-callbacks
-                      [...child.marks].filter((mark) => mark !== oldKey).concat(newKey)
+                    ? [...child.marks]
+                        .filter((mark) => mark !== oldKey)
+                        .concat(newKey)
                     : child.marks,
               }
             : child,
@@ -347,22 +371,34 @@ function _insertFragment(
       return
     }
     // Ensure that markDefs for any annotations inside this fragment are copied over to the focused text block.
-    const [focusBlock, focusPath] = Editor.node(editor, editor.selection, {depth: 1})
+    const [focusBlock, focusPath] = Editor.node(editor, editor.selection, {
+      depth: 1,
+    })
     if (editor.isTextBlock(focusBlock) && editor.isTextBlock(fragment[0])) {
       const {markDefs} = focusBlock
-      debug('Mixing markDefs of focusBlock and fragments[0] block', markDefs, fragment[0].markDefs)
+      debug(
+        'Mixing markDefs of focusBlock and fragments[0] block',
+        markDefs,
+        fragment[0].markDefs,
+      )
       if (!isEqual(markDefs, fragment[0].markDefs)) {
         Transforms.setNodes(
           editor,
           {
-            markDefs: uniq([...(fragment[0].markDefs || []), ...(markDefs || [])]),
+            markDefs: uniq([
+              ...(fragment[0].markDefs || []),
+              ...(markDefs || []),
+            ]),
           },
           {at: focusPath, mode: 'lowest', voids: false},
         )
       }
     }
 
-    const isPasteToEmptyEditor = isEqualToEmptyEditor(editor.children, schemaTypes)
+    const isPasteToEmptyEditor = isEqualToEmptyEditor(
+      editor.children,
+      schemaTypes,
+    )
 
     if (isPasteToEmptyEditor) {
       // Special case for pasting directly into an empty editor (a placeholder block).