Content Documents

import { type User } from "@directus/types";

interface Button {
  /**
   * uuid
   */
  id: string;

  /**
   * Color variant of the button
   */
  color: "primary" | "secondary" | "tertiary" | null;

  /**
   * Iconify icon formatted as `{library}:{icon-name}` (e.g. `mdi:home`)
   *
   * Possible library values:
   * - mdi
   * - heroicons
   * - bxl
   * - material-symbols
   */
  icon: string | null;

  /**
   * Position of the icon within the button
   */
  icon_position: "leading" | "trailing" | null;

  /**
   * Whether the button links to an internal or external location
   */
  internal: boolean;

  /**
   * URL or internal path the button links to
   */
  to: string;

  /**
   * Text to display on the button
   */
  label: string;

  /**
   * Style variant of the button
   */
  variant: "solid" | "soft" | "subtle" | "outline" | "ghost" | "link";

  /**
   * Size variant of the button
   */
  size: "xs" | "sm" | "md" | "lg" | "xl";

  /**
   * timestamp
   */
  date_created: string | null;

  /**
   * timestamp
   */
  date_updated: string | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;
}

import type { User } from "@directus/types";
import type { JSONContent } from "@tiptap/core";

interface Callout {
  /**
   * UUID of the callout.
   */
  id: string;

  /**
   * Title displayed at the top of the callout.
   */
  title: string | null;

  /**
   * Color variant of the callout.
   */
  color:
    "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "neutral";

  /**
   * Rich text description stored as a Tiptap JSON document.
   */
  description: JSONContent | null;

  /**
   * Whether the callout can be dismissed by the user.
   */
  dismissable: boolean | null;

  /**
   * Parsed Tiptap editor nodes for the callout description.
   * These nodes are Many-to-Any junction items.
   */
  editor_nodes: CalloutsEditorNode[] | null;

  /**
   * Icon name in Iconify format.
   */
  icon: string | null;

  /**
   * Variant of the callout appearance.
   */
  variant: "solid" | "soft" | "outline" | "subtle" | null;

  /**
   * List of button actions associated with the callout.
   */
  actions:
    | {
        label: string | null;
        internal: boolean;
        to: string | null;
        variant: "solid" | "soft" | "outline" | "subtle" | null;
      }[]
    | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

interface CalloutsEditorNode {
  id: string;
  collection: string | null;
  callouts_id: Callout | Callout["id"] | null;
  item: Mention | Mention["id"] | null; // See Mentions
}

import type { User, File } from "@directus/types";

interface Image {
  /**
   * UUID of the image relation.
   */
  id: string;

  /**
   * Alternative text describing the image.
   */
  alt_text: string | null;

  /**
   * Whether the image should span the full content width.
   */
  full_width: boolean;

  /**
   * Reference to the uploaded image file.
   */
  image: File | File["id"] | null;

  /**
   * Maximum display width in pixels. Only used if full_width is false.
   */
  max_width: number | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

import type { User, File } from "@directus/types";

interface ContentList {
  /**
   * UUID of the content list.
   */
  id: string;

  /**
   * Items belonging to the content list.
   */
  items: ContentListItem[] | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

interface ContentListItem {
  /**
   * UUID of the list item.
   */
  id: string;

  /**
   * Title of the content list item.
   */
  title: string | null;

  /**
   * Description text displayed for the item.
   */
  description: string | null;

  /**
   * Icon name in Iconify format.
   */
  icon: string | null;

  /**
   * Image file associated with the item.
   */
  image: File | File["id"] | null;

  /**
   * Whether the link points to an internal location.
   */
  internal: boolean;

  /**
   * URL or internal path for the item.
   */
  link: string | null;

  /**
   * Type of media displayed with the item.
   */
  mediatype: "none" | "icon" | "image" | null;

  /**
   * Sort order within the content list.
   */
  sort: number | null;

  /**
   * Reference to the parent content list.
   */
  content_lists: ContentList | ContentList["id"] | null;
}

import type { User } from "@directus/types";

interface RelatedContentList {
  /**
   * UUID of the related content list.
   */
  id: string;

  /**
   * Items belonging to this related content list.
   */
  items: RelatedContentListsItem[] | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

/** Many-to-any junction item */
export interface RelatedContentListsItem {
  /**
   * Identifier of the related content list item.
   */
  id: number;

  /**
   * Name of the collection the related item belongs to.
   */
  collection: string | null;

