refactor(portable-text-editor): simplify plugin options + make sure e…

…ditableAPI plugin is always present

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

@@ -23,7 +23,7 @@ import {Leaf} from './Leaf'
 import {Element} from './Element'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {PortableTextEditor} from './PortableTextEditor'
-import {createWithEditableAPI, createWithHotkeys, createWithInsertData} from './plugins'
+import {createWithInsertData, createWithHotkeys} from './plugins'
 import {useForwardedRef} from './hooks/useForwardedRef'
 import {usePortableTextEditorReadOnlyStatus} from './hooks/usePortableTextReadOnly'
 
@@ -113,12 +113,6 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     [hotkeys, keyGenerator, portableTextEditor, portableTextFeatures]
   )
 
-  // Create the PortableTextEditor API
-  const withEditableAPI = useMemo(
-    () => createWithEditableAPI(portableTextEditor, portableTextFeatures, keyGenerator),
-    [keyGenerator, portableTextEditor, portableTextFeatures]
-  )
-
   // 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.
@@ -128,8 +122,8 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       return withInsertData(slateEditor)
     }
     debug('Editable is in edit mode')
-    return withEditableAPI(withInsertData(withHotKeys(slateEditor)))
-  }, [readOnly, slateEditor, withEditableAPI, withHotKeys, withInsertData])
+    return withInsertData(withHotKeys(slateEditor))
+  }, [readOnly, slateEditor, withHotKeys, withInsertData])
 
   const renderElement = useCallback(
     (eProps) => (

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

@@ -107,10 +107,10 @@ export class PortableTextEditor extends React.Component<
   public readOnly: boolean
   public slateInstance: PortableTextSlateEditor
   public type: ArraySchemaType<PortableTextBlock>
+  public incomingPatches$?: PatchObservable
 
   private changeSubscription: Subscription
   private editable?: EditableAPI
-  private incomingPatches$?: PatchObservable
   private pendingPatches: Patch[] = []
   private returnedPatches: Patch[] = []
   hasPendingLocalPatches: React.MutableRefObject<boolean | null>
@@ -206,13 +206,7 @@ export class PortableTextEditor extends React.Component<
 
     // Create the slate instance
     this.slateInstance = withPlugins(withReact(createEditor()), {
-      change$: this.change$,
-      incomingPatches$: this.incomingPatches$,
-      keyGenerator: this.keyGenerator,
-      maxBlocks: this.maxBlocks,
-      portableTextFeatures: this.portableTextFeatures,
-      readOnly: this.readOnly,
-      syncValue: this.syncValue,
+      portableTextEditor: this,
     })
 
     this.state = {
@@ -238,13 +232,7 @@ export class PortableTextEditor extends React.Component<
     if (this.props.readOnly !== prevProps.readOnly) {
       this.readOnly = Boolean(this.props.readOnly)
       this.slateInstance = withPlugins(this.slateInstance, {
-        change$: this.change$,
-        incomingPatches$: this.incomingPatches$,
-        keyGenerator: this.keyGenerator,
-        maxBlocks: this.maxBlocks,
-        portableTextFeatures: this.portableTextFeatures,
-        readOnly: this.readOnly,
-        syncValue: this.syncValue,
+        portableTextEditor: this,
       })
     }
     // Update the maxBlocks prop

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

@@ -2,6 +2,7 @@ import {BaseOperation, Editor, NodeEntry, Node} from 'slate'
 import {PortableTextSlateEditor} from '../../types/editor'
 import {createEditorOptions} from '../../types/options'
 import {createOperationToPatches} from '../../utils/operationToPatches'
+import {createWithEditableAPI} from './createWithEditableAPI'
 import {createWithMaxBlocks} from './createWithMaxBlocks'
 import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
@@ -41,8 +42,11 @@ export const withPlugins = <T extends Editor>(
   options: createEditorOptions
 ): PortableTextSlateEditor => {
   const e = editor as T & PortableTextSlateEditor
-  e.maxBlocks = options.maxBlocks || -1
-  e.readOnly = options.readOnly || false
+  const {portableTextEditor} = options
+  const {portableTextFeatures, keyGenerator, readOnly, change$, syncValue, incomingPatches$} =
+    portableTextEditor
+  e.maxBlocks = portableTextEditor.maxBlocks || -1
+  e.readOnly = portableTextEditor.readOnly || false
   if (e.destroy) {
     e.destroy()
   } else {
@@ -54,11 +58,15 @@ export const withPlugins = <T extends Editor>(
       normalizeNode: e.normalizeNode,
     })
   }
-  const {portableTextFeatures, keyGenerator, change$, incomingPatches$, syncValue} = options
   const operationToPatches = createOperationToPatches(portableTextFeatures)
   const withObjectKeys = createWithObjectKeys(portableTextFeatures, keyGenerator)
   const withSchemaTypes = createWithSchemaTypes(portableTextFeatures)
-  const [withPatches, withPatchesCleanupFunction] = options.readOnly
+  const withEditableAPI = createWithEditableAPI(
+    portableTextEditor,
+    portableTextFeatures,
+    keyGenerator
+  )
+  const [withPatches, withPatchesCleanupFunction] = readOnly
     ? []
     : createWithPatches({
         patchFunctions: operationToPatches,
@@ -69,7 +77,7 @@ export const withPlugins = <T extends Editor>(
       })
   const withMaxBlocks = createWithMaxBlocks()
   const withPortableTextLists = createWithPortableTextLists(portableTextFeatures)
-  const [withUndoRedo, withUndoRedoCleanupFunction] = options.readOnly
+  const [withUndoRedo, withUndoRedoCleanupFunction] = readOnly
     ? []
     : createWithUndoRedo(incomingPatches$)
   const withPortableTextMarkModel = createWithPortableTextMarkModel(
@@ -101,12 +109,16 @@ export const withPlugins = <T extends Editor>(
       withUndoRedoCleanupFunction()
     }
   }
-  if (options.readOnly) {
+  if (readOnly) {
     return withSchemaTypes(
       withObjectKeys(
         withPortableTextMarkModel(
           withPortableTextBlockStyle(
-            withUtils(withPlaceholderBlock(withPortableTextLists(withPortableTextSelections(e))))
+            withUtils(
+              withPlaceholderBlock(
+                withPortableTextLists(withPortableTextSelections(withEditableAPI(e)))
+              )
+            )
           )
         )
       )
@@ -122,7 +134,11 @@ export const withPlugins = <T extends Editor>(
           withPortableTextBlockStyle(
             withPortableTextLists(
               withPlaceholderBlock(
-                withUtils(withMaxBlocks(withUndoRedo(withPatches(withPortableTextSelections(e)))))
+                withUtils(
+                  withMaxBlocks(
+                    withUndoRedo(withPatches(withPortableTextSelections(withEditableAPI(e))))
+                  )
+                )
               )
             )
           )

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

@@ -1,17 +1,7 @@
-import {Subject} from 'rxjs'
-import {PortableTextFeatures} from '../types/portableText'
-import {EditorChange, PatchObservable} from '../types/editor'
 import {PortableTextEditor} from '../editor/PortableTextEditor'
 
 export type createEditorOptions = {
-  portableTextFeatures: PortableTextFeatures
-  keyGenerator: () => string
-  change$: Subject<EditorChange>
-  maxBlocks?: number
-  hotkeys?: HotkeyOptions
-  incomingPatches$?: PatchObservable
-  readOnly: boolean
-  syncValue: () => void
+  portableTextEditor: PortableTextEditor
 }
 
 export type HotkeyOptions = {

packages/@sanity/portable-text-editor/src/utils/__tests__/operationToPatches.test.ts

@@ -1,21 +1,16 @@
 import {createEditor, Descendant} from 'slate'
-import {Subject} from 'rxjs'
 import {getPortableTextFeatures} from '../getPortableTextFeatures'
 import {type} from '../../editor/__tests__/PortableTextEditorTester'
 import {createOperationToPatches} from '../operationToPatches'
 import {withPlugins} from '../../editor/plugins'
-import {keyGenerator} from '../..'
+import {PortableTextEditor, PortableTextEditorProps} from '../..'
 import {TextBlock} from '../../types/portableText'
 
 const portableTextFeatures = getPortableTextFeatures(type)
 
 const operationToPatches = createOperationToPatches(portableTextFeatures)
 const editor = withPlugins(createEditor(), {
-  portableTextFeatures,
-  keyGenerator,
-  change$: new Subject(),
-  readOnly: false,
-  syncValue: () => undefined,
+  portableTextEditor: new PortableTextEditor({type} as PortableTextEditorProps),
 })
 
 const createDefaultValue = () =>

packages/@sanity/portable-text-editor/src/utils/__tests__/patchToOperations.test.ts

@@ -1,21 +1,16 @@
 import {createEditor, Descendant} from 'slate'
-import {Subject} from 'rxjs'
 import {getPortableTextFeatures} from '../getPortableTextFeatures'
 import {type} from '../../editor/__tests__/PortableTextEditorTester'
 import {createPatchToOperations} from '../patchToOperations'
 import {withPlugins} from '../../editor/plugins'
-import {keyGenerator, Patch} from '../..'
+import {keyGenerator, Patch, PortableTextEditor, PortableTextEditorProps} from '../..'
 import {fromSlateValue} from '../values'
 
 const portableTextFeatures = getPortableTextFeatures(type)
 
 const patchToOperations = createPatchToOperations(portableTextFeatures, keyGenerator)
 const editor = withPlugins(createEditor(), {
-  portableTextFeatures,
-  keyGenerator,
-  change$: new Subject(),
-  readOnly: false,
-  syncValue: () => undefined,
+  portableTextEditor: new PortableTextEditor({type} as PortableTextEditorProps),
 })
 
 const createDefaultValue = () =>