Slatejs to Vue 3 custom renderer

[MinSomai]

I couldn't find anything on the internet to render the Rich Text values in NuxtJS.
So, created a simple SlateJS renderer for vue 3.

The implementation is from payload's documentation. You can extend this further.

https://gist.github.com/MinSomai/4f6cde69db926398b1cfaf4f8d7a083a

// How to use?
// Save this file as SerializeContent.js
//
// import SerializeContent from "../SerializeContent";
// <template>
//  <SerializeContent :content="content" />
// </template>

import escapeHTML from "escape-html";
import { Text } from "slate";
import { h } from "vue";

const serialize = children => {
  return children.map((node, i) => {
    if (Text.isText(node)) {
      let text = h("span", { key: i, innerHTML: escapeHTML(node.text) });

      if (node.bold) {
        text = h("strong", { key: i }, text);
      }

      if (node.code) {
        text = h("code", { key: i }, text);
      }

      if (node.italic) {
        text = h("em", { key: i }, text);
      }

      // Handle other leaf types here...
      return h("span", { key: i }, text);
    }

    if (!node) {
      return null;
    }

    switch (node.type) {
      case "h1":
        return h("h1", { key: i }, [serialize(node.children)]);
      // Iterate through all headings here...
      case "h6":
        return h("h6", { key: i }, [serialize(node.children)]);
      case "quote":
        return h("blockquote", { key: i }, [serialize(node.children)]);
      case "ul":
        return h("ul", { key: i }, [serialize(node.children)]);
      case "ol":
        return h("ol", { key: i }, [serialize(node.children)]);
      case "li":
        return h("li", { key: i }, [serialize(node.children)]);
      case "link":
        return h("a", { href: escapeHTML(node.url), key: i }, [
          serialize(node.children),
        ]);

      default:
        return h("p", { key: i }, [serialize(node.children)]);
    }
  });
};

export default {
  props: ["content"],
  setup(props) {
    // `content` should be slatejs value
    const { content } = toRefs(props);
    return () => [serialize(content.value)];
  },
};

[endlessuniverse]

@MinSomai Thank you for sharing.

It would be great to create a Markdown renderer to integrate with Hugo SSG.

[Elliot67]

Made an improved version for Vue 2.

import { CreateElement, defineComponent, PropType } from 'vue';

const recursivlyCreateText = (createElement: CreateElement, tags: string[], text: string): any => {
  if (tags.length === 1) {
    return createElement(tags[0], text);
  }
  const nextTags = tags.filter((t, idx) => idx !== 0);
  return createElement(tags[0], [recursivlyCreateText(createElement, nextTags, text)]);
};

const serialize = (createElement: CreateElement, children: any) => {
  const recursive = (children: Parameters<typeof serialize>[1]) => serialize(createElement, children);
  return children?.map((node: any): any => {
    if (!node) {
      return null;
    }

    if (typeof node.text === 'string') {
      const textTags: string[] = [];
      if (node.bold) {
        textTags.push('strong');
      }
      if (node.italic) {
        textTags.push('i');
      }
      if (node.underline) {
        textTags.push('u');
      }
      if (node.strikethrough) {
        textTags.push('s');
      }
      if (textTags.length > 0) {
        return recursivlyCreateText(createElement, textTags, node.text);
      }

      return node.text;
    }

    switch (node.type) {
      case 'h1':
      case 'h2':
      case 'h3':
      case 'h4':
      case 'h5':
      case 'h6':
        return createElement(node.type, [recursive(node.children)]);
      case 'quote':
        return createElement('blockquote', [recursive(node.children)]);
      case 'ul':
        return createElement('ul', [recursive(node.children)]);
      case 'ol':
        return createElement('ol', [recursive(node.children)]);
      case 'li':
        return createElement('li', [recursive(node.children)]);
      case 'link':
        let url = '';
        switch (node.linkType) {
          case 'internal':
            // TODO: Find url of internal link
            break;
          case 'custom':
            url = node.url;
            break;
        }
        return createElement('a', { attrs: { href: url, target: node.newTab ? '_blank' : null } }, [
          recursive(node.children),
        ]);

      default:
        if (node.children?.length > 0) {
          if (node.children.length === 1 && node.children[0].text === '') {
            return createElement('br');
          }
          return createElement('p', [recursive(node.children)]);
        }
        return null;
    }
  });
};

export default defineComponent({
  props: {
    node: {
      type: Array as PropType<any[]>,
      required: true,
    },
  },
  render: function (createElement) {
    return createElement('div', serialize(createElement, this.node));
  },
});

[MinSomai]

noiche.