  /**
   * Reference to the related item in its respective collection.
   * See Data model documentation for more info on these types
   */
  item:
    | Article
    | Article["id"]
    | Testimonial
    | Testimonial["id"]
    | Video
    | Video["id"]
    | PodcastEpisode
    | PodcastEpisode["id"]
    | PodcastShow
    | PodcastShow["id"]
    | Sector
    | Sector["id"]
    | Program
    | Program["id"]
    | EducationalInstitution
    | EducationalInstitution["id"]
    | RegionalEducationDesk
    | RegionalEducationDesk["id"]
    | null;

  /**
   * Reference to the parent related content list.
   */
  related_content_lists_id: RelatedContentList | RelatedContentList["id"] | null;

  /**
   * Sort order within the related content list.
   */
  sort: number | null;
}

import type { User, File } from "@directus/types";

interface MediaplayerChapter {
  /**
   * Display label of the chapter.
   */
  label: string;

  /**
   * Start time of the chapter in seconds.
   */
  time: number;
}

interface Mediaplayer {
  /**
   * UUID of the mediaplayer item.
   */
  id: string;

  /**
   * Title of the media item.
   */
  title: string;

  /**
   * Artist name.
   */
  artist: string;

  /**
   * Whether the media element should span the full content width.
   */
  full_width: boolean;

  /**
   * Maximum display width in pixels. Only used if full_width is false.
   */
  max_width: number | null;

  /**
   * Type of media.
   */
  type: "video" | "audio";

  /**
   * Audio source configuration (audio only).
   */
  audio: {
    service: "directus"; // Other services are not supported currently
    source: File["id"];
  } | null;

  /**
   * Video source configuration (video only).
   */
  video: {
    service: "directus"; // Other services are not supported currently
    id: File["id"];
  } | null;

  /**
   * Artwork image for audio files.
   */
  artwork: File | File["id"] | null;

  /**
   * Chapter list for video files.
   */
  chapters: MediaplayerChapter[] | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

{
  "type": "paragraph",
  "content": [
    {
      "type": "text",
      "text": "An "
    },
    {
      "type": "text",
      "marks": [
        {
          "type": "italic"
        }
      ],
      "text": "inline"
    },
    {
      "type": "text",
      "text": " "
    },
    {
      "type": "relation-inline-block",
      "attrs": {
        "id": "e6f88b38-05b4-4c29-bf77-9267b4e182b4",
        "junction": "articles_editor_nodes",
        "collection": "mentions"
      }
    },
    {
      "type": "text",
      "text": " block."
    }
  ]
}

import { User } from "@directus/types";

interface Mention {
  /**
   * UUID of the mention.
   */
  id: string;

  /**
   * Label inserted into the text. If empty, use the referenced item's title.
   */
  title: string | null;

  /**
   * Referenced item for this mention. Only one item is allowed.
   * Directus does not support one-to-any relationships so the
   * related items are stored in an array.
   *
   * Should only have one item in the array, but in case of
   * multiple items, only use the first one.
   */
  item: MentionsItem[] | null;

  /**
   * User who created the item.
   */
  user_created: User | User["id"] | null;

  /**
   * User who last updated the item.
   */
  user_updated: User | User["id"] | null;

  /**
   * Timestamp indicating when the item was created.
   */
  date_created: string | null;

  /**
   * Timestamp indicating when the item was last updated.
   */
  date_updated: string | null;
}

export interface MentionsItem {
  /**
   * Identifier of the mention item.
   */
  id: number;

  /**
   * Name of the referenced collection.
   */
  collection: string | null;

  /**
   * Referenced item within the collection.
   * Currently only articles are supported.
   */
  item: Article | Article["id"] | null;

