@portabletext/editor 3.2.6 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -74,6 +74,7 @@
     "xstate": "^5.24.0",
     "@portabletext/block-tools": "^4.1.7",
     "@portabletext/keyboard-shortcuts": "^2.1.0",
+    "@portabletext/markdown": "^1.0.3",
     "@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),
   ]