@portabletext/editor 1.22.0 → 1.24.0

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

@@ -0,0 +1,59 @@
+import {parseBlock} from '../internal-utils/parse-blocks'
+import {sliceBlocks} from '../utils'
+import type {Converter} from './converter'
+
+export const converterPortableText: Converter<'application/x-portable-text'> = {
+  serialize: ({context, event}) => {
+    if (!context.selection) {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'application/x-portable-text',
+        originEvent: event.originEvent,
+        reason: 'No selection',
+      }
+    }
+
+    const blocks = sliceBlocks({
+      blocks: context.value,
+      selection: context.selection,
+    })
+
+    return {
+      type: 'serialization.success',
+      data: JSON.stringify(blocks),
+      mimeType: 'application/x-portable-text',
+      originEvent: event.originEvent,
+    }
+  },
+  deserialize: ({context, event}) => {
+    const blocks = JSON.parse(event.data)
+
+    if (!Array.isArray(blocks)) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: 'application/x-portable-text',
+        reason: 'Data is not an array',
+      }
+    }
+
+    const parsedBlocks = blocks.flatMap((block) => {
+      const parsedBlock = parseBlock({context, block})
+      return parsedBlock ? [parsedBlock] : []
+    })
+
+    if (parsedBlocks.length === 0 && blocks.length > 0) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: 'application/x-portable-text',
+        reason: 'No blocks were parsed',
+      }
+    }
+
+    return {
+      type: 'deserialization.success',
+      data: parsedBlocks,
+      mimeType: 'application/x-portable-text',
+    }
+  },
+  mimeType: 'application/x-portable-text',
+}

package/src/converters/converter.text-html.deserialize.test.ts

