Rich Text Editor Fixes

pages/admin/index.js

@@ -306,7 +306,7 @@ export default function AdminPanel() {
                       id={`content-${index}`}
                       value={content.value}
                       onChange={(e) => handleContentChange(index, e.target.value)}
-                      className="w-full p-3 border rounded-lg font-mono text-sm"
+                      className="w-full p-3 border rounded-lg font-mono text-sm whitespace-pre-wrap"
                       rows={content.type === 'text' ? "8" : "3"}
                       placeholder={content.type === 'text' ? 'Hier können Sie **Markdown** verwenden...' : 'Bild-URL eingeben...'}
                     />
@@ -316,7 +316,33 @@ export default function AdminPanel() {
                     <div className="border rounded-lg p-3 bg-gray-50">
                       <div className="text-xs font-medium text-gray-600 mb-2">Vorschau:</div>
                       <div className="prose prose-sm max-w-none">
-                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        <ReactMarkdown 
+                          remarkPlugins={[remarkGfm]}
+                          className="whitespace-pre-wrap"
+                          components={{
+                            p: ({children}) => <p className="mb-4 whitespace-pre-wrap">{children}</p>,
+                            code: ({node, inline, className, children, ...props}) => {
+                              const match = /language-(\w+)/.exec(className || '');
+                              return !inline ? (
+                                <pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">
+                                  <code
+                                    className={`${className} bg-gray-100 block`}
+                                    {...props}
+                                  >
+                                    {children}
+                                  </code>
+                                </pre>
+                              ) : (
+                                <code
+                                  className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800"
+                                  {...props}
+                                >
+                                  {children}
+                                </code>
+                              );
+                            }
+                          }}
+                        >
                           {content.value || '*Keine Inhalte zum Anzeigen*'}
                         </ReactMarkdown>
                       </div>

pages/blog/[slug].js

@@ -51,7 +51,7 @@ export default function BlogPost({ blog }) {
                         h1: ({children}) => <h1 className="text-3xl font-bold mb-4 text-gray-900">{children}</h1>,
                         h2: ({children}) => <h2 className="text-2xl font-bold mb-3 text-gray-900">{children}</h2>,
                         h3: ({children}) => <h3 className="text-xl font-bold mb-2 text-gray-900">{children}</h3>,
-                        p: ({children}) => <p className="mb-4 sm:mb-6">{children}</p>,
+                        p: ({children}) => <p className="mb-4 sm:mb-6 whitespace-pre-wrap">{children}</p>,
                         strong: ({children}) => <strong className="font-bold text-gray-900">{children}</strong>,
                         em: ({children}) => <em className="italic">{children}</em>,
                         ul: ({children}) => <ul className="list-disc list-inside mb-4 space-y-2">{children}</ul>,
@@ -59,8 +59,26 @@ export default function BlogPost({ blog }) {
                         li: ({children}) => <li className="ml-4">{children}</li>,
                         a: ({href, children}) => <a href={href} className="text-pb-turquoise hover:underline">{children}</a>,
                         blockquote: ({children}) => <blockquote className="border-l-4 border-pb-turquoise pl-4 italic my-4">{children}</blockquote>,
-                        code: ({children}) => <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono">{children}</code>,
+                        code: ({node, inline, className, children, ...props}) => {
-                        pre: ({children}) => <pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">{children}</pre>
+                          const match = /language-(\w+)/.exec(className || '');
+                          return !inline ? (
+                            <pre className="bg-gray-100 p-4 rounded overflow-x-auto mb-4">
+                              <code
+                                className={`${className} bg-gray-100 block`}
+                                {...props}
+                              >
+                                {children}
+                              </code>
+                            </pre>
+                          ) : (
+                            <code
+                              className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800"
+                              {...props}
+                            >
+                              {children}
+                            </code>
+                          );
+                        }
                       }}
                     >
                       {item}
@@ -73,7 +91,7 @@ export default function BlogPost({ blog }) {
                 <div key={index} className="prose prose-lg max-w-none">
                   <ReactMarkdown 
                     remarkPlugins={[remarkGfm]}
-                    className="text-gray-700 text-base sm:text-lg leading-relaxed px-2 sm:px-0"
+                    className="text-gray-700 text-base sm:text-lg leading-relaxed px-2 sm:px-0 whitespace-pre-wrap"
                     components={{
                       h1: ({children}) => <h1 className="text-3xl font-bold mb-4 text-gray-900">{children}</h1>,
                       h2: ({children}) => <h2 className="text-2xl font-bold mb-3 text-gray-900">{children}</h2>,