[DRAFT 1346] Add richtext in view-based forms and form description ed…

…itors

Bug: #1346
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx

@@ -25,6 +25,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import LabelOutlinedIcon from '@material-ui/icons/LabelOutlined';
 import LinkIcon from '@material-ui/icons/Link';
+import NotesIcon from '@material-ui/icons/Notes';
 import PieChartIcon from '@material-ui/icons/PieChart';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 import TextFieldsIcon from '@material-ui/icons/TextFields';
@@ -322,6 +323,17 @@ export const FormDescriptionEditorRepresentation = ({
               Textarea
             </Typography>
           </div>
+          <div
+            id="RichText"
+            data-testid="FormDescriptionEditor-RichText"
+            draggable="true"
+            className={classes.widgetKind}
+            onDragStart={handleDragStart}>
+            <NotesIcon />
+            <Typography variant="caption" gutterBottom>
+              Rich Text
+            </Typography>
+          </div>{' '}
           <div
             id="Checkbox"
             data-testid="FormDescriptionEditor-Checkbox"

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts

@@ -23,4 +23,5 @@ export type Kind =
   | 'List'
   | 'BarChart'
   | 'PieChart'
-  | 'FlexboxContainer';
+  | 'FlexboxContainer'
+  | 'RichText';

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx

@@ -0,0 +1,61 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import { useEffect, useRef, useState } from 'react';
+import { WidgetProps } from './WidgetEntry.types';
+
+const useStyles = makeStyles((theme) => ({
+  selected: {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export const RichTextWidget = ({ widget, selection }: WidgetProps) => {
+  const classes = useStyles();
+
+  const [selected, setSelected] = useState<boolean>(false);
+
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && selection.entries.find((entry) => entry.id === widget.id)) {
+      ref.current.focus();
+      setSelected(true);
+    } else {
+      setSelected(false);
+    }
+  }, [selection, widget]);
+
+  return (
+    <div>
+      <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+        {widget.label}
+      </Typography>
+      <TextField
+        data-testid={widget.label}
+        multiline
+        minRows={3}
+        fullWidth
+        inputRef={ref}
+        onFocus={() => setSelected(true)}
+        onBlur={() => setSelected(false)}
+        InputProps={{
+          readOnly: true,
+        }}
+        value="Rich text in mardown format"
+      />
+    </div>
+  );
+};

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx

@@ -46,6 +46,7 @@ import { ListWidget } from './ListWidget';
 import { MultiSelectWidget } from './MultiSelectWidget';
 import { PieChartWidget } from './PieChartWidget';
 import { RadioWidget } from './RadioWidget';
+import { RichTextWidget } from './RichTextWidget';
 import { SelectWidget } from './SelectWidget';
 import { TextAreaWidget } from './TextAreaWidget';
 import { TextfieldWidget } from './TextfieldWidget';
@@ -268,6 +269,16 @@ export const WidgetEntry = ({
         onDropBefore={onDropBefore}
       />
     );
+  } else if (widget.kind === 'RichText') {
+    widgetElement = (
+      <RichTextWidget
+        data-testid={widget.id}
+        widget={widget}
+        selection={selection}
+        setSelection={setSelection}
+        onDropBefore={onDropBefore}
+      />
+    );
   } else if (widget.kind === 'Checkbox') {
     widgetElement = (
       <CheckboxWidget

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx

@@ -26,6 +26,7 @@ export const isKind = (value: string): value is Kind => {
     value === 'List' ||
     value === 'BarChart' ||
     value === 'PieChart' ||
-    value === 'FlexboxContainer'
+    value === 'FlexboxContainer' ||
+    value === 'RichText'
   );
 };

packages/view/backend/sirius-components-view-edit/plugin.properties

@@ -0,0 +1,267 @@
+# Copyright (c) 2021, 2022 Obeo.
+# This program and the accompanying materials
+# are made available under the terms of the Eclipse Public License v2.0
+# which accompanies this distribution, and is available at
+# https://www.eclipse.org/legal/epl-2.0/
+# 
+# SPDX-License-Identifier: EPL-2.0
+# 
+# Contributors:
+#      Obeo - initial API and implementation
+
+pluginName = View Edit Support
+providerName = www.example.org
+
+_UI_CreateChild_text = {0}
+_UI_CreateChild_text2 = {1} {0}
+_UI_CreateChild_text3 = {1}
+_UI_CreateChild_tooltip = Create New {0} Under {1} Feature
+_UI_CreateChild_description = Create a new child of type {0} for the {1} feature of the selected {2}.
+_UI_CreateSibling_description = Create a new sibling of type {0} for the selected {2}, under the {1} feature of their parent.
+
+_UI_PropertyDescriptor_description = The {0} of the {1}
+
+_UI_View_type = View
+_UI_RepresentationDescription_type = Representation Description
+_UI_DiagramDescription_type = Diagram Description
+_UI_DiagramElementDescription_type = Diagram Element Description
+_UI_NodeDescription_type = Node Description
+_UI_EdgeDescription_type = Edge Description
+_UI_LabelStyle_type = Label Style
+_UI_BorderStyle_type = Border Style
+_UI_Style_type = Style
+_UI_NodeStyle_type = Node Style
+_UI_EdgeStyle_type = Edge Style
+_UI_Tool_type = Tool
+_UI_LabelEditTool_type = Label Edit Tool
+_UI_DeleteTool_type = Delete Tool
+_UI_NodeTool_type = Node Tool
+_UI_EdgeTool_type = Edge Tool
+_UI_DropTool_type = Drop Tool
+_UI_Operation_type = Operation
+_UI_ChangeContext_type = Change Context
+_UI_CreateInstance_type = Create Instance
+_UI_SetValue_type = Set Value
+_UI_UnsetValue_type = Unset Value
+_UI_DeleteElement_type = Delete Element
+_UI_CreateView_type = Create View
+_UI_DeleteView_type = Delete View
+_UI_Conditional_type = Conditional
+_UI_ConditionalNodeStyle_type = Conditional Node Style
+_UI_ConditionalEdgeStyle_type = Conditional Edge Style
+_UI_FormDescription_type = Form Description
+_UI_WidgetDescription_type = Widget Description
+_UI_TextfieldDescription_type = Textfield Description
+_UI_CheckboxDescription_type = Checkbox Description
+_UI_SelectDescription_type = Select Description
+_UI_MultiSelectDescription_type = Multi Select Description
+_UI_TextAreaDescription_type = Text Area Description
+_UI_RichTextDescription_type = Rich Text Description
+_UI_RadioDescription_type = Radio Description
+_UI_BarChartDescription_type = Bar Chart Description
+_UI_PieChartDescription_type = Pie Chart Description
+_UI_FlexboxContainerDescription_type = Flexbox Container Description
+_UI_ButtonDescription_type = Button Description
+_UI_WidgetDescriptionStyle_type = Widget Description Style
+_UI_TextfieldDescriptionStyle_type = Textfield Description Style
+_UI_ConditionalTextfieldDescriptionStyle_type = Conditional Textfield Description Style
+_UI_CheckboxDescriptionStyle_type = Checkbox Description Style
+_UI_ConditionalCheckboxDescriptionStyle_type = Conditional Checkbox Description Style
+_UI_SelectDescriptionStyle_type = Select Description Style
+_UI_ConditionalSelectDescriptionStyle_type = Conditional Select Description Style
+_UI_MultiSelectDescriptionStyle_type = Multi Select Description Style
+_UI_ConditionalMultiSelectDescriptionStyle_type = Conditional Multi Select Description Style
+_UI_TextareaDescriptionStyle_type = Textarea Description Style
+_UI_ConditionalTextareaDescriptionStyle_type = Conditional Textarea Description Style
+_UI_RadioDescriptionStyle_type = Radio Description Style
+_UI_ConditionalRadioDescriptionStyle_type = Conditional Radio Description Style
+_UI_ButtonDescriptionStyle_type = Button Description Style
+_UI_ConditionalButtonDescriptionStyle_type = Conditional Button Description Style
+_UI_BarChartDescriptionStyle_type = Bar Chart Description Style
+_UI_ConditionalBarChartDescriptionStyle_type = Conditional Bar Chart Description Style
+_UI_PieChartDescriptionStyle_type = Pie Chart Description Style
+_UI_ConditionalPieChartDescriptionStyle_type = Conditional Pie Chart Description Style
+_UI_LabelDescription_type = Label Description
+_UI_LabelDescriptionStyle_type = Label Description Style
+_UI_ConditionalLabelDescriptionStyle_type = Conditional Label Description Style
+_UI_LinkDescription_type = Link Description
+_UI_LinkDescriptionStyle_type = Link Description Style
+_UI_ConditionalLinkDescriptionStyle_type = Conditional Link Description Style
+_UI_ListDescription_type = List Description
+_UI_ListDescriptionStyle_type = List Description Style
+_UI_ConditionalListDescriptionStyle_type = Conditional List Description Style
+_UI_Unknown_type = Object
+
+_UI_Unknown_datatype= Value
+
+_UI_View_descriptions_feature = Descriptions
+_UI_RepresentationDescription_name_feature = Name
+_UI_RepresentationDescription_domainType_feature = Domain Type
+_UI_RepresentationDescription_preconditionExpression_feature = Precondition Expression
+_UI_RepresentationDescription_titleExpression_feature = Title Expression
+_UI_DiagramDescription_autoLayout_feature = Auto Layout
+_UI_DiagramDescription_nodeDescriptions_feature = Node Descriptions
+_UI_DiagramDescription_edgeDescriptions_feature = Edge Descriptions
+_UI_DiagramDescription_onDrop_feature = On Drop
+_UI_DiagramElementDescription_name_feature = Name
+_UI_DiagramElementDescription_domainType_feature = Domain Type
+_UI_DiagramElementDescription_semanticCandidatesExpression_feature = Semantic Candidates Expression
+_UI_DiagramElementDescription_labelExpression_feature = Label Expression
+_UI_DiagramElementDescription_deleteTool_feature = Delete Tool
+_UI_DiagramElementDescription_labelEditTool_feature = Label Edit Tool
+_UI_DiagramElementDescription_synchronizationPolicy_feature = Synchronization Policy
+_UI_NodeDescription_childrenDescriptions_feature = Children Descriptions
+_UI_NodeDescription_borderNodesDescriptions_feature = Border Nodes Descriptions
+_UI_NodeDescription_style_feature = Style
+_UI_NodeDescription_nodeTools_feature = Node Tools
+_UI_NodeDescription_conditionalStyles_feature = Conditional Styles
+_UI_EdgeDescription_beginLabelExpression_feature = Begin Label Expression
+_UI_EdgeDescription_endLabelExpression_feature = End Label Expression
+_UI_EdgeDescription_isDomainBasedEdge_feature = Is Domain Based Edge
+_UI_EdgeDescription_sourceNodeDescriptions_feature = Source Node Descriptions
+_UI_EdgeDescription_targetNodeDescriptions_feature = Target Node Descriptions
+_UI_EdgeDescription_sourceNodesExpression_feature = Source Nodes Expression
+_UI_EdgeDescription_targetNodesExpression_feature = Target Nodes Expression
+_UI_EdgeDescription_style_feature = Style
+_UI_EdgeDescription_edgeTools_feature = Edge Tools
+_UI_EdgeDescription_conditionalStyles_feature = Conditional Styles
+_UI_LabelStyle_fontSize_feature = Font Size
+_UI_LabelStyle_italic_feature = Italic
+_UI_LabelStyle_bold_feature = Bold
+_UI_LabelStyle_underline_feature = Underline
+_UI_LabelStyle_strikeThrough_feature = Strike Through
+_UI_BorderStyle_borderColor_feature = Border Color
+_UI_BorderStyle_borderRadius_feature = Border Radius
+_UI_BorderStyle_borderSize_feature = Border Size
+_UI_BorderStyle_borderLineStyle_feature = Border Line Style
+_UI_Style_color_feature = Color
+_UI_NodeStyle_listMode_feature = List Mode
+_UI_NodeStyle_shape_feature = Shape
+_UI_NodeStyle_labelColor_feature = Label Color
+_UI_NodeStyle_sizeComputationExpression_feature = Size Computation Expression
+_UI_EdgeStyle_lineStyle_feature = Line Style
+_UI_EdgeStyle_sourceArrowStyle_feature = Source Arrow Style
+_UI_EdgeStyle_targetArrowStyle_feature = Target Arrow Style
+_UI_EdgeStyle_edgeWidth_feature = Edge Width
+_UI_Tool_name_feature = Name
+_UI_Tool_body_feature = Body
+_UI_Operation_children_feature = Children
+_UI_ChangeContext_expression_feature = Expression
+_UI_CreateInstance_typeName_feature = Type Name
+_UI_CreateInstance_referenceName_feature = Reference Name
+_UI_CreateInstance_variableName_feature = Variable Name
+_UI_SetValue_featureName_feature = Feature Name
+_UI_SetValue_valueExpression_feature = Value Expression
+_UI_UnsetValue_featureName_feature = Feature Name
+_UI_UnsetValue_elementExpression_feature = Element Expression
+_UI_CreateView_parentViewExpression_feature = Parent View Expression
+_UI_CreateView_elementDescription_feature = Element Description
+_UI_CreateView_semanticElementExpression_feature = Semantic Element Expression
+_UI_CreateView_variableName_feature = Variable Name
+_UI_DeleteView_viewExpression_feature = View Expression
+_UI_Conditional_condition_feature = Condition
+_UI_FormDescription_widgets_feature = Widgets
+_UI_WidgetDescription_name_feature = Name
+_UI_WidgetDescription_labelExpression_feature = Label Expression
+_UI_TextfieldDescription_valueExpression_feature = Value Expression
+_UI_TextfieldDescription_body_feature = Body
+_UI_TextfieldDescription_style_feature = Style
+_UI_TextfieldDescription_conditionalStyles_feature = Conditional Styles
+_UI_CheckboxDescription_valueExpression_feature = Value Expression
+_UI_CheckboxDescription_body_feature = Body
+_UI_CheckboxDescription_style_feature = Style
+_UI_CheckboxDescription_conditionalStyles_feature = Conditional Styles
+_UI_SelectDescription_valueExpression_feature = Value Expression
+_UI_SelectDescription_candidatesExpression_feature = Candidates Expression
+_UI_SelectDescription_candidateLabelExpression_feature = Candidate Label Expression
+_UI_SelectDescription_body_feature = Body
+_UI_SelectDescription_style_feature = Style
+_UI_SelectDescription_conditionalStyles_feature = Conditional Styles
+_UI_MultiSelectDescription_valueExpression_feature = Value Expression
+_UI_MultiSelectDescription_candidatesExpression_feature = Candidates Expression
+_UI_MultiSelectDescription_candidateLabelExpression_feature = Candidate Label Expression
+_UI_MultiSelectDescription_body_feature = Body
+_UI_MultiSelectDescription_style_feature = Style
+_UI_MultiSelectDescription_conditionalStyles_feature = Conditional Styles
+_UI_TextAreaDescription_valueExpression_feature = Value Expression
+_UI_TextAreaDescription_body_feature = Body
+_UI_TextAreaDescription_style_feature = Style
+_UI_TextAreaDescription_conditionalStyles_feature = Conditional Styles
+_UI_RichTextDescription_valueExpression_feature = Value Expression
+_UI_RichTextDescription_body_feature = Body
+_UI_RadioDescription_valueExpression_feature = Value Expression
+_UI_RadioDescription_candidatesExpression_feature = Candidates Expression
+_UI_RadioDescription_candidateLabelExpression_feature = Candidate Label Expression
+_UI_RadioDescription_body_feature = Body
+_UI_RadioDescription_style_feature = Style
+_UI_RadioDescription_conditionalStyles_feature = Conditional Styles
+_UI_BarChartDescription_valuesExpression_feature = Values Expression
+_UI_BarChartDescription_keysExpression_feature = Keys Expression
+_UI_BarChartDescription_yAxisLabelExpression_feature = YAxis Label Expression
+_UI_BarChartDescription_style_feature = Style
+_UI_BarChartDescription_conditionalStyles_feature = Conditional Styles
+_UI_PieChartDescription_valuesExpression_feature = Values Expression
+_UI_PieChartDescription_keysExpression_feature = Keys Expression
+_UI_PieChartDescription_style_feature = Style
+_UI_PieChartDescription_conditionalStyles_feature = Conditional Styles
+_UI_FlexboxContainerDescription_children_feature = Children
+_UI_FlexboxContainerDescription_flexDirection_feature = Flex Direction
+_UI_ButtonDescription_buttonLabelExpression_feature = Button Label Expression
+_UI_ButtonDescription_body_feature = Body
+_UI_ButtonDescription_imageExpression_feature = Image Expression
+_UI_ButtonDescription_style_feature = Style
+_UI_ButtonDescription_conditionalStyles_feature = Conditional Styles
+_UI_TextfieldDescriptionStyle_backgroundColor_feature = Background Color
+_UI_TextfieldDescriptionStyle_foregroundColor_feature = Foreground Color
+_UI_CheckboxDescriptionStyle_color_feature = Color
+_UI_SelectDescriptionStyle_backgroundColor_feature = Background Color
+_UI_SelectDescriptionStyle_foregroundColor_feature = Foreground Color
+_UI_MultiSelectDescriptionStyle_backgroundColor_feature = Background Color
+_UI_MultiSelectDescriptionStyle_foregroundColor_feature = Foreground Color
+_UI_TextareaDescriptionStyle_backgroundColor_feature = Background Color
+_UI_TextareaDescriptionStyle_foregroundColor_feature = Foreground Color
+_UI_RadioDescriptionStyle_color_feature = Color
+_UI_ButtonDescriptionStyle_backgroundColor_feature = Background Color
+_UI_ButtonDescriptionStyle_foregroundColor_feature = Foreground Color
+_UI_BarChartDescriptionStyle_barsColor_feature = Bars Color
+_UI_PieChartDescriptionStyle_colors_feature = Colors
+_UI_PieChartDescriptionStyle_strokeWidth_feature = Stroke Width
+_UI_PieChartDescriptionStyle_strokeColor_feature = Stroke Color
+_UI_LabelDescription_valueExpression_feature = Value Expression
+_UI_LabelDescription_style_feature = Style
+_UI_LabelDescription_conditionalStyles_feature = Conditional Styles
+_UI_LabelDescriptionStyle_color_feature = Color
+_UI_LinkDescription_valueExpression_feature = Value Expression
+_UI_LinkDescription_style_feature = Style
+_UI_LinkDescription_conditionalStyles_feature = Conditional Styles
+_UI_LinkDescriptionStyle_color_feature = Color
+_UI_ListDescription_valueExpression_feature = Value Expression
+_UI_ListDescription_displayExpression_feature = Display Expression
+_UI_ListDescription_isDeletableExpression_feature = Is Deletable Expression
+_UI_ListDescription_body_feature = Body
+_UI_ListDescription_style_feature = Style
+_UI_ListDescription_conditionalStyles_feature = Conditional Styles
+_UI_ListDescriptionStyle_color_feature = Color
+_UI_Unknown_feature = Unspecified
+
+_UI_ArrowStyle_None_literal = None
+_UI_ArrowStyle_OutputArrow_literal = OutputArrow
+_UI_ArrowStyle_InputArrow_literal = InputArrow
+_UI_ArrowStyle_OutputClosedArrow_literal = OutputClosedArrow
+_UI_ArrowStyle_InputClosedArrow_literal = InputClosedArrow
+_UI_ArrowStyle_OutputFillClosedArrow_literal = OutputFillClosedArrow
+_UI_ArrowStyle_InputFillClosedArrow_literal = InputFillClosedArrow
+_UI_ArrowStyle_Diamond_literal = Diamond
+_UI_ArrowStyle_FillDiamond_literal = FillDiamond
+_UI_ArrowStyle_InputArrowWithDiamond_literal = InputArrowWithDiamond
+_UI_ArrowStyle_InputArrowWithFillDiamond_literal = InputArrowWithFillDiamond
+_UI_LineStyle_Solid_literal = Solid
+_UI_LineStyle_Dash_literal = Dash
+_UI_LineStyle_Dot_literal = Dot
+_UI_LineStyle_Dash_Dot_literal = Dash_Dot
+_UI_SynchronizationPolicy_SYNCHRONIZED_literal = SYNCHRONIZED
+_UI_SynchronizationPolicy_UNSYNCHRONIZED_literal = UNSYNCHRONIZED
+_UI_FlexDirection_row_literal = row
+_UI_FlexDirection_rowReverse_literal = row-reverse
+_UI_FlexDirection_column_literal = column
+_UI_FlexDirection_columnReverse_literal = column-reverse