gt-sanity 0.0.6 → 1.0.0

package/src/serialization/__tests__/__fixtures__/schema.ts

@@ -0,0 +1,310 @@
+import { Schema } from '@sanity/schema';
+
+const arrayField = {
+  name: 'arrayField',
+  title: 'Array Field',
+  type: 'array',
+  of: [
+    {
+      type: 'block',
+      marks: {
+        annotations: [{ type: 'linkField' }],
+      },
+    },
+    { type: 'objectField' },
+    { type: 'linkField' },
+  ],
+};
+const linkField = {
+  name: 'linkField',
+  title: 'Link Field',
+  type: 'object',
+  fields: [
+    {
+      name: 'label',
+      title: 'Label',
+      type: 'string',
+    },
+    {
+      name: 'linkType',
+      title: 'Link Type',
+      type: 'string',
+      options: {
+        list: [
+          { title: 'None', value: 'none' },
+          { title: 'URL', value: 'href' },
+          { title: 'Page', value: 'page' },
+          { title: 'Simple Page', value: 'simplePage' },
+          { title: 'Post', value: 'post' },
+          { title: 'File', value: 'file' },
+        ],
+      },
+    },
+    {
+      name: 'href',
+      title: 'URL',
+      type: 'url',
+      hidden: ({ parent }: { parent: any }) => parent?.linkType !== 'href',
+    },
+    {
+      name: 'page',
+      title: 'Page',
+      type: 'reference',
+      to: [{ type: 'page' }],
+      weak: true,
+      hidden: ({ parent }: { parent: any }) => parent?.linkType !== 'page',
+    },
+    {
+      name: 'simplePage',
+      title: 'Simple Page',
+      type: 'reference',
+      to: [{ type: 'simplePage' }],
+      weak: true,
+      hidden: ({ parent }: { parent: any }) =>
+        parent?.linkType !== 'simplePage',
+    },
+    {
+      name: 'post',
+      title: 'Post',
+      type: 'reference',
+      to: [{ type: 'post' }],
+      weak: true,
+      hidden: ({ parent }: { parent: any }) => parent?.linkType !== 'post',
+    },
+    {
+      name: 'file',
+      title: 'File',
+      type: 'file',
+      hidden: ({ parent }: { parent: any }) => parent?.linkType !== 'file',
+    },
+    {
+      name: 'openInNewTab',
+      title: 'Open in New Tab',
+      type: 'boolean',
+    },
+  ],
+};
+
+const childObjectField = {
+  name: 'childObjectField',
+  title: 'Child Object Field',
+  type: 'object',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    },
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'array',
+      of: [
+        {
+          type: 'block',
+          marks: {
+            annotations: [{ type: 'linkField' }],
+          },
+        },
+        { type: 'linkField' },
+      ],
+    },
+  ],
+};
+
+const objectField = {
+  name: 'objectField',
+  title: 'Object Field',
+  type: 'object',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    },
+    {
+      name: 'objectAsField',
+      title: 'Object As Field',
+      type: 'childObjectField',
+    },
+    {
+      name: 'nestedArrayField',
+      title: 'Nested Array Field',
+      type: 'array',
+      of: [
+        {
+          type: 'block',
+          marks: {
+            annotations: [{ type: 'linkField' }],
+          },
+        },
+        { type: 'childObjectField' },
+      ],
+    },
+  ],
+};
+
+const documentLevelArticle = {
+  name: 'documentLevelArticle',
+  title: 'Document Level Article',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    },
+    {
+      name: 'meta',
+      title: 'Meta',
+      type: 'string',
+      localize: false,
+    },
+    {
+      name: 'snippet',
+      title: 'Snippet',
+      type: 'text',
+    },
+    {
+      name: 'tags',
+      title: 'Tags',
+      type: 'array',
+      of: [{ type: 'string' }],
+    },
+    {
+      name: 'hidden',
+      title: 'Hidden',
+      type: 'boolean',
+    },
+    {
+      name: 'config',
+      title: 'Config',
+      type: 'objectField',
+    },
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'arrayField',
+    },
+  ],
+};
+
+function createLocaleFields(locales: string[], fieldType: Record<string, any>) {
+  return locales.map((locale) => ({
+    ...{ name: locale },
+    ...fieldType,
+  }));
+}
+
+const fieldLevelArticle = {
+  name: 'fieldLevelArticle',
+  title: 'Field Level Article',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'localeString',
+    },
+    {
+      name: 'meta',
+      title: 'Meta',
+      type: 'string',
+      localize: false,
+    },
+    {
+      name: 'snippet',
+      title: 'Snippet',
+      type: 'object',
+      fields: createLocaleFields(['en', 'fr', 'de'], { type: 'text' }),
+    },
+    {
+      name: 'tags',
+      title: 'Tags',
+      type: 'object',
+      fields: createLocaleFields(['en', 'fr', 'de'], {
+        type: 'array',
+        of: [{ type: 'string' }],
+      }),
+    },
+    {
+      name: 'hidden',
+      title: 'Hidden',
+      type: 'boolean',
+    },
+    {
+      name: 'config',
+      title: 'Config',
+      type: 'object',
+      fields: createLocaleFields(['en', 'fr', 'de'], { type: 'objectField' }),
+    },
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'object',
+      fields: createLocaleFields(['en', 'fr', 'de'], { type: 'arrayField' }),
+    },
+    {
+      name: 'slices',
+      title: 'Slices',
+      type: 'array',
+      of: [
+        { type: 'localeBlock' },
+        { type: 'reference', to: [{ type: 'marketText' }] },
+      ],
+    },
+    {
+      name: 'pageFields',
+      title: 'Page Fields',
+      type: 'pageFields',
+    },
+  ],
+};
+
+const localeBlock = {
+  name: 'localeBlock',
+  title: 'Locale Block',
+  type: 'object',
+  fields: createLocaleFields(['en', 'fr_FR', 'de_DE'], { type: 'arrayField' }),
+};
+
+const localeString = {
+  name: 'localeString',
+  title: 'Locale String',
+  type: 'object',
+  fields: createLocaleFields(['en', 'fr_FR', 'de_DE'], { type: 'string' }),
+};
+
+const pageFields = {
+  name: 'pageFields',
+  title: 'Page Fields',
+  type: 'object',
+  fields: [
+    {
+      title: 'Page Name',
+      name: 'name',
+      type: 'localeString',
+    },
+    {
+      name: 'slug',
+      type: 'string',
+    },
+  ],
+};
+
+const types = [
+  arrayField,
+  linkField,
+  childObjectField,
+  objectField,
+  documentLevelArticle,
+  fieldLevelArticle,
+  pageFields,
+  localeBlock,
+  localeString,
+];
+
+export default new Schema({
+  name: 'test',
+  types,
+});

