stream-chat-react-native-core 9.9.4-beta.1 → 9.10.0-beta.1

package/src/ai-components/internal/icons/Close.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { type IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Close = (props: IconProps) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M7.05 7.05a1 1 0 000 1.414L10.586 12 7.05 15.536a1 1 0 101.414 1.414L12 13.414l3.536 3.536a1 1 0 001.414-1.414L13.414 12l3.536-3.536a1 1 0 00-1.414-1.414L12 10.586 8.464 7.05a1 1 0 00-1.414 0z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/ai-components/internal/icons/Mic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { G, Path, Svg } from 'react-native-svg';
+
+import type { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const Mic = ({ size, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+    <G id='24 / mic_iOS'>
+      <Path
+        d='M11.5234 13.9922C11.5234 16.8047 13.375 18.7734 16 18.7734C18.6367 18.7734 20.4766 16.8047 20.4766 13.9922V6.69141C20.4766 3.86719 18.6367 1.89844 16 1.89844C13.375 1.89844 11.5234 3.86719 11.5234 6.69141V13.9922ZM13.7383 14.0273V6.64453C13.7383 5.08594 14.6172 4.01953 16 4.01953C17.3828 4.01953 18.2617 5.08594 18.2617 6.64453V14.0273C18.2617 15.5977 17.3828 16.6523 16 16.6523C14.6172 16.6523 13.7383 15.5977 13.7383 14.0273ZM7.10547 14.5078C7.10547 19.3242 10.3047 22.6289 14.9336 23.0742V25.4766H10.6211C10.0234 25.4766 9.51953 25.9688 9.51953 26.5781C9.51953 27.1758 10.0234 27.668 10.6211 27.668H21.3789C21.9883 27.668 22.4922 27.1758 22.4922 26.5781C22.4922 25.9688 21.9883 25.4766 21.3789 25.4766H17.0781V23.0742C21.6953 22.6289 24.9062 19.3242 24.9062 14.5078V12.1875C24.9062 11.5781 24.4141 11.0977 23.8047 11.0977C23.1953 11.0977 22.6914 11.5781 22.6914 12.1875V14.4258C22.6914 18.4102 19.9961 21.0469 16 21.0469C12.0039 21.0469 9.30859 18.4102 9.30859 14.4258V12.1875C9.30859 11.5781 8.81641 11.0977 8.20703 11.0977C7.59766 11.0977 7.10547 11.5781 7.10547 12.1875V14.5078Z'
+        {...rest}
+      />
+    </G>
+  </Svg>
+);

package/src/ai-components/internal/icons/Picture.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { type IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Picture = (props: IconProps) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M2 8a3 3 0 013-3h14a3 3 0 013 3v8a3 3 0 01-3 3H5a3 3 0 01-3-3V8zm3-1a1 1 0 00-1 1v8a1 1 0 001 1h14a1 1 0 001-1V8a1 1 0 00-1-1H5z'
+      {...props}
+    />
+    <RootPath
+      d='M15.99 9a1 1 0 01.778.36l5 6a1 1 0 11-1.536 1.28l-4.216-5.059-3.235 4.044a1 1 0 01-1.381.175l-3.306-2.48-3.387 3.387a1 1 0 01-1.414-1.414l4-4A1 1 0 018.6 11.2l3.225 2.418 3.394-4.243A1 1 0 0115.99 9z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/ai-components/internal/icons/SendUp.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import type { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const SendUp = ({ size, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest} testID='send-up'>
+    {/*<Circle cx={size / 2} cy={size / 2} r={size / 2} {...rest} />*/}
+    <Path
+      clipRule='evenodd'
+      d='M14.6673 16V22.6667H17.334V16H22.6673L16.0007 9.33337L9.33398 16H14.6673Z'
+      fill={'white'}
+      fillRule='evenodd'
+    />
+  </Svg>
+);

package/src/ai-components/internal/icons/utils/base.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Svg, { Path, type PathProps, type SvgProps } from 'react-native-svg';
+
+export type IconProps = Partial<SvgProps> &
+  Omit<RootPathProps, 'd'> & {
+    height?: number;
+    width?: number;
+  };
+
+export const RootSvg = (props: IconProps) => {
+  const { children, height = 24, viewBox = '0 0 24 24', width = 24 } = props;
+  return (
+    <Svg
+      {...{
+        height,
+        viewBox,
+        width,
+      }}
+      {...props}
+    >
+      {children}
+    </Svg>
+  );
+};
+
+export type RootPathProps = Pick<PathProps, 'd'> & {
+  pathFill?: SvgProps['fill'];
+  pathOpacity?: PathProps['opacity'];
+};
+
+export const RootPath = (props: RootPathProps) => {
+  const { d, pathFill = 'black', pathOpacity } = props;
+  return (
+    <Path
+      {...{
+        clipRule: 'evenodd',
+        d,
+        fill: pathFill,
+        fillRule: 'evenodd',
+        opacity: pathOpacity,
+      }}
+    />
+  );
+};

package/src/ai-components/markdown/components/Autolink.tsx

@@ -0,0 +1,26 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Autolink = ({ children, styles, onPress }: MarkdownComponentProps) => (
+  <Text style={styles.autolink} onPress={onPress}>
+    {children}
+  </Text>
+);
+
+export const renderAutolink: RuleRenderFunction = ({ node, output, state, styles, onLink }) => {
+  state.withinLink = true;
+  const onLinkPress = () => onLink && onLink(node.target);
+  return (
+    <Autolink
+      key={state.key}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+      onPress={onLinkPress}
+    >
+      {output(node.content, state)}
+    </Autolink>
+  );
+};

package/src/ai-components/markdown/components/BlockQuote.tsx

@@ -0,0 +1,19 @@
+import { Text, View } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const BlockQuote = ({ children, styles }: MarkdownComponentProps) => (
+  <View style={styles.blockQuoteSection}>
+    <View style={styles.blockQuoteSectionBar} />
+    <Text style={styles.blockQuoteText}>{children}</Text>
+  </View>
+);
+
+export const renderBlockQuote: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinQuote = true;
+  return (
+    <BlockQuote key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </BlockQuote>
+  );
+};

package/src/ai-components/markdown/components/Bold.tsx

@@ -0,0 +1,16 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Bold = ({ children, styles }: MarkdownComponentProps) => (
+  <Text style={styles.strong}>{children}</Text>
+);
+
+export const renderBold: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinText = true;
+  return (
+    <Bold key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </Bold>
+  );
+};

package/src/ai-components/markdown/components/CodeBlock.tsx

@@ -0,0 +1,96 @@
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import { Pressable, type PressableProps, Text, View } from 'react-native';
+
+import { parseJsonChart } from '../../charts';
+import { parseMermaid } from '../../charts';
+import Chart from '../../charts/Chart';
+import { MarkdownReactiveScrollView } from '../../components';
+import { useStableCallback } from '../../internal/hooks/useStableCallback';
+import { setClipboardString } from '../../services';
+import { SyntaxHighlighter } from '../../syntax-highlighting';
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const CodeBlockCopyButton = ({ onPress }: { onPress?: PressableProps['onPress'] }) => (
+  <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })} onPress={onPress}>
+    <Text style={{ fontSize: 15 }}>{'\u29C9'}</Text>
+  </Pressable>
+);
+
+const areEqual = (prev: MarkdownComponentProps, next: MarkdownComponentProps) =>
+  prev.node.content === next.node.content;
+
+export const CodeBlock = React.memo(({ styles, node }: MarkdownComponentProps) => {
+  const text = useMemo(() => node.content?.trim(), [node.content]);
+
+  const copyText = useStableCallback(() => {
+    if (setClipboardString) {
+      setClipboardString(text);
+    }
+  });
+
+  const CodeTag = useCallback(
+    ({ children }: PropsWithChildren) => (
+      <View style={styles.codeBlockContainer}>
+        <Text style={styles.codeBlock}>{children}</Text>
+      </View>
+    ),
+    [styles],
+  );
+
+  const CodeBlockHeader = useCallback(
+    () => (
+      <View style={styles.codeBlockHeaderContainer}>
+        <Text style={styles.codeBlockHeaderTitle}>{node.lang}</Text>
+        <CodeBlockCopyButton onPress={copyText} />
+      </View>
+    ),
+    [styles, node.lang, copyText],
+  );
+
+  const CodeBlockWrapper = useCallback(
+    ({ children }: PropsWithChildren) => (
+      <View style={styles.codeBlockWrapper}>
+        <CodeBlockHeader />
+        <MarkdownReactiveScrollView>{children}</MarkdownReactiveScrollView>
+      </View>
+    ),
+    [CodeBlockHeader, styles.codeBlockWrapper],
+  );
+
+  if (node.lang === 'mermaid') {
+    try {
+      const parsed = parseMermaid(text);
+      if (parsed) {
+        return <Chart spec={parsed} />;
+      }
+    } catch (_e) {
+      /* do nothing */
+    }
+  }
+
+  if (node.lang === 'json') {
+    try {
+      const parsed = parseJsonChart(text);
+      if (parsed) {
+        return <Chart spec={parsed} />;
+      }
+    } catch (_e) {
+      /* do nothing */
+    }
+  }
+
+  return (
+    <SyntaxHighlighter
+      language={node.lang}
+      highlighter={'prism'}
+      CodeTag={CodeTag}
+      PreTag={CodeBlockWrapper}
+    >
+      {text}
+    </SyntaxHighlighter>
+  );
+}, areEqual);
+
+export const renderCodeBlock: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <CodeBlock key={state.key} node={node} output={output} state={state} styles={styles} />
+);

