@portabletext/editor 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/create-slate-editor.tsx

@@ -3,7 +3,6 @@ import {withReact} from 'slate-react'
 import {buildIndexMaps} from '../internal-utils/build-index-maps'
 import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {debugWithName} from '../internal-utils/debug'
-import {toSlateBlock} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
@@ -56,15 +55,9 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     },
   )
 
-  const initialValue = [
-    toSlateBlock(placeholderBlock, {
-      schemaTypes: config.editorActor.getSnapshot().context.schema,
-    }),
-  ]
-
   const slateEditor: SlateEditor = {
     instance,
-    initialValue,
+    initialValue: [placeholderBlock],
   }
 
   return slateEditor

package/src/editor/plugins/createWithPatches.ts

@@ -110,6 +110,7 @@ export function createWithPatches({
       previousValue = editor.value
 
       const editorWasEmpty = isEqualToEmptyEditor(
+        editorActor.getSnapshot().context.initialValue,
         previousValue,
         editorActor.getSnapshot().context.schema,
       )
@@ -118,6 +119,7 @@ export function createWithPatches({
       apply(operation)
 
       const editorIsEmpty = isEqualToEmptyEditor(
+        editorActor.getSnapshot().context.initialValue,
         editor.value,
         editorActor.getSnapshot().context.schema,
       )

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -10,6 +10,7 @@ import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
 import {isRedoing} from '../../history/slate-plugin.redoing'
 import {isUndoing} from '../../history/slate-plugin.undoing'
+import {createPlaceholderBlock} from '../../internal-utils/create-placeholder-block'
 import {debugWithName} from '../../internal-utils/debug'
 import {getNextSpan, getPreviousSpan} from '../../internal-utils/sibling-utils'
 import type {BehaviorOperationImplementation} from '../../operations/behavior.operations'
@@ -19,6 +20,7 @@ import type {EditorActor} from '../editor-machine'
 import {getEditorSnapshot} from '../editor-selector'
 import {withNormalizeNode} from '../with-normalizing-node'
 import {isChangingRemotely} from '../withChanges'
+import {withoutPatching} from '../withoutPatching'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
@@ -38,6 +40,18 @@ export function createWithPortableTextMarkModel(
     editor.normalizeNode = (nodeEntry) => {
       const [node, path] = nodeEntry
 
+      if (Editor.isEditor(node) && node.children.length === 0) {
+        withoutPatching(editor, () => {
+          withNormalizeNode(editor, () => {
+            Transforms.insertNodes(
+              editor,
+              createPlaceholderBlock(editorActor.getSnapshot().context),
+              {at: [0], select: true},
+            )
+          })
+        })
+      }
+
       if (editor.isTextBlock(node)) {
         const children = Node.children(editor, path)
 

package/src/editor/plugins/with-plugins.ts

@@ -6,7 +6,6 @@ import type {RelayActor} from '../relay-machine'
 import {createWithEventListeners} from './create-with-event-listeners'
 import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
-import {createWithPlaceholderBlock} from './createWithPlaceholderBlock'
 import {createWithPortableTextMarkModel} from './createWithPortableTextMarkModel'
 import {createWithSchemaTypes} from './createWithSchemaTypes'
 import {pluginUpdateSelection} from './slate-plugin.update-selection'
@@ -45,8 +44,6 @@ export const withPlugins = <T extends Editor>(
   })
   const withPortableTextMarkModel = createWithPortableTextMarkModel(editorActor)
 
-  const withPlaceholderBlock = createWithPlaceholderBlock(editorActor)
-
   const withEventListeners = createWithEventListeners(editorActor)
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
@@ -54,16 +51,14 @@ export const withPlugins = <T extends Editor>(
     withSchemaTypes(
       withObjectKeys(
         withPortableTextMarkModel(
-          withPlaceholderBlock(
-            withUndoRedo(
-              withPatches(
-                pluginUpdateValue(
-                  editorActor.getSnapshot().context,
-                  pluginUpdateSelection({
-                    editorActor,
-                    editor: e,
-                  }),
-                ),
+          withUndoRedo(
+            withPatches(
+              pluginUpdateValue(
+                editorActor.getSnapshot().context,
+                pluginUpdateSelection({
+                  editorActor,
+                  editor: e,
+                }),
               ),
             ),
           ),

package/src/editor/range-decorations-machine.ts

@@ -18,8 +18,8 @@ import {
 import {moveRangeByOperation} from '../internal-utils/move-range-by-operation'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
-import {isEqualToEmptyEditor} from '../internal-utils/values'
 import type {PortableTextSlateEditor, RangeDecoration} from '../types/editor'
+import {isEmptyTextBlock} from '../utils'
 import type {EditorSchema} from './editor-schema'
 
 const slateOperationCallback: CallbackLogicFunction<
@@ -282,7 +282,9 @@ export const rangeDecorationsMachine = setup({
     skipSetup: input.skipSetup,
     schema: input.schema,
     slateEditor: input.slateEditor,
-    decorate: {fn: createDecorate(input.schema, input.slateEditor)},
+    decorate: {
+      fn: createDecorate(input.schema, input.slateEditor),
+    },
   }),
   invoke: {
     src: 'slate operation listener',
@@ -357,7 +359,15 @@ function createDecorate(
   slateEditor: PortableTextSlateEditor,
 ) {
   return function decorate([node, path]: NodeEntry): Array<BaseRange> {
-    if (isEqualToEmptyEditor(slateEditor.value, schema)) {
+    const defaultStyle = schema.styles.at(0)?.name
+    const editorOnlyContainsEmptyParagraph =
+      slateEditor.value.length === 1 &&
+      isEmptyTextBlock({schema}, slateEditor.value[0]) &&
+      (!slateEditor.value[0].style ||
+        slateEditor.value[0].style === defaultStyle) &&
+      !slateEditor.value[0].listItem
+
+    if (editorOnlyContainsEmptyParagraph) {
       return [
         {
           anchor: {

package/src/editor/sync-machine.ts

@@ -17,7 +17,6 @@ import {
   type CallbackLogicFunction,
 } from 'xstate'
 import {pluginWithoutHistory} from '../history/slate-plugin.without-history'
-import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {debugWithName} from '../internal-utils/debug'
 import {validateValue} from '../internal-utils/validateValue'
 import {toSlateBlock, VOID_CHILD_KEY} from '../internal-utils/values'
@@ -425,10 +424,8 @@ async function updateValue({
     debug('Value is empty')
 
     clearEditor({
-      context,
       slateEditor,
       doneSyncing,
-      hadSelection,
     })
 
     isChanged = true
@@ -575,18 +572,11 @@ async function* getStreamedBlocks({value}: {value: Array<PortableTextBlock>}) {
  * Remove all blocks and insert a placeholder block
  */
 function clearEditor({
-  context,
   slateEditor,
   doneSyncing,
-  hadSelection,
 }: {
-  context: {
-    keyGenerator: () => string
-    schema: EditorSchema
-  }
   slateEditor: PortableTextSlateEditor
   doneSyncing: boolean
-  hadSelection: boolean
 }) {
   Editor.withoutNormalizing(slateEditor, () => {
     pluginWithoutHistory(slateEditor, () => {
@@ -596,10 +586,6 @@ function clearEditor({
             return
           }
 
-          if (hadSelection) {
-            Transforms.deselect(slateEditor)
-          }
-
           const childrenLength = slateEditor.children.length
 
           slateEditor.children.forEach((_, index) => {
@@ -607,15 +593,6 @@ function clearEditor({
               at: [childrenLength - 1 - index],
             })
           })
-
-          Transforms.insertNodes(slateEditor, createPlaceholderBlock(context), {
-            at: [0],
-          })
-
-          // Add a new selection in the top of the document
-          if (hadSelection) {
-            Transforms.select(slateEditor, [0, 0])
-          }
         })
       })
     })

package/src/internal-utils/applyPatch.ts

@@ -21,14 +21,15 @@ import type {EditorContext} from '../editor/editor-snapshot'
 import {KEY_TO_SLATE_ELEMENT} from '../editor/weakMaps'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {isKeyedSegment} from '../utils/util.is-keyed-segment'
-import {createPlaceholderBlock} from './create-placeholder-block'
 import {isEqualToEmptyEditor, toSlateBlock} from './values'
 
 /**
  * Creates a function that can apply a patch onto a PortableTextSlateEditor.
  */
 export function createApplyPatch(
-  context: Pick<EditorContext, 'schema' | 'keyGenerator'>,
+  context: Pick<EditorContext, 'schema' | 'keyGenerator'> & {
+    initialValue: Array<PortableTextBlock> | undefined
+  },
 ): (editor: PortableTextSlateEditor, patch: Patch) => boolean {
   return (editor: PortableTextSlateEditor, patch: Patch): boolean => {
     let changed = false
@@ -39,7 +40,7 @@ export function createApplyPatch(
           changed = insertPatch(context, editor, patch)
           break
         case 'unset':
-          changed = unsetPatch(context, editor, patch)
+          changed = unsetPatch(editor, patch)
           break
         case 'set':
           changed = setPatch(editor, patch)
@@ -118,13 +119,31 @@ function diffMatchPatch(
 }
 
 function insertPatch(
-  context: Pick<EditorContext, 'schema' | 'keyGenerator'>,
+  context: Pick<EditorContext, 'schema' | 'keyGenerator'> & {
+    initialValue: Array<PortableTextBlock> | undefined
+  },
   editor: PortableTextSlateEditor,
   patch: InsertPatch,
 ) {
   const block = findBlock(editor.children, patch.path)
 
   if (!block) {
+    if (patch.path.length === 1 && patch.path[0] === 0) {
+      const blocksToInsert = patch.items.map((item) =>
+        toSlateBlock(
+          item as PortableTextBlock,
+          {schemaTypes: context.schema},
+          KEY_TO_SLATE_ELEMENT.get(editor),
+        ),
+      )
+
+      Transforms.insertNodes(editor, blocksToInsert, {
+        at: [0],
+      })
+
+      return true
+    }
+
     return false
   }
 
@@ -147,6 +166,7 @@ function insertPatch(
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
 
     const editorWasEmptyBefore = isEqualToEmptyEditor(
+      context.initialValue,
       editor.value,
       context.schema,
     )
@@ -418,14 +438,9 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
   return true
 }
 
-function unsetPatch(
-  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
-  editor: PortableTextSlateEditor,
-  patch: UnsetPatch,
-) {
+function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
   // Value
   if (patch.path.length === 0) {
-    const previousSelection = editor.selection
     Transforms.deselect(editor)
 
     const children = Node.children(editor, [], {
@@ -436,15 +451,6 @@ function unsetPatch(
       Transforms.removeNodes(editor, {at: path})
     }
 
-    Transforms.insertNodes(editor, createPlaceholderBlock(context))
-    if (previousSelection) {
-      Transforms.select(editor, {
-        anchor: {path: [0, 0], offset: 0},
-        focus: {path: [0, 0], offset: 0},
-      })
-    }
-    // call OnChange here to emit the new selection
-    editor.onChange()
     return true
   }
 
@@ -456,27 +462,6 @@ function unsetPatch(
 
   // Single blocks
   if (patch.path.length === 1) {
-    if (editor.children.length === 1) {
-      // `unset`ing the last block should be treated similar to `unset`ing the
-      // entire editor value
-      const previousSelection = editor.selection
-
-      Transforms.deselect(editor)
-      Transforms.removeNodes(editor, {at: [block.index]})
-      Transforms.insertNodes(editor, createPlaceholderBlock(context))
-
-      if (previousSelection) {
-        Transforms.select(editor, {
-          anchor: {path: [0, 0], offset: 0},
-          focus: {path: [0, 0], offset: 0},
-        })
-      }
-
-      editor.onChange()
-
-      return true
-    }
-
     Transforms.removeNodes(editor, {at: [block.index]})
 
     return true

package/src/internal-utils/values.ts

@@ -169,9 +169,14 @@ export function fromSlateBlock(
 }
 
 export function isEqualToEmptyEditor(
+  initialValue: Array<PortableTextBlock> | undefined,
   blocks: Array<Descendant> | Array<PortableTextBlock>,
   schemaTypes: EditorSchema,
 ): boolean {
+  if (!blocks) {
+    return false
+  }
+
   // Must have exactly one block
   if (blocks.length !== 1) {
     return false
@@ -240,5 +245,22 @@ export function isEqualToEmptyEditor(
     return false
   }
 
+  if (
+    Object.keys(firstBlock).some(
+      (key) =>
+        key !== '_type' &&
+        key !== '_key' &&
+        key !== 'children' &&
+        key !== 'markDefs' &&
+        key !== 'style',
+    )
+  ) {
+    return false
+  }
+
+  if (isEqual(initialValue, [firstBlock])) {
+    return false
+  }
+
   return true
 }

package/src/operations/behavior.operation.delete.ts

@@ -1,7 +1,6 @@
 import {isSpan, isTextBlock} from '@portabletext/schema'
 import {deleteText, Editor, Element, Range, Transforms} from 'slate'
 import {DOMEditor} from 'slate-dom'
-import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {VOID_CHILD_KEY} from '../internal-utils/values'
@@ -68,10 +67,6 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
       mode: 'highest',
     })
 
-    if (operation.editor.children.length === 0) {
-      Transforms.insertNodes(operation.editor, createPlaceholderBlock(context))
-    }
-
     return
   }
 

package/src/operations/behavior.operation.insert.block.ts

@@ -10,6 +10,7 @@ import {
   type Descendant,
 } from 'slate'
 import {DOMEditor} from 'slate-dom'
+import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {getFocusBlock, getFocusChild} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {toSlateBlock} from '../internal-utils/values'
@@ -70,6 +71,10 @@ export function insertBlock(options: {
       })
     : editor.selection
 
+  if (editor.children.length === 0) {
+    Transforms.insertNodes(editor, createPlaceholderBlock(context), {at: [0]})
+  }
+
   // Fall back to the start and end of the editor if neither an editor
   // selection nor an `at` range is provided
   const start = at ? Range.start(at) : Editor.start(editor, [])

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -1,71 +0,0 @@
-import {Editor} from 'slate'
-import {isRedoing} from '../../history/slate-plugin.redoing'
-import {isUndoing} from '../../history/slate-plugin.undoing'
-import {createPlaceholderBlock} from '../../internal-utils/create-placeholder-block'
-import {debugWithName} from '../../internal-utils/debug'
-import type {PortableTextSlateEditor} from '../../types/editor'
-import type {EditorActor} from '../editor-machine'
-import {isChangingRemotely} from '../withChanges'
-
-const debug = debugWithName('plugin:withPlaceholderBlock')
-
-/**
- * Keep a "placeholder" block present when the editor is empty
- *
- */
-export function createWithPlaceholderBlock(
-  editorActor: EditorActor,
-): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  return function withPlaceholderBlock(
-    editor: PortableTextSlateEditor,
-  ): PortableTextSlateEditor {
-    const {apply} = editor
-
-    editor.apply = (op) => {
-      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
-        apply(op)
-        return
-      }
-
-      /**
-       * We don't want to run any side effects when the editor is processing
-       * remote changes.
-       */
-      if (isChangingRemotely(editor)) {
-        apply(op)
-        return
-      }
-
-      /**
-       * We don't want to run any side effects when the editor is undoing or
-       * redoing operations.
-       */
-      if (isUndoing(editor) || isRedoing(editor)) {
-        apply(op)
-        return
-      }
-
-      if (op.type === 'remove_node') {
-        const blockIndex = op.path.at(0)
-        const isLonelyBlock =
-          op.path.length === 1 &&
-          blockIndex === 0 &&
-          editor.children.length === 1
-        const isBlockObject =
-          op.node._type !== editorActor.getSnapshot().context.schema.block.name
-
-        if (isLonelyBlock && isBlockObject) {
-          debug('Adding placeholder block')
-          Editor.insertNode(
-            editor,
-            createPlaceholderBlock(editorActor.getSnapshot().context),
-          )
-        }
-      }
-
-      apply(op)
-    }
-
-    return editor
-  }
-}