@portabletext/editor 1.0.19 → 1.1.1

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-statements */
-/* eslint-disable complexity */
 /**
  *
  * This plugin will change Slate's default marks model (every prop is a mark) with the Portable Text model (marks is an array of strings on prop .marks).
@@ -7,14 +5,23 @@
  */
 
 import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
+import type {PortableTextObject} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
-import {type Subject} from 'rxjs'
-import {type Descendant, Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
-
+import type {Subject} from 'rxjs'
 import {
-  type EditorChange,
-  type PortableTextMemberSchemaTypes,
-  type PortableTextSlateEditor,
+  Editor,
+  Element,
+  Node,
+  Path,
+  Range,
+  Text,
+  Transforms,
+  type Descendant,
+} from 'slate'
+import type {
+  EditorChange,
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
@@ -47,7 +54,11 @@ export function createWithPortableTextMarkModel(
         Transforms.select(editor, {...editor.selection})
         editor.selection = {...editor.selection} // Ensure new object
       }
-      const ptRange = toPortableTextRange(editor.children, editor.selection, types)
+      const ptRange = toPortableTextRange(
+        editor.children,
+        editor.selection,
+        types,
+      )
       change$.next({type: 'selection', selection: ptRange})
     }
 
@@ -71,12 +82,24 @@ export function createWithPortableTextMarkModel(
               JSON.stringify(child, null, 2),
               JSON.stringify(nextNode, null, 2),
             )
-            Transforms.mergeNodes(editor, {at: [childPath[0], childPath[1] + 1], voids: true})
+            Transforms.mergeNodes(editor, {
+              at: [childPath[0], childPath[1] + 1],
+              voids: true,
+            })
             return
           }
         }
       }
 
+      /**
+       * Add missing .markDefs to block nodes
+       */
+      if (editor.isTextBlock(node) && !Array.isArray(node.markDefs)) {
+        debug('Adding .markDefs to block node')
+        Transforms.setNodes(editor, {markDefs: []}, {at: path})
+        return
+      }
+
       /**
        * Add missing .marks to span nodes
        */
