import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes='<div><h2 style="color: #333;">标题</h2><p style="color: #666; line-height: 1.6;">这是一段富文本内容</p></div>'
      />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const htmlString = `
    <div style="padding: 10px;">
      <h1 style="color: #007aff; margin-bottom: 10px;">欢迎使用 RichText</h1>
      <p style="color: #333; line-height: 1.8;">
        Life is <i>like</i> a box of <b style="color: red;">chocolates</b>.
      </p>
      <p style="color: #666; margin-top: 10px;">
        You never know what you are gonna get.
      </p>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={htmlString} />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const nodes = [
    { type: 'text' as const, text: '这是第一段文本。' },
    { type: 'text' as const, text: '这是第二段文本，支持 & 等 HTML 实体。' },
  ];

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={nodes} />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const html = `
    <div style="padding: 10px;">
      <p>点击下方链接文字查看控制台输出：</p>
      <a style="color: #007aff; text-decoration: underline;">可点击的链接</a>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes={html}
        onSelect={(e) => console.log('点击标签:', e.detail.name, e.detail.attrs)}
      />
    </View>
  );
}