@rhc-shared-components/rich-text-editor 0.2.7 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -0
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -0
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
|
|
|
27
27
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
28
|
var ClassicEditor__default = /*#__PURE__*/_interopDefaultLegacy(ClassicEditor);
|
|
29
29
|
|
|
30
|
-
var css_248z = "";
|
|
30
|
+
var css_248z = ".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";
|
|
31
31
|
|
|
32
32
|
var RichTextEditor = function RichTextEditor(_ref) {
|
|
33
33
|
var value = _ref.value,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/RichTextEditor.tsx","../../form-group-container/dist/index.modern.js","../src/RichTextEditorFormComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\nimport styles from './RichTextEditor.scss';\n\ntype RichTextEditorFunctionType = (\n value: string,\n event?: Event,\n editor?: ClassicEditor\n) => void;\n\nexport interface RichTextEditorProps {\n value: string;\n disabled?: boolean;\n onReady?: (editor: ClassicEditor) => void;\n onChange?: RichTextEditorFunctionType;\n onBlur?: RichTextEditorFunctionType;\n onFocus?: RichTextEditorFunctionType;\n onError?: RichTextEditorFunctionType;\n id?: string;\n name?: string;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n value,\n disabled,\n onReady,\n onChange,\n onError,\n onBlur,\n onFocus,\n id,\n name\n}) => {\n const eventHandlerWrapper = (\n handler: RichTextEditorFunctionType | undefined,\n event: Event | undefined,\n editor: ClassicEditor | undefined\n ) => {\n if (handler) {\n handler(editor.getData(), event, editor);\n }\n };\n InsertCss();\n return (\n <div className='rich-text-editor-custom'>\n <CKEditor\n disabled={disabled}\n editor={ClassicEditor}\n data={value}\n config={{\n heading: {\n options: [\n {\n model: 'paragraph',\n title: 'Paragraph'\n },\n {\n model: 'heading1',\n view: {\n name: 'h1'\n },\n title: 'Heading 1'\n },\n {\n model: 'heading2',\n view: {\n name: 'h2'\n },\n title: 'Heading 2'\n },\n {\n model: 'heading3',\n view: {\n name: 'h4'\n },\n title: 'Heading 3'\n },\n {\n model: 'heading4',\n view: {\n name: 'h4'\n },\n title: 'Heading 4'\n }\n ]\n },\n toolbar: {\n items: [\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'link',\n 'bulletedList',\n 'numberedList',\n '|',\n 'blockQuote',\n 'insertTable',\n 'undo',\n 'redo'\n ]\n },\n table: {\n contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']\n }\n }}\n onReady={onReady}\n onChange={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onChange, event, editor);\n }}\n onBlur={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onBlur, event, editor);\n }}\n onFocus={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onFocus, event, editor);\n }}\n onError={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onError, event, editor);\n }}\n {...(id && { id })}\n {...(name && { name })}\n />\n </div>\n );\n};\n\nconst InsertCss = () => {\n const styleId = 'rich-test-editor-styles';\n if (!document.getElementById(styleId)) {\n const styleTag = document.createElement('style');\n styleTag.id = styleId;\n styleTag.type = 'text/css';\n styleTag.innerHTML = styles;\n document.body.appendChild(styleTag);\n }\n};\n\nexport default RichTextEditor;\n","import { createElement } from 'react';\nimport { FormGroup, ValidatedOptions } from '@patternfly/react-core';\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded = [\"children\", \"helperTextInvalid\", \"isValid\", \"helperText\", \"labelIcon\", \"onClick\"];\n\nvar FormGroupContainer = function FormGroupContainer(_ref) {\n var children = _ref.children,\n helperTextInvalid = _ref.helperTextInvalid,\n isValid = _ref.isValid,\n helperText = _ref.helperText,\n labelIcon = _ref.labelIcon,\n onClick = _ref.onClick,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n return createElement(FormGroup, Object.assign({\n className: 'form-group',\n helperTextInvalid: helperTextInvalid,\n helperText: helperText,\n validated: isValid ? ValidatedOptions[\"default\"] : ValidatedOptions.error\n }, labelIcon && {\n labelIcon: labelIcon\n }, onClick && {\n onClick: onClick\n }, rest), children);\n};\n\nexport { FormGroupContainer };\n","import * as React from 'react';\nimport { FormGroupContainer } from '@rhc-shared-components/form-group-container';\nimport { useField, useFormikContext } from 'formik';\nimport { ValidatedOptions } from '@patternfly/react-core';\nimport RichTextEditor from './RichTextEditor';\n\nexport interface RichTextEditorFormComponentProps {\n name: string;\n label: string;\n disabled?: boolean;\n isRequired?: boolean;\n placeholder?: string;\n ariaLabel?: string;\n helperText?: string;\n maxItems?: number;\n maxHeight?: string | number;\n}\n\nconst RichTextEditorFormComponent: React.FC<RichTextEditorFormComponentProps> =\n ({\n label,\n isRequired,\n ariaLabel = 'Enter text',\n placeholder,\n helperText,\n maxItems,\n maxHeight,\n disabled,\n ...rest\n }) => {\n const [, meta] = useField({ name: rest.name });\n const { value } = meta;\n const editorRef = React.useRef(null);\n const { isSubmitting, setFieldValue, validateField } = useFormikContext();\n return (\n <FormGroupContainer\n validated={\n meta.error ? ValidatedOptions.error : ValidatedOptions.default\n }\n onClick={() => {\n if (editorRef) {\n // @ts-ignore\n editorRef.current.editing.view.focus();\n }\n }}\n fieldId={rest.name}\n helperTextInvalid={meta.error}\n isRequired={isRequired}\n label={label}\n helperText={helperText}\n >\n <RichTextEditor\n value={value}\n id={rest.name}\n name={rest.name}\n onReady={(editor) => {\n editorRef.current = editor;\n }}\n disabled={disabled || isSubmitting}\n onChange={(data) => {\n setFieldValue(rest.name, data);\n validateField(rest.name);\n }}\n onBlur={(data) => {\n setFieldValue(rest.name, data);\n validateField(rest.name);\n }}\n />\n </FormGroupContainer>\n );\n };\n\nexport default RichTextEditorFormComponent;\n"],"names":["RichTextEditor","value","disabled","onReady","onChange","onError","onBlur","onFocus","id","name","eventHandlerWrapper","handler","event","editor","getData","InsertCss","React","className","CKEditor","ClassicEditor","data","config","heading","options","model","title","view","toolbar","items","table","contentToolbar","styleId","document","getElementById","styleTag","createElement","type","innerHTML","styles","body","appendChild","_objectWithoutPropertiesLoose","source","excluded","target","sourceKeys","Object","keys","key","i","length","indexOf","_excluded","FormGroupContainer","_ref","children","helperTextInvalid","isValid","helperText","labelIcon","onClick","rest","FormGroup","assign","validated","ValidatedOptions","error","RichTextEditorFormComponent","label","isRequired","useField","meta","editorRef","useRef","useFormikContext","isSubmitting","setFieldValue","validateField","current","editing","focus","fieldId"],"mappings":"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"}
|
package/dist/index.modern.js
CHANGED
|
@@ -5,7 +5,7 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
5
5
|
import { FormGroup, ValidatedOptions } from '@patternfly/react-core';
|
|
6
6
|
import { useField, useFormikContext } from 'formik';
|
|
7
7
|
|
|
8
|
-
var css_248z = "";
|
|
8
|
+
var css_248z = ".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";
|
|
9
9
|
|
|
10
10
|
const RichTextEditor = ({
|
|
11
11
|
value,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/RichTextEditor.tsx","../../form-group-container/dist/index.modern.js","../src/RichTextEditorFormComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\nimport styles from './RichTextEditor.scss';\n\ntype RichTextEditorFunctionType = (\n value: string,\n event?: Event,\n editor?: ClassicEditor\n) => void;\n\nexport interface RichTextEditorProps {\n value: string;\n disabled?: boolean;\n onReady?: (editor: ClassicEditor) => void;\n onChange?: RichTextEditorFunctionType;\n onBlur?: RichTextEditorFunctionType;\n onFocus?: RichTextEditorFunctionType;\n onError?: RichTextEditorFunctionType;\n id?: string;\n name?: string;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n value,\n disabled,\n onReady,\n onChange,\n onError,\n onBlur,\n onFocus,\n id,\n name\n}) => {\n const eventHandlerWrapper = (\n handler: RichTextEditorFunctionType | undefined,\n event: Event | undefined,\n editor: ClassicEditor | undefined\n ) => {\n if (handler) {\n handler(editor.getData(), event, editor);\n }\n };\n InsertCss();\n return (\n <div className='rich-text-editor-custom'>\n <CKEditor\n disabled={disabled}\n editor={ClassicEditor}\n data={value}\n config={{\n heading: {\n options: [\n {\n model: 'paragraph',\n title: 'Paragraph'\n },\n {\n model: 'heading1',\n view: {\n name: 'h1'\n },\n title: 'Heading 1'\n },\n {\n model: 'heading2',\n view: {\n name: 'h2'\n },\n title: 'Heading 2'\n },\n {\n model: 'heading3',\n view: {\n name: 'h4'\n },\n title: 'Heading 3'\n },\n {\n model: 'heading4',\n view: {\n name: 'h4'\n },\n title: 'Heading 4'\n }\n ]\n },\n toolbar: {\n items: [\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'link',\n 'bulletedList',\n 'numberedList',\n '|',\n 'blockQuote',\n 'insertTable',\n 'undo',\n 'redo'\n ]\n },\n table: {\n contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']\n }\n }}\n onReady={onReady}\n onChange={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onChange, event, editor);\n }}\n onBlur={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onBlur, event, editor);\n }}\n onFocus={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onFocus, event, editor);\n }}\n onError={(event?: Event, editor?: ClassicEditor) => {\n eventHandlerWrapper(onError, event, editor);\n }}\n {...(id && { id })}\n {...(name && { name })}\n />\n </div>\n );\n};\n\nconst InsertCss = () => {\n const styleId = 'rich-test-editor-styles';\n if (!document.getElementById(styleId)) {\n const styleTag = document.createElement('style');\n styleTag.id = styleId;\n styleTag.type = 'text/css';\n styleTag.innerHTML = styles;\n document.body.appendChild(styleTag);\n }\n};\n\nexport default RichTextEditor;\n","import { createElement } from 'react';\nimport { FormGroup, ValidatedOptions } from '@patternfly/react-core';\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded = [\"children\", \"helperTextInvalid\", \"isValid\", \"helperText\", \"labelIcon\", \"onClick\"];\n\nvar FormGroupContainer = function FormGroupContainer(_ref) {\n var children = _ref.children,\n helperTextInvalid = _ref.helperTextInvalid,\n isValid = _ref.isValid,\n helperText = _ref.helperText,\n labelIcon = _ref.labelIcon,\n onClick = _ref.onClick,\n rest = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n return createElement(FormGroup, Object.assign({\n className: 'form-group',\n helperTextInvalid: helperTextInvalid,\n helperText: helperText,\n validated: isValid ? ValidatedOptions[\"default\"] : ValidatedOptions.error\n }, labelIcon && {\n labelIcon: labelIcon\n }, onClick && {\n onClick: onClick\n }, rest), children);\n};\n\nexport { FormGroupContainer };\n","import * as React from 'react';\nimport { FormGroupContainer } from '@rhc-shared-components/form-group-container';\nimport { useField, useFormikContext } from 'formik';\nimport { ValidatedOptions } from '@patternfly/react-core';\nimport RichTextEditor from './RichTextEditor';\n\nexport interface RichTextEditorFormComponentProps {\n name: string;\n label: string;\n disabled?: boolean;\n isRequired?: boolean;\n placeholder?: string;\n ariaLabel?: string;\n helperText?: string;\n maxItems?: number;\n maxHeight?: string | number;\n}\n\nconst RichTextEditorFormComponent: React.FC<RichTextEditorFormComponentProps> =\n ({\n label,\n isRequired,\n ariaLabel = 'Enter text',\n placeholder,\n helperText,\n maxItems,\n maxHeight,\n disabled,\n ...rest\n }) => {\n const [, meta] = useField({ name: rest.name });\n const { value } = meta;\n const editorRef = React.useRef(null);\n const { isSubmitting, setFieldValue, validateField } = useFormikContext();\n return (\n <FormGroupContainer\n validated={\n meta.error ? ValidatedOptions.error : ValidatedOptions.default\n }\n onClick={() => {\n if (editorRef) {\n // @ts-ignore\n editorRef.current.editing.view.focus();\n }\n }}\n fieldId={rest.name}\n helperTextInvalid={meta.error}\n isRequired={isRequired}\n label={label}\n helperText={helperText}\n >\n <RichTextEditor\n value={value}\n id={rest.name}\n name={rest.name}\n onReady={(editor) => {\n editorRef.current = editor;\n }}\n disabled={disabled || isSubmitting}\n onChange={(data) => {\n setFieldValue(rest.name, data);\n validateField(rest.name);\n }}\n onBlur={(data) => {\n setFieldValue(rest.name, data);\n validateField(rest.name);\n }}\n />\n </FormGroupContainer>\n );\n };\n\nexport default RichTextEditorFormComponent;\n"],"names":["RichTextEditor","value","disabled","onReady","onChange","onError","onBlur","onFocus","id","name","eventHandlerWrapper","handler","event","editor","getData","InsertCss","React","className","CKEditor","ClassicEditor","data","config","heading","options","model","title","view","toolbar","items","table","contentToolbar","styleId","document","getElementById","styleTag","createElement","type","innerHTML","styles","body","appendChild","_objectWithoutPropertiesLoose","source","excluded","target","sourceKeys","Object","keys","key","i","length","indexOf","_excluded","FormGroupContainer","_ref","children","helperTextInvalid","isValid","helperText","labelIcon","onClick","rest","FormGroup","assign","validated","ValidatedOptions","error","RichTextEditorFormComponent","label","isRequired","ariaLabel","meta","useField","editorRef","useRef","isSubmitting","setFieldValue","validateField","useFormikContext","default","current","editing","focus","fieldId"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhc-shared-components/rich-text-editor",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"description": "WYSWYG Editor for Red Hat Certified Apps",
|
|
5
5
|
"author": "gautamkrishnar",
|
|
6
6
|
"license": "MIT",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react": "^16.13.1",
|
|
77
77
|
"react-dom": "^16.13.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "ab1bcb8239c03b865f7b9e06bb1c13dd841d5002"
|
|
80
80
|
}
|