package/src/ai-components/markdown/components/Emphasis.tsx

@@ -0,0 +1,16 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Emphasis = ({ children, styles }: MarkdownComponentProps) => (
+  <Text style={styles.em}>{children}</Text>
+);
+
+export const renderEmphasis: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinText = true;
+  return (
+    <Emphasis key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </Emphasis>
+  );
+};

package/src/ai-components/markdown/components/Heading.tsx

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { Text } from 'react-native';
+
+import type { HeadingLevel, MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+const DEFAULT_HEADING_LEVEL = undefined;
+
+const isValidHeadingLevel = (n: unknown): n is HeadingLevel =>
+  (Number.isInteger(n) && (n as number) >= 1 && (n as number) <= 6) || n === undefined;
+
+export const Heading = ({ children, node, styles }: MarkdownComponentProps) => {
+  const headingLevel = isValidHeadingLevel(node.level) ? node.level : DEFAULT_HEADING_LEVEL;
+
+  const headingStyle = useMemo(
+    () => styles[`heading${headingLevel ?? ''}`],
+    [headingLevel, styles],
+  );
+
+  return <Text style={headingStyle}>{children}</Text>;
+};
+
+export const renderHeading: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinText = true;
+  state.withinHeading = true;
+  return (
+    <Heading key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </Heading>
+  );
+};

