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

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.12...@rhc-shared-components/rich-text-editor@0.4.0) (2022-06-14)
+
+
+### Bug Fixes
+
+* added touched flag to validation ([e69be69](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/e69be69c901cd84f9f53c1ce2ef7047cd8ead04e))
+* fixed max length bug ([c63c798](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/c63c79891c16ff23919f09ba681470432a2b3301))
+* fixed re init bugs ([b208de0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/b208de0ac998c4fb814cbee4e3e3a8b4c6fe4b05))
+* fixing validation errors ([e2d4e61](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/e2d4e610ddeefdef6dd39d9cf6000dfab84916c7))
+* validation bugs ([cee65e1](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/cee65e142bf2dbae06914a4add9915f11118c6af))
+
+
+### Features
+
+* added maxlength feature ([564c8fa](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/564c8fa69ce2abfdc6eeb01d07330ebcfcbad4a1))
+
+
+
+
+
 ## [0.2.12](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.11...@rhc-shared-components/rich-text-editor@0.2.12) (2021-11-01)
 
 **Note:** Version bump only for package @rhc-shared-components/rich-text-editor

package/dist/RichTextEditor.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-declare type RichTextEditorFunctionType = (value: string, event?: Event, editor?: ClassicEditor) => void;
+declare type RichTextEditorFunctionType = (value: string, event?: Event, editor?: any) => void;
 export interface RichTextEditorProps {
     value: string;
     disabled?: boolean;
-    onReady?: (editor: ClassicEditor) => void;
+    onReady?: (editor: any) => void;
     onChange?: RichTextEditorFunctionType;
     onBlur?: RichTextEditorFunctionType;
     onFocus?: RichTextEditorFunctionType;

package/dist/index.js

@@ -1,6 +1,6 @@
 var React = require('react');
 var ckeditor5React = require('@ckeditor/ckeditor5-react');
-var ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
+var ClassicEditor = require('@rhc-shared-components/rhc-ckeditor');
 var reactCore = require('@patternfly/react-core');
 var formik = require('formik');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ClassicEditor__default = /*#__PURE__*/_interopDefaultLegacy(ClassicEditor);
 
-var css_248z$1 = ".rich-text-editor-custom {\n  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n  .rich-text-editor-custom h1 {\n    font-size: var(--pf-c-title--m-2xl--FontSize);\n    font-weight: var(--pf-c-title--m-2xl--FontWeight);\n    line-height: var(--pf-c-title--m-2xl--LineHeight); }\n  .rich-text-editor-custom h2 {\n    font-size: var(--pf-c-title--m-xl--FontSize);\n    font-weight: var(--pf-c-title--m-xl--FontWeight);\n    line-height: var(--pf-c-title--m-xl--LineHeight); }\n  .rich-text-editor-custom h3 {\n    font-size: var(--pf-c-title--m-lg--FontSize);\n    font-weight: var(--pf-c-title--m-lg--FontWeight);\n    line-height: var(--pf-c-title--m-lg--LineHeight); }\n  .rich-text-editor-custom h4 {\n    font-size: var(--pf-c-title--m-md--FontSize);\n    font-weight: var(--pf-c-title--m-md--FontWeight);\n    line-height: var(--pf-c-title--m-md--LineHeight); }\n  .rich-text-editor-custom ul {\n    display: block;\n    list-style-type: disc;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n    .rich-text-editor-custom ul li {\n      display: list-item; }\n    .rich-text-editor-custom ul ul {\n      list-style-type: circle;\n      -webkit-margin-before: 0px;\n              margin-block-start: 0px;\n      -webkit-margin-after: 0px;\n              margin-block-end: 0px; }\n  .rich-text-editor-custom ol {\n    display: block;\n    list-style-type: decimal;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n";
+var css_248z$1 = ".rich-text-editor-custom {\n  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n  .rich-text-editor-custom .ck-editor__main {\n    word-break: break-all; }\n  .rich-text-editor-custom .ck-code-block-dropdown .ck-splitbutton__arrow {\n    display: none; }\n  .rich-text-editor-custom h1 {\n    font-size: var(--pf-c-title--m-2xl--FontSize);\n    font-weight: var(--pf-c-title--m-2xl--FontWeight);\n    line-height: var(--pf-c-title--m-2xl--LineHeight); }\n  .rich-text-editor-custom h2 {\n    font-size: var(--pf-c-title--m-xl--FontSize);\n    font-weight: var(--pf-c-title--m-xl--FontWeight);\n    line-height: var(--pf-c-title--m-xl--LineHeight); }\n  .rich-text-editor-custom h3 {\n    font-size: var(--pf-c-title--m-lg--FontSize);\n    font-weight: var(--pf-c-title--m-lg--FontWeight);\n    line-height: var(--pf-c-title--m-lg--LineHeight); }\n  .rich-text-editor-custom h4 {\n    font-size: var(--pf-c-title--m-md--FontSize);\n    font-weight: var(--pf-c-title--m-md--FontWeight);\n    line-height: var(--pf-c-title--m-md--LineHeight); }\n  .rich-text-editor-custom ul {\n    display: block;\n    list-style-type: disc;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n    .rich-text-editor-custom ul li {\n      display: list-item; }\n    .rich-text-editor-custom ul ul {\n      list-style-type: circle;\n      -webkit-margin-before: 0px;\n              margin-block-start: 0px;\n      -webkit-margin-after: 0px;\n              margin-block-end: 0px; }\n  .rich-text-editor-custom ol {\n    display: block;\n    list-style-type: decimal;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n";
 
 var RichTextEditor = function RichTextEditor(_ref) {
   var value = _ref.value,
@@ -50,46 +50,17 @@ var RichTextEditor = function RichTextEditor(_ref) {
   return React__namespace.createElement("div", {
     className: 'rich-text-editor-custom'
   }, React__namespace.createElement(ckeditor5React.CKEditor, Object.assign({
-    disabled: disabled,
     editor: ClassicEditor__default["default"],
     data: value,
     config: {
-      heading: {
-        options: [{
-          model: 'paragraph',
-          title: 'Paragraph'
-        }, {
-          model: 'heading1',
-          view: {
-            name: 'h1'
-          },
-          title: 'Heading 1'
-        }, {
-          model: 'heading2',
-          view: {
-            name: 'h2'
-          },
-          title: 'Heading 2'
-        }, {
-          model: 'heading3',
-          view: {
-            name: 'h3'
-          },
-          title: 'Heading 3'
-        }, {
-          model: 'heading4',
-          view: {
-            name: 'h4'
-          },
-          title: 'Heading 4'
+      codeBlock: {
+        languages: [{
+          language: 'code',
+          label: 'Code',
+          forceValue: true
         }]
       },
-      toolbar: {
-        items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', 'undo', 'redo']
-      },
-      table: {
-        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-      }
+      isReadOnly: disabled
     },
     onReady: onReady,
     onChange: function onChange(event, editor) {
@@ -226,7 +197,7 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
   return React__namespace.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     onClick: function onClick() {
-      if (editorRef) {
+      if (editorRef.current) {
         // @ts-ignore
         editorRef.current.editing.view.focus();
       }
@@ -242,6 +213,11 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
     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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import ClassicEditor from '@rhc-shared-components/rhc-ckeditor';
 import { FormGroup, ValidatedOptions } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
 
-var css_248z$1 = ".rich-text-editor-custom {\n  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n  .rich-text-editor-custom h1 {\n    font-size: var(--pf-c-title--m-2xl--FontSize);\n    font-weight: var(--pf-c-title--m-2xl--FontWeight);\n    line-height: var(--pf-c-title--m-2xl--LineHeight); }\n  .rich-text-editor-custom h2 {\n    font-size: var(--pf-c-title--m-xl--FontSize);\n    font-weight: var(--pf-c-title--m-xl--FontWeight);\n    line-height: var(--pf-c-title--m-xl--LineHeight); }\n  .rich-text-editor-custom h3 {\n    font-size: var(--pf-c-title--m-lg--FontSize);\n    font-weight: var(--pf-c-title--m-lg--FontWeight);\n    line-height: var(--pf-c-title--m-lg--LineHeight); }\n  .rich-text-editor-custom h4 {\n    font-size: var(--pf-c-title--m-md--FontSize);\n    font-weight: var(--pf-c-title--m-md--FontWeight);\n    line-height: var(--pf-c-title--m-md--LineHeight); }\n  .rich-text-editor-custom ul {\n    display: block;\n    list-style-type: disc;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n    .rich-text-editor-custom ul li {\n      display: list-item; }\n    .rich-text-editor-custom ul ul {\n      list-style-type: circle;\n      -webkit-margin-before: 0px;\n              margin-block-start: 0px;\n      -webkit-margin-after: 0px;\n              margin-block-end: 0px; }\n  .rich-text-editor-custom ol {\n    display: block;\n    list-style-type: decimal;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n";
+var css_248z$1 = ".rich-text-editor-custom {\n  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n  .rich-text-editor-custom .ck-editor__main {\n    word-break: break-all; }\n  .rich-text-editor-custom .ck-code-block-dropdown .ck-splitbutton__arrow {\n    display: none; }\n  .rich-text-editor-custom h1 {\n    font-size: var(--pf-c-title--m-2xl--FontSize);\n    font-weight: var(--pf-c-title--m-2xl--FontWeight);\n    line-height: var(--pf-c-title--m-2xl--LineHeight); }\n  .rich-text-editor-custom h2 {\n    font-size: var(--pf-c-title--m-xl--FontSize);\n    font-weight: var(--pf-c-title--m-xl--FontWeight);\n    line-height: var(--pf-c-title--m-xl--LineHeight); }\n  .rich-text-editor-custom h3 {\n    font-size: var(--pf-c-title--m-lg--FontSize);\n    font-weight: var(--pf-c-title--m-lg--FontWeight);\n    line-height: var(--pf-c-title--m-lg--LineHeight); }\n  .rich-text-editor-custom h4 {\n    font-size: var(--pf-c-title--m-md--FontSize);\n    font-weight: var(--pf-c-title--m-md--FontWeight);\n    line-height: var(--pf-c-title--m-md--LineHeight); }\n  .rich-text-editor-custom ul {\n    display: block;\n    list-style-type: disc;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n    .rich-text-editor-custom ul li {\n      display: list-item; }\n    .rich-text-editor-custom ul ul {\n      list-style-type: circle;\n      -webkit-margin-before: 0px;\n              margin-block-start: 0px;\n      -webkit-margin-after: 0px;\n              margin-block-end: 0px; }\n  .rich-text-editor-custom ol {\n    display: block;\n    list-style-type: decimal;\n    -webkit-margin-before: 1em;\n            margin-block-start: 1em;\n    -webkit-margin-after: 1em;\n            margin-block-end: 1em;\n    -webkit-margin-start: 0px;\n            margin-inline-start: 0px;\n    -webkit-margin-end: 0px;\n            margin-inline-end: 0px;\n    -webkit-padding-start: 40px;\n            padding-inline-start: 40px; }\n";
 
 const RichTextEditor = ({
   value,
@@ -27,46 +27,17 @@ const RichTextEditor = ({
   return React.createElement("div", {
     className: 'rich-text-editor-custom'
   }, React.createElement(CKEditor, Object.assign({
-    disabled: disabled,
     editor: ClassicEditor,
     data: value,
     config: {
-      heading: {
-        options: [{
-          model: 'paragraph',
-          title: 'Paragraph'
-        }, {
-          model: 'heading1',
-          view: {
-            name: 'h1'
-          },
-          title: 'Heading 1'
-        }, {
-          model: 'heading2',
-          view: {
-            name: 'h2'
-          },
-          title: 'Heading 2'
-        }, {
-          model: 'heading3',
-          view: {
-            name: 'h3'
-          },
-          title: 'Heading 3'
-        }, {
-          model: 'heading4',
-          view: {
-            name: 'h4'
-          },
-          title: 'Heading 4'
+      codeBlock: {
+        languages: [{
+          language: 'code',
+          label: 'Code',
+          forceValue: true
         }]
       },
-      toolbar: {
-        items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', 'undo', 'redo']
-      },
-      table: {
-        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-      }
+      isReadOnly: disabled
     },
     onReady: onReady,
     onChange: (event, editor) => {
@@ -205,7 +176,7 @@ const RichTextEditorFormComponent = _ref => {
   return React.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     onClick: () => {
-      if (editorRef) {
+      if (editorRef.current) {
         // @ts-ignore
         editorRef.current.editing.view.focus();
       }
@@ -221,6 +192,11 @@ const RichTextEditorFormComponent = _ref => {
     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.3.5",
+  "version": "0.5.0",
   "description": "WYSWYG Editor for Red Hat Certified Apps",
   "author": "gautamkrishnar",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "react-dom": ">=16.13.1"
   },
   "devDependencies": {
-    "@rhc-shared-components/form-group-container": "^0.3.0",
+    "@rhc-shared-components/form-group-container": "^0.3.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -69,9 +69,9 @@
     "dist"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^29.2.0",
     "@ckeditor/ckeditor5-react": "^3.0.2",
     "@patternfly/react-core": "^4.101.3",
+    "@rhc-shared-components/rhc-ckeditor": "^1.0.2",
     "formik": "^2.1.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"