Refactor to support custom Markdoc components (#52)

* Refactor to support custom Markdoc components

Introduced a new file for custom Markdoc components and updated the client to render Markdoc content using React components. Modified content renderer to handle React nodes instead of dangerously setting inner HTML.

* Add custom Markdoc tags support in Keystatic

Introduced `CustomMarkdocTags` for defining user tags. Updated `transform` to accommodate the new custom tags, enhancing tag customization in the CMS.

packages/cms/keystatic/src/custom-components.tsx

@@ -0,0 +1,32 @@
+/**
+ * @name CustomMarkdocComponents
+ * @description Custom components for Markdoc. Please define your custom components here.
+ * @example
+ *
+ * ```ts
+ * function Youtube(props: { src: string }) { ... }
+ *
+ * export const CustomMarkdocComponents: Record<string, React.ComponentType<never>> = {
+ *   Youtube,
+ * };
+ */
+export const CustomMarkdocComponents: Record<
+  string,
+  React.ComponentType<never>
+> = {
+  // define your custom components here
+};
+
+/**
+ * @name CustomMarkdocTags
+ * @description Custom tags for Markdoc. Please define your custom tags here.
+ * @example
+ * export const CustomMarkdocTags = {
+ *  youtube: {
+ *     render: "Youtube",
+ *  }
+ * }
+ */
+export const CustomMarkdocTags = {
+  // define your custom tags here
+};