@portabletext/editor 1.9.0 → 1.10.1

package/package.json

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

package/src/editor/PortableTextEditor.tsx

@@ -94,17 +94,17 @@ export type PortableTextEditorProps<
          * Whether or not the editor should be in read-only mode
          */
         readOnly?: boolean
-      }) & {
-    /**
-     * The current value of the portable text field
-     */
-    value?: PortableTextBlock[]
-
-    /**
-     * A ref to the editor instance
-     */
-    editorRef?: MutableRefObject<PortableTextEditor | null>
-  }
+
+        /**
+         * The current value of the portable text field
+         */
+        value?: PortableTextBlock[]
+
+        /**
+         * A ref to the editor instance
+         */
+        editorRef?: MutableRefObject<PortableTextEditor | null>
+      }) & {}
 >
 
 /**
@@ -160,6 +160,7 @@ export class PortableTextEditor extends Component<
         input: {
           keyGenerator: props.keyGenerator || defaultKeyGenerator,
           schema: this.schemaTypes,
+          value: props.value,
         },
       })
       this.editorActor.start()
@@ -225,10 +226,20 @@ export class PortableTextEditor extends Component<
               : Number.parseInt(this.props.maxBlocks.toString(), 10),
         })
       }
-    }
 
-    if (this.props.editorRef !== prevProps.editorRef && this.props.editorRef) {
-      this.props.editorRef.current = this
+      if (this.props.value !== prevProps.value) {
+        this.editorActor.send({
+          type: 'update value',
+          value: this.props.value,
+        })
+      }
+
+      if (
+        this.props.editorRef !== prevProps.editorRef &&
+        this.props.editorRef
+      ) {
+        this.props.editorRef.current = this
+      }
     }
   }
 
@@ -279,7 +290,6 @@ export class PortableTextEditor extends Component<
                      */
                     this.change$.next(change)
                   }}
-                  value={this.props.value}
                 />
                 {this.props.children}
               </PortableTextEditorSelectionProvider>

package/src/editor/behavior/behavior.links.ts