package/src/ai-components/markdown/components/HorizontalRule.tsx

@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const HorizontalRule = ({ styles }: MarkdownComponentProps) => <View style={styles.hr} />;
+
+export const renderHorizontalRule: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <HorizontalRule key={state.key} node={node} output={output} state={state} styles={styles} />
+);

package/src/ai-components/markdown/components/InlineCode.tsx

@@ -0,0 +1,16 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const InlineCode = ({ children, styles }: MarkdownComponentProps) => (
+  <Text style={styles.inlineCode}>{children}</Text>
+);
+
+export const renderInlineCode: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinText = true;
+  return (
+    <InlineCode key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </InlineCode>
+  );
+};

package/src/ai-components/markdown/components/LineBreak.tsx

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const LineBreak = ({ styles }: MarkdownComponentProps) => (
+  <Text style={styles.br}>{'\n\n'}</Text>
+);
+
+export const renderLineBreak: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <LineBreak key={state.key} node={node} output={output} state={state} styles={styles} />
+);

package/src/ai-components/markdown/components/Link.tsx

@@ -0,0 +1,28 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Link = ({ children, styles, onPress }: MarkdownComponentProps) => (
+  <Text style={styles.autolink} onPress={onPress} suppressHighlighting={false}>
+    {children}
+  </Text>
+);
+
+export const renderLink: RuleRenderFunction = ({ node, output, state, styles, onLink }) => {
+  const url = state.parentLink ?? node.target;
+  state.withinLink = true;
+  state.parentLink = url;
+  const onLinkPress = () => onLink && onLink(url);
+  return (
+    <Link
+      key={state.key}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+      onPress={onLinkPress}
+    >
+      {output(node.content, state)}
+    </Link>
+  );
+};