@@ -0,0 +1,349 @@
+import {describe, expect, test} from 'vitest'
+import {
+  compileSchemaDefinition,
+  defineSchema,
+  type SchemaDefinition,
+} from '../editor/define-schema'
+import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {converterTextHtml} from './converter.text-html'
+import {coreConverters} from './converters'
+
+function createContext(schema: SchemaDefinition) {
+  return {
+    converters: coreConverters,
+    activeDecorators: [],
+    keyGenerator: createTestKeyGenerator(),
+    schema: compileSchemaDefinition(schema),
+    selection: null,
+    value: [],
+  }
+}
+
+const decoratedParagraph =
+  '<p><em>foo <code><strong>bar</strong> baz</code></em></p>'
+const image = '<img src="https://exampe.com/image.jpg" alt="Example image">'
+const paragraphWithLink = '<p>fizz <a href="https://example.com">buzz</a></p>'
+const unorderedList = '<ul><li>foo</li><li>bar</li></ul>'
+const orderedList = '<ol><li>foo</li><li>bar</li></ol>'
+const nestedList = '<ol><li>foo<ul><li>bar</li></ul></li></ol>'
+
+describe(converterTextHtml.deserialize.name, () => {
+  test('paragraph with unknown decorators', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(defineSchema({})),
+        event: {
+          type: 'deserialize',
+          data: decoratedParagraph,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: [],
+              text: 'foo bar baz',
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('paragraph with known decorators', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            decorators: [{name: 'strong'}, {name: 'em'}, {name: 'code'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: decoratedParagraph,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: ['em'],
+              text: 'foo ',
+            },
+            {
+              _key: 'k2',
+              _type: 'span',
+              marks: ['em', 'code', 'strong'],
+              text: 'bar',
+            },
+            {
+              _key: 'k3',
+              _type: 'span',
+              marks: ['em', 'code'],
+              text: ' baz',
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('image', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            blockObjects: [{name: 'image'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: image,
+        },
+      }),
+    ).toMatchObject({
+      data: [],
+    })
+  })
+
+  test('paragraph with unknown link', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(defineSchema({})),
+        event: {
+          type: 'deserialize',
+          data: paragraphWithLink,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: [],
+              text: 'fizz buzz (https://example.com)',
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('paragraph with known link', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            annotations: [{name: 'link'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: paragraphWithLink,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k1',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k2',
+              _type: 'span',
+              marks: [],
+              text: 'fizz ',
+            },
+            {
+              _key: 'k3',
+              _type: 'span',
+              marks: ['k0'],
+              text: 'buzz',
+            },
+          ],
+          markDefs: [
+            {
+              _key: 'k0',
+              _type: 'link',
+              href: 'https://example.com',
+            },
+          ],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('unordered list', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            lists: [{name: 'bullet'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: unorderedList,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: [],
+              text: 'foo',
+            },
+          ],
+          level: 1,
+          listItem: 'bullet',
+          markDefs: [],
+          style: 'normal',
+        },
+        {
+          _key: 'k2',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k3',
+              _type: 'span',
+              marks: [],
+              text: 'bar',
+            },
+          ],
+          level: 1,
+          listItem: 'bullet',
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('ordered list', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            lists: [{name: 'number'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: orderedList,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: [],
+              text: 'foo',
+            },
+          ],
+          level: 1,
+          listItem: 'number',
+          markDefs: [],
+          style: 'normal',
+        },
+        {
+          _key: 'k2',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k3',
+              _type: 'span',
+              marks: [],
+              text: 'bar',
+            },
+          ],
+          level: 1,
+          listItem: 'number',
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+
+  test('nested list', () => {
+    expect(
+      converterTextHtml.deserialize({
+        context: createContext(
+          defineSchema({
+            lists: [{name: 'bullet'}, {name: 'number'}],
+          }),
+        ),
+        event: {
+          type: 'deserialize',
+          data: nestedList,
+        },
+      }),
+    ).toMatchObject({
+      data: [
+        {
+          _key: 'k0',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              marks: [],
+              text: 'foo',
+            },
+          ],
+          level: 1,
+          listItem: 'number',
+          markDefs: [],
+          style: 'normal',
+        },
+        {
+          _key: 'k2',
+          _type: 'block',
+          children: [
+            {
+              _key: 'k3',
+              _type: 'span',
+              marks: [],
+              text: 'bar',
+            },
+          ],
+          level: 2,
+          listItem: 'bullet',
+          markDefs: [],
+          style: 'normal',
+        },
+      ],
+    })
+  })
+})

package/src/converters/converter.text-html.serialize.test.ts

@@ -0,0 +1,233 @@
+import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
+import {describe, expect, test} from 'vitest'
+import {
+  compileSchemaDefinition,
+  defineSchema,
+  type SchemaDefinition,
+} from '../editor/define-schema'
+import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import type {EditorSelection} from '../utils'
+import {converterTextHtml} from './converter.text-html'
+import {coreConverters} from './converters'
+
+const decoratedParagraph: PortableTextTextBlock = {
+  _key: 'k0',
+  _type: 'block',
+  children: [
+    {
+      _key: 'k1',
+      _type: 'span',
+      marks: ['em'],
+      text: 'foo ',
+    },
+    {
+      _key: 'k2',
+      _type: 'span',
+      marks: ['em', 'code', 'strong'],
+      text: 'bar',
+    },
+    {
+      _key: 'k3',
+      _type: 'span',
+      marks: ['em', 'code'],
+      text: ' baz',
+    },
+  ],
+  markDefs: [],
+  style: 'normal',
+}
+const image: PortableTextBlock = {
+  _type: 'image',
+  _key: 'b2',
+  src: 'https://example.com/image.jpg',
+  alt: 'Example',
+}
+const b2: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b3',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b3c1',
+      text: 'baz',
+    },
+  ],
+}
+const paragraphWithInlineBlock: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b4',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b4c1',
+      text: 'fizz ',
+    },
+    {
+      _type: 'stock-ticker',
+      _key: 'b4c2',
+      symbol: 'AAPL',
+    },
+    {
+      _type: 'span',
+      _key: 'b4c3',
+      text: ' buzz',
+    },
+  ],
+}
+
+function createContext(schema: SchemaDefinition, selection: EditorSelection) {
+  return {
+    converters: coreConverters,
+    activeDecorators: [],
+    keyGenerator: createTestKeyGenerator(),
+    schema: compileSchemaDefinition(schema),
+    selection,
+    value: [decoratedParagraph, image, b2, paragraphWithInlineBlock],
+  }
+}
+
+describe(converterTextHtml.serialize.name, () => {
+  test('paragraph with decorators', () => {
+    expect(
+      converterTextHtml.serialize({
+        context: createContext(defineSchema({}), {
+          anchor: {
+            path: [
+              {_key: decoratedParagraph._key},
+              'children',
+              {_key: decoratedParagraph.children[0]._key},
+            ],
+            offset: 0,
+          },
+          focus: {
+            path: [
+              {_key: decoratedParagraph._key},
+              'children',
+              {_key: decoratedParagraph.children[2]._key},
+            ],
+            offset: 4,
+          },
+        }),
+        event: {
+          type: 'serialize',
+          originEvent: 'unknown',
+        },
+      }),
+    ).toMatchObject({
+      data: '<p><em>foo <code><strong>bar</strong> baz</code></em></p>',
+    })
+  })
+
+  test('image', () => {
+    expect(
+      converterTextHtml.serialize({
+        context: createContext(defineSchema({}), {
+          anchor: {
+            path: [{_key: image._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: image._key}],
+            offset: 0,
+          },
+        }),
+        event: {
+          type: 'serialize',
+          originEvent: 'unknown',
+        },
+      }),
+    ).toMatchObject({
+      type: 'serialization.failure',
+    })
+  })
+
+  test('inline object', () => {
+    expect(
+      converterTextHtml.serialize({
+        context: createContext(defineSchema({}), {
+          anchor: {
+            path: [
+              {_key: paragraphWithInlineBlock._key},
+              'children',
+              {_key: paragraphWithInlineBlock.children[0]._key},
+            ],
+            offset: 0,
+          },
+          focus: {
+            path: [
+              {_key: paragraphWithInlineBlock._key},
+              'children',
+              {_key: paragraphWithInlineBlock.children[2]._key},
+            ],
+            offset: 4,
+          },
+        }),
+        event: {
+          type: 'serialize',
+          originEvent: 'unknown',
+        },
+      }),
+    ).toMatchObject({
+      data: '<p>fizz  buzz</p>',
+    })
+  })
+
+  test('lists', () => {
+    expect(
+      converterTextHtml.serialize({
+        context: {
+          converters: coreConverters,
+          activeDecorators: [],
+          keyGenerator: createTestKeyGenerator(),
+          schema: compileSchemaDefinition(defineSchema({})),
+          value: [
+            {
+              _key: 'k0',
+              _type: 'block',
+              children: [
+                {
+                  _key: 'k1',
+                  _type: 'span',
+                  marks: [],
+                  text: 'foo',
+                },
+              ],
+              level: 1,
+              listItem: 'number',
+            },
+            {
+              _key: 'k2',
+              _type: 'block',
+              children: [
+                {
+                  _key: 'k3',
+                  _type: 'span',
+                  marks: [],
+                  text: 'bar',
+                },
+              ],
+              level: 2,
+              listItem: 'bullet',
+            },
+          ],
+          selection: {
+            anchor: {
+              path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: 'k2'}, 'children', {_key: 'k3'}],
+              offset: 3,
+            },
+          },
+        },
+        event: {
+          type: 'serialize',
+          originEvent: 'unknown',
+        },
+      }),
+    ).toMatchObject({
+      data: '<ol><li>foo<ul><li>bar</li></ul></li></ol>',
+    })
+  })
+})

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

