feat(format): support blocks editor format

This implements basic support for the blocks format for the blocks rich text editor

fix #401

plugin/admin/src/utils/translatableFields.js

@@ -6,6 +6,7 @@ const TRANSLATABLE_FIELDS = [
   'string',
   'text',
   'relation',
+  'blocks',
 ]
 
 export default TRANSLATABLE_FIELDS

plugin/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@strapi/helper-plugin": "^4.15.0",
     "axios": "^1.6.7",
+    "blocks-html-renderer": "^1.0.5",
     "bottleneck": "^2.19.5",
     "jsdom": "^24.0.0",
     "showdown": "^2.1.0"

plugin/server/config/index.js

@@ -41,7 +41,7 @@ module.exports = {
         }
         if (
           field.format &&
-          !['plain', 'markdown', 'html'].includes(field.format)
+          !['plain', 'markdown', 'html', 'jsonb'].includes(field.format)
         ) {
           throw new Error(
             `unhandled format ${field.format} for translated field ${field.type}`

plugin/server/services/format.js

@@ -2,13 +2,17 @@
 
 const showdown = require('showdown')
 const jsdom = require('jsdom')
+const renderBlock = require('blocks-html-renderer').renderBlock
+
 
 const dom = new jsdom.JSDOM()
 const showdownConverter = new showdown.Converter({
   noHeaderId: true,
   strikethrough: true,
 })
 
+const blocksImageCache = new Map()
+
 function markdownToHtml(singleText) {
   return showdownConverter.makeHtml(singleText)
 }
@@ -20,6 +24,166 @@ function htmlToMarkdown(singleText) {
     .trim()
 }
 
+/**
+ * 
+ * @param {Array} blocks 
+ */
+function cacheImages(blocks) {
+  for (const block of blocks.flat(2)) {
+    if (block.type === 'image') {
+      blocksImageCache.set(block.image.url, block.image)
+    }
+  }
+}
+
+/**
+ * 
+ * @param {ChildNode} childNode 
+ * @returns {Array<string>}
+ */
+function collectFormattings(childNode) {
+  if (childNode.nodeName === '#text' || childNode.childNodes.length === 0) {
+    return []
+  }
+  if (childNode.childNodes.length > 1) {
+    throw new Error('collectFormattings expects an element with a single child')
+  }
+  const formattings = collectFormattings(childNode.childNodes[0])
+  if (childNode.tagName === 'STRONG') {
+    formattings.push('bold')
+  }
+  if (childNode.tagName === 'EM') {
+    formattings.push('italic')
+  }
+  if (childNode.tagName === 'U') {
+    formattings.push('underline')
+  }
+  if (childNode.tagName === 'S') {
+    formattings.push('strikethrough')
+  }
+  if (childNode.tagName === 'CODE') {
+    formattings.push('code')
+  }
+  return formattings
+}
+
+/**
+ * 
+ * @param {HTMLElement} element 
+ * @returns 
+ */
+function convertInlineElementToBlocks(element) {
+  const elements = []
+  for (const child of element.childNodes) {
+    if (child.tagName === 'A') {
+      elements.push({
+        type: 'link',
+        url: child.href,
+        children: convertInlineElementToBlocks(child),
+      })
+      continue
+    }
+    try {
+      const formattings = collectFormattings(child)
+      const element = {
+        type: 'text',
+        text: child.textContent,
+      }
+      for (const formatting of formattings) {
+        element[formatting] = true
+      }
+      elements.push(element)
+    } catch (error) {
+      strapi.log.error(`Error while converting inline element ${element.outerHTML} to blocks, falling back to no formatting`, error)
+      elements.push({
+        type: 'text',
+        text: child.textContent,
+      })
+    }
+  }
+  if (elements.length === 0) {
+    elements.push({
+      type: 'text',
+      text: element.textContent,
+    })
+  }
+  return elements
+}
+
+
+function convertHtmlToBlock(html) {
+  const root = dom.window.document.createElement('div')
+  root.innerHTML = html
+
+  const blocks = []
+
+  for (const child of root.children) {
+    if (child.tagName === 'P') {
+      blocks.push({
+        type: 'paragraph',
+        children: convertInlineElementToBlocks(child),
+      })
+    }
+    if (/^H[1-6]$/.test(child.tagName)) {
+      const level = parseInt(child.tagName[1], 10)
+      blocks.push({
+        type: 'heading',
+        level,
+        children: convertInlineElementToBlocks(child),
+      })
+    }
+    if (/^[UO]L$/.test(child.tagName)) {
+      const listItems = Array.from(child.children).map(li => ({
+        type: 'list-item',
+        children: convertInlineElementToBlocks(li),
+      }))
+      blocks.push({
+        type: 'list',
+        format: child.tagName === 'UL' ? 'unordered' : 'ordered',
+        children: listItems,
+      })
+    }
+    if (child.tagName === 'BLOCKQUOTE') {
+      blocks.push({
+        type: 'quote',
+        children: convertInlineElementToBlocks(child),
+      })
+    }
+    if (child.tagName === 'PRE') {
+      // pre also has a code child
+      const code = child.querySelector('code')
+      blocks.push({
+        type: 'code',
+        children: [
+          {
+            type: 'text',
+            text: code.textContent,
+          }
+        ]
+      })
+    }
+    if (child.tagName === "IMG") {
+      const image = blocksImageCache.has(child.src) ? blocksImageCache.get(child.src) : {
+        url: child.src,
+        alt: child.alt,
+      }
+      blocks.push({
+        type: 'image',
+        image,
+        children: convertInlineElementToBlocks(child),
+      })
+    }
+    if (child.tagName === "A") {
+      blocks.push({
+        type: 'link',
+        url: child.href,
+        children: convertInlineElementToBlocks(child),
+      })
+    }
+  }
+  return blocks
+}
+
 module.exports = () => ({
   markdownToHtml(text) {
     if (Array.isArray(text)) {
@@ -33,4 +197,37 @@ module.exports = () => ({
     }
     return htmlToMarkdown(text)
   },
+  blockToHtml(block) {
+    if (!Array.isArray(block)) {
+      throw new Error('blockToHtml expects an array of blocks or a single block. Got ' + typeof block)
+    }
+    cacheImages(block)
+    if (block.length > 0 ) {
+      if (!block[0].type) {
+        return block.map(renderBlock)
+      }
+      return renderBlock(block)
+    }
+  },
+  htmlToBlock(html) {
+    if (Array.isArray(html)) {
+      return html.map(convertHtmlToBlock)
+    }
+    return convertHtmlToBlock(html)
+    // return html.map(h => [
+    //   {
+    //     type: 'paragraph',
+    //     children: [
+    //       {
+    //         type: 'text',
+    //         text: "The following HTML has been translated. It's not yet possible to convert it back to the original block structure.",
+    //       }
+    //     ]
+    //   },
+    //   {
+    //     type: 'code',
+    //     children: h.split('\n').map(text => ({ type: 'text', text })),
+    //   }
+    // ])
+  },
 })

providers/deepl/lib/index.js

@@ -47,7 +47,7 @@ module.exports = {
     return {
       /**
        * @param {{
-       *  text:string|string[],
+       *  text:string|string[]|any[],
        *  sourceLocale: string,
        *  targetLocale: string,
        *  priority: number,
@@ -68,12 +68,15 @@ module.exports = {
 
         const tagHandling = format === 'plain' ? undefined : 'html'
 
-        let textArray = Array.isArray(text) ? text : [text]
-
-        if (format === 'markdown') {
-          textArray = formatService.markdownToHtml(textArray)
+        let input = text
+        if (format === 'jsonb') {
+          input = formatService.blockToHtml(input)
+        } else if (format === 'markdown') {
+          input = formatService.markdownToHtml(input)
         }
 
+        let textArray = Array.isArray(input) ? input : [input]
+
         const { chunks, reduceFunction } = chunksService.split(textArray, {
           maxLength: DEEPL_API_MAX_TEXTS,
           maxByteSize: DEEPL_API_ROUGH_MAX_REQUEST_SIZE,
@@ -98,7 +101,10 @@ module.exports = {
             })
           )
         )
-
+
+        if (format === 'jsonb') {
+          return formatService.htmlToBlock(result)
+        }
         if (format === 'markdown') {
           return formatService.htmlToMarkdown(result)
         }

providers/libretranslate/lib/index.js

@@ -49,7 +49,7 @@ module.exports = {
     return {
       /**
        * @param {{
-       *  text:string|string[],
+       *  text:string|string[]|any[],
        *  sourceLocale: string,
        *  targetLocale: string,
        *  priority: number,
@@ -73,21 +73,20 @@ module.exports = {
         const chunksService = getService('chunks')
         const formatService = getService('format')
 
-        let textArray = Array.isArray(text) ? text : [text]
-
-        if (format === 'markdown') {
-          textArray = formatService.markdownToHtml(textArray)
+        let input = text
+        if (format === 'jsonb') {
+          input = formatService.blockToHtml(input)
+        } else if (format === 'markdown') {
+          input = formatService.markdownToHtml(input)
         }
 
+        const textArray = Array.isArray(input) ? input : [input]
+
         const { chunks, reduceFunction } = chunksService.split(textArray, {
           maxLength: maxTexts === -1 ? Number.MAX_VALUE : maxTexts,
           maxByteSize: maxCharacters === -1 ? Number.MAX_VALUE : maxCharacters,
         })
 
-        if (format === 'markdown') {
-          textArray = formatService.markdownToHtml(textArray)
-        }
-
         const result = reduceFunction(
           await Promise.all(
             chunks.map(async (texts) => {