@portabletext/block-tools 0.0.0

package/src/HtmlDeserializer/rules/gdocs.ts

@@ -0,0 +1,183 @@
+import type {ArraySchemaType} from '@sanity/types'
+import {
+  BLOCK_DEFAULT_STYLE,
+  DEFAULT_BLOCK,
+  DEFAULT_SPAN,
+  HTML_BLOCK_TAGS,
+  HTML_HEADER_TAGS,
+  HTML_LIST_CONTAINER_TAGS,
+} from '../../constants'
+import type {BlockEnabledFeatures, DeserializerRule} from '../../types'
+import {isElement, tagName} from '../helpers'
+
+const LIST_CONTAINER_TAGS = Object.keys(HTML_LIST_CONTAINER_TAGS)
+
+// font-style:italic seems like the most important rule for italic / emphasis in their html
+function isEmphasis(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return /font-style\s*:\s*italic/.test(style || '')
+}
+
+// font-weight:700 seems like the most important rule for bold in their html
+function isStrong(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return /font-weight\s*:\s*700/.test(style || '')
+}
+
+// text-decoration seems like the most important rule for underline in their html
+function isUnderline(el: Node): boolean {
+  if (!isElement(el) || tagName(el.parentNode) === 'a') {
+    return false
+  }
+
+  const style = isElement(el) && el.getAttribute('style')
+
+  return /text-decoration\s*:\s*underline/.test(style || '')
+}
+
+// text-decoration seems like the most important rule for strike-through in their html
+// allows for line-through regex to be more lineient to allow for other text-decoration before or after
+function isStrikethrough(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return /text-decoration\s*:\s*(?:.*line-through.*;)/.test(style || '')
+}
+
+// Check for attribute given by the gdocs preprocessor
+function isGoogleDocs(el: Node): boolean {
+  return isElement(el) && Boolean(el.getAttribute('data-is-google-docs'))
+}
+
+function isRootNode(el: Node): boolean {
+  return isElement(el) && Boolean(el.getAttribute('data-is-root-node'))
+}
+
+function getListItemStyle(el: Node): 'bullet' | 'number' | undefined {
+  const parentTag = tagName(el.parentNode)
+  if (parentTag && !LIST_CONTAINER_TAGS.includes(parentTag)) {
+    return undefined
+  }
+  return tagName(el.parentNode) === 'ul' ? 'bullet' : 'number'
+}
+
+function getListItemLevel(el: Node): number {
+  let level = 0
+  if (tagName(el) === 'li') {
+    let parentNode = el.parentNode
+    while (parentNode) {
+      const parentTag = tagName(parentNode)
+      if (parentTag && LIST_CONTAINER_TAGS.includes(parentTag)) {
+        level++
+      }
+      parentNode = parentNode.parentNode
+    }
+  } else {
+    level = 1
+  }
+  return level
+}
+
+const blocks: Record<string, {style: string} | undefined> = {
+  ...HTML_BLOCK_TAGS,
+  ...HTML_HEADER_TAGS,
+}
+
+function getBlockStyle(el: Node, enabledBlockStyles: string[]): string {
+  const childTag = tagName(el.firstChild)
+  const block = childTag && blocks[childTag]
+  if (!block) {
+    return BLOCK_DEFAULT_STYLE
+  }
+  if (!enabledBlockStyles.includes(block.style)) {
+    return BLOCK_DEFAULT_STYLE
+  }
+  return block.style
+}
+
+export default function createGDocsRules(
+  _blockContentType: ArraySchemaType,
+  options: BlockEnabledFeatures,
+): DeserializerRule[] {
+  return [
+    {
+      deserialize(el) {
+        if (isElement(el) && tagName(el) === 'span' && isGoogleDocs(el)) {
+          const span = {
+            ...DEFAULT_SPAN,
+            marks: [] as string[],
+            text: el.textContent,
+          }
+          if (isStrong(el)) {
+            span.marks.push('strong')
+          }
+          if (isUnderline(el)) {
+            span.marks.push('underline')
+          }
+          if (isStrikethrough(el)) {
+            span.marks.push('strike-through')
+          }
+          if (isEmphasis(el)) {
+            span.marks.push('em')
+          }
+          return span
+        }
+        return undefined
+      },
+    },
+    {
+      deserialize(el, next) {
+        if (tagName(el) === 'li' && isGoogleDocs(el)) {
+          return {
+            ...DEFAULT_BLOCK,
+            listItem: getListItemStyle(el),
+            level: getListItemLevel(el),
+            style: getBlockStyle(el, options.enabledBlockStyles),
+            children: next(el.firstChild?.childNodes || []),
+          }
+        }
+        return undefined
+      },
+    },
+    {
+      deserialize(el) {
+        if (
+          tagName(el) === 'br' &&
+          isGoogleDocs(el) &&
+          isElement(el) &&
+          el.classList.contains('apple-interchange-newline')
+        ) {
+          return {
+            ...DEFAULT_SPAN,
+            text: '',
+          }
+        }
+
+        // BRs inside empty paragraphs
+        if (
+          tagName(el) === 'br' &&
+          isGoogleDocs(el) &&
+          isElement(el) &&
+          el?.parentNode?.textContent === ''
+        ) {
+          return {
+            ...DEFAULT_SPAN,
+            text: '',
+          }
+        }
+
+        // BRs on the root
+        if (
+          tagName(el) === 'br' &&
+          isGoogleDocs(el) &&
+          isElement(el) &&
+          isRootNode(el)
+        ) {
+          return {
+            ...DEFAULT_SPAN,
+            text: '',
+          }
+        }
+        return undefined
+      },
+    },
+  ]
+}

