@portabletext/editor 1.5.6 → 1.6.1

package/package.json

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

package/src/editor/Editable.tsx

@@ -69,6 +69,7 @@ import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {usePortableTextEditorReadOnlyStatus} from './hooks/usePortableTextReadOnly'
 import {createWithHotkeys, createWithInsertData} from './plugins'
 import {PortableTextEditor} from './PortableTextEditor'
+import {withSyncRangeDecorations} from './withSyncRangeDecorations'
 
 const debug = debugWithName('component:Editable')
 
@@ -163,27 +164,33 @@ export const PortableTextEditable = forwardRef<
 
   const blockTypeName = schemaTypes.block.name
 
-  // React/UI-specific plugins
-  const withInsertData = useMemo(
-    () => createWithInsertData(editorActor, schemaTypes),
-    [editorActor, schemaTypes],
-  )
-  const withHotKeys = useMemo(
-    () => createWithHotkeys(portableTextEditor, hotkeys),
-    [hotkeys, portableTextEditor],
-  )
-
   // Output a minimal React editor inside Editable when in readOnly mode.
   // NOTE: make sure all the plugins used here can be safely run over again at any point.
   // There will be a problem if they redefine editor methods and then calling the original method within themselves.
   useMemo(() => {
+    // React/UI-specific plugins
+    const withInsertData = createWithInsertData(editorActor, schemaTypes)
+
     if (readOnly) {
       debug('Editable is in read only mode')
       return withInsertData(slateEditor)
     }
+    const withHotKeys = createWithHotkeys(
+      editorActor,
+      portableTextEditor,
+      hotkeys,
+    )
+
     debug('Editable is in edit mode')
     return withInsertData(withHotKeys(slateEditor))
-  }, [readOnly, slateEditor, withHotKeys, withInsertData])
+  }, [
+    editorActor,
+    hotkeys,
+    portableTextEditor,
+    readOnly,
+    schemaTypes,
+    slateEditor,
+  ])
 
   const renderElement = useCallback(
     (eProps: RenderElementProps) => (
@@ -381,9 +388,6 @@ export const PortableTextEditable = forwardRef<
     }
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps])
 
