Open zobkazi opened 2 months ago
etrepum
commented
1 month ago There's not enough information in this issue to help you. There are no screenshots or screen recordings, and no instructions to reproduce whatever problem you're experiencing.
zobkazi
commented
1 month ago Problem Videos::
zobaidulkazi_rich_text_editro_not_fech_data.webm
// utils/jsonToHtml.ts
export function jsonToHtml(node: any): string {
if (!node || typeof node !== 'object') return '';
const { children, style = '', type = 'div', text } = node;
const styles = style ? style.replace(/;/g, '; ').trim() : '';
let html = `<${type} style="${styles}">${text || ''}`;
if (children) {
html += children.map((child: any) => jsonToHtml(child)).join('');
}
html += `</${type}>`;
return html;
}
// src/app/news/[slug]/page.tsx
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { jsonToHtml } from '@/utils/jsonToHtml'; // Adjust the import path as necessary
interface NewsItem {
title: string;
slug: string;
content: string;
}
export default function NewsDetails() {
const { slug } = useParams();
const [newsItem, setNewsItem] = useState<NewsItem | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchNewsItem() {
try {
const response = await fetch(`/api/news/${slug}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
// Fix double-escaped JSON
const fixedContent = JSON.parse(data.content.replace(/\\"/g, '"'));
data.content = fixedContent;
setNewsItem(data);
} catch (error) {
console.error('Error fetching news item:', error);
} finally {
setLoading(false);
}
}
fetchNewsItem();
}, [slug]);
if (loading) {
return <div>Loading...</div>;
}
if (!newsItem) {
return <div>News not found</div>;
}
// Convert JSON content to HTML
const contentHtml = jsonToHtml(newsItem.content);
return (
<div>
<h1>{newsItem.title}</h1>
<div
className="prose"
dangerouslySetInnerHTML={{ __html: contentHtml }}
/>
<Link href="/news">Back to news list</Link>
</div>
);
}
I have a Next.js application where I need to display styled content fetched from a database. The content is stored as a JSON string, which includes various text elements with inline styles such as colors, fonts, and backgrounds. However, the challenge is that while the title and slug of the content display correctly, the JSON content is not rendering with the intended styles. The content appears as raw text without the proper formatting.
etrepum
commented
1 month ago I don't see any Lexical code at all in the code you've pasted. It looks like you are trying to convert the JSON to HTML yourself, instead of using Lexical to generate the HTML. Your video is too long and doesn't clearly demonstrate a problem related to Lexical, it just looks like you're working on something that isn't finished.
zobkazi
commented
1 month ago Our content is in json format, from this format we want to show the data, there is no problem about lexical, since everything is coming right and all the styles and elements are saved by me, so there is no question about it?
Just fetch the data face and show me convert from json to html, that's all it can help, nothing else is needed, since I have everything fine, only I can't fetch the data!
Our data is coming like this means we are not only able to convert, RAW data is coming meanwhile can you share any resource or how to convert and show page...
etrepum
commented
1 month ago zobkazi
commented
1 month ago Thanks for sharing the resource, now I try to see if I can go ahead! If I can then I am successful, if not I will definitely take your help, thank you very much
Discussed in https://github.com/facebook/lexical/discussions/6594