  /**
   * Reference to the parent mention.
   */
  mentions_id: Mention | Mention["id"] | null;
}

import { Node, generateHTML, type JSONContent } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import { CalloutNode } from "./CalloutNode";

/**
 * Callout node renders a styled container representing a Callout relation block.
 * The node carries metadata (color, variant, icon, dismissable, etc.)
 * resolved from the related `callouts` collection in Directus.
 */
export const CalloutNode = Node.create({
  name: "callout",
  group: "block",
  content: "block*",

  /**
   * Attribute definitions derived from the Callout schema.
   */
  addAttributes() {
    return {
      id: { default: null },
      color: { default: null },
      variant: { default: null },
      icon: { default: null },
      dismissable: { default: null },
      title: { default: null }
    };
  },

  /**
   * Render the Callout as HTML.
   * Attributes allow styling and structural interpretation in your renderer.
   */
  renderHTML({ HTMLAttributes }) {
    return [
      "aside",
      {
        class: `callout ${HTMLAttributes.color ?? ""} ${HTMLAttributes.variant ?? ""}`,
        "data-id": HTMLAttributes.id ?? undefined,
        "data-icon": HTMLAttributes.icon ?? undefined,
        "data-title": HTMLAttributes.title ?? undefined,
        "data-dismissable": HTMLAttributes.dismissable ?? undefined
      },
      0
    ];
  },

  /**
   * Parse HTML back into a Callout node.
   */
  parseHTML() {
    return [
      {
        tag: "aside.callout"
      }
    ];
  }
});

/**
 * Convert JSON document to HTML including custom nodes.
 */
export function toHtml(doc: JSONContent): string {
  return generateHTML(doc, [
    StarterKit, // Prefer importing individual extensions, not the StarterKit
    CalloutNode
  ]);
}

import React from 'react'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
import { CalloutNode } from './CalloutNode'

/**
 * React component for displaying a Callout node in read-only mode.
 */
export function CalloutComponent({ node }: any) {
  const { id, color, variant, icon, dismissable, title } = node.attrs

  return (
    <NodeViewWrapper
      as="aside"
      className={`callout ${color ?? ''} ${variant ?? ''}`}
      data-id={id ?? undefined}
      data-icon={icon ?? undefined}
      data-title={title ?? undefined}
      data-dismissable={dismissable ?? undefined}
    >
      {title && <div className="callout-title">{title}</div>}

      {icon && (
        <div className="callout-icon">
          {/* Replace this with your Iconify renderer */}
          <span>{icon}</span>
        </div>
      )}

      <NodeViewContent className="callout-content" />

      {dismissable && (
        <button
          type="button"
          disabled
          className="callout-dismiss"
          aria-hidden="true"
        >
          ×
        </button>
      )}
    </NodeViewWrapper>
  )
}

/**
 * Register the node so Tiptap renders it using React.
 */
const CalloutReactNode = CalloutNode.extend({
  addNodeView() {
    return ({ node }) => {
      return React.createElement(CalloutComponent, { node })
    }
  },
})

/**
 * Read-only renderer for Tiptap documents including custom nodes.
 */
export function CalloutRenderer({ doc }: { doc: any }) {
  const editor = useEditor({
    editable: false,         // 👈 read-only mode
    content: doc,
    extensions: [
      StarterKit.configure({
        editable: false,
      }),
      CalloutReactNode,
    ],
  })

  return <EditorContent editor={editor} />
}

<script setup lang="ts">
import { h } from 'vue'
import type { JSONContent } from '@tiptap/core'

/**
 * Vue renderer for a subset of Tiptap JSONContent.
 * No Tiptap runtime involved.
 *
 * Supports:
 * - paragraph node
 * - text node (with bold mark)
 * - callout custom node
 */

function renderNode(node: JSONContent): any {
  switch (node.type) {
    case 'paragraph':
      return h('p', {}, renderChildren(node))

    case 'callout': {
      const attrs = node.attrs ?? {}
      const { color, variant, title, icon } = attrs

      return h(
        'aside',
        {
          class: ['callout', color, variant].filter(Boolean).join(' '),
        },
        [
          title ? h('div', { class: 'callout-title' }, title) : null,
          icon ? h('div', { class: 'callout-icon' }, icon) : null,
          ...renderChildren(node),
        ]
      )
    }

    case 'text':
      return renderTextNode(node)

    default:
      return renderChildren(node)
  }
}

function renderChildren(node: JSONContent): any[] {
  if (!node.content) return []
  return node.content.map(renderNode)
}

function renderTextNode(node: JSONContent): any {
  let children: any = node.text ?? ''

  if (node.marks) {
    for (const mark of node.marks) {
      if (mark.type === 'bold') {
        children = h('strong', {}, children)
      }
    }
  }

  return children
}

/**
 * Props
 */
const props = defineProps<{
  doc: JSONContent
}>()
</script>

<template>
  <div class="renderer-root">
    <!-- Render the JSONContent using h() -->
    <component :is="renderNode(doc)" />
  </div>
</template>

<style scoped>
.callout {
  padding: 1rem;
  border-radius: 6px;
  border-left: 4px solid var(--c-border);
  background: var(--c-bg-soft);
}

.callout.info {
  border-color: #3b82f6;
}

.callout-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.callout-icon {
  opacity: 0.75;
  margin-bottom: 0.25rem;
}
</style>