Update property i18n and tooltips

update title and description to allow any html

Author: snowe2010

client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx

@@ -46,10 +46,18 @@ let TourBasicComp = (function() {
       }
 
       return {
-        title: step.title,
-        description: step.description,
+        /**
+         * I'm pretty sure it's safe to use dangerouslySetInnerHTML here as any creator of an app
+         * will have unrestricted access to the data of any user anyway. E.g. have a button that 
+         * just sends the current cookies wherever, thus the developer of the app must be trusted 
+         * in all cases
+         * This even applies to things like <b onmouseover="alert('mouseover');">, because the
+         * app creator might desire functionality like this. 
+         */
+        title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />),
+        description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />),
         target: target?.current,
-        arrow: step.arrow || true,
+        arrow: step.arrow,
         placement: step.placement as PlacementType,
         mask: step.mask,
         cover: step.cover ? (<img src={step.cover} />) : undefined,

client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx

@@ -2,9 +2,8 @@ import { RecordConstructorToComp } from "lowcoder-core";
 import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
 import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
-import { ControlNode, Section, sectionNames } from "lowcoder-design";
+import { Section, sectionNames } from "lowcoder-design";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
-import { useContext } from "react";
 import { stateComp } from "../../generators";
 import { RefControl } from "comps/controls/refControl";
 import { BaseSelectRef } from "rc-select";

client/packages/lowcoder/src/comps/comps/tourComp/tourTooltips.tsx