-  // Store reference to original apply function (see below for usage in useEffect)
-  const originalApply = useMemo(() => slateEditor.apply, [slateEditor])
-
   const [syncedRangeDecorations, setSyncedRangeDecorations] = useState(false)
   useEffect(() => {
     if (!syncedRangeDecorations) {
@@ -402,16 +406,9 @@ export const PortableTextEditable = forwardRef<
 
   // Sync range decorations after an operation is applied
   useEffect(() => {
-    slateEditor.apply = (op: Operation) => {
-      originalApply(op)
-      if (op.type !== 'set_selection') {
-        syncRangeDecorations(op)
-      }
-    }
-    return () => {
-      slateEditor.apply = originalApply
-    }
-  }, [originalApply, slateEditor, syncRangeDecorations])
+    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations)
+    return () => teardown()
+  }, [slateEditor, syncRangeDecorations])
 
   // Handle from props onCopy function
   const handleCopy = useCallback(

package/src/editor/__tests__/self-solving.test.tsx

@@ -127,23 +127,23 @@ describe('Feature: Self-solving', () => {
           },
         })
         expect(onChange).toHaveBeenNthCalledWith(4, {
-          type: 'patch',
-          patch: spanPatch,
+          type: 'selection',
+          selection: {
+            ...getTextSelection(initialValue, 'foo'),
+            backward: false,
+          },
         })
         expect(onChange).toHaveBeenNthCalledWith(5, {
           type: 'patch',
-          patch: blockPatch,
+          patch: spanPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(6, {
           type: 'patch',
-          patch: strongPatch,
+          patch: blockPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(7, {
-          type: 'selection',
-          selection: {
-            ...getTextSelection(initialValue, 'foo'),
-            backward: false,
-          },
+          type: 'patch',
+          patch: strongPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(8, {
           type: 'selection',

package/src/editor/behavior/behavior.actions.ts

@@ -7,6 +7,11 @@ import {
 } from 'slate'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
+import {
+  addDecoratorActionImplementation,
+  removeDecoratorActionImplementation,
+  toggleDecoratorActionImplementation,
+} from '../plugins/createWithPortableTextMarkModel'
 import {insertBreakActionImplementation} from './behavior.action.insert-break'
 import type {
   BehaviorAction,
@@ -36,6 +41,9 @@ type BehaviourActionImplementations = {
 }
 
 const behaviorActionImplementations: BehaviourActionImplementations = {
+  'decorator.add': addDecoratorActionImplementation,
+  'decorator.remove': removeDecoratorActionImplementation,
+  'decorator.toggle': toggleDecoratorActionImplementation,
   'set block': ({action}) => {
     for (const path of action.paths) {
       const at = toSlateRange(
@@ -116,10 +124,21 @@ const behaviorActionImplementations: BehaviourActionImplementations = {
     action.effect()
   },
   'select': ({action}) => {
-    Transforms.select(
-      action.editor,
-      toSlateRange(action.selection, action.editor)!,
-    )
+    const newSelection = toSlateRange(action.selection, action.editor)
+
+    if (newSelection) {
+      Transforms.select(action.editor, newSelection)
+    } else {
+      Transforms.deselect(action.editor)
+    }
+  },
+  'reselect': ({action}) => {
+    const selection = action.editor.selection
+
+    if (selection) {
+      Transforms.select(action.editor, {...selection})
+      action.editor.selection = {...selection}
+    }
   },
 }
 
@@ -173,6 +192,13 @@ export function performAction({
       })
       break
     }
+    case 'reselect': {
+      behaviorActionImplementations.reselect({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       performDefaultAction({context, action})
     }
@@ -187,6 +213,27 @@ export function performDefaultAction({
   action: PickFromUnion<BehaviorAction, 'type', BehaviorEvent['type']>
 }) {
   switch (action.type) {
+    case 'decorator.add': {
+      behaviorActionImplementations['decorator.add']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'decorator.remove': {
+      behaviorActionImplementations['decorator.remove']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'decorator.toggle': {
+      behaviorActionImplementations['decorator.toggle']({
+        context,
+        action,
+      })
+      break
+    }
     case 'delete backward': {
       behaviorActionImplementations['delete backward']({
         context,

package/src/editor/behavior/behavior.core.decorators.ts

@@ -0,0 +1,52 @@
+import {defineBehavior} from './behavior.types'
+
+const decoratorAdd = defineBehavior({
+  on: 'decorator.add',
+  actions: [
+    ({event}) => [
+      {
+        type: 'decorator.add',
+        decorator: event.decorator,
+      },
+      {
+        type: 'reselect',
+      },
+    ],
+  ],
+})
+
+const decoratorRemove = defineBehavior({
+  on: 'decorator.remove',
+  actions: [
+    ({event}) => [
+      {
+        type: 'decorator.remove',
+        decorator: event.decorator,
+      },
+      {
+        type: 'reselect',
+      },
+    ],
+  ],
+})
+
+const decoratorToggle = defineBehavior({
+  on: 'decorator.toggle',
+  actions: [
+    ({event}) => [
+      {
+        type: 'decorator.toggle',
+        decorator: event.decorator,
+      },
+      {
+        type: 'reselect',
+      },
+    ],
+  ],
+})
+
+export const coreDecoratorBehaviors = {
+  decoratorAdd,
+  decoratorRemove,
+  decoratorToggle,
+}

package/src/editor/behavior/behavior.core.ts

@@ -1,4 +1,5 @@
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
+import {coreDecoratorBehaviors} from './behavior.core.decorators'
 import {coreListBehaviors} from './behavior.core.lists'
 import {defineBehavior} from './behavior.types'
 
@@ -12,6 +13,9 @@ const softReturn = defineBehavior({
  */
 export const coreBehaviors = [
   softReturn,
+  coreDecoratorBehaviors.decoratorAdd,
+  coreDecoratorBehaviors.decoratorRemove,
+  coreDecoratorBehaviors.decoratorToggle,
   coreBlockObjectBehaviors.breakingBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,
@@ -24,6 +28,7 @@ export const coreBehaviors = [
  */
 export const coreBehavior = {
   softReturn,
+  decorators: coreDecoratorBehaviors,
   blockObjects: coreBlockObjectBehaviors,
   lists: coreListBehaviors,
 }

package/src/editor/behavior/behavior.markdown.ts

@@ -227,11 +227,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const defaultStyle = config.mapDefaultStyle(context.schema)
       const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
       const unorderedListStyle = config.mapUnorderedListStyle(context.schema)
       const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
       if (
+        defaultStyle &&
         caretAtTheEndOfUnorderedList &&
         looksLikeUnorderedList &&
         unorderedListStyle !== undefined
@@ -241,6 +243,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           focusSpan,
           listItem: unorderedListStyle,
           listItemLength: 1,
+          style: defaultStyle,
         }
       }
 
@@ -249,6 +252,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
       if (
+        defaultStyle &&
         caretAtTheEndOfOrderedList &&
         looksLikeOrderedList &&
         orderedListStyle !== undefined
@@ -258,6 +262,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           focusSpan,
           listItem: orderedListStyle,
           listItemLength: 2,
+          style: defaultStyle,
         }
       }
 
@@ -270,16 +275,12 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, listItem, listItemLength}) => [
-        {
-          type: 'unset block',
-          props: ['style'],
-          paths: [focusTextBlock.path],
-        },
+      (_, {focusTextBlock, focusSpan, style, listItem, listItemLength}) => [
         {
           type: 'set block',
           listItem,
           level: 1,
+          style,
           paths: [focusTextBlock.path],
         },
         {

package/src/editor/behavior/behavior.types.ts

@@ -20,6 +20,18 @@ export type BehaviorContext = {
  * @alpha
  */
 export type BehaviorEvent =
+  | {
+      type: 'decorator.add'
+      decorator: string
+    }
+  | {
+      type: 'decorator.remove'
+      decorator: string
+    }
+  | {
+      type: 'decorator.toggle'
+      decorator: string
+    }
   | {
       type: 'delete backward'
       unit: TextUnit
@@ -87,6 +99,9 @@ export type BehaviorActionIntend =
       type: 'select'
       selection: EditorSelection
     }
+  | {
+      type: 'reselect'
+    }
 
 /**
  * @alpha

package/src/editor/editor-machine.ts

@@ -20,7 +20,7 @@ import type {
 import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
-import {performAction, performDefaultAction} from './behavior/behavior.actions'
+import {performAction} from './behavior/behavior.actions'
 import {coreBehaviors} from './behavior/behavior.core'
 import type {
   Behavior,
@@ -197,7 +197,11 @@ export const editorMachine = setup({
       )
 
       if (eventBehaviors.length === 0) {
-        performDefaultAction({context, action: defaultAction})
+        enqueue.raise({
+          type: 'behavior action intends',
+          editor: event.editor,
+          actionIntends: [defaultAction],
+        })
         return
       }
 
@@ -216,7 +220,11 @@ export const editorMachine = setup({
         console.warn(
           `Unable to handle event ${event.type} due to missing selection`,
         )
-        performDefaultAction({context, action: defaultAction})
+        enqueue.raise({
+          type: 'behavior action intends',
+          editor: event.editor,
+          actionIntends: [defaultAction],
+        })
         return
       }
 
@@ -264,7 +272,11 @@ export const editorMachine = setup({
       }
 
       if (!behaviorOverwritten) {
-        performDefaultAction({context, action: defaultAction})
+        enqueue.raise({
+          type: 'behavior action intends',
+          editor: event.editor,
+          actionIntends: [defaultAction],
+        })
       }
     }),
   },
@@ -315,6 +327,22 @@ export const editorMachine = setup({
           })
           event.editor.onChange()
         },
+        enqueueActions(({context, event, enqueue}) => {
+          if (
+            event.actionIntends.some(
+              (actionIntend) => actionIntend.type === 'reselect',
+            )
+          ) {
+            enqueue.raise({
+              type: 'selection',
+              selection: toPortableTextRange(
+                event.editor.children,
+                event.editor.selection,
+                context.schema,
+              ),
+            })
+          }
+        }),
       ],
     },
   },

package/src/editor/plugins/create-with-event-listeners.ts

@@ -3,6 +3,30 @@ import type {EditorActor} from '../editor-machine'
 
 export function createWithEventListeners(editorActor: EditorActor) {
   return function withEventListeners(editor: Editor) {
+    editor.addMark = (mark) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'decorator.add',
+          decorator: mark,
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.removeMark = (mark) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'decorator.remove',
+          decorator: mark,
+        },
+        editor,
+      })
+      return
+    }
+
     editor.deleteBackward = (unit) => {
       editorActor.send({
         type: 'behavior event',

package/src/editor/plugins/createWithEditableAPI.ts

@@ -38,6 +38,7 @@ import {
 } from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
 import type {PortableTextEditor} from '../PortableTextEditor'
+import {isDecoratorActive} from './createWithPortableTextMarkModel'
 
 const debug = debugWithName('API:editable')
 
@@ -57,7 +58,14 @@ export function createWithEditableAPI(
         ReactEditor.blur(editor)
       },
       toggleMark: (mark: string): void => {
-        editor.pteToggleMark(mark)
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'decorator.toggle',
+            decorator: mark,
+          },
+          editor,
+        })
       },
       toggleList: (listStyle: string): void => {
         editor.pteToggleListItem(listStyle)
@@ -69,7 +77,7 @@ export function createWithEditableAPI(
         // Try/catch this, as Slate may error because the selection is currently wrong
         // TODO: catch only relevant error from Slate
         try {
-          return editor.pteIsMarkActive(mark)
+          return isDecoratorActive({editor, decorator: mark})
         } catch (err) {
           console.warn(err)
           return false

package/src/editor/plugins/createWithHotKeys.ts

@@ -7,6 +7,7 @@ import type {PortableTextSlateEditor} from '../../types/editor'
 import type {HotkeyOptions} from '../../types/options'
 import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
+import type {EditorActor} from '../editor-machine'
 import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('plugin:withHotKeys')
@@ -26,6 +27,7 @@ const DEFAULT_HOTKEYS: HotkeyOptions = {
  *
  */
 export function createWithHotkeys(
+  editorActor: EditorActor,
   portableTextEditor: PortableTextEditor,
   hotkeysFromOptions?: HotkeyOptions,
 ): (editor: PortableTextSlateEditor & ReactEditor) => any {
@@ -46,7 +48,14 @@ export function createWithHotkeys(
               if (possibleMark) {
                 const mark = possibleMark[hotkey]
                 debug(`HotKey ${hotkey} to toggle ${mark}`)
-                editor.pteToggleMark(mark)
+                editorActor.send({
+                  type: 'behavior event',
+                  behaviorEvent: {
+                    type: 'decorator.toggle',
+                    decorator: mark,
+                  },
+                  editor,
+                })
               }
             }
           }