package/src/ai-components/markdown/components/List.tsx

@@ -0,0 +1,65 @@
+import type { PropsWithChildren } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+
+import type { SingleASTNode } from '@khanacademy/simple-markdown';
+
+import type { BulletProps, MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+const parentTypes = ['text', 'paragraph', 'strong'];
+
+export const List = ({ node, output, state, styles }: MarkdownComponentProps) => {
+  let isSublist = state.withinList;
+
+  return (
+    <View key={state.key} style={isSublist ? styles?.sublist : styles?.list}>
+      {node.items.map((item: SingleASTNode, index: number) => {
+        const indexAfterStart = node.start + index;
+
+        if (item === null) {
+          return (
+            <ListRow key={index} style={styles?.listRow}>
+              <Bullet
+                index={node.ordered && indexAfterStart}
+                style={node.ordered ? styles?.listItemNumber : styles?.listItemBullet}
+              />
+            </ListRow>
+          );
+        }
+
+        isSublist = item.length > 1 && item[1].type === 'list';
+        const isSublistWithinText = parentTypes.includes((item[0] ?? {}).type) && isSublist;
+        const style = isSublistWithinText ? { marginBottom: 0 } : {};
+
+        return (
+          <ListRow key={index} style={styles?.listRow}>
+            <Bullet
+              index={node.ordered && indexAfterStart}
+              style={node.ordered ? styles?.listItemNumber : styles?.listItemBullet}
+            />
+            <ListItem key={1} style={[styles?.listItemText, style]}>
+              {output(item, { ...state, withinList: true })}
+            </ListItem>
+          </ListRow>
+        );
+      })}
+    </View>
+  );
+};
+
+const Bullet = ({ index, style }: BulletProps) => (
+  <Text key={0} style={style}>
+    {index ? `${index}. ` : '\u2022 '}
+  </Text>
+);
+
+const ListRow = ({ children, style }: PropsWithChildren<ViewProps>) => (
+  <View style={style}>{children}</View>
+);
+
+const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
+  <Text style={style}>{children}</Text>
+);
+
+export const renderList: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <List key={`list-${state.key}`} node={node} output={output} state={state} styles={styles} />
+);

package/src/ai-components/markdown/components/Mailto.tsx

@@ -0,0 +1,26 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Mailto = ({ children, styles, onPress }: MarkdownComponentProps) => (
+  <Text style={styles.url} onPress={onPress}>
+    {children}
+  </Text>
+);
+
+export const renderMailto: RuleRenderFunction = ({ node, output, state, styles, onLink }) => {
+  state.withinLink = true;
+  const onLinkPress = () => onLink && onLink(node.target);
+  return (
+    <Mailto
+      key={state.key}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+      onPress={onLinkPress}
+    >
+      {output(node.content, state)}
+    </Mailto>
+  );
+};

package/src/ai-components/markdown/components/Markdown.tsx

