@rhc-shared-components/rich-text-editor 0.5.0 → 0.5.2

package/dist/RichTextEditor.d.ts

@@ -10,6 +10,7 @@ export interface RichTextEditorProps {
     onError?: RichTextEditorFunctionType;
     id?: string;
     name?: string;
+    showCodeBlock?: boolean;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 export default RichTextEditor;

package/dist/RichTextEditorFormComponent.d.ts

@@ -9,6 +9,7 @@ export interface RichTextEditorFormComponentProps {
     helperText?: string;
     showMaxLengthText?: boolean;
     maxLength?: number;
+    showCodeBlock?: boolean;
 }
 declare const RichTextEditorFormComponent: React.FC<RichTextEditorFormComponentProps>;
 export default RichTextEditorFormComponent;

package/dist/index.js

@@ -38,7 +38,8 @@ var RichTextEditor = function RichTextEditor(_ref) {
       _onBlur = _ref.onBlur,
       _onFocus = _ref.onFocus,
       id = _ref.id,
-      name = _ref.name;
+      name = _ref.name,
+      showCodeBlock = _ref.showCodeBlock;
 
   var eventHandlerWrapper = function eventHandlerWrapper(handler, event, editor) {
     if (handler) {
@@ -60,6 +61,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
           forceValue: true
         }]
       },
+      toolbar: {
+        items: ['heading', '|', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', '|'].concat(showCodeBlock ? ['codeBlock'] : [], ['blockQuote', 'insertTable', 'undo', 'redo'])
+      },
       isReadOnly: disabled
     },
     onReady: onReady,
@@ -161,7 +165,7 @@ var InsertCss = function InsertCss() {
   }
 };
 
-var _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength"];
+var _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength", "showCodeBlock"];
 
 var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
   var label = _ref.label,
@@ -170,6 +174,7 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
       disabled = _ref.disabled,
       showMaxLengthText = _ref.showMaxLengthText,
       maxLength = _ref.maxLength,
+      showCodeBlock = _ref.showCodeBlock,
       rest = _objectWithoutPropertiesLoose$1(_ref, _excluded);
 
   var _useField = formik.useField({
@@ -196,8 +201,12 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
   }, [value, maxLength]);
   return React__namespace.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
-    onClick: function onClick() {
-      if (editorRef.current) {
+    onClick: function onClick(event) {
+      var _event$target;
+
+      // filtering out just the form event
+      if ( // @ts-ignore
+      event != null && (_event$target = event.target) != null && _event$target.classList.contains('pf-c-form__label-text') && editorRef.current) {
         // @ts-ignore
         editorRef.current.editing.view.focus();
       }
@@ -208,16 +217,12 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
     label: label,
     helperText: helperText
   }, React__namespace.createElement(RichTextEditor, {
+    showCodeBlock: showCodeBlock,
     value: value,
     id: rest.name,
     name: rest.name,
     onReady: function onReady(editor) {
       editor.setData(value);
-
-      if (disabled || isSubmitting) {
-        editor.enableReadOnlyMode(name);
-      }
-
       editorRef.current = editor;
     },
     disabled: disabled || isSubmitting,

package/dist/index.modern.js

@@ -15,7 +15,8 @@ const RichTextEditor = ({
   onBlur,
   onFocus,
   id,
-  name
+  name,
+  showCodeBlock
 }) => {
   const eventHandlerWrapper = (handler, event, editor) => {
     if (handler) {
@@ -37,6 +38,9 @@ const RichTextEditor = ({
           forceValue: true
         }]
       },
+      toolbar: {
+        items: ['heading', '|', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', '|', ...(showCodeBlock ? ['codeBlock'] : []), 'blockQuote', 'insertTable', 'undo', 'redo']
+      },
       isReadOnly: disabled
     },
     onReady: onReady,
@@ -140,7 +144,7 @@ const InsertCss = () => {
   }
 };
 
-const _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength"];
+const _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength", "showCodeBlock"];
 
 const RichTextEditorFormComponent = _ref => {
   let {
@@ -150,7 +154,8 @@ const RichTextEditorFormComponent = _ref => {
     helperText,
     disabled,
     showMaxLengthText,
-    maxLength
+    maxLength,
+    showCodeBlock
   } = _ref,
       rest = _objectWithoutPropertiesLoose$1(_ref, _excluded);
 
@@ -175,8 +180,12 @@ const RichTextEditorFormComponent = _ref => {
   }, [value, maxLength]);
   return React.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
-    onClick: () => {
-      if (editorRef.current) {
+    onClick: event => {
+      var _event$target;
+
+      // filtering out just the form event
+      if ( // @ts-ignore
+      event != null && (_event$target = event.target) != null && _event$target.classList.contains('pf-c-form__label-text') && editorRef.current) {
         // @ts-ignore
         editorRef.current.editing.view.focus();
       }
@@ -187,16 +196,12 @@ const RichTextEditorFormComponent = _ref => {
     label: label,
     helperText: helperText
   }, React.createElement(RichTextEditor, {
+    showCodeBlock: showCodeBlock,
     value: value,
     id: rest.name,
     name: rest.name,
     onReady: editor => {
       editor.setData(value);
-
-      if (disabled || isSubmitting) {
-        editor.enableReadOnlyMode(name);
-      }
-
       editorRef.current = editor;
     },
     disabled: disabled || isSubmitting,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/rich-text-editor",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "WYSWYG Editor for Red Hat Certified Apps",
   "author": "gautamkrishnar",
   "license": "MIT",