@portabletext/editor 1.6.0 → 1.7.0

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

@@ -0,0 +1,67 @@
+import {createEditor, type Descendant} from 'slate'
+import {withReact} from 'slate-react'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {debugWithName} from '../utils/debug'
+import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import type {EditorActor} from './editor-machine'
+import {withPlugins} from './plugins/with-plugins'
+
+const debug = debugWithName('component:PortableTextEditor:SlateContainer')
+
+type SlateEditorConfig = {
+  editorActor: EditorActor
+}
+
+export type SlateEditor = {
+  instance: PortableTextSlateEditor
+  initialValue: Array<Descendant>
+  destroy: () => void
+}
+
+const slateEditors = new WeakMap<EditorActor, SlateEditor>()
+
+export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
+  const existingSlateEditor = slateEditors.get(config.editorActor)
+
+  if (existingSlateEditor) {
+    debug('Reusing existing Slate editor instance', config.editorActor.id)
+    return existingSlateEditor
+  }
+
+  debug('Creating new Slate editor instance', config.editorActor.id)
+
+  let unsubscriptions: Array<() => void> = []
+  let subscriptions: Array<() => () => void> = []
+
+  const instance = withPlugins(withReact(createEditor()), {
+    editorActor: config.editorActor,
+    subscriptions,
+  })
+
+  KEY_TO_VALUE_ELEMENT.set(instance, {})
+  KEY_TO_SLATE_ELEMENT.set(instance, {})
+
+  for (const subscription of subscriptions) {
+    unsubscriptions.push(subscription())
+  }
+
+  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
+
+  const slateEditor: SlateEditor = {
+    instance,
+    initialValue,
+    destroy: () => {
+      debug('Destroying Slate editor')
+      instance.destroy()
+      for (const unsubscribe of unsubscriptions) {
+        unsubscribe()
+      }
+      subscriptions = []
+      unsubscriptions = []
+    },
+  }
+
+  slateEditors.set(config.editorActor, slateEditor)
+
+  return slateEditor
+}

package/src/editor/editor-machine.ts

@@ -28,8 +28,11 @@ import type {
   BehaviorActionIntend,
   BehaviorContext,
   BehaviorEvent,
+  PickFromUnion,
 } from './behavior/behavior.types'
 
+export * from 'xstate/guards'
+
 /**
  * @internal
  */
@@ -75,7 +78,10 @@ export type MutationEvent = {
   snapshot: Array<PortableTextBlock> | undefined
 }
 
-type EditorEvent =
+/**
+ * @internal
+ */
+export type InternalEditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
   | {
@@ -96,9 +102,19 @@ type EditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
-  | EditorEmittedEvent
+  | {
+      type: 'toggle readOnly'
+    }
+  | {
+      type: 'update maxBlocks'
+      maxBlocks: number | undefined
+    }
+  | InternalEditorEmittedEvent
 
-type EditorEmittedEvent =
+/**
+ * @internal
+ */
+export type InternalEditorEmittedEvent =
   | {type: 'ready'}
   | PatchEvent
   | PatchesEvent
@@ -124,11 +140,16 @@ type EditorEmittedEvent =
     }
   | {type: 'selection'; selection: EditorSelection}
   | {type: 'blur'; event: FocusEvent<HTMLDivElement, Element>}
-  | {type: 'focus'; event: FocusEvent<HTMLDivElement, Element>}
+  | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'online'}
   | {type: 'offline'}
   | {type: 'loading'}
   | {type: 'done loading'}
