Add callout block, and format inline code in markdown

newIDE/app/src/Course/TextBasedCourseChapterCalloutBlock.js

@@ -0,0 +1,69 @@
+// @flow
+
+import * as React from 'react';
+import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
+import { MarkdownText } from '../UI/MarkdownText';
+import { Trans } from '@lingui/macro';
+import ReactMarkdown from 'react-markdown';
+
+type Props = {|
+  calloutType?: 'info' | 'warning' | 'tip' | 'note',
+  title: string,
+  text: string,
+  children?: React.Node,
+|};
+
+const TextBasedCourseChapterCalloutBlock = ({
+  title,
+  text,
+  calloutType = 'info',
+  children,
+}: Props) => {
+  const gdevelopTheme = React.useContext(GDevelopThemeContext);
+
+  const isDarkMode = gdevelopTheme.palette.type === 'dark';
+  const backgroundColor = isDarkMode ? '#0f172a' : '#f3f4f6';
+  const borderColor = isDarkMode
+    ? 'rgba(255, 255, 255, 0.08)'
+    : 'rgba(15, 23, 42, 0.15)';
+
+  const getIcon = (type: string): string => {
+    switch (type) {
+      case 'info':
+        return 'ℹ️';
+      case 'warning':
+        return '⚠️';
+      case 'tip':
+        return '💡';
+      case 'note':
+        return '📝';
+      default:
+        return '📝';
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 12,
+        padding: 16,
+        borderRadius: 8,
+        border: '1px solid transparent',
+        borderColor,
+        backgroundColor,
+        alignItems: 'flex-start',
+        fontFamily: gdevelopTheme.fontFamily || 'sans-serif',
+      }}
+    >
+      <div style={{ fontSize: 24, lineHeight: 1 }}>{getIcon(calloutType)}</div>
+      <div style={{ flex: 1 }}>
+        <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{title}</div>
+
+        <MarkdownText key={title} allowParagraphs source={text} />
+      </div>
+    </div>
+  );
+};
+
+export default TextBasedCourseChapterCalloutBlock;

newIDE/app/src/Course/TextBasedCourseChapterItems.js

@@ -8,6 +8,7 @@ import type {
   TextBasedCourseChapterVideoItem as TextBasedCourseChapterVideoItemType,
   TextBasedCourseChapterCodeItem as TextBasedCourseChapterCodeItemType,
   TextBasedCourseChapterTableItem as TextBasedCourseChapterTableItemType,
+  TextBasedCourseChapterCalloutItem as TextBasedCourseChapterCalloutItemType,
 } from '../Utils/GDevelopServices/Asset';
 import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
 import { MarkdownText } from '../UI/MarkdownText';
@@ -16,6 +17,7 @@ import TextBasedCourseChapterTaskItem from './TextBasedCourseChapterTaskItem';
 import { ColumnStackLayout } from '../UI/Layout';
 import { Column, Line } from '../UI/Grid';
 import TextBasedCourseChapterCodeBlock from './TextBasedCourseChapterCodeBlock';