package/src/HtmlDeserializer/rules/html.ts

@@ -0,0 +1,264 @@
+import type {ArraySchemaType, TypedObject} from '@sanity/types'
+import {
+  DEFAULT_BLOCK,
+  DEFAULT_SPAN,
+  HTML_BLOCK_TAGS,
+  HTML_DECORATOR_TAGS,
+  HTML_HEADER_TAGS,
+  HTML_LIST_CONTAINER_TAGS,
+  HTML_LIST_ITEM_TAGS,
+  HTML_SPAN_TAGS,
+  type PartialBlock,
+} from '../../constants'
+import type {BlockEnabledFeatures, DeserializerRule} from '../../types'
+import {randomKey} from '../../util/randomKey'
+import {isElement, tagName} from '../helpers'
+
+export function resolveListItem(
+  listNodeTagName: string,
+  enabledListTypes: string[],
+): string | undefined {
+  if (listNodeTagName === 'ul' && enabledListTypes.includes('bullet')) {
+    return 'bullet'
+  }
+  if (listNodeTagName === 'ol' && enabledListTypes.includes('number')) {
+    return 'number'
+  }
+  return undefined
+}
+
+export default function createHTMLRules(
+  _blockContentType: ArraySchemaType,
+  options: BlockEnabledFeatures,
+): DeserializerRule[] {
+  return [
+    // Text nodes
+    {
+      deserialize(el) {
+        if (tagName(el) === 'pre') {
+          return undefined
+        }
+        const isValidWhiteSpace =
+          el.nodeType === 3 &&
+          (el.textContent || '')
+            .replace(/[\r\n]/g, ' ')
+            .replace(/\s\s+/g, ' ') === ' ' &&
+          el.nextSibling &&
+          el.nextSibling.nodeType !== 3 &&
+          el.previousSibling &&
+          el.previousSibling.nodeType !== 3
+        const isValidText =
+          (isValidWhiteSpace || el.textContent !== ' ') &&
+          tagName(el.parentNode) !== 'body'
+        if (el.nodeName === '#text' && isValidText) {
+          return {
+            ...DEFAULT_SPAN,
+            marks: [],
+            text: (el.textContent || '').replace(/\s\s+/g, ' '),
+          }
+        }
+        return undefined
+      },
+    }, // Pre element
+    {
+      deserialize(el) {
+        if (tagName(el) !== 'pre') {
+          return undefined
+        }
+
+        const isCodeEnabled = options.enabledBlockStyles.includes('code')
+
+        return {
+          _type: 'block',
+          style: 'normal',
+          markDefs: [],
+          children: [
+            {
+              ...DEFAULT_SPAN,
+              marks: isCodeEnabled ? ['code'] : [],
+              text: el.textContent || '',
+            },
+          ],
+        }
+      },
+    }, // Blockquote element
+    {
+      deserialize(el, next) {
+        if (tagName(el) !== 'blockquote') {
+          return undefined
+        }
+        const blocks: Record<string, PartialBlock | undefined> = {
+          ...HTML_BLOCK_TAGS,
+          ...HTML_HEADER_TAGS,
+        }
+        delete blocks.blockquote
+
+        const children: HTMLElement[] = []
+        el.childNodes.forEach((node, index) => {
+          if (
+            node.nodeType === 1 &&
+            Object.keys(blocks).includes(
+              (node as Element).localName.toLowerCase(),
+            )
+          ) {
+            if (!el.ownerDocument) {
+              return
+            }
+
+            const span = el.ownerDocument.createElement('span')
+            span.appendChild(el.ownerDocument.createTextNode('\r'))
+            node.childNodes.forEach((cn) => {
+              span.appendChild(cn.cloneNode(true))
+            })
+            if (index !== el.childNodes.length) {
+              span.appendChild(el.ownerDocument.createTextNode('\r'))
+            }
+            children.push(span)
+          } else {
+            children.push(node as HTMLElement)
+          }
+        })
+
+        return {
+          _type: 'block',
+          style: 'blockquote',
+          markDefs: [],
+          children: next(children),
+        }
+      },
+    }, // Block elements
+    {
+      deserialize(el, next) {
+        const blocks: Record<string, PartialBlock | undefined> = {
+          ...HTML_BLOCK_TAGS,
+          ...HTML_HEADER_TAGS,
+        }
+        const tag = tagName(el)
+        let block = tag ? blocks[tag] : undefined
+        if (!block) {
+          return undefined
+        }
+        // Don't add blocks into list items
+        if (el.parentNode && tagName(el.parentNode) === 'li') {
+          return next(el.childNodes)
+        }
+        // If style is not supported, return a defaultBlockType
+        if (!options.enabledBlockStyles.includes(block.style)) {
+          block = DEFAULT_BLOCK
+        }
+        return {
+          ...block,
+          children: next(el.childNodes),
+        }
+      },
+    }, // Ignore span tags
+    {
+      deserialize(el, next) {
+        const tag = tagName(el)
+        if (!tag || !(tag in HTML_SPAN_TAGS)) {
+          return undefined
+        }
+        return next(el.childNodes)
+      },
+    }, // Ignore div tags
+    {
+      deserialize(el, next) {
+        const div = tagName(el) === 'div'
+        if (!div) {
+          return undefined
+        }
+        return next(el.childNodes)
+      },
+    }, // Ignore list containers
+    {
+      deserialize(el, next) {
+        const tag = tagName(el)
+        if (!tag || !(tag in HTML_LIST_CONTAINER_TAGS)) {
+          return undefined
+        }
+        return next(el.childNodes)
+      },
+    }, // Deal with br's
+    {
+      deserialize(el) {
+        if (tagName(el) === 'br') {
+          return {
+            ...DEFAULT_SPAN,
+            text: '\n',
+          }
+        }
+        return undefined
+      },
+    }, // Deal with list items
+    {
+      deserialize(el, next, block) {
+        const tag = tagName(el)
+        const listItem = tag ? HTML_LIST_ITEM_TAGS[tag] : undefined
+        const parentTag = tagName(el.parentNode) || ''
+        if (
+          !listItem ||
+          !el.parentNode ||
+          !HTML_LIST_CONTAINER_TAGS[parentTag]
+        ) {
+          return undefined
+        }
+        const enabledListItem = resolveListItem(
+          parentTag,
+          options.enabledListTypes,
+        )
+        // If the list item style is not supported, return a new default block
+        if (!enabledListItem) {
+          return block({_type: 'block', children: next(el.childNodes)})
+        }
+        listItem.listItem = enabledListItem
+        return {
+          ...listItem,
+          children: next(el.childNodes),
+        }
+      },
+    }, // Deal with decorators - this is a limited set of known html elements that we know how to deserialize
+    {
+      deserialize(el, next) {
+        const decorator = HTML_DECORATOR_TAGS[tagName(el) || '']
+        if (!decorator || !options.enabledSpanDecorators.includes(decorator)) {
+          return undefined
+        }
+        return {
+          _type: '__decorator',
+          name: decorator,
+          children: next(el.childNodes),
+        }
+      },
+    }, // Special case for hyperlinks, add annotation (if allowed by schema),
+    // If not supported just write out the link text and href in plain text.
+    {
+      deserialize(el, next) {
+        if (tagName(el) !== 'a') {
+          return undefined
+        }
+        const linkEnabled = options.enabledBlockAnnotations.includes('link')
+        const href = isElement(el) && el.getAttribute('href')
+        if (!href) {
+          return next(el.childNodes)
+        }
+        let markDef: TypedObject | undefined
+        if (linkEnabled) {
+          markDef = {
+            _key: randomKey(12),
+            _type: 'link',
+            href: href,
+          }
+          return {
+            _type: '__annotation',
+            markDef: markDef,
+            children: next(el.childNodes),
+          }
+        }
+        return (
+          el.appendChild(el.ownerDocument.createTextNode(` (${href})`)) &&
+          next(el.childNodes)
+        )
+      },
+    },
+  ]
+}