package/src/serialization/__tests__/global.setup.ts

@@ -0,0 +1,40 @@
+import {
+  PortableTextTextBlock,
+  PortableTextSpan,
+  PortableTextObject,
+} from 'sanity';
+import { vi } from 'vitest';
+
+let mockTestKey = 0;
+
+vi.mock('@portabletext/block-tools', async () => {
+  const originalModule = await vi.importActual<
+    typeof import('@portabletext/block-tools')
+  >('@portabletext/block-tools');
+  return {
+    ...originalModule,
+    //not ideal but vi.mock('@sanity/block-tools/src/util/randomKey.ts' is not working
+    htmlToBlocks: (html: string, blockContentType: any, options: any) => {
+      const blocks = originalModule.htmlToBlocks(
+        html,
+        blockContentType,
+        options
+      );
+      const newBlocks = blocks.map((block) => {
+        const newChildren = (
+          block as unknown as PortableTextTextBlock<
+            PortableTextSpan | PortableTextObject
+          >
+        ).children.map((child) => {
+          return { ...child, _key: `randomKey-${mockTestKey++}` };
+        });
+        return {
+          ...block,
+          children: newChildren,
+          _key: `randomKey-${mockTestKey++}`,
+        };
+      });
+      return newBlocks;
+    },
+  };
+});

package/src/serialization/__tests__/helpers.ts