@@ -4,7 +4,7 @@ const indicatorsRenderExample = `(current, total) => (
   <span>
     {current + 1} / {total}
   </span>
-)`
+)`;
 export const IndicatorsRenderTooltip = (
   <div>
     {trans("tour.indicatorsRender.tooltip")}
@@ -98,4 +98,15 @@ export const TourPlacementTooltip = (
   </div>
 );
 
+const arrowTooltipSignature = `boolean | { pointAtCenter: boolean }`;
+export const TourStepArrowTooltip = (
+  <div>
+    {trans("tour.options.arrow.tooltip")}:
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>{arrowTooltipSignature}</code>
+  </div>
+);
+
 export {};

client/packages/lowcoder/src/comps/controls/tourStepControl.tsx

@@ -1,4 +1,4 @@
-import { BoolCodeControl, MaskControl, StringControl } from "comps/controls/codeControl";
+import { ArrowControl, BoolCodeControl, MaskControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { list } from "comps/generators/list";
@@ -23,7 +23,11 @@ import { BoolControl, ControlParams } from "lowcoder-sdk";
 import { ReactNode, useContext, useEffect, useState } from "react";
 import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
 import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
-import { TourPlacementTooltip, TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
+import {
+  TourPlacementTooltip,
+  TourStepArrowTooltip,
+  TourStepMaskTooltip
+} from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
 
 const OptionTypes = [
   {
@@ -379,7 +383,7 @@ let TourStep = new MultiCompBuilder(
           value: it.children.name.getView()
         })),
       ""),
-    arrow: BoolControl,
+    arrow: ArrowControl,
     title: StringControl,
     description: StringControl,
     placement: dropdownControl(PlacementOptions, "bottom"),
@@ -396,15 +400,18 @@ TourStep = class extends TourStep implements TourStepCompProperty {
     return (
       <>
         {this.children.title.propertyView({
-          label: "Title",
-          placeholder: "Welcome",
+          label: trans("tour.options.title.label"),
+          placeholder: trans("tour.options.title.placeholder"),
+          tooltip: trans("tour.options.title.tooltip"),
         })}
         {this.children.description.propertyView({
-          label: "Description",
-          placeholder: "Welcome to lowcoder, this is your first tutorial step",
+          label: trans("tour.options.description.label"),
+          placeholder: trans("tour.options.description.placeholder"),
+          tooltip: trans("tour.options.description.tooltip"),
         })}
         {this.children.target.propertyView({
-          label: "Component",
+          label: trans("tour.options.target.label"),
+          tooltip: trans("tour.options.target.tooltip"),
           radioButton: false,
         })}
         {this.children.placement.propertyView({
@@ -413,19 +420,22 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           radioButton: false
         })}
         {this.children.arrow.propertyView({
-          label: "Arrow",
+          label: trans("tour.options.arrow.label"),
+          tooltip: TourStepArrowTooltip,
         })}
-        {hiddenPropertyView(this.children)}
         {this.children.cover.propertyView({
-          label: "Cover Image Url"
+          label: trans("tour.options.coverImage.label"),
+          tooltip: trans("tour.options.coverImage.tooltip"),
         })}
         {this.children.mask.propertyView({
           label: trans("tour.options.mask.label"),
           tooltip: TourStepMaskTooltip,
         })}
         {this.children.type.propertyView({
-          label: "Type",
+          label: trans("tour.options.type.label"),
+          tooltip: trans("tour.options.type.tooltip")
         })}
+        {hiddenPropertyView(this.children)}
       </>
     );
   }

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2825,32 +2825,59 @@ export const en = {
     "navItemStyle": "Menu Item Style"
   },
 
-  "tour": { 
+  tour: { 
     tooltipExampleHeader: "Example:",
     tooltipSignatureHeader: "Signature:",
-    "options": {
-      "mask": {
-        "label": "Mask",
-        "tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
-        "tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
+    options: {
+      title: {
+        label: "Title",
+        placeholder: "Welcome",
+        tooltip: "The title of the step. Any HTML is valid here.",
+      },
+      description: {
+        label: "Description",
+        placeholder: "Welcome to lowcoder!",
+        tooltip: "The description of the step. Any HTML is valid here.",
+      },
+      mask: {
+        label: "Mask",
+        tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
+        tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
+      },
+      arrow: {
+        label: "Arrow",
+        tooltip: "Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component.",
+        tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }",
+      },
+      type: {
+        label: "Type",
+        tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section."
+      },
+      target: {
+        label: "Component",
+        tooltip: "The component you want to put the tooltip on, or leave it empty if you simply want a modal in the middle of the screen."
+      },
+      coverImage: {
+        label: "Cover Image URI",
+        tooltip: "A URI for an image you would like to display with the step",
       }
     },
-    "indicatorsRender": {
-      "label": "Indicators Render",
-      "tooltip": "Provides a custom indicator for which step you are on",
-      "tooltipValidTypes": "Format is a function that accepts two args, `current` and `total` and returns a ReactNode",
-      "tooltipFunctionSignatureHeader": "Signature:",
-      "tooltipFunctionSignature": "(current: number, total: number) => ReactNode",
-      "tooltipExampleHeader": "Example:",
+    indicatorsRender: {
+      label: "Indicators Render",
+      tooltip: "Provides a custom indicator for which step you are on",
+      tooltipValidTypes: "Format is a function that accepts two args, `current` and `total` and returns a ReactNode",
+      tooltipFunctionSignatureHeader: "Signature:",
+      tooltipFunctionSignature: "(current: number, total: number) => ReactNode",
+      tooltipExampleHeader: "Example:",
     },
-    "disabledInteraction": {
-      "label": "Disable Interaction",
-      "tooltip": "Disable interaction in the highlighted area."
+    disabledInteraction: {
+      label: "Disable Interaction",
+      tooltip: "Disable interaction in the highlighted area."
     },
-    "mask": {
-      "label": "Mask",
-      "tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
-      "tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
+    mask: {
+      label: "Mask",
+      tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
+      tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
     },
     placement: {
       label: "Placement",

client/packages/lowcoder/src/util/convertUtils.ts

@@ -259,3 +259,17 @@ export function toBooleanOrCss(value: any): boolean | undefined | {
   }
   return toJSONObject(JSON.parse(value));
 }
+
+export function toBooleanOrJsonObject(value: any): boolean | undefined | { pointAtCenter: boolean } {
+  if (value === undefined || value === null || value === "") {
+    return undefined;
+  }
+  if (value.toLocaleLowerCase() === "true" || value.toLocaleLowerCase() === "false") {
+    return value.toLocaleLowerCase() === "true";
+  }
+  const json = toJSONObject(JSON.parse(value));
+  if (json.pointAtCenter) {
+    return json as { pointAtCenter: boolean };
+  }
+  throw new TypeError(typeErrorMsg("Object or Boolean", value));
+}