+import TextBasedCourseChapterCalloutBlock from './TextBasedCourseChapterCalloutBlock';
 import TextBasedCourseChapterTable from './TextBasedCourseChapterTable';
 
 const styles = {
@@ -34,13 +36,15 @@ type Props = {|
         | TextBasedCourseChapterImageItemType
         | TextBasedCourseChapterVideoItemType
         | TextBasedCourseChapterCodeItemType
+        | TextBasedCourseChapterCalloutItemType
         | TextBasedCourseChapterTableItemType
       >
     | Array<
         | TextBasedCourseChapterTextItemType
         | TextBasedCourseChapterImageItemType
         | TextBasedCourseChapterVideoItemType
         | TextBasedCourseChapterCodeItemType
+        | TextBasedCourseChapterCalloutItemType
         | TextBasedCourseChapterTableItemType
       >,
 |};
@@ -109,6 +113,16 @@ const TextBasedCourseChapterItems = ({
               />
             );
           }
+          if (item.type === 'callout') {
+            return (
+              <TextBasedCourseChapterCalloutBlock
+                key={itemIndex.toString()}
+                calloutType={'info'}
+                title={'title callout'}
+                text={item.text}
+              />
+            );
+          }
           if (item.type === 'table') {
             return (
               <TextBasedCourseChapterTable

newIDE/app/src/UI/MarkdownText.js

@@ -64,6 +64,18 @@ const makeMarkdownCustomComponents = (
   },
   // eslint-disable-next-line jsx-a11y/alt-text
   img: ({ node, ...props }) => <img style={{ display: 'flex' }} {...props} />,
+  code: ({ node, ...props }) => (
+    <code
+      style={{
+        backgroundColor: 'rgba(179, 179, 179, 0.24)',
+        border: '1px solid rgba(145, 145, 145, 0.46)',
+        padding: '2px 4px',
+        borderRadius: 4,
+        fontFamily: 'Monaco, "Courier New", monospace',
+      }}
+      {...props}
+    />
+  ),
 });
 
 type Props = {|

newIDE/app/src/Utils/GDevelopServices/Asset.js

@@ -258,6 +258,13 @@ export type TextBasedCourseChapterCodeItem = {|
   language?: string,
 |};
 
+export type TextBasedCourseChapterCalloutItem = {|
+  type: 'callout',
+  calloutType?: 'info' | 'warning' | 'tip' | 'note',
+  title: string,
+  text: string,
+|};
+
 export type TextBasedCourseChapterTableItem = {|
   type: 'table',
   header?: Array<string>,
@@ -272,6 +279,7 @@ export type TextBasedCourseChapterTaskItem = {|
     | TextBasedCourseChapterImageItem
     | TextBasedCourseChapterVideoItem
     | TextBasedCourseChapterCodeItem
+    | TextBasedCourseChapterCalloutItem
     | TextBasedCourseChapterTableItem
   >,
   answer?: {
@@ -280,6 +288,7 @@ export type TextBasedCourseChapterTaskItem = {|
       | TextBasedCourseChapterImageItem
       | TextBasedCourseChapterVideoItem
       | TextBasedCourseChapterCodeItem
+      | TextBasedCourseChapterCalloutItem
       | TextBasedCourseChapterTableItem
     >,
   },
@@ -298,6 +307,7 @@ export type UnlockedTextBasedCourseChapter = {|
     | TextBasedCourseChapterTaskItem
     | TextBasedCourseChapterVideoItem
     | TextBasedCourseChapterCodeItem
+    | TextBasedCourseChapterCalloutItem
     | TextBasedCourseChapterTableItem
   >,
 |};

newIDE/app/src/fixtures/GDevelopServicesTestData/index.js

@@ -3224,6 +3224,27 @@ export const textBasedCourseChapter: TextBasedCourseChapter = {
   shortTitle: 'Introduction',
 };
 
+export const textBasedCourseChapterWithCallout: TextBasedCourseChapter = {
+  title: 'test',
+  templates: [],
+  items: [
+    {
+      type: 'text',
+      text:
+        "Let's explore how JavaScript events can control objects in your game.",
+    },
+    {
+      type: 'callout',
+      calloutType: 'info',
+      title: 'title callout',
+      text:
+        '3 Ceci est un encaddré **informatif**. Il utilise les couleurs `blue` par défaut. Il est parfait pour fournir des détails supplémentaires ou des précisions techniques. Les blocs de `code` sont également bien formatés.',
+    },
+  ],
+  id: 'callout javascript',
+  shortTitle: 'callout javascript',
+};
+
 export const textBasedCourseChapterWithCode: TextBasedCourseChapter = {
   title: 'Scripting Basics',
   templates: [],
@@ -3270,11 +3291,19 @@ export const textBasedCourseChapterWithTables: TextBasedCourseChapter = {
       type: 'table',
       header: ['Stat', 'Enemy', 'Player'],
       rows: [
+        ['>', '>=', 'right bugged'],
+        ['\\>', '\\>=', 'right escaped'],
+        ['<', '<=', 'left ok'],
+        ['\\<', '\\<=', 'left escaped'],
+        ['`code1`', '``code2``', '```code3```'],
         ['Health', '120', '100'],
-        ['Damage', '12', '18'],
         ['Move speed', '160 px/s', '200 px/s'],
       ],
     },
+    {
+      type: 'text',
+      text: ' `window`,  ``console.log("hello");``, ```const test = 1;``` ',
+    },
     {
       type: 'text',
       text:

newIDE/app/src/stories/componentStories/Course/TextBasedCourseChapterCalloutBlock.stories.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import TextBasedCourseChapterCallout from '../../../Course/TextBasedCourseChapterCalloutBlock';
+import paperDecorator from '../../PaperDecorator';
+
+export default {
+  title: 'Course/TextBasedCourseChapterCallout',
+  component: TextBasedCourseChapterCallout,
+  decorators: [paperDecorator],
+};
+
+export const Info = () => (
+  <TextBasedCourseChapterCallout
+    calloutType="info"
+    title="Information"
+    text={
+      'Test 2: Ceci est un encadré **informatif**. Il utilise les couleurs `blue` par défaut. Il est parfait pour fournir des détails supplémentaires ou des précisions techniques. Les blocs de `code` sont également bien formatés.'
+    }
+  />
+);

newIDE/app/src/stories/componentStories/Course/TextBasedCourseChapterView.stories.js

@@ -9,6 +9,7 @@ import {
   textBasedCourseChapter,
   textBasedCourseChapterWithCode,
   textBasedCourseChapterWithTables,
+  textBasedCourseChapterWithCallout,
 } from '../../../fixtures/GDevelopServicesTestData';
 
 export default {
@@ -61,3 +62,18 @@ export const Chapter3 = () => {
     />
   );
 };
+
+export const Chapter4 = () => {
+  return (
+    <TextBasedCourseChapterView
+      course={premiumCourse}
+      courseChapter={textBasedCourseChapterWithCallout}
+      onOpenTemplate={action('open template')}
+      onCompleteTask={action('onCompleteTask')}
+      isTaskCompleted={action('isTaskCompleted')}
+      getChapterCompletion={action('getChapterCompletion')}
+      chapterIndex={3}
+      onClickUnlock={() => action('onClickUnlock')()}
+    />
+  );
+};