package/src/HtmlDeserializer/rules/index.ts

@@ -0,0 +1,18 @@
+import type {ArraySchemaType} from '@sanity/types'
+import type {BlockEnabledFeatures, DeserializerRule} from '../../types'
+import createGDocsRules from './gdocs'
+import createHTMLRules from './html'
+import createNotionRules from './notion'
+import createWordRules from './word'
+
+export function createRules(
+  blockContentType: ArraySchemaType,
+  options: BlockEnabledFeatures,
+): DeserializerRule[] {
+  return [
+    ...createWordRules(),
+    ...createNotionRules(blockContentType),
+    ...createGDocsRules(blockContentType, options),
+    ...createHTMLRules(blockContentType, options),
+  ]
+}

package/src/HtmlDeserializer/rules/notion.ts

@@ -0,0 +1,60 @@
+import type {ArraySchemaType} from '@sanity/types'
+import {DEFAULT_SPAN} from '../../constants'
+import type {DeserializerRule} from '../../types'
+import {isElement, tagName} from '../helpers'
+
+// font-style:italic seems like the most important rule for italic / emphasis in their html
+function isEmphasis(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return /font-style:italic/.test(style || '')
+}
+
+// font-weight:700 or 600 seems like the most important rule for bold in their html
+function isStrong(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return (
+    /font-weight:700/.test(style || '') || /font-weight:600/.test(style || '')
+  )
+}
+
+// text-decoration seems like the most important rule for underline in their html
+function isUnderline(el: Node): boolean {
+  const style = isElement(el) && el.getAttribute('style')
+  return /text-decoration:underline/.test(style || '')
+}
+
+// Check for attribute given by the Notion preprocessor
+function isNotion(el: Node): boolean {
+  return isElement(el) && Boolean(el.getAttribute('data-is-notion'))
+}
+
+export default function createNotionRules(
+  _blockContentType: ArraySchemaType,
+): DeserializerRule[] {
+  return [
+    {
+      deserialize(el) {
+        // Notion normally exports semantic HTML. However, if you copy a single block, the formatting will be inline styles
+        // This handles a limited set of styles
+        if (isElement(el) && tagName(el) === 'span' && isNotion(el)) {
+          const span = {
+            ...DEFAULT_SPAN,
+            marks: [] as string[],
+            text: el.textContent,
+          }
+          if (isStrong(el)) {
+            span.marks.push('strong')
+          }
+          if (isUnderline(el)) {
+            span.marks.push('underline')
+          }
+          if (isEmphasis(el)) {
+            span.marks.push('em')
+          }
+          return span
+        }
+        return undefined
+      },
+    },
+  ]
+}