@@ -0,0 +1,132 @@
+import { BaseDocumentSerializer, BaseDocumentDeserializer } from '../index';
+import {
+  customSerializers,
+  customDeserializers,
+  customBlockDeserializers,
+} from '../BaseSerializationConfig';
+import { PortableTextBlock, SanityDocument, TypedObject } from 'sanity';
+import { SerializedDocument, TranslationLevel } from '../types';
+import schema from './__fixtures__/schema';
+import clone from 'just-clone';
+
+export const getSerialized = (
+  document: SanityDocument,
+  level: TranslationLevel
+): SerializedDocument => {
+  const serializer = BaseDocumentSerializer(schema);
+  return serializer.serializeDocument(document, level);
+};
+
+export const getDeserialized = (
+  document: SanityDocument,
+  level: TranslationLevel
+): Record<string, any> => {
+  const serialized = getSerialized(document, level);
+  const deserializer = BaseDocumentDeserializer;
+  return deserializer.deserializeDocument(serialized.content);
+};
+
+export const getValidFields = (
+  field: Record<string, any>
+): Record<string, any> => {
+  const invalidFields = ['_type', '_key'];
+  return Object.keys(field).filter((key) => !invalidFields.includes(key));
+};
+
+export const toPlainText = (blocks: PortableTextBlock[]): string => {
+  return blocks
+    .map((block) => {
+      if (block._type !== 'block' || !block.children) {
+        return '';
+      }
+      return (block.children as Array<any>).map((child) => child.text).join('');
+    })
+    .join('\n\n');
+};
+
+export const createCustomInnerHTML = (title: string): string =>
+  `Custom serializer works and includes title: '${title}'`;
+
+const additionalSerializerTypes = {
+  //block and top-level tests
+  objectField: ({ value }: { value: TypedObject }) => {
+    const innerText = createCustomInnerHTML(value.title as string);
+    const html = `<div class="${value._type}" id="${value._key ?? value._id}">${innerText}</div>`;
+    return html;
+  },
+  //inline-level tests
+  childObjectField: ({ value }: { value: TypedObject }) => {
+    const innerText = createCustomInnerHTML(value.title as string);
+    const html = `<span class="${value._type}" id="${value._key ?? value._id}">${innerText}</span>`;
+    return html;
+  },
+};
+
+const tempSerializers = clone(customSerializers);
+tempSerializers.types = {
+  ...tempSerializers.types,
+  ...additionalSerializerTypes,
+};
+tempSerializers.marks = {
+  annotation: ({ value, markType, children }) => {
+    return `<span class="${markType}" id="${value._key}">${children}</span>`;
+  },
+};
+
+export const addedCustomSerializers = tempSerializers;
+
+export const addedDeserializerTypes = {
+  objectField: (html: HTMLElement): TypedObject => {
+    const title = html.innerHTML.split(':')[1].replace(/'/g, '').trim();
+    const _type = html.className;
+    const _key = html.id;
+    return { title, _type, _key };
+  },
+};
+
+const tempDeserializers = clone(customDeserializers);
+tempDeserializers.types = {
+  ...tempDeserializers.types,
+  ...addedDeserializerTypes,
+};
+
+export const addedCustomDeserializers = tempDeserializers;
+
+export const addedBlockDeserializers = [
+  ...customBlockDeserializers,
+  {
+    deserialize(el: HTMLElement): TypedObject | undefined {
+      if (!el.className || el.className.toLowerCase() !== 'childobjectfield') {
+        return undefined;
+      }
+
+      const title = el.innerHTML.split(':')[1].replace(/'/g, '').trim();
+      const _type = el.className;
+      const _key = el.id;
+
+      return { title, _type, _key };
+    },
+  },
+  {
+    deserialize(
+      el: HTMLElement,
+      //eslint-disable-next-line no-undef -- not picking up NodeListOf/ChildNode
+      next: (nodes: NodeListOf<ChildNode>) => any
+    ): TypedObject | undefined {
+      if (!el.className || el.className?.toLowerCase() !== 'annotation') {
+        return undefined;
+      }
+
+      const markDef = {
+        _key: el.id,
+        _type: 'annotation',
+      };
+
+      return {
+        _type: '__annotation',
+        markDef: markDef,
+        children: next(el.childNodes),
+      };
+    },
+  },
+];

package/src/serialization/data.ts

@@ -0,0 +1,82 @@
+export function attachGTData(
+  html: string,
+  data: Record<string, any>,
+  type: 'markDef'
+): string {
+  // Parse the HTML string to find the first element
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const firstElement = doc.body.firstElementChild;
+
+  if (!firstElement) {
+    // If no element found, return original HTML
+    return html;
+  }
+
+  // Encode the data as base64 JSON
+  const encodedData = encode(JSON.stringify({ [type]: data }));
+
+  // Add the data-gt-internal attribute
+  firstElement.setAttribute('data-gt-internal', encodedData);
+
+  return firstElement.outerHTML;
+}
+
+export function detachGTData(html: string): {
+  html: string;
+  data?: Record<'markDef', Record<string, any>>;
+} {
+  // Parse the HTML string to find the first element
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const firstElement = doc.body.firstElementChild;
+
+  if (!firstElement) {
+    // If no element found, return original HTML with no data
+    return { html };
+  }
+
+  // Get the encoded data
+  const encodedData = firstElement.getAttribute('data-gt-internal');
+
+  let extractedData: Record<'markDef', Record<string, any>> | undefined;
+  if (encodedData) {
+    try {
+      // Decode and parse the data
+      const decodedData = decode(encodedData);
+      extractedData = JSON.parse(decodedData);
+
+      // Remove the data attribute to clean up the HTML
+      firstElement.removeAttribute('data-gt-internal');
+    } catch (error) {
+      console.warn('Failed to decode GT internal data:', error);
+    }
+  }
+
+  return {
+    html: firstElement.outerHTML,
+    data: extractedData,
+  };
+}
+
+// Encode a string to base64
+export function encode(data: string): string {
+  // Browser path
+  const bytes = new TextEncoder().encode(data);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+// Decode a base64 string to a string
+export function decode(base64: string): string {
+  // Browser path
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder().decode(bytes);
+}