diff --git a/app/markdoc/Tag.ts b/app/markdoc/Tag.ts index a02caaf..8f5dc84 100644 --- a/app/markdoc/Tag.ts +++ b/app/markdoc/Tag.ts @@ -1,21 +1,11 @@ -// Workaround about undefined import only in production build - import type { RenderableTreeNode } from "@markdoc/markdoc"; +import type { ReactNode } from "react"; -export class Tag = Record> { - readonly $$mdtype = "Tag" as const; +import { Tag as MarkdocTag } from "@markdoc/markdoc"; - static isTag = (tag: any): tag is Tag => { - return !!(tag?.$$mdtype === "Tag"); - }; - - name: N; - attributes: A; - children: RenderableTreeNode[]; - - constructor(name = "div" as N, attributes = {} as A, children: RenderableTreeNode[] = []) { - this.name = name; - this.attributes = attributes; - this.children = children; +export class Tag extends MarkdocTag { + constructor(name: string | ReactNode, attributes: Record, children: RenderableTreeNode[]) { + // Workaround for TypeScript's type system + super(name as unknown as string, attributes, children); } } diff --git a/app/markdoc/nodes.tsx b/app/markdoc/nodes.tsx index 6287a2b..7c1c656 100644 --- a/app/markdoc/nodes.tsx +++ b/app/markdoc/nodes.tsx @@ -1,13 +1,12 @@ import type { Config, Node } from "@markdoc/markdoc"; import { slugifyWithCounter } from "@sindresorhus/slugify"; +import { nodes as defaultNodes } from "@markdoc/markdoc"; import { DocsLayout } from "@syntax/DocsLayout"; -import Markdoc from "@markdoc/markdoc"; -import { Fence } from "@syntax/Fence"; -import yaml from "js-yaml"; import { Link } from "@/components/common/Link"; - -const { nodes: defaultNodes, Tag } = Markdoc; +import { Fence } from "@syntax/Fence"; +import { Tag } from "./Tag"; +import yaml from "js-yaml"; let documentSlugifyMap = new Map(); @@ -19,7 +18,7 @@ const nodes = { documentSlugifyMap.set(config, slugifyWithCounter()); return new Tag( - this.render, + this.render as unknown as string, { frontmatter: yaml.load(node.attributes.frontmatter), estimatedReadingTime: config?.variables?.estimatedReadingTime,