add text property: code (#764) (#1021)

* add text property: code (#764)
code property values are text, raw, markdown
- remove body scrollbar (taipy #420)

* fab's comments

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

gui/package.json

@@ -19,8 +19,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.3",
-    "react-helmet-async": "^1.1.2",
+    "react-helmet-async": "^2.0.1",
     "react-jsx-parser": "^1.28.4",
+    "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.5.1",
     "react-router-dom": "^6.0.1",
     "react-virtualized-auto-sizer": "^1.0.6",

gui/public/stylekit/base/base.css

@@ -13,7 +13,7 @@
 
 html,
 body {
-    height: 100%;
+    min-height: 100%;
 }
 
 #root {

gui/src/components/Taipy/Field.tsx

@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useMemo } from "react";
+import React, { lazy, useMemo } from "react";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 
@@ -25,9 +25,12 @@ interface TaipyFieldProps extends TaipyBaseProps, TaipyHoverProps {
     defaultValue?: string;
     format?: string;
     raw?: boolean;
+    mode?: string;
 }
 
-const unsetWeightSx = {fontWeight: "unset"};
+const unsetWeightSx = { fontWeight: "unset" };
+
+const Markdown = lazy(() => import("react-markdown"));
 
 const Field = (props: TaipyFieldProps) => {
     const { id, dataType, format, defaultValue, raw } = props;
@@ -36,6 +39,8 @@ const Field = (props: TaipyFieldProps) => {
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
 
+    const mode = typeof props.mode === "string" ? props.mode.toLowerCase() : undefined;
+
     const value = useMemo(() => {
         return formatWSValue(
             props.value !== undefined ? props.value : defaultValue || "",
@@ -47,7 +52,13 @@ const Field = (props: TaipyFieldProps) => {
 
     return (
         <Tooltip title={hover || ""}>
-            {raw ? (
+            {mode == "pre" ? (
+                <pre className={className} id={id}>
+                    {value}
+                </pre>
+            ) : mode == "markdown" || mode == "md" ? (
+                <Markdown className={className}>{value}</Markdown>
+            ) : raw || mode == "raw" ? (
                 <span className={className} id={id}>
                     {value}
                 </span>

src/taipy/gui/_renderers/factory.py

@@ -492,7 +492,13 @@ class _Factory:
         .set_value_and_default(with_update=False)
         ._set_dataType()
         .set_attributes(
-            [("format",), ("id",), ("hover_text", PropertyType.dynamic_string), ("raw", PropertyType.boolean, False)]
+            [
+                ("format",),
+                ("id",),
+                ("hover_text", PropertyType.dynamic_string),
+                ("raw", PropertyType.boolean, False),
+                ("mode", PropertyType.string),
+            ]
         ),
         "toggle": lambda gui, control_type, attrs: _Builder(
             gui=gui, control_type=control_type, element_name="Toggle", attributes=attrs, default_value=None

src/taipy/gui/viselements.json

@@ -20,6 +20,11 @@
             "default_value": "False",
             "doc": "If set to True, the component renders as an HTML <span> element without any default style."
           },
+          {
+            "name": "mode",
+            "type": "str",
+            "doc": "Define the way the text is processed:<ul><li>&quote;raw&quote;: synonym for setting the *raw* property to True</li><li>&quote;pre&quote;: keeps spaces and new lines</li><li>&quote;markdown&quote; or &quote;md&quote;: basic support for Markdown."
+          },
           {
             "name": "format",
             "type": "str",