@@ -6,7 +6,7 @@ import {getFocusSpan, selectionIsCollapsed} from './behavior.utils'
  * @alpha
  */
 export type LinkBehaviorsConfig = {
-  mapLinkAnnotation?: (config: {
+  linkAnnotation?: (context: {
     schema: PortableTextMemberSchemaTypes
     url: string
   }) => {name: string; value: {[prop: string]: unknown}} | undefined
@@ -24,7 +24,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
-          ? config.mapLinkAnnotation?.({url, schema: context.schema})
+          ? config.linkAnnotation?.({url, schema: context.schema})
           : undefined
 
       if (annotation && !selectionCollapsed) {
@@ -56,7 +56,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
-          ? config.mapLinkAnnotation?.({url, schema: context.schema})
+          ? config.linkAnnotation?.({url, schema: context.schema})
           : undefined
 
       if (url && annotation && selectionCollapsed) {

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

@@ -11,25 +11,25 @@ import {
  * @alpha
  */
 export type MarkdownBehaviorsConfig = {
-  mapBreakObject?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => {name: string; value?: {[prop: string]: unknown}} | undefined
-  mapDefaultStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapHeadingStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-    level: number,
-  ) => string | undefined
-  mapBlockquoteStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapUnorderedListStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapOrderedListStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
+  horizontalRuleObject?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => {name: string; value?: {[prop: string]: unknown}} | undefined
+  defaultStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  headingStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+    level: number
+  }) => string | undefined
+  blockquoteStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  unorderedListStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  orderedListStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
 }
 
 /**
@@ -55,7 +55,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
       const caretAtTheEndOfQuote = context.selection.focus.offset === 1
       const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
-      const blockquoteStyle = config.mapBlockquoteStyle?.(context.schema)
+      const blockquoteStyle = config.blockquoteStyle?.({schema: context.schema})
 
       if (
         caretAtTheEndOfQuote &&
@@ -104,13 +104,22 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const automaticBreak = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
-      const isDash = event.text === '-'
-
-      if (!isDash) {
+      const hrCharacter =
+        event.text === '-'
+          ? '-'
+          : event.text === '*'
+            ? '*'
+            : event.text === '_'
+              ? '_'
+              : undefined
+
+      if (hrCharacter === undefined) {
         return false
       }
 
-      const breakObject = config.mapBreakObject?.(context.schema)
+      const breakObject = config.horizontalRuleObject?.({
+        schema: context.schema,
+      })
       const focusBlock = getFocusTextBlock(context)
       const selectionCollapsed = selectionIsCollapsed(context)
 
@@ -123,17 +132,17 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         .map((child) => child.text ?? '')
         .join('')
 
-      if (onlyText && blockText === '--') {
-        return {breakObject, focusBlock}
+      if (onlyText && blockText === `${hrCharacter}${hrCharacter}`) {
+        return {breakObject, focusBlock, hrCharacter}
       }
 
       return false
     },
     actions: [
-      () => [
+      (_, {hrCharacter}) => [
         {
           type: 'insert text',
-          text: '-',
+          text: hrCharacter,
         },
       ],
       (_, {breakObject, focusBlock}) => [
@@ -179,27 +188,26 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text)
-      const headingLevel = markdownHeadingSearch
+      const level = markdownHeadingSearch
         ? markdownHeadingSearch[0].length
         : undefined
-      const caretAtTheEndOfHeading =
-        context.selection.focus.offset === headingLevel
+      const caretAtTheEndOfHeading = context.selection.focus.offset === level
 
       if (!caretAtTheEndOfHeading) {
         return false
       }
 
-      const headingStyle =
-        headingLevel !== undefined
-          ? config.mapHeadingStyle?.(context.schema, headingLevel)
+      const style =
+        level !== undefined
+          ? config.headingStyle?.({schema: context.schema, level})
           : undefined
 
-      if (headingLevel !== undefined && headingStyle !== undefined) {
+      if (level !== undefined && style !== undefined) {
         return {
           focusTextBlock,
           focusSpan,
-          style: headingStyle,
-          level: headingLevel,
+          style: style,
+          level,
         }
       }
 
@@ -254,7 +262,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         focusTextBlock.node.children[0]._key === focusSpan.node._key &&
         context.selection.focus.offset === 0
 
-      const defaultStyle = config.mapDefaultStyle?.(context.schema)
+      const defaultStyle = config.defaultStyle?.({schema: context.schema})
 
       if (
         atTheBeginningOfBLock &&
@@ -293,9 +301,11 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const defaultStyle = config.mapDefaultStyle?.(context.schema)
+      const defaultStyle = config.defaultStyle?.({schema: context.schema})
       const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
-      const unorderedListStyle = config.mapUnorderedListStyle?.(context.schema)
+      const unorderedListStyle = config.unorderedListStyle?.({
+        schema: context.schema,
+      })
       const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
       if (
@@ -314,7 +324,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
-      const orderedListStyle = config.mapOrderedListStyle?.(context.schema)
+      const orderedListStyle = config.orderedListStyle?.({
+        schema: context.schema,
+      })
       const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
       if (

package/src/editor/components/Synchronizer.tsx

@@ -27,7 +27,6 @@ export interface SynchronizerProps {
   editorActor: EditorActor
   getValue: () => Array<PortableTextBlock> | undefined
   onChange: (change: EditorChange) => void
-  value: Array<PortableTextBlock> | undefined
 }
 
 /**
@@ -37,7 +36,8 @@ export interface SynchronizerProps {
 export function Synchronizer(props: SynchronizerProps) {
   const portableTextEditor = usePortableTextEditor()
   const readOnly = useSelector(props.editorActor, (s) => s.context.readOnly)
-  const {editorActor, getValue, onChange, value} = props
+  const value = useSelector(props.editorActor, (s) => s.context.value)
+  const {editorActor, getValue, onChange} = props
   const pendingPatches = useRef<Patch[]>([])
 
   const syncValue = useSyncValue({

package/src/editor/editor-machine.ts

@@ -46,12 +46,16 @@ const networkLogic = fromCallback(({sendBack}) => {
     sendBack({type: 'offline'})
   }
 
-  window.addEventListener('online', onlineHandler)
-  window.addEventListener('offline', offlineHandler)
+  if (window) {
+    window.addEventListener('online', onlineHandler)
+    window.addEventListener('offline', offlineHandler)
+  }
 
   return () => {
-    window.removeEventListener('online', onlineHandler)
-    window.removeEventListener('offline', offlineHandler)
+    if (window) {
+      window.removeEventListener('online', onlineHandler)
+      window.removeEventListener('offline', offlineHandler)
+    }
   }
 })
 
@@ -102,6 +106,10 @@ export type InternalEditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
+  | {
+      type: 'update value'
+      value: Array<PortableTextBlock> | undefined
+    }
   | {
       type: 'toggle readOnly'
     }
@@ -163,6 +171,7 @@ export const editorMachine = setup({
       schema: PortableTextMemberSchemaTypes
       readOnly: boolean
       maxBlocks: number | undefined
+      value: Array<PortableTextBlock> | undefined
     },
     events: {} as InternalEditorEvent,
     emitted: {} as InternalEditorEmittedEvent,
@@ -170,6 +179,7 @@ export const editorMachine = setup({
       behaviors?: Array<Behavior>
       keyGenerator: () => string
       schema: PortableTextMemberSchemaTypes
+      value?: Array<PortableTextBlock>
     },
   },
   actions: {
@@ -315,6 +325,7 @@ export const editorMachine = setup({
     schema: input.schema,
     readOnly: false,
     maxBlocks: undefined,
+    value: input.value,
   }),
   invoke: {
     id: 'networkLogic',
@@ -352,6 +363,7 @@ export const editorMachine = setup({
     'done loading': {actions: emit({type: 'done loading'})},
     'update behaviors': {actions: 'assign behaviors'},
     'update schema': {actions: 'assign schema'},
+    'update value': {actions: assign({value: ({event}) => event.value})},
     'toggle readOnly': {
       actions: assign({readOnly: ({context}) => !context.readOnly}),
     },

package/src/editor/use-editor.ts

@@ -22,6 +22,7 @@ import {defaultKeyGenerator} from './key-generator'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
+  initialValue?: Array<PortableTextBlock>
 } & (
   | {
       schemaDefinition: SchemaDefinition
@@ -44,6 +45,7 @@ export type EditorEvent = PickFromUnion<
   | 'patches'
   | 'toggle readOnly'
   | 'update behaviors'
+  | 'update value'
 >
 
 /**
@@ -74,6 +76,7 @@ export function useEditor(config: EditorConfig): Editor {
               ? config.schema
               : compileType(config.schema),
           ),
+      value: config.initialValue,
     },
   })
   const slateEditor = createSlateEditor({editorActor})