@@ -0,0 +1,59 @@
+import React, { type PropsWithChildren, useMemo } from 'react';
+
+import { View } from 'react-native';
+
+import SimpleMarkdown, {
+  type OutputRules,
+  type ParserRules,
+  type ReactOutputRule,
+} from '@khanacademy/simple-markdown';
+import isArray from 'lodash/isArray';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
+
+import { useTheme } from '../../contexts';
+import { getLocalRules } from '../rules';
+
+import { getLocalStyles } from '../styles';
+import type { MarkdownProps } from '../types';
+
+const UnmemoizedMarkdown = (props: PropsWithChildren<MarkdownProps>) => {
+  const { theme } = useTheme();
+
+  const { onLink, rules: rulesProp, paragraphNumberOfLines, children } = props;
+
+  const mergedStyles = useMemo(() => merge({}, getLocalStyles({ theme }), theme.markdown), [theme]);
+
+  const localRules = useMemo(
+    () =>
+      merge(
+        {},
+        SimpleMarkdown.defaultRules,
+        getLocalRules(mergedStyles, { onLink, paragraphNumberOfLines }),
+        rulesProp,
+      ) as unknown as ParserRules,
+    [mergedStyles, onLink, rulesProp, paragraphNumberOfLines],
+  );
+
+  const parser = useMemo(() => SimpleMarkdown.parserFor(localRules), [localRules]);
+  const renderer = useMemo(
+    () => SimpleMarkdown.outputFor(localRules as unknown as OutputRules<ReactOutputRule>, 'react'),
+    [localRules],
+  );
+
+  const childText = useMemo(() => (isArray(children) ? children.join('') : children), [children]);
+
+  const toRender = useMemo(() => {
+    const blockSource = `${childText ?? ''}\n\n`;
+    return parser(blockSource, { inline: false });
+  }, [childText, parser]);
+
+  const tree = useMemo(() => renderer(toRender), [renderer, toRender]);
+
+  return <View style={mergedStyles.view}>{tree}</View>;
+};
+
+const areEqual = (prevProps: PropsWithChildren, nextProps: PropsWithChildren) =>
+  isEqual(prevProps.children, nextProps.children);
+
+export const Markdown = React.memo(UnmemoizedMarkdown, areEqual);

package/src/ai-components/markdown/components/NewLine.tsx

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const NewLine = ({ styles }: MarkdownComponentProps) => (
+  <Text style={styles.br}>{'\n'}</Text>
+);
+
+export const renderNewLine: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <NewLine key={state.key} node={node} output={output} state={state} styles={styles} />
+);

package/src/ai-components/markdown/components/Paragraph.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { Text, type TextStyle, View } from 'react-native';
+
+import size from 'lodash/size';
+import some from 'lodash/some';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Paragraph = ({
+  children,
+  styles,
+  node,
+  state,
+  paragraphNumberOfLines,
+}: MarkdownComponentProps) => {
+  const paragraphStyle = useMemo(() => {
+    let style: TextStyle | (TextStyle | undefined)[] | undefined =
+      size(node.content) < 3 && some(node.content, { type: 'strong' })
+        ? styles.paragraphCenter
+        : styles.paragraph;
+
+    if (state.withinList) {
+      style = [style, styles.noMargin];
+    }
+
+    return style;
+  }, [node.content, state.withinList, styles.paragraph, styles.paragraphCenter, styles.noMargin]);
+
+  return (
+    <Text style={paragraphStyle} numberOfLines={paragraphNumberOfLines}>
+      {children}
+    </Text>
+  );
+};
+
+export const ParagraphWithImage = ({ children, styles }: MarkdownComponentProps) => (
+  <View style={styles.paragraphWithImage}>{children}</View>
+);
+
+export const renderParagraph: RuleRenderFunction = ({
+  node,
+  output,
+  state,
+  styles,
+  paragraphNumberOfLines,
+}) => {
+  if (some(node.content, { type: 'image' })) {
+    state.withinParagraphWithImage = true;
+
+    return (
+      <ParagraphWithImage key={state.key} node={node} output={output} state={state} styles={styles}>
+        {output(node.content, state)}
+      </ParagraphWithImage>
+    );
+  }
+
+  return (
+    <Paragraph
+      key={state.key}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+      paragraphNumberOfLines={paragraphNumberOfLines}
+    >
+      {output(node.content, state)}
+    </Paragraph>
+  );
+};

package/src/ai-components/markdown/components/Strikethrough.tsx

@@ -0,0 +1,16 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Strikethrough = ({ children, styles }: MarkdownComponentProps) => (
+  <Text style={styles.del}>{children}</Text>
+);
+
+export const renderStrikethrough: RuleRenderFunction = ({ node, output, state, styles }) => {
+  state.withinText = true;
+  return (
+    <Strikethrough key={state.key} node={node} output={output} state={state} styles={styles}>
+      {output(node.content, state)}
+    </Strikethrough>
+  );
+};