update code blocs

apps/web/src/components/ui/report/AppReport.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { AppReport } from './AppReport';
-import type { Value } from 'platejs';
 import { ReportElement } from '@buster/server-shared/reports';
 
 const meta = {
@@ -77,8 +76,34 @@ const sampleValue = [
   {
     type: 'code_block',
     lang: 'javascript',
-    children: [{ text: 'const greeting = "Hello, World!";\nconsole.log(greeting);' }]
+    children: [
+      {
+        type: 'code_line',
+        children: [{ text: 'const greeting = "Hello, World!";' }]
+      },
+      {
+        type: 'code_line',
+        children: [{ text: 'console.log(greeting);' }]
+      },
+      {
+        type: 'code_line',
+        children: [{ text: '}' }]
+      }
+    ]
   },
+  {
+    children: [
+      { children: [{ text: 'function hello() {' }], type: 'code_line' },
+      {
+        children: [{ text: "  console.info('Code blocks are supported!');" }],
+        type: 'code_line'
+      },
+      { children: [{ text: '}' }], type: 'code_line' }
+    ],
+    lang: 'javascript',
+    type: 'code_block'
+  },
+
   {
     type: 'h1',
     children: [{ text: 'Hello' }]

apps/web/src/components/ui/report/elements/BlockDraggable.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
 import { BlockSelectionPlugin } from '@platejs/selection/react';
 import { GripDotsVertical } from '@/components/ui/icons';
-import { getContainerTypes, getPluginByType, isType, KEYS, type TElement } from 'platejs';
+import { getPluginByType, isType, KEYS, type TElement } from 'platejs';
 import {
   type PlateEditor,
   type PlateElementProps,

apps/web/src/components/ui/report/elements/CodeBlockNode.tsx

@@ -9,10 +9,10 @@ import {
   type PlateElementProps,
   type PlateLeafProps,
   PlateElement,
-  PlateLeaf,
-  useSelected
+  PlateLeaf
 } from 'platejs/react';
 import { useEditorRef, useElement, useReadOnly } from 'platejs/react';
+
 import { Button } from '@/components/ui/buttons';
 import {
   Command,
@@ -33,11 +33,9 @@ export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
 
   return (
     <PlateElement
-      className={cn(
-        'py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] **:[.hljs-built_in,.hljs-symbol]:text-[#e36209] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_]:text-[#d73a49] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_]:text-[#6f42c1]'
-      )}
+      className="py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
       {...props}>
-      <div className={cn('bg-muted/50 relative rounded-md transition-all duration-100')}>
+      <div className="bg-muted/50 relative rounded-md">
         <pre className="overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
           <code>{props.children}</code>
         </pre>

packages/server-shared/src/reports/report-elements.ts

@@ -46,10 +46,17 @@ export const BlockquoteElement = z
   })
   .merge(AttributesSchema);
 
+const CodeLineElement = z.object({
+  type: z.literal('code_line'),
+  children: z.array(SimpleTextSchema),
+});
+
 export const CodeBlockElement = z.object({
   type: z.literal('code_block'),
-  lang: z.enum(['sql', 'yaml', 'javascript', 'typescript', 'python', 'bash', 'json']),
-  children: z.array(SimpleTextSchema),
+  lang: z
+    .enum(['sql', 'yaml', 'javascript', 'typescript', 'python', 'bash', 'json'])
+    .default('sql'),
+  children: z.array(CodeLineElement),
 });
 
 export const CalloutElement = z