Add callout block, and format inline code in markdown

newIDE/app/src/Course/TextBasedCourseChapterCalloutBlock.js

@@ -0,0 +1,20 @@
+// @flow
+
+import * as React from 'react';
+import { MarkdownText } from '../UI/MarkdownText';
+import AlertMessage from '../UI/AlertMessage';
+
+type Props = {|
+  kind: 'info' | 'warning' | 'error' | 'valid',
+  text: string,
+|};
+
+const TextBasedCourseChapterCalloutBlock = ({ text, kind }: Props) => {
+  return (
+    <AlertMessage kind={kind}>
+      <MarkdownText allowParagraphs source={text} />
+    </AlertMessage>
+  );
+};
+
+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,15 @@ const TextBasedCourseChapterItems = ({
               />
             );
           }
+          if (item.type === 'callout') {
+            return (
+              <TextBasedCourseChapterCalloutBlock
+                key={itemIndex.toString()}
+                kind={item.kind}
+                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

@@ -255,6 +255,12 @@ export type TextBasedCourseChapterCodeItem = {|
   language?: string,
 |};
 
+export type TextBasedCourseChapterCalloutItem = {|
+  type: 'callout',
+  kind: 'info' | 'warning' | 'error' | 'valid',
+  text: string,
+|};
+
 export type TextBasedCourseChapterTableItem = {|
   type: 'table',
   header?: Array<string>,
@@ -269,6 +275,7 @@ export type TextBasedCourseChapterTaskItem = {|
     | TextBasedCourseChapterImageItem
     | TextBasedCourseChapterVideoItem
     | TextBasedCourseChapterCodeItem
+    | TextBasedCourseChapterCalloutItem
     | TextBasedCourseChapterTableItem
   >,
   answer?: {
@@ -277,6 +284,7 @@ export type TextBasedCourseChapterTaskItem = {|
       | TextBasedCourseChapterImageItem
       | TextBasedCourseChapterVideoItem
       | TextBasedCourseChapterCodeItem
+      | TextBasedCourseChapterCalloutItem
       | TextBasedCourseChapterTableItem
     >,
   },
@@ -295,6 +303,7 @@ export type UnlockedTextBasedCourseChapter = {|
     | TextBasedCourseChapterTaskItem
     | TextBasedCourseChapterVideoItem
     | TextBasedCourseChapterCodeItem
+    | TextBasedCourseChapterCalloutItem
     | TextBasedCourseChapterTableItem
   >,
 |};

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

@@ -3458,6 +3458,26 @@ 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',
+      kind: 'info',
+      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: [],
@@ -3504,11 +3524,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,19 @@
+// @flow
+import * as React from 'react';
+import TextBasedCourseChapterCalloutBlock from '../../../Course/TextBasedCourseChapterCalloutBlock';
+import paperDecorator from '../../PaperDecorator';
+
+export default {
+  title: 'Course/TextBasedCourseChapterCalloutBlock',
+  component: TextBasedCourseChapterCalloutBlock,
+  decorators: [paperDecorator],
+};
+
+export const Info = () => (
+  <TextBasedCourseChapterCalloutBlock
+    kind="info"
+    text={`**Notice**
+
+You might have seen the \`break\` keyword. Its job is simple: it stops the switch from running any more code. When JavaScript hits a \`break\`, it leaves the switch block immediately, so nothing after that case will run. One nice thing to know: for the last case that is often the default case, you don't need a \`break\`, the switch ends automatically there.`}
+  />
+);

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')()}
+    />
+  );
+};