@@ -93,7 +116,9 @@ export function createWithPortableTextMarkModel(
         const blockPath = Path.parent(path)
         const [block] = Editor.node(editor, blockPath)
         const decorators = types.decorators.map((decorator) => decorator.value)
-        const annotations = node.marks?.filter((mark) => !decorators.includes(mark))
+        const annotations = node.marks?.filter(
+          (mark) => !decorators.includes(mark),
+        )
 
         if (editor.isTextBlock(block)) {
           if (node.text === '' && annotations && annotations.length > 0) {
@@ -118,14 +143,21 @@ export function createWithPortableTextMarkModel(
           if (editor.isTextSpan(child)) {
             const marks = child.marks ?? []
             const orphanedAnnotations = marks.filter((mark) => {
-              return !decorators.includes(mark) && !node.markDefs?.find((def) => def._key === mark)
+              return (
+                !decorators.includes(mark) &&
+                !node.markDefs?.find((def) => def._key === mark)
+              )
             })
 
             if (orphanedAnnotations.length > 0) {
               debug('Removing orphaned annotations from span node')
               Transforms.setNodes(
                 editor,
-                {marks: marks.filter((mark) => !orphanedAnnotations.includes(mark))},
+                {
+                  marks: marks.filter(
+                    (mark) => !orphanedAnnotations.includes(mark),
+                  ),
+                },
                 {at: childPath},
               )
               return
@@ -142,17 +174,26 @@ export function createWithPortableTextMarkModel(
         const [block] = Editor.node(editor, blockPath)
 
         if (editor.isTextBlock(block)) {
-          const decorators = types.decorators.map((decorator) => decorator.value)
+          const decorators = types.decorators.map(
+            (decorator) => decorator.value,
+          )
           const marks = node.marks ?? []
           const orphanedAnnotations = marks.filter((mark) => {
-            return !decorators.includes(mark) && !block.markDefs?.find((def) => def._key === mark)
+            return (
+              !decorators.includes(mark) &&
+              !block.markDefs?.find((def) => def._key === mark)
+            )
           })
 
           if (orphanedAnnotations.length > 0) {
             debug('Removing orphaned annotations from span node')
             Transforms.setNodes(
               editor,
-              {marks: marks.filter((mark) => !orphanedAnnotations.includes(mark))},
+              {
+                marks: marks.filter(
+                  (mark) => !orphanedAnnotations.includes(mark),
+                ),
+              },
               {at: path},
             )
             return
@@ -160,17 +201,41 @@ export function createWithPortableTextMarkModel(
         }
       }
 
+      // Remove duplicate markDefs
+      if (editor.isTextBlock(node)) {
+        const markDefs = node.markDefs ?? []
+        const markDefKeys = new Set<string>()
+        const newMarkDefs: Array<PortableTextObject> = []
+
+        for (const markDef of markDefs) {
+          if (!markDefKeys.has(markDef._key)) {
+            markDefKeys.add(markDef._key)
+            newMarkDefs.push(markDef)
+          }
+        }
+
+        if (markDefs.length !== newMarkDefs.length) {
+          debug('Removing duplicate markDefs')
+          Transforms.setNodes(editor, {markDefs: newMarkDefs}, {at: path})
+        }
+      }
+
       // Check consistency of markDefs (unless we are merging two nodes)
       if (
         editor.isTextBlock(node) &&
         !editor.operations.some(
-          (op) => op.type === 'merge_node' && 'markDefs' in op.properties && op.path.length === 1,
+          (op) =>
+            op.type === 'merge_node' &&
+            'markDefs' in op.properties &&
+            op.path.length === 1,
         )
       ) {
         const newMarkDefs = (node.markDefs || []).filter((def) => {
           return node.children.find((child) => {
             return (
-              Text.isText(child) && Array.isArray(child.marks) && child.marks.includes(def._key)
+              Text.isText(child) &&
+              Array.isArray(child.marks) &&
+              child.marks.includes(def._key)
             )
           })
         })
@@ -215,13 +280,16 @@ export function createWithPortableTextMarkModel(
         if (
           selection &&
           Range.isCollapsed(selection) &&
-          Editor.marks(editor)?.marks?.some((mark) => !decorators.includes(mark))
+          Editor.marks(editor)?.marks?.some(
+            (mark) => !decorators.includes(mark),
+          )
         ) {
           const [node] = Array.from(
             Editor.nodes(editor, {
               mode: 'lowest',
               at: selection.focus,
-              match: (n) => (n as unknown as Descendant)._type === types.span.name,
+              match: (n) =>
+                (n as unknown as Descendant)._type === types.span.name,
               voids: false,
             }),
           )[0] || [undefined]
@@ -261,15 +329,25 @@ export function createWithPortableTextMarkModel(
         const blockEntry = Editor.node(editor, Path.parent(op.path))
         const block = blockEntry[0]
 
-        if (node && isPortableTextSpan(node) && block && isPortableTextBlock(block)) {
+        if (
+          node &&
+          isPortableTextSpan(node) &&
+          block &&
+          isPortableTextBlock(block)
+        ) {
           const markDefs = block.markDefs ?? []
           const nodeHasAnnotations = (node.marks ?? []).some((mark) =>
             markDefs.find((markDef) => markDef._key === mark),
           )
           const deletingPartOfTheNode = op.offset !== 0
-          const deletingFromTheEnd = op.offset + op.text.length === node.text.length
+          const deletingFromTheEnd =
+            op.offset + op.text.length === node.text.length
 
-          if (nodeHasAnnotations && deletingPartOfTheNode && deletingFromTheEnd) {
+          if (
+            nodeHasAnnotations &&
+            deletingPartOfTheNode &&
+            deletingFromTheEnd
+          ) {
             Editor.withoutNormalizing(editor, () => {
               Transforms.splitNodes(editor, {
                 match: Text.isText,
@@ -293,7 +371,11 @@ export function createWithPortableTextMarkModel(
 
             Editor.withoutNormalizing(editor, () => {
               apply(op)
-              Transforms.setNodes(editor, {marks: marksWithoutAnnotationMarks}, {at: op.path})
+              Transforms.setNodes(
+                editor,
+                {marks: marksWithoutAnnotationMarks},
+                {at: op.path},
+              )
             })
 
             editor.onChange()
@@ -329,11 +411,16 @@ export function createWithPortableTextMarkModel(
         const [targetBlock, targetPath] = Editor.node(editor, [op.path[0] - 1])
 
         if (editor.isTextBlock(targetBlock)) {
-          const oldDefs = (Array.isArray(targetBlock.markDefs) && targetBlock.markDefs) || []
+          const oldDefs =
+            (Array.isArray(targetBlock.markDefs) && targetBlock.markDefs) || []
           const newMarkDefs = uniq([...oldDefs, ...op.properties.markDefs])
 
           debug(`Copying markDefs over to merged block`, op)
-          Transforms.setNodes(editor, {markDefs: newMarkDefs}, {at: targetPath, voids: false})
+          Transforms.setNodes(
+            editor,
+            {markDefs: newMarkDefs},
+            {at: targetPath, voids: false},
+          )
           apply(op)
           return
         }
@@ -348,10 +435,19 @@ export function createWithPortableTextMarkModel(
         if (Range.isExpanded(editor.selection)) {
           Editor.withoutNormalizing(editor, () => {
             // Split if needed
-            Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
+            Transforms.setNodes(
+              editor,
+              {},
+              {match: Text.isText, split: true, hanging: true},
+            )
             // Use new selection
             const splitTextNodes = Range.isRange(editor.selection)
-              ? [...Editor.nodes(editor, {at: editor.selection, match: Text.isText})]
+              ? [
+                  ...Editor.nodes(editor, {
+                    at: editor.selection,
+                    match: Text.isText,
+                  }),
+                ]
               : []
             const shouldRemoveMark =
               splitTextNodes.length > 1 &&
@@ -376,17 +472,49 @@ export function createWithPortableTextMarkModel(
             }
           })
         } else {
-          const existingMarks: string[] =
-            {
+          const [block, blockPath] = Editor.node(editor, editor.selection, {
+            depth: 1,
+          })
+          const lonelyEmptySpan =
+            editor.isTextBlock(block) &&
+            block.children.length === 1 &&
+            editor.isTextSpan(block.children[0]) &&
+            block.children[0].text === ''
+              ? block.children[0]
+              : undefined
+
+          if (lonelyEmptySpan) {
+            const existingMarks = lonelyEmptySpan.marks ?? []
+            const existingMarksWithoutDecorator = existingMarks.filter(
+              (existingMark) => existingMark !== mark,
+            )
+
+            Transforms.setNodes(
+              editor,
+              {
+                marks:
+                  existingMarks.length === existingMarksWithoutDecorator.length
+                    ? [...existingMarks, mark]
+                    : existingMarksWithoutDecorator,
+              },
+              {
+                at: blockPath,
+                match: (node) => editor.isTextSpan(node),
+              },
+            )
+          } else {
+            const existingMarks: string[] =
+              {
+                ...(Editor.marks(editor) || {}),
+              }.marks || []
+            const marks = {
               ...(Editor.marks(editor) || {}),
-            }.marks || []
-          const marks = {
-            ...(Editor.marks(editor) || {}),
-            marks: [...existingMarks, mark],
+              marks: [...existingMarks, mark],
+            }
+            editor.marks = marks as Text
+            forceNewSelection()
+            return editor
           }
-          editor.marks = marks as Text
-          forceNewSelection()
-          return editor
         }
         editor.onChange()
         forceNewSelection()
@@ -401,10 +529,17 @@ export function createWithPortableTextMarkModel(
         if (Range.isExpanded(selection)) {
           Editor.withoutNormalizing(editor, () => {
             // Split if needed
-            Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
+            Transforms.setNodes(
+              editor,
+              {},
+              {match: Text.isText, split: true, hanging: true},
+            )
             if (editor.selection) {
               const splitTextNodes = [
-                ...Editor.nodes(editor, {at: editor.selection, match: Text.isText}),
+                ...Editor.nodes(editor, {
+                  at: editor.selection,
+                  match: Text.isText,
+                }),
               ]
               splitTextNodes.forEach(([node, path]) => {
                 const block = editor.children[path[0]]
@@ -412,9 +547,10 @@ export function createWithPortableTextMarkModel(
                   Transforms.setNodes(
                     editor,
                     {
-                      marks: (Array.isArray(node.marks) ? node.marks : []).filter(
-                        (eMark: string) => eMark !== mark,
-                      ),
+                      marks: (Array.isArray(node.marks)
+                        ? node.marks
+                        : []
+                      ).filter((eMark: string) => eMark !== mark),
                       _type: 'span',
                     },
                     {at: path},
@@ -425,17 +561,46 @@ export function createWithPortableTextMarkModel(
           })
           Editor.normalize(editor)
         } else {
-          const existingMarks: string[] =
-            {
+          const [block, blockPath] = Editor.node(editor, selection, {
+            depth: 1,
+          })
+          const lonelyEmptySpan =
+            editor.isTextBlock(block) &&
+            block.children.length === 1 &&
+            editor.isTextSpan(block.children[0]) &&
+            block.children[0].text === ''
+              ? block.children[0]
+              : undefined
+
+          if (lonelyEmptySpan) {
+            const existingMarks = lonelyEmptySpan.marks ?? []
+            const existingMarksWithoutDecorator = existingMarks.filter(
+              (existingMark) => existingMark !== mark,
+            )
+
+            Transforms.setNodes(
+              editor,
+              {
+                marks: existingMarksWithoutDecorator,
+              },
+              {
+                at: blockPath,
+                match: (node) => editor.isTextSpan(node),
+              },
+            )
+          } else {
+            const existingMarks: string[] =
+              {
+                ...(Editor.marks(editor) || {}),
+              }.marks || []
+            const marks = {
               ...(Editor.marks(editor) || {}),
-            }.marks || []
-          const marks = {
-            ...(Editor.marks(editor) || {}),
-            marks: existingMarks.filter((eMark) => eMark !== mark),
-          } as Text
-          editor.marks = {marks: marks.marks, _type: 'span'} as Text
-          forceNewSelection()
-          return editor
+              marks: existingMarks.filter((eMark) => eMark !== mark),
+            } as Text
+            editor.marks = {marks: marks.marks, _type: 'span'} as Text
+            forceNewSelection()
+            return editor
+          }
         }
         editor.onChange()
         forceNewSelection()

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -1,14 +1,16 @@
-import {type Subject} from 'rxjs'
-import {type BaseRange} from 'slate'
-
-import {
-  type EditorChange,
-  type EditorSelection,
-  type PortableTextMemberSchemaTypes,
-  type PortableTextSlateEditor,
+import type {Subject} from 'rxjs'
+import type {BaseRange} from 'slate'
+import type {
+  EditorChange,
+  EditorSelection,
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
-import {type ObjectWithKeyAndType, toPortableTextRange} from '../../utils/ranges'
+import {
+  toPortableTextRange,
+  type ObjectWithKeyAndType,
+} from '../../utils/ranges'
 import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../../utils/weakMaps'
 
 const debug = debugWithName('plugin:withPortableTextSelections')

package/src/editor/plugins/createWithSchemaTypes.ts

@@ -6,9 +6,11 @@ import {
   type PortableTextSpan,
   type PortableTextTextBlock,
 } from '@sanity/types'
-import {type Element, Transforms} from 'slate'
-
-import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
+import {Transforms, type Element} from 'slate'
+import type {
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 
 const debug = debugWithName('plugin:withSchemaTypes')
@@ -23,21 +25,31 @@ export function createWithSchemaTypes({
   schemaTypes: PortableTextMemberSchemaTypes
   keyGenerator: () => string
 }) {
-  return function withSchemaTypes(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+  return function withSchemaTypes(
+    editor: PortableTextSlateEditor,
+  ): PortableTextSlateEditor {
     editor.isTextBlock = (value: unknown): value is PortableTextTextBlock => {
-      return isPortableTextTextBlock(value) && value._type === schemaTypes.block.name
+      return (
+        isPortableTextTextBlock(value) && value._type === schemaTypes.block.name
+      )
     }
     editor.isTextSpan = (value: unknown): value is PortableTextSpan => {
-      return isPortableTextSpan(value) && value._type == schemaTypes.span.name
+      return isPortableTextSpan(value) && value._type === schemaTypes.span.name
     }
     editor.isListBlock = (value: unknown): value is PortableTextListBlock => {
-      return isPortableTextListBlock(value) && value._type === schemaTypes.block.name
+      return (
+        isPortableTextListBlock(value) && value._type === schemaTypes.block.name
+      )
     }
     editor.isVoid = (element: Element): boolean => {
       return (
         schemaTypes.block.name !== element._type &&
-        (schemaTypes.blockObjects.map((obj) => obj.name).includes(element._type) ||
-          schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type))
+        (schemaTypes.blockObjects
+          .map((obj) => obj.name)
+          .includes(element._type) ||
+          schemaTypes.inlineObjects
+            .map((obj) => obj.name)
+            .includes(element._type))
       )
     }
     editor.isInline = (element: Element): boolean => {
@@ -59,7 +71,11 @@ export function createWithSchemaTypes({
         debug('Setting span type on text node without a type')
         const span = node as PortableTextSpan
         const key = span._key || keyGenerator()
-        Transforms.setNodes(editor, {...span, _type: schemaTypes.span.name, _key: key}, {at: path})
+        Transforms.setNodes(
+          editor,
+          {...span, _type: schemaTypes.span.name, _key: key},
+          {at: path},
+        )
       }
 
       // catches cases when the children are missing keys but excludes it when the normalize is running the node as the editor object