package/src/HtmlDeserializer/rules/word.ts

@@ -0,0 +1,59 @@
+import {BLOCK_DEFAULT_STYLE, DEFAULT_BLOCK} from '../../constants'
+import type {DeserializerRule} from '../../types'
+import {isElement, tagName} from '../helpers'
+
+function getListItemStyle(el: Node): string | undefined {
+  const style = isElement(el) && el.getAttribute('style')
+  if (!style) {
+    return undefined
+  }
+
+  if (!style.match(/lfo\d+/)) {
+    return undefined
+  }
+
+  return style.match('lfo1') ? 'bullet' : 'number'
+}
+
+function getListItemLevel(el: Node): number | undefined {
+  const style = isElement(el) && el.getAttribute('style')
+  if (!style) {
+    return undefined
+  }
+
+  const levelMatch = style.match(/level\d+/)
+  if (!levelMatch) {
+    return undefined
+  }
+
+  const [level] = levelMatch[0].match(/\d/) || []
+  const levelNum = level ? Number.parseInt(level, 10) : 1
+  return levelNum || 1
+}
+
+function isWordListElement(el: Node): boolean {
+  return isElement(el) && el.className
+    ? el.className === 'MsoListParagraphCxSpFirst' ||
+        el.className === 'MsoListParagraphCxSpMiddle' ||
+        el.className === 'MsoListParagraphCxSpLast'
+    : false
+}
+
+export default function createWordRules(): DeserializerRule[] {
+  return [
+    {
+      deserialize(el, next) {
+        if (tagName(el) === 'p' && isWordListElement(el)) {
+          return {
+            ...DEFAULT_BLOCK,
+            listItem: getListItemStyle(el),
+            level: getListItemLevel(el),
+            style: BLOCK_DEFAULT_STYLE,
+            children: next(el.childNodes),
+          }
+        }
+        return undefined
+      },
+    },
+  ]
+}

