Intlayer

import { type DeepTransformContent as DeepTransformContentCore, getMarkdownMetadata, type IInterpreterPluginState as IInterpreterPluginStateCore, type MarkdownContent, type Plugins, } from '@intlayer/core'; import { type DeclaredLocales, type KeyPath, type LocalesValues, NodeType, } from '@intlayer/types'; import type { JSX } from 'solid-js'; import { ContentSelectorRenderer } from './editor'; import { EditedContentRenderer } from './editor/useEditedContentRenderer'; import { type IntlayerNode, renderIntlayerNode } from './IntlayerNode'; import { MarkdownMetadataRenderer, MarkdownRenderer } from './markdown'; import { renderSolidElement } from './solidElement/renderSolidElement'; /** --------------------------------------------- * INTLAYER NODE PLUGIN * --------------------------------------------- */ export type IntlayerNodeCond<T> = T extends number | string ? IntlayerNode<T> : never; /** Translation plugin. Replaces node with a locale string if nodeType = Translation. */ export const intlayerNodePlugins: Plugins = { id: 'intlayer-node-plugin', canHandle: (node) => typeof node === 'bigint' || typeof node === 'string' || typeof node === 'number', transform: ( _node, { plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components ...rest } ) => renderIntlayerNode({ ...rest, value: rest.children, children: ( <ContentSelectorRenderer {...rest}> <EditedContentRenderer {...rest}> {rest.children} </EditedContentRenderer> </ContentSelectorRenderer> ), }), }; /** --------------------------------------------- * SOLID NODE PLUGIN * --------------------------------------------- */ export type SolidNodeCond<T> = T extends { props: any; key?: any; } ? JSX.Element : never; /** Translation plugin. Replaces node with a locale string if nodeType = Translation. */ export const solidNodePlugins: Plugins = { id: 'solid-node-plugin', canHandle: (node) => typeof node === 'object' && typeof node.props !== 'undefined', transform: ( node, { plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components ...rest } ) => renderIntlayerNode({ ...rest, value: '[[solid-element]]', children: ( <ContentSelectorRenderer {...rest}> {renderSolidElement(node)} </ContentSelectorRenderer> ), }), }; /** * MARKDOWN PLUGIN */ export type MarkdownStringCond<T> = T extends string ? IntlayerNode<string, { metadata: DeepTransformContent<string> }> : never; /** Markdown string plugin. Replaces string node with a component that render the markdown. */ export const markdownStringPlugin: Plugins = { id: 'markdown-string-plugin', canHandle: (node) => typeof node === 'string', transform: (node: string, props, deepTransformNode) => { const { plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components ...rest } = props; const metadata = getMarkdownMetadata(node); const metadataPlugins: Plugins = { id: 'markdown-metadata-plugin', canHandle: (metadataNode) => typeof metadataNode === 'string' || typeof metadataNode === 'number' || typeof metadataNode === 'boolean' || !metadataNode, transform: (metadataNode, props) => renderIntlayerNode({ ...props, value: metadataNode, children: ( <ContentSelectorRenderer {...rest}> <MarkdownMetadataRenderer {...rest} metadataKeyPath={props.keyPath} > {node} </MarkdownMetadataRenderer> </ContentSelectorRenderer> ), }), }; // Transform metadata while keeping the same structure const metadataNodes = deepTransformNode(metadata, { plugins: [metadataPlugins], dictionaryKey: rest.dictionaryKey, keyPath: [], }); return renderIntlayerNode({ ...props, value: node, children: ( <ContentSelectorRenderer {...rest}> <MarkdownRenderer {...rest}>{node}</MarkdownRenderer> </ContentSelectorRenderer> ), additionalProps: { metadata: metadataNodes, }, }); }, }; export type MarkdownCond<T> = T extends { nodeType: NodeType | string; [NodeType.Markdown]: infer M; metadata?: infer U; } ? IntlayerNode<DeepTransformContent<M>, { metadata: DeepTransformContent<U> }> : never; export const markdownPlugin: Plugins = { id: 'markdown-plugin', canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeType.Markdown, transform: (node: MarkdownContent, props, deepTransformNode) => { const newKeyPath: KeyPath[] = [ ...props.keyPath, { type: NodeType.Markdown, }, ]; const children = node[NodeType.Markdown]; return deepTransformNode(children, { ...props, children, keyPath: newKeyPath, plugins: [markdownStringPlugin, ...(props.plugins ?? [])], }); }, }; /** --------------------------------------------- * PLUGINS RESULT * --------------------------------------------- */ export interface IInterpreterPluginSolid<T> { solidNode: SolidNodeCond<T>; intlayerNode: IntlayerNodeCond<T>; markdown: MarkdownCond<T>; } /** * Insert this type as param of `DeepTransformContent` to avoid `intlayer` package pollution. * * Otherwise the the `solid-intlayer` plugins will override the types of `intlayer` functions. */ export type IInterpreterPluginState = IInterpreterPluginStateCore & { solidNode: true; intlayerNode: true; markdown: true; }; export type DeepTransformContent< T, L extends LocalesValues = DeclaredLocales, > = DeepTransformContentCore<T, IInterpreterPluginState, L>; /** * Default enabled state for the plugins. Those are necessary for the rendering on client side. */ export const interpreterPluginsEnabledState: IInterpreterPluginState = { translation: true, enumeration: true, condition: true, insertion: true, nested: true, solidNode: true, intlayerNode: true, markdown: true, };