#2064 Enable new Comment type which supports a WYSIWYG editor (#2065)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/__tests__/common-canvas/common-canvas-text-toolbar-test.js

@@ -17,6 +17,7 @@
 import CanvasController from "../../src/common-canvas/canvas-controller";
 import CommonCanvasTextToolbar from "../../src/common-canvas/cc-text-toolbar.jsx";
 import Toolbar from "../../src/toolbar/toolbar.jsx";
+import { MARKDOWN } from "../../src/common-canvas/constants/canvas-constants.js";
 import { createIntlCommonCanvasTextToolbar } from "../_utils_/cc-utils.js";
 import { expect } from "chai";
 
@@ -38,7 +39,7 @@ describe("Common Canvas Text Toolbar renders correctly", () => {
 
 	it("should render <Toolbar> inside <CommonCanvasTextToolbar/> when open", () => {
 		wrapper = createIntlCommonCanvasTextToolbar({}, canvasController);
-		canvasController.openTextToolbar(100, 200, () => { /**/ });
+		canvasController.openTextToolbar(100, 200, MARKDOWN, () => { /**/ });
 		wrapper.update();
 
 		expect(wrapper.find(CommonCanvasTextToolbar)).to.have.length(1);

canvas_modules/common-canvas/locales/common-canvas/locales/en.json

@@ -9,6 +9,7 @@
   "edit.pasteSelection": "Paste",
   "canvas.label": "Canvas",
   "canvas.addComment": "New comment",
+  "canvas.addWysiwygComment": "New WYSIWYG comment",
   "canvas.selectAll": "Select all",
   "canvas.undo": "Undo",
   "canvas.redo": "Redo",
@@ -42,6 +43,7 @@
   "texttoolbar.headerAction": "Header",
   "texttoolbar.boldAction": "Bold",
   "texttoolbar.italicsAction": "Italics",
+  "texttoolbar.underline": "Underline",
   "texttoolbar.strikethroughAction": "Strikethrough",
   "texttoolbar.codeAction": "Code",
   "texttoolbar.linkAction": "Link",
@@ -50,5 +52,30 @@
   "texttoolbar.numberedListAction": "Numbered List",
   "texttoolbar.titleAction": "Title",
   "texttoolbar.subheaderAction": "Subheader",
-  "texttoolbar.bodyAction": "Body"
+  "texttoolbar.bodyAction": "Body",
+  "texttoolbar.fontAction": "Font",
+  "texttoolbar.fontIBMPlexSans": "IBM Plex Sans",
+  "texttoolbar.fontIBMPlexSerif": "IBM Plex Serif",
+  "texttoolbar.fontIBMPlexCon": "IBM Plex Condensed",
+  "texttoolbar.fontIBMPlexMono": "IBM Plex Mono",
+  "texttoolbar.fontArial": "Arial",
+  "texttoolbar.fontComicSansMS": "Comic Sans MS",
+  "texttoolbar.fontGillSans": "Gill Sans",
+  "texttoolbar.fontHelveticaNeue": "Helvetica Neue",
+  "texttoolbar.fontTimesNewRoman": "Times New Roman",
+  "texttoolbar.fontVerdana": "Verdana",
+  "texttoolbar.textSize": "Text size",
+  "texttoolbar.colorText": "Color text",
+  "texttoolbar.alignHoriz": "Align horizontally",
+  "texttoolbar.alignHorizLeft": "Left",
+  "texttoolbar.alignHorizCenter": "Center",
+  "texttoolbar.alignHorizRight": "Right",
+  "texttoolbar.alignVert": "Align vertically",
+  "texttoolbar.alignVertTop": "Top",
+  "texttoolbar.alignVertMiddle": "Middle",
+  "texttoolbar.alignVertBottom": "Bottom",
+  "texttoolbar.colorBackground": "Color background",
+  "texttoolbar.outline": "Outline",
+  "texttoolbar.outlineNone": "No outline",
+  "texttoolbar.outlineSolid": "Solid outline"
 }

canvas_modules/common-canvas/locales/common-canvas/locales/eo.json

@@ -9,6 +9,7 @@
 	"edit.pasteSelection": "[Esperanto~Paste~eo]",
 	"canvas.label": "[Esperanto~Canvas~eo]",
 	"canvas.addComment": "[Esperanto~New comment~eo]",
+	"canvas.addWysiwygComment": "[Esperanto~New WYSIWYG comment~~~~~eo]",
 	"canvas.selectAll": "[Esperanto~Select all~~~~~~eo]",
 	"canvas.undo": "[Esperanto~Undo~eo]",
 	"canvas.redo": "[Esperanto~Redo~eo]",
@@ -42,6 +43,7 @@
 	"texttoolbar.headerAction": "[Esperanto~Header~~~~eo]",
 	"texttoolbar.boldAction": "[Esperanto~Bold~~~~eo]",
 	"texttoolbar.italicsAction": "[Esperanto~Italics~~~~eo]",
+	"texttoolbar.underline": "[Esperanto~Underline~~~~eo]",
 	"texttoolbar.strikethroughAction": "[Esperanto~Strikethrough~~~~eo]",
 	"texttoolbar.codeAction": "[Esperanto~Code~~~~eo]",
 	"texttoolbar.linkAction": "[Esperanto~Link~~~~eo]",
@@ -50,5 +52,30 @@
 	"texttoolbar.numberedListAction": "[Esperanto~Numbered List~~~~eo]",
 	"texttoolbar.titleAction": "[Esperanto~Title~eo]",
 	"texttoolbar.subheaderAction": "[Esperanto~Subheader~eo]",
-	"texttoolbar.bodyAction": "[Esperanto~Body~eo]"
+	"texttoolbar.bodyAction": "[Esperanto~Body~eo]",
+	"texttoolbar.fontAction": "[Esperanto~Font~~eo]",
+	"texttoolbar.fontIBMPlexSans": "[Esperanto~IBM Plex Sans~~eo]",
+	"texttoolbar.fontIBMPlexSerif": "[Esperanto~IBM Plex Serif~~eo]",
+	"texttoolbar.fontIBMPlexCon": "[Esperanto~IBM Plex Condensed~~eo]",
+	"texttoolbar.fontIBMPlexMono": "[Esperanto~IBM Plex Mono~~eo]",
+	"texttoolbar.fontArial": "[Esperanto~Arial~~eo]",
+	"texttoolbar.fontComicSansMS": "[Esperanto~Comic Sans MS~~eo]",
+	"texttoolbar.fontGillSans": "[Esperanto~Gill Sans~~eo]",
+	"texttoolbar.fontHelveticaNeue": "[Esperanto~Helvetica Neue~~eo]",
+	"texttoolbar.fontTimesNewRoman": "[Esperanto~Times New Roman~~eo]",
+	"texttoolbar.fontVerdana": "[Esperanto~Verdana~~eo]",
+	"texttoolbar.textSize": "[Esperanto~Text size~~eo]",
+	"texttoolbar.colorText": "[Esperanto~Color text~~eo]",
+	"texttoolbar.alignHoriz": "[Esperanto~Align horizontally~~eo]",
+	"texttoolbar.alignHorizLeft": "[Esperanto~Left~~eo]",
+	"texttoolbar.alignHorizCenter": "[Esperanto~Center~~eo]",
+	"texttoolbar.alignHorizRight": "[Esperanto~Right~~eo]",
+	"texttoolbar.alignVert": "[Esperanto~Align vertically~~eo]",
+	"texttoolbar.alignVertTop": "[Esperanto~Top~~eo]",
+	"texttoolbar.alignVertMiddle": "[Esperanto~Middle~~eo]",
+	"texttoolbar.alignVertBottom": "[Esperanto~Bottom~~eo]",
+	"texttoolbar.colorBackground": "[Esperanto~Color background~~eo]",
+	"texttoolbar.outline": "[Esperanto~Outline~~eo]",
+	"texttoolbar.outlineNone": "[Esperanto~No outline~~eo]",
+	"texttoolbar.outlineSolid": "[Esperanto~Solid outline~~eo]"
 }

canvas_modules/common-canvas/src/color-picker/color-picker.jsx

@@ -17,6 +17,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Logger from "../logging/canvas-logger.js";
+import colorSetArray from "./color-set.js";
+
+import { WYSIWYG } from "../common-canvas/constants/canvas-constants.js";
 
 const TAB_KEY = 9;
 const RETURN_KEY = 13;
@@ -26,10 +29,14 @@ const UP_ARROW_KEY = 38;
 const RIGHT_ARROW_KEY = 39;
 const DOWN_ARROW_KEY = 40;
 
+// These dimensions should match the values in color-picker.scss
+const COLOR_DIMENSION = 20;
+const COLOR_PADDING = 5;
+const COLOR_DIM_PLUS_PAD = COLOR_DIMENSION + COLOR_PADDING;
+
+
 // These values must reflect the layout of the color picker panel
 // decribed by the SCSS/CSS.
-const COLORS_IN_ROW = 6;
-const TOTAL_COLORS = 12;
 
 class ColorPicker extends React.Component {
 	constructor(props) {
@@ -38,8 +45,11 @@ class ColorPicker extends React.Component {
 
 		this.colorIndex = 0;
 
+		this.colorsPerRow = props.subPanelData.type === WYSIWYG ? 8 : 6;
+		this.totalColors = props.subPanelData.type === WYSIWYG ? colorSetArray.length : 12;
+
 		this.refss = [];
-		for (let i = 0; i < TOTAL_COLORS; i++) {
+		for (let i = 0; i < this.totalColors; i++) {
 			this.refss.push(React.createRef());
 		}
 		this.onClick = this.onClick.bind(this);
@@ -59,29 +69,29 @@ class ColorPicker extends React.Component {
 		if (evt.keyCode === RIGHT_ARROW_KEY) {
 			evt.stopPropagation();
 			this.colorIndex++;
-			if (this.colorIndex > TOTAL_COLORS - 1) {
+			if (this.colorIndex > this.totalColors - 1) {
 				this.colorIndex = 0;
 			}
 
 		} else if (evt.keyCode === LEFT_ARROW_KEY) {
 			evt.stopPropagation();
 			this.colorIndex--;
 			if (this.colorIndex < 0) {
-				this.colorIndex = TOTAL_COLORS - 1;
+				this.colorIndex = this.totalColors - 1;
 			}
 
 		} else if (evt.keyCode === UP_ARROW_KEY) {
 			evt.stopPropagation();
-			this.colorIndex -= COLORS_IN_ROW;
+			this.colorIndex -= this.colorsPerRow;
 			if (this.colorIndex < 0) {
-				this.colorIndex += COLORS_IN_ROW;
+				this.colorIndex += this.colorsPerRow;
 			}
 
 		} else if (evt.keyCode === DOWN_ARROW_KEY) {
 			evt.stopPropagation();
-			this.colorIndex += COLORS_IN_ROW;
+			this.colorIndex += this.colorsPerRow;
 			if (this.colorIndex > 11) {
-				this.colorIndex -= COLORS_IN_ROW;
+				this.colorIndex -= this.colorsPerRow;
 			}
 
 		} else if (evt.keyCode === SPACE_KEY ||
@@ -105,12 +115,35 @@ class ColorPicker extends React.Component {
 
 	selectColor(evt) {
 		const color = evt.target.dataset.color;
-		this.props.subPanelData.clickActionHandler(color);
+		this.props.subPanelData.clickActionHandler(color, evt);
 		this.props.closeSubPanel();
 	}
 
+
 	render() {
 		this.logger.log("render");
+		if (this.props.subPanelData.type === WYSIWYG) {
+			const colorDivs = colorSetArray.map((c, i) =>
+				(<div key={"key" + i} ref={this.refss[i]} tabIndex={"-1"} data-color={c}
+					style={{ backgroundColor: c }}
+					className={"color-picker-item" + (c === "transparent" ? " color-transparent" : "") }
+				/>));
+
+			const rowCount = Math.ceil(this.totalColors / this.colorsPerRow);
+
+			const style = {
+				width: (this.colorsPerRow * COLOR_DIM_PLUS_PAD) + COLOR_PADDING,
+				height: (rowCount * COLOR_DIM_PLUS_PAD) + COLOR_PADDING,
+				paddingBottom: "4px"
+			};
+
+			return (
+				<div className="color-picker" style={style} tabIndex={"-1"} onClick={this.onClick} onKeyDown={this.onKeyDown}>
+					{colorDivs}
+				</div>
+			);
+		}
+
 		return (
 			<div className="color-picker" tabIndex={"-1"} onClick={this.onClick} onKeyDown={this.onKeyDown}>
 				<div ref={this.refss[0]} tabIndex={"-1"} data-color={"bkg-col-white-0"} className="color-picker-item white-0" />

canvas_modules/common-canvas/src/color-picker/color-picker.scss

@@ -25,6 +25,8 @@
 		height: 20px;
 		margin: 5px 0 0 5px;
 		cursor: pointer;
+		border: $border-subtle-02 1px solid;
+
 		&.white-0 {
 			background-color: $layer-01; // In dark-mode, white-0 will be interpreted as black.
 			border: 1px solid $gray-50;
@@ -40,5 +42,13 @@
 		&.green-50 { background-color: $green-50; }
 		&.teal-50 { background-color: $teal-50; }
 		&.cyan-50 { background-color: $cyan-50; }
+
+		&.color-transparent {
+			border-color: $icon-primary;
+			// Drawn a diagonal line across the square
+			background:
+				linear-gradient(to top left, $icon-inverse calc(50% - 1.2px), $icon-primary 50%, $icon-inverse calc(50% + 1.2px), $icon-inverse 100%);
+		}
 	}
+
 }

canvas_modules/common-canvas/src/color-picker/color-set.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2024 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This is the set of colors for the WYSIWYG comments color palette used for
+// both text coloring and background coloring.
+
+const colorArray = [
+	"#FFF1F1", // Red
+	"#FCEBD6", // Orange
+	"#FDF4D6", // Yellow
+	"#DEFBE6", // Green
+	"#D9FBFB", // Teal
+	"#E5F6FF", // Blue
+	"#F6F2FF", // Purple
+	"#FFFFFF", // Gray
+
+	"#FFD7D9", // Red
+	"#FFD9BD", // Orange
+	"#FFFFC7", // Yellow
+	"#E2FEC7", // Green
+	"#9EF0F0", // Teal
+	"#CDE1FD", // Blue
+	"#D4BBFF", // Purple
+	"#F4F4F4", // Gray
+
+	"#FFB3B8", // Red
+	"#FF832B", // Orange
+	"#FFFF00", // Yellow
+	"#A7F0BA", // Green
+	"#3DDBD9", // Teal
+	"#BAE6FF", // Blue
+	"#8080C0", // Purple
+	"#E0E0E0", // Gray
+
+	"#FF8389", // Red
+	"#FC7B1D", // Orange
+	"#FDDC69", // Yellow
+	"#6FDC8C", // Green
+	"#08BDBA", // Teal
+	"#82CFFF", // Blue
+	"#8080FF", // Purple
+	"#C6C6C6", // Gray
+
+	"#FA4D56", // Red
+	"#EB6200", // Orange
+	"#F1C21B", // Yellow
+	"#42BE65", // Green
+	"#009D9A", // Teal
+	"#33B1FF", // Blue
+	"#8000FF", // Purple
+	"#A8A8A8", // Gray
+
+	"#EA3325", // Red
+	"#BA4E00", // Orange
+	"#D2A106", // Yellow
+	"#24A148", // Green
+	"#007D79", // Teal
+	"#78A9FF", // Blue
+	"#6929C4", // Purple
+	"#8D8D8D", // Gray
+
+	"#DA1E28", // Red
+	"#804040", // Orange
+	"#B28600", // Yellow
+	"#198038", // Green
+	"#005D5D", // Teal
+	"#1192E8", // Blue
+	"#491D8B", // Purple
+	"#000000", // Gray
+
+	"#A2191F", // Red
+	"#5C2800", // Orange
+	"#8E6A01", // Yellow
+	"#0E6027", // Green
+	"#004144", // Teal
+	"#0072C3", // Blue
+	"#400080", // Purple
+	"transparent" // Gray
+];
+export default colorArray;