@portabletext/editor 3.2.6 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.2.6",
+  "version": "3.3.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -73,6 +73,7 @@
     "slate-react": "^0.120.0",
     "xstate": "^5.24.0",
     "@portabletext/block-tools": "^4.1.7",
+    "@portabletext/markdown": "^1.0.3",
     "@portabletext/keyboard-shortcuts": "^2.1.0",
     "@portabletext/patches": "^2.0.0",
     "@portabletext/schema": "^2.0.0"

package/src/behaviors/behavior.abstract.deserialize.ts

@@ -1,4 +1,5 @@
 import {isTextBlock} from '@portabletext/schema'
+import type {MIMEType} from '../internal-utils/mime-type'
 import {getActiveAnnotations} from '../selectors/selector.get-active-annotations'
 import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
 import {getFocusTextBlock} from '../selectors/selector.get-focus-text-block'
@@ -6,60 +7,67 @@ import {getTextBlockText} from '../utils/util.get-text-block-text'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
+const mimeTypePriority: Array<MIMEType> = [
+  'application/x-portable-text',
+  'application/json',
+  'text/markdown',
+  'text/html',
+  'text/plain',
+]
+
+/**
+ * Finds the first available data from the dataTransfer based on priority.
+ * Optionally starts from a specific mime type in the priority list.
+ */
+function getFirstAvailableData({
+  dataTransfer,
+  startAfter,
+}: {
+  dataTransfer: DataTransfer
+  startAfter?: MIMEType
+}): {mimeType: MIMEType; data: string} | undefined {
+  const startIndex = startAfter ? mimeTypePriority.indexOf(startAfter) + 1 : 0
+
+  for (let index = startIndex; index < mimeTypePriority.length; index++) {
+    const mimeType = mimeTypePriority.at(index)
+
+    if (!mimeType) {
+      continue
+    }
+
+    const data = dataTransfer.getData(mimeType)
+
+    if (!data) {
+      continue
+    }
+
+    return {
+      mimeType,
+      data,
+    }
+  }
+
+  return undefined
+}
+
 export const abstractDeserializeBehaviors = [
   defineBehavior({
     on: 'deserialize',
     guard: ({event}) => {
-      const portableText = event.originEvent.originEvent.dataTransfer.getData(
-        'application/x-portable-text',
-      )
-
-      if (portableText) {
-        return {
-          type: 'deserialize.data',
-          mimeType: 'application/x-portable-text',
-          data: portableText,
-          originEvent: event.originEvent,
-        } as const
-      }
-
-      const json =
-        event.originEvent.originEvent.dataTransfer.getData('application/json')
-
-      if (json) {
-        return {
-          type: 'deserialize.data',
-          mimeType: 'application/json',
-          data: json,
-          originEvent: event.originEvent,
-        } as const
-      }
-
-      const html =
-        event.originEvent.originEvent.dataTransfer.getData('text/html')
+      const availableData = getFirstAvailableData({
+        dataTransfer: event.originEvent.originEvent.dataTransfer,
+      })
 
-      if (html) {
-        return {
-          type: 'deserialize.data',
-          mimeType: 'text/html',
-          data: html,
-          originEvent: event.originEvent,
-        } as const
+      if (!availableData) {
+        return false
       }
 
-      const text =
-        event.originEvent.originEvent.dataTransfer.getData('text/plain')
-
-      if (text) {
-        return {
-          type: 'deserialize.data',
-          mimeType: 'text/plain',
-          data: text,
-          originEvent: event.originEvent,
-        } as const
+      return {
+        type: 'deserialize.data' as const,
+        mimeType: availableData.mimeType,
+        data: availableData.data,
+        originEvent: event.originEvent,
       }
-
-      return false
     },
     actions: [(_, deserializeEvent) => [raise(deserializeEvent)]],
   }),
@@ -184,49 +192,25 @@ export const abstractDeserializeBehaviors = [
   defineBehavior({
     on: 'deserialization.failure',
     guard: ({event}) => {
-      if (event.mimeType === 'application/x-portable-text') {
-        const json =
-          event.originEvent.originEvent.dataTransfer.getData('application/json')
-
-        if (json) {
-          return {
-            type: 'deserialize.data',
-            mimeType: 'application/json',
-            data: json,
-            originEvent: event.originEvent,
-          } as const
-        }
+      if (event.mimeType === '*/*') {
+        return false
       }
 
-      if (event.mimeType === 'application/json') {
-        const html =
-          event.originEvent.originEvent.dataTransfer.getData('text/html')
-
-        if (html) {
-          return {
-            type: 'deserialize.data',
-            mimeType: 'text/html',
-            data: html,
-            originEvent: event.originEvent,
-          } as const
-        }
-      }
+      const availableData = getFirstAvailableData({
+        dataTransfer: event.originEvent.originEvent.dataTransfer,
+        startAfter: event.mimeType,
+      })
 
-      if (event.mimeType === 'text/html') {
-        const text =
-          event.originEvent.originEvent.dataTransfer.getData('text/plain')
-
-        if (text) {
-          return {
-            type: 'deserialize.data',
-            mimeType: 'text/plain',
-            data: text,
-            originEvent: event.originEvent,
-          } as const
-        }
+      if (!availableData) {
+        return false
       }
 
-      return false
+      return {
+        type: 'deserialize.data' as const,
+        mimeType: availableData.mimeType,
+        data: availableData.data,
+        originEvent: event.originEvent,
+      }
     },
     actions: [(_, deserializeDataEvent) => [raise(deserializeDataEvent)]],
   }),

package/src/converters/converter.text-markdown.ts

@@ -0,0 +1,67 @@
+import {
+  markdownToPortableText,
+  portableTextToMarkdown,
+} from '@portabletext/markdown'
+import {getSelectedValue} from '../selectors/selector.get-selected-value'
+import {parseBlock} from '../utils/parse-blocks'
+import {defineConverter} from './converter.types'
+
+export const converterTextMarkdown = defineConverter({
+  mimeType: 'text/markdown',
+  serialize: ({snapshot, event}) => {
+    const selection = snapshot.context.selection
+
+    if (!selection) {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'text/markdown',
+        reason: 'No selection',
+        originEvent: event.originEvent,
+      }
+    }
+
+    const blocks = getSelectedValue(snapshot)
+
+    const markdown = portableTextToMarkdown(blocks)
+
+    return {
+      type: 'serialization.success',
+      data: markdown,
+      mimeType: 'text/markdown',
+      originEvent: event.originEvent,
+    }
+  },
+  deserialize: ({snapshot, event}) => {
+    const blocks = markdownToPortableText(event.data, {
+      keyGenerator: snapshot.context.keyGenerator,
+      schema: snapshot.context.schema,
+    })
+
+    const parsedBlocks = blocks.flatMap((block) => {
+      const parsedBlock = parseBlock({
+        context: snapshot.context,
+        block,
+        options: {
+          normalize: false,
+          removeUnusedMarkDefs: true,
+          validateFields: false,
+        },
+      })
+      return parsedBlock ? [parsedBlock] : []
+    })
+
+    if (parsedBlocks.length === 0) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: 'text/markdown',
+        reason: 'No blocks deserialized',
+      }
+    }
+
+    return {
+      type: 'deserialization.success',
+      data: parsedBlocks,
+      mimeType: 'text/markdown',
+    }
+  },
+})

package/src/converters/converters.core.ts

@@ -2,6 +2,7 @@ import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {converterJson} from './converter.json'
 import {converterPortableText} from './converter.portable-text'
 import {createConverterTextHtml} from './converter.text-html'
+import {converterTextMarkdown} from './converter.text-markdown'
 import {createConverterTextPlain} from './converter.text-plain'
 
 export function createCoreConverters(
@@ -10,6 +11,7 @@ export function createCoreConverters(
   return [
     converterJson,
     converterPortableText,
+    converterTextMarkdown,
     createConverterTextHtml(legacySchema),
     createConverterTextPlain(legacySchema),
   ]

package/src/editor/PortableTextEditor.tsx

@@ -599,7 +599,9 @@ export class PortableTextEditor extends Component<
   }
 
   static isObjectPath = (_editor: PortableTextEditor, path: Path): boolean => {
-    if (!path || !Array.isArray(path)) return false
+    if (!path || !Array.isArray(path)) {
+      return false
+    }
     const isChildObjectEditPath = path.length > 3 && path[1] === 'children'
     const isBlockObjectEditPath = path.length > 1 && path[1] !== 'children'
     return isBlockObjectEditPath || isChildObjectEditPath

package/src/editor/plugins/createWithPatches.ts

@@ -64,8 +64,9 @@ export function createWithPatches({
           withoutPatching(editor, () => {
             pluginWithoutHistory(editor, () => {
               for (const patch of patches) {
-                if (debug.enabled)
+                if (debug.enabled) {
                   debug(`Handling remote patch ${JSON.stringify(patch)}`)
+                }
 
                 try {
                   changed = applyPatch(editor, patch)
@@ -125,11 +126,12 @@ export function createWithPatches({
       )
 
       if (!isPatching(editor)) {
-        if (debugVerbose && debug.enabled)
+        if (debugVerbose && debug.enabled) {
           debug(
             `Editor is not producing patch for operation ${operation.type}`,
             operation,
           )
+        }
         return editor
       }
 

package/src/editor/sync-machine.ts

@@ -663,8 +663,9 @@ function syncBlock({
       context.keyGenerator,
     )
 
-    if (debug.enabled)
+    if (debug.enabled) {
       debug('Validating and inserting new block in the end of the value', block)
+    }
 
     if (validation.valid || validation.resolution?.autoResolve) {
       const slateBlock = toSlateBlock(block, {
@@ -740,7 +741,9 @@ function syncBlock({
 
   if (validation.valid || validation.resolution?.autoResolve) {
     if (oldBlock._key === block._key) {
-      if (debug.enabled) debug('Updating block', oldBlock, block)
+      if (debug.enabled) {
+        debug('Updating block', oldBlock, block)
+      }
 
       Editor.withoutNormalizing(slateEditor, () => {
         withRemoteChanges(slateEditor, () => {
@@ -756,7 +759,9 @@ function syncBlock({
         })
       })
     } else {
-      if (debug.enabled) debug('Replacing block', oldBlock, block)
+      if (debug.enabled) {
+        debug('Replacing block', oldBlock, block)
+      }
 
       Editor.withoutNormalizing(slateEditor, () => {
         withRemoteChanges(slateEditor, () => {

package/src/internal-utils/apply-operation-to-portable-text.ts

@@ -145,7 +145,9 @@ function applyOperationToPortableTextImmutable(
 
     case 'insert_text': {
       const {path, offset, text} = operation
-      if (text.length === 0) return root
+      if (text.length === 0) {
+        return root
+      }
 
       const span = getSpan(context, root, path)
       if (!span) {

package/src/internal-utils/event-position.ts

@@ -148,7 +148,13 @@ export function getEventNode({
     return undefined
   }
 
-  const node = DOMEditor.toSlateNode(slateEditor, event.target)
+  let node: Node | undefined
+
+  try {
+    node = DOMEditor.toSlateNode(slateEditor, event.target)
+  } catch (error) {
+    console.error(error)
+  }
 
   return node
 }
@@ -168,7 +174,18 @@ function getEventPositionBlock({
     return undefined
   }
 
-  const firstBlockElement = DOMEditor.toDOMNode(slateEditor, firstBlock)
+  let firstBlockElement: HTMLElement | undefined
+
+  try {
+    firstBlockElement = DOMEditor.toDOMNode(slateEditor, firstBlock)
+  } catch (error) {
+    console.error(error)
+  }
+
+  if (!firstBlockElement) {
+    return undefined
+  }
+
   const firstBlockRect = firstBlockElement.getBoundingClientRect()
 
   if (event.pageY < firstBlockRect.top) {
@@ -181,14 +198,36 @@ function getEventPositionBlock({
     return undefined
   }
 
-  const lastBlockElement = DOMEditor.toDOMNode(slateEditor, lastBlock)
+  let lastBlockElement: HTMLElement | undefined
+
+  try {
+    lastBlockElement = DOMEditor.toDOMNode(slateEditor, lastBlock)
+  } catch (error) {
+    console.error(error)
+  }
+
+  if (!lastBlockElement) {
+    return undefined
+  }
+
   const lastBlockRef = lastBlockElement.getBoundingClientRect()
 
   if (event.pageY > lastBlockRef.bottom) {
     return 'end'
   }
 
-  const element = DOMEditor.toDOMNode(slateEditor, node)
+  let element: HTMLElement | undefined
+
+  try {
+    element = DOMEditor.toDOMNode(slateEditor, node)
+  } catch (error) {
+    console.error(error)
+  }
+
+  if (!element) {
+    return undefined
+  }
+
   const elementRect = element.getBoundingClientRect()
   const top = elementRect.top
   const height = elementRect.height

package/src/internal-utils/global-scope.ts

@@ -8,10 +8,18 @@
  * - The `global` variable is the global scope in Node.js
  */
 function getGlobalScope() {
-  if (typeof globalThis !== 'undefined') return globalThis
-  if (typeof window !== 'undefined') return window
-  if (typeof self !== 'undefined') return self
-  if (typeof global !== 'undefined') return global
+  if (typeof globalThis !== 'undefined') {
+    return globalThis
+  }
+  if (typeof window !== 'undefined') {
+    return window
+  }
+  if (typeof self !== 'undefined') {
+    return self
+  }
+  if (typeof global !== 'undefined') {
+    return global
+  }
 
   throw new Error('@portabletext/editor: could not locate global scope')
 }

package/src/priority/priority.sort.ts

@@ -47,7 +47,9 @@ export function sortByPriority<
 
   // Helper function to add an edge to the graph
   function addEdge(fromId: string, toId: string) {
-    if (!graph.has(fromId) || !graph.has(toId)) return
+    if (!graph.has(fromId) || !graph.has(toId)) {
+      return
+    }
     graph.get(fromId)?.add(toId)
     inDegree.set(toId, (inDegree.get(toId) ?? 0) + 1)
   }