package/src/constants.ts

@@ -0,0 +1,104 @@
+import {uniq} from 'lodash'
+
+export interface PartialBlock {
+  _type: string
+  markDefs: string[]
+  style: string
+  level?: number
+  listItem?: string
+}
+
+export const PRESERVE_WHITESPACE_TAGS = ['pre', 'textarea', 'code']
+
+export const BLOCK_DEFAULT_STYLE = 'normal'
+
+export const DEFAULT_BLOCK: PartialBlock = Object.freeze({
+  _type: 'block',
+  markDefs: [],
+  style: BLOCK_DEFAULT_STYLE,
+})
+
+export const DEFAULT_SPAN = Object.freeze({
+  _type: 'span',
+  marks: [] as string[],
+})
+
+export const HTML_BLOCK_TAGS = {
+  p: DEFAULT_BLOCK,
+  blockquote: {...DEFAULT_BLOCK, style: 'blockquote'} as PartialBlock,
+}
+
+export const HTML_SPAN_TAGS = {
+  span: {object: 'text'},
+}
+
+export const HTML_LIST_CONTAINER_TAGS: Record<
+  string,
+  {object: null} | undefined
+> = {
+  ol: {object: null},
+  ul: {object: null},
+}
+
+export const HTML_HEADER_TAGS: Record<string, PartialBlock | undefined> = {
+  h1: {...DEFAULT_BLOCK, style: 'h1'},
+  h2: {...DEFAULT_BLOCK, style: 'h2'},
+  h3: {...DEFAULT_BLOCK, style: 'h3'},
+  h4: {...DEFAULT_BLOCK, style: 'h4'},
+  h5: {...DEFAULT_BLOCK, style: 'h5'},
+  h6: {...DEFAULT_BLOCK, style: 'h6'},
+}
+
+export const HTML_MISC_TAGS = {
+  br: {...DEFAULT_BLOCK, style: BLOCK_DEFAULT_STYLE} as PartialBlock,
+}
+
+export const HTML_DECORATOR_TAGS: Record<string, string | undefined> = {
+  b: 'strong',
+  strong: 'strong',
+
+  i: 'em',
+  em: 'em',
+
+  u: 'underline',
+  s: 'strike-through',
+  strike: 'strike-through',
+  del: 'strike-through',
+
+  code: 'code',
+  sup: 'sup',
+  sub: 'sub',
+  ins: 'ins',
+  mark: 'mark',
+  small: 'small',
+}
+
+export const HTML_LIST_ITEM_TAGS: Record<string, PartialBlock | undefined> = {
+  li: {
+    ...DEFAULT_BLOCK,
+    style: BLOCK_DEFAULT_STYLE,
+    level: 1,
+    listItem: 'bullet',
+  },
+}
+
+export const ELEMENT_MAP = {
+  ...HTML_BLOCK_TAGS,
+  ...HTML_SPAN_TAGS,
+  ...HTML_LIST_CONTAINER_TAGS,
+  ...HTML_LIST_ITEM_TAGS,
+  ...HTML_HEADER_TAGS,
+  ...HTML_MISC_TAGS,
+}
+
+export const DEFAULT_SUPPORTED_STYLES = uniq(
+  Object.values(ELEMENT_MAP)
+    .filter((tag): tag is PartialBlock => 'style' in tag)
+    .map((tag) => tag.style),
+)
+
+export const DEFAULT_SUPPORTED_DECORATORS = uniq(
+  Object.values(HTML_DECORATOR_TAGS),
+)
+
+export const DEFAULT_SUPPORTED_ANNOTATIONS = ['link']