@@ -0,0 +1,61 @@
+import {htmlToBlocks} from '@portabletext/block-tools'
+import {toHTML} from '@portabletext/to-html'
+import type {PortableTextBlock} from '@sanity/types'
+import {sliceBlocks} from '../utils'
+import type {Converter} from './converter'
+
+export const converterTextHtml: Converter<'text/html'> = {
+  serialize: ({context, event}) => {
+    if (!context.selection) {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'text/html',
+        originEvent: event.originEvent,
+        reason: 'No selection',
+      }
+    }
+
+    const blocks = sliceBlocks({
+      blocks: context.value,
+      selection: context.selection,
+    })
+
+    const html = toHTML(blocks, {
+      onMissingComponent: false,
+      components: {
+        unknownType: ({children}) =>
+          children !== undefined ? `${children}` : '',
+      },
+    })
+
+    if (html === '') {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'text/html',
+        originEvent: event.originEvent,
+        reason: 'Serialized HTML is empty',
+      }
+    }
+
+    return {
+      type: 'serialization.success',
+      data: html,
+      mimeType: 'text/html',
+      originEvent: event.originEvent,
+    }
+  },
+  deserialize: ({context, event}) => {
+    const blocks = htmlToBlocks(event.data, context.schema.portableText, {
+      keyGenerator: context.keyGenerator,
+      unstable_whitespaceOnPasteMode:
+        context.schema.block.options.unstable_whitespaceOnPasteMode,
+    }) as Array<PortableTextBlock>
+
+    return {
+      type: 'deserialization.success',
+      data: blocks,
+      mimeType: 'text/html',
+    }
+  },
+  mimeType: 'text/html',
+}