+  | PickFromUnion<
+      BehaviorEvent,
+      'type',
+      'annotation.add' | 'annotation.remove' | 'annotation.toggle' | 'focus'
+    >
 
 /**
  * @internal
@@ -140,9 +161,11 @@ export const editorMachine = setup({
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
       schema: PortableTextMemberSchemaTypes
+      readOnly: boolean
+      maxBlocks: number | undefined
     },
-    events: {} as EditorEvent,
-    emitted: {} as EditorEmittedEvent,
+    events: {} as InternalEditorEvent,
+    emitted: {} as InternalEditorEmittedEvent,
     input: {} as {
       behaviors?: Array<Behavior>
       keyGenerator: () => string
@@ -290,12 +313,30 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
+    readOnly: false,
+    maxBlocks: undefined,
   }),
   invoke: {
     id: 'networkLogic',
     src: 'networkLogic',
   },
   on: {
+    'annotation.add': {
+      actions: emit(({event}) => event),
+      guard: ({context}) => !context.readOnly,
+    },
+    'annotation.remove': {
+      actions: emit(({event}) => event),
+      guard: ({context}) => !context.readOnly,
+    },
+    'annotation.toggle': {
+      actions: emit(({event}) => event),
+      guard: ({context}) => !context.readOnly,
+    },
+    'focus': {
+      actions: emit(({event}) => event),
+      guard: ({context}) => !context.readOnly,
+    },
     'ready': {actions: emit(({event}) => event)},
     'unset': {actions: emit(({event}) => event)},
     'value changed': {actions: emit(({event}) => event)},
@@ -303,7 +344,7 @@ export const editorMachine = setup({
     'error': {actions: emit(({event}) => event)},
     'selection': {actions: emit(({event}) => event)},
     'blur': {actions: emit(({event}) => event)},
-    'focus': {actions: emit(({event}) => event)},
+    'focused': {actions: emit(({event}) => event)},
     'online': {actions: emit({type: 'online'})},
     'offline': {actions: emit({type: 'offline'})},
     'loading': {actions: emit({type: 'loading'})},
@@ -311,7 +352,16 @@ export const editorMachine = setup({
     'done loading': {actions: emit({type: 'done loading'})},
     'update behaviors': {actions: 'assign behaviors'},
     'update schema': {actions: 'assign schema'},
-    'behavior event': {actions: 'handle behavior event'},
+    'toggle readOnly': {
+      actions: assign({readOnly: ({context}) => !context.readOnly}),
+    },
+    'update maxBlocks': {
+      actions: assign({maxBlocks: ({event}) => event.maxBlocks}),
+    },
+    'behavior event': {
+      actions: 'handle behavior event',
+      guard: ({context}) => !context.readOnly,
+    },
     'behavior action intends': {
       actions: [
         ({context, event}) => {

package/src/editor/key-generator.ts

@@ -1,6 +1,35 @@
-import {randomKey} from '@sanity/util/content'
+import getRandomValues from 'get-random-values-esm'
 
 /**
  * @public
  */
 export const defaultKeyGenerator = (): string => randomKey(12)
+
+const getByteHexTable = (() => {
+  let table: any[]
+  return () => {
+    if (table) {
+      return table
+    }
+
+    table = []
+    for (let i = 0; i < 256; ++i) {
+      table[i] = (i + 0x100).toString(16).slice(1)
+    }
+    return table
+  }
+})()
+
+// WHATWG crypto RNG - https://w3c.github.io/webcrypto/Overview.html
+function whatwgRNG(length = 16) {
+  const rnds8 = new Uint8Array(length)
+  getRandomValues(rnds8)
+  return rnds8
+}
+
+function randomKey(length?: number): string {
+  const table = getByteHexTable()
+  return whatwgRNG(length)
+    .reduce((str, n) => str + table[n], '')
+    .slice(0, length)
+}

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

@@ -1,8 +1,69 @@
 import type {Editor} from 'slate'
 import type {EditorActor} from '../editor-machine'
 
-export function createWithEventListeners(editorActor: EditorActor) {
+export function createWithEventListeners(
+  editorActor: EditorActor,
+  subscriptions: Array<() => () => void>,
+) {
   return function withEventListeners(editor: Editor) {
+    if (editorActor.getSnapshot().context.maxBlocks !== undefined) {
+      return editor
+    }
+
+    subscriptions.push(() => {
+      const subscription = editorActor.on('*', (event) => {
+        switch (event.type) {
+          case 'annotation.add': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'annotation.add',
+                annotation: event.annotation,
+              },
+              editor,
+            })
+            break
+          }
+          case 'annotation.remove': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'annotation.remove',
+                annotation: event.annotation,
+              },
+              editor,
+            })
+            break
+          }
+          case 'annotation.toggle': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'annotation.toggle',
+                annotation: event.annotation,
+              },
+              editor,
+            })
+            break
+          }
+          case 'focus': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'focus',
+              },
+              editor,
+            })
+            break
+          }
+        }
+      })
+
+      return () => {
+        subscription.unsubscribe()
+      }
+    })
+
     editor.addMark = (mark) => {
       editorActor.send({
         type: 'behavior event',