@pega/cosmos-react-rte 2.1.2 → 3.0.0-dev.2.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,
|
|
1
|
+
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAiB1D,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAuQ1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -6,7 +6,7 @@ import 'tinymce/plugins/advlist';
|
|
|
6
6
|
import 'tinymce/plugins/lists';
|
|
7
7
|
import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
|
|
8
8
|
import styled, { css } from 'styled-components';
|
|
9
|
-
import { createUID, FormControl, FormField, useAfterInitialEffect,
|
|
9
|
+
import { createUID, FormControl, FormField, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
10
10
|
import StyledRichTextEditor, { StyledEditorContainer, StyledRichTextFormField, StyledHtml } from '../RichTextEditor/RichTextEditor.styles';
|
|
11
11
|
import Toolbar from './Toolbar/Toolbar';
|
|
12
12
|
import EditorContext from './Editor.context';
|
|
@@ -36,7 +36,6 @@ const Editor = forwardRef((props, ref) => {
|
|
|
36
36
|
const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);
|
|
37
37
|
const formFieldRef = useRef(null);
|
|
38
38
|
const value = useRef(defaultValue);
|
|
39
|
-
const editorHasFocus = useFocusWithin([formFieldRef.current]);
|
|
40
39
|
useImperativeHandle(editorRef, () => ({
|
|
41
40
|
focus: () => {
|
|
42
41
|
editor?.focus();
|
|
@@ -123,16 +122,30 @@ const Editor = forwardRef((props, ref) => {
|
|
|
123
122
|
useEffect(() => {
|
|
124
123
|
if (!editor || initialized.current)
|
|
125
124
|
return;
|
|
126
|
-
onInit?.(editor);
|
|
127
125
|
initialized.current = true;
|
|
126
|
+
onInit?.(editor);
|
|
127
|
+
}, [editor, onInit]);
|
|
128
|
+
useEffect(() => {
|
|
129
|
+
if (!editor)
|
|
130
|
+
return;
|
|
128
131
|
const onEditorChange = () => {
|
|
129
132
|
setShowPlaceholder(!editor?.getContent({ format: 'text' }));
|
|
130
133
|
};
|
|
134
|
+
const onEditorFocus = () => {
|
|
135
|
+
onFocus?.();
|
|
136
|
+
};
|
|
137
|
+
const onEditorBlur = () => {
|
|
138
|
+
onBlur?.();
|
|
139
|
+
};
|
|
131
140
|
editor.on('input', onEditorChange);
|
|
141
|
+
editor.on('focus', onEditorFocus);
|
|
142
|
+
editor.on('blur', onEditorBlur);
|
|
132
143
|
return () => {
|
|
133
144
|
editor.off('input', onEditorChange);
|
|
145
|
+
editor.off('focus', onEditorFocus);
|
|
146
|
+
editor.off('blur', onEditorBlur);
|
|
134
147
|
};
|
|
135
|
-
}, [editor,
|
|
148
|
+
}, [editor, onFocus, onBlur]);
|
|
136
149
|
useAfterInitialEffect(() => {
|
|
137
150
|
editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
|
|
138
151
|
}, [readOnly, disabled]);
|
|
@@ -159,14 +172,6 @@ const Editor = forwardRef((props, ref) => {
|
|
|
159
172
|
editor?.off('drop', onEditorDrop);
|
|
160
173
|
};
|
|
161
174
|
}, [editor]);
|
|
162
|
-
useAfterInitialEffect(() => {
|
|
163
|
-
if (editorHasFocus) {
|
|
164
|
-
onFocus?.();
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
onBlur?.();
|
|
168
|
-
}
|
|
169
|
-
}, [editorHasFocus, onFocus, onBlur]);
|
|
170
175
|
const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
|
|
171
176
|
return (_jsx(EditorContext.Provider, { value: { addImage, editor: editor || {} }, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: renderToolbar, label:
|
|
172
177
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import tinymce, { Editor as TinymceEditor } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport {\n FC,\n forwardRef,\n PropsWithoutRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n useImperativeHandle,\n FocusEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n createUID,\n FormControl,\n FormField,\n ForwardProps,\n useAfterInitialEffect,\n useFocusWithin,\n useTheme,\n useUID,\n useI18n,\n useConsolidatedRef,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField,\n StyledHtml\n} from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport { EditorProps, EditorState } from './Editor.types';\n\nconst StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(({ theme, showPlaceholder }) => {\n return css`\n ${showPlaceholder &&\n css`\n ::before {\n color: ${theme.base.colors.slate.medium};\n position: absolute;\n content: attr(data-mce-placeholder);\n }\n `}\n `;\n});\n\nStyledInnerEditor.defaultProps = defaultThemeProp;\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EditorProps>, ref: EditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const [editor, setEditor] = useState<TinymceEditor>();\n const t = useI18n();\n const uid = useUID();\n const labelId = useUID();\n const editorRef = useConsolidatedRef(ref);\n const initialized = useRef(false);\n\n const {\n id = uid,\n toolbar = [],\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n onImageAdded,\n onInit,\n defaultValue,\n customComponents = [],\n height = { min: minHeight },\n customActions,\n placeholder,\n ...restProps\n } = props;\n\n const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);\n const formFieldRef = useRef<HTMLElement>(null);\n const value = useRef(defaultValue);\n const editorHasFocus = useFocusWithin([formFieldRef.current]);\n\n useImperativeHandle<any, EditorState>(\n editorRef,\n () => ({\n focus: () => {\n editor?.focus();\n },\n getPlainText: () => {\n return editor ? editor?.getContent({ format: 'text' }) : '';\n },\n getRichText: () => {\n return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';\n },\n getHtml: () => {\n return editor ? editor?.getContent({ format: 'html' }) : '';\n },\n clear: () => {\n editor?.setContent('');\n },\n appendImage: ({ src, alt }, imageId) => {\n if (editor) {\n const editorEl = editor.getElement();\n const imageEl = editorEl.querySelector(`#${imageId}`);\n if (imageEl) {\n imageEl.setAttribute('src', src);\n imageEl.setAttribute('alt', alt);\n }\n }\n },\n insertText: (text: string) => {\n editor?.insertContent(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n editor?.setContent('');\n }\n editor?.insertContent(html);\n },\n getEditor: () => {\n return editor;\n }\n }),\n [editor]\n );\n\n useLayoutEffect(() => {\n tinymce\n .init({\n readonly: readOnly || disabled,\n skin: false,\n selector: `#${id}`,\n toolbar: false,\n menubar: false,\n inline: true,\n plugins: 'lists advlist',\n lists_indent_on_tab: true,\n icons: '',\n placeholder,\n init_instance_callback: () => {\n customComponents.forEach(comp => {\n if (!customElements.get(comp.name)) {\n customElements.define(comp.name, comp.customElement);\n }\n });\n },\n custom_elements: customComponents.reduce((prev, { name }, i) => {\n return i === 0 ? name : `${prev},${name}`;\n }, ''),\n setup: editorSettings => {\n getTextFormats().forEach((format, i) => {\n editorSettings.addShortcut(\n `meta+alt+${i}`,\n `${t('rte_change_text_format')} ${format.text}`,\n () => {\n editorSettings.execCommand('FormatBlock', false, format.type);\n }\n );\n });\n editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n editorSettings.execCommand('InsertUnorderedList');\n });\n editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n editorSettings.execCommand('Indent');\n });\n editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n editorSettings.execCommand('Outdent');\n });\n }\n })\n .then(tinymceEditors => {\n setEditor(tinymceEditors[0]);\n });\n }, []);\n\n useEffect(() => {\n if (!editor || initialized.current) return;\n onInit?.(editor);\n initialized.current = true;\n const onEditorChange = () => {\n setShowPlaceholder(!editor?.getContent({ format: 'text' }));\n };\n editor.on('input', onEditorChange);\n return () => {\n editor.off('input', onEditorChange);\n };\n }, [editor, onInit]);\n\n useAfterInitialEffect(() => {\n editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');\n }, [readOnly, disabled]);\n\n const addImage = (image: File) => {\n if (editor) {\n const imageId = createUID();\n editor.insertContent(`<img src='' id='${imageId}' style=\"max-width: 100%;\"/>`);\n onImageAdded?.(image, imageId);\n }\n };\n\n useEffect(() => {\n const onEditorDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n editor?.on('drop', onEditorDrop);\n return () => {\n editor?.off('drop', onEditorDrop);\n };\n }, [editor]);\n\n useAfterInitialEffect(() => {\n if (editorHasFocus) {\n onFocus?.();\n } else {\n onBlur?.();\n }\n }, [editorHasFocus, onFocus, onBlur]);\n\n const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n return (\n <EditorContext.Provider value={{ addImage, editor: editor || ({} as TinymceEditor) }}>\n <FormField\n as={StyledRichTextFormField}\n toolbar={renderToolbar}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span\n onClick={() => {\n editor?.focus();\n }}\n >\n {label}\n </span>\n }\n labelFor=''\n labelId={labelId}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n editor?.focus();\n }\n }}\n ref={formFieldRef}\n tabIndex={disabled ? -1 : undefined}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={renderToolbar}\n >\n <StyledEditorContainer\n readOnly={readOnly}\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n toolbar={renderToolbar}\n containerHeight={height}\n >\n <StyledHtml\n id={id}\n style={{ outline: 'none', border: 'none' }}\n dangerouslySetInnerHTML={{ __html: value.current || '' }}\n aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n as={StyledInnerEditor}\n showPlaceholder={showPlaceholder}\n aria-labelledby={labelId}\n role='textbox'\n />\n </StyledEditorContainer>\n {renderToolbar && (\n <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n )}\n </FormControl>\n </FormField>\n </EditorContext.Provider>\n );\n }\n);\n\nexport default Editor;\n"]}
|
|
1
|
+
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import tinymce, { Editor as TinymceEditor } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport {\n FC,\n forwardRef,\n PropsWithoutRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n useImperativeHandle,\n FocusEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n createUID,\n FormControl,\n FormField,\n ForwardProps,\n useAfterInitialEffect,\n useTheme,\n useUID,\n useI18n,\n useConsolidatedRef,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField,\n StyledHtml\n} from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport { EditorProps, EditorState } from './Editor.types';\n\nconst StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(({ theme, showPlaceholder }) => {\n return css`\n ${showPlaceholder &&\n css`\n ::before {\n color: ${theme.base.colors.slate.medium};\n position: absolute;\n content: attr(data-mce-placeholder);\n }\n `}\n `;\n});\n\nStyledInnerEditor.defaultProps = defaultThemeProp;\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EditorProps>, ref: EditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const [editor, setEditor] = useState<TinymceEditor>();\n const t = useI18n();\n const uid = useUID();\n const labelId = useUID();\n const editorRef = useConsolidatedRef(ref);\n const initialized = useRef(false);\n\n const {\n id = uid,\n toolbar = [],\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n onImageAdded,\n onInit,\n defaultValue,\n customComponents = [],\n height = { min: minHeight },\n customActions,\n placeholder,\n ...restProps\n } = props;\n\n const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);\n const formFieldRef = useRef<HTMLElement>(null);\n const value = useRef(defaultValue);\n\n useImperativeHandle<any, EditorState>(\n editorRef,\n () => ({\n focus: () => {\n editor?.focus();\n },\n getPlainText: () => {\n return editor ? editor?.getContent({ format: 'text' }) : '';\n },\n getRichText: () => {\n return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';\n },\n getHtml: () => {\n return editor ? editor?.getContent({ format: 'html' }) : '';\n },\n clear: () => {\n editor?.setContent('');\n },\n appendImage: ({ src, alt }, imageId) => {\n if (editor) {\n const editorEl = editor.getElement();\n const imageEl = editorEl.querySelector(`#${imageId}`);\n if (imageEl) {\n imageEl.setAttribute('src', src);\n imageEl.setAttribute('alt', alt);\n }\n }\n },\n insertText: (text: string) => {\n editor?.insertContent(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n editor?.setContent('');\n }\n editor?.insertContent(html);\n },\n getEditor: () => {\n return editor;\n }\n }),\n [editor]\n );\n\n useLayoutEffect(() => {\n tinymce\n .init({\n readonly: readOnly || disabled,\n skin: false,\n selector: `#${id}`,\n toolbar: false,\n menubar: false,\n inline: true,\n plugins: 'lists advlist',\n lists_indent_on_tab: true,\n icons: '',\n placeholder,\n init_instance_callback: () => {\n customComponents.forEach(comp => {\n if (!customElements.get(comp.name)) {\n customElements.define(comp.name, comp.customElement);\n }\n });\n },\n custom_elements: customComponents.reduce((prev, { name }, i) => {\n return i === 0 ? name : `${prev},${name}`;\n }, ''),\n setup: editorSettings => {\n getTextFormats().forEach((format, i) => {\n editorSettings.addShortcut(\n `meta+alt+${i}`,\n `${t('rte_change_text_format')} ${format.text}`,\n () => {\n editorSettings.execCommand('FormatBlock', false, format.type);\n }\n );\n });\n editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n editorSettings.execCommand('InsertUnorderedList');\n });\n editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n editorSettings.execCommand('Indent');\n });\n editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n editorSettings.execCommand('Outdent');\n });\n }\n })\n .then(tinymceEditors => {\n setEditor(tinymceEditors[0]);\n });\n }, []);\n\n useEffect(() => {\n if (!editor || initialized.current) return;\n initialized.current = true;\n onInit?.(editor);\n }, [editor, onInit]);\n\n useEffect(() => {\n if (!editor) return;\n const onEditorChange = () => {\n setShowPlaceholder(!editor?.getContent({ format: 'text' }));\n };\n const onEditorFocus = () => {\n onFocus?.();\n };\n const onEditorBlur = () => {\n onBlur?.();\n };\n editor.on('input', onEditorChange);\n editor.on('focus', onEditorFocus);\n editor.on('blur', onEditorBlur);\n return () => {\n editor.off('input', onEditorChange);\n editor.off('focus', onEditorFocus);\n editor.off('blur', onEditorBlur);\n };\n }, [editor, onFocus, onBlur]);\n\n useAfterInitialEffect(() => {\n editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');\n }, [readOnly, disabled]);\n\n const addImage = (image: File) => {\n if (editor) {\n const imageId = createUID();\n editor.insertContent(`<img src='' id='${imageId}' style=\"max-width: 100%;\"/>`);\n onImageAdded?.(image, imageId);\n }\n };\n\n useEffect(() => {\n const onEditorDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n editor?.on('drop', onEditorDrop);\n return () => {\n editor?.off('drop', onEditorDrop);\n };\n }, [editor]);\n\n const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n return (\n <EditorContext.Provider value={{ addImage, editor: editor || ({} as TinymceEditor) }}>\n <FormField\n as={StyledRichTextFormField}\n toolbar={renderToolbar}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span\n onClick={() => {\n editor?.focus();\n }}\n >\n {label}\n </span>\n }\n labelFor=''\n labelId={labelId}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n editor?.focus();\n }\n }}\n ref={formFieldRef}\n tabIndex={disabled ? -1 : undefined}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={renderToolbar}\n >\n <StyledEditorContainer\n readOnly={readOnly}\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n toolbar={renderToolbar}\n containerHeight={height}\n >\n <StyledHtml\n id={id}\n style={{ outline: 'none', border: 'none' }}\n dangerouslySetInnerHTML={{ __html: value.current || '' }}\n aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n as={StyledInnerEditor}\n showPlaceholder={showPlaceholder}\n aria-labelledby={labelId}\n role='textbox'\n />\n </StyledEditorContainer>\n {renderToolbar && (\n <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n )}\n </FormControl>\n </FormField>\n </EditorContext.Provider>\n );\n }\n);\n\nexport default Editor;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-dev.2.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.2.0",
|
|
24
24
|
"@popperjs/core": "^2.11.0",
|
|
25
25
|
"dompurify": "^2.3.1",
|
|
26
26
|
"marked": "^2.0.3",
|
|
@@ -35,14 +35,13 @@
|
|
|
35
35
|
"tinymce": "^5.10.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@storybook/addon-a11y": "^6.4.
|
|
39
|
-
"@storybook/addon-actions": "^6.4.
|
|
40
|
-
"@storybook/addon-
|
|
41
|
-
"@storybook/addon-
|
|
42
|
-
"@storybook/
|
|
43
|
-
"@storybook/
|
|
44
|
-
"@storybook/
|
|
45
|
-
"@storybook/theming": "^6.4.8",
|
|
38
|
+
"@storybook/addon-a11y": "^6.4.12",
|
|
39
|
+
"@storybook/addon-actions": "^6.4.12",
|
|
40
|
+
"@storybook/addon-storysource": "^6.4.12",
|
|
41
|
+
"@storybook/addon-toolbars": "^6.4.12",
|
|
42
|
+
"@storybook/addons": "^6.4.12",
|
|
43
|
+
"@storybook/react": "^6.4.12",
|
|
44
|
+
"@storybook/theming": "^6.4.12",
|
|
46
45
|
"@types/dompurify": "^2.2.3",
|
|
47
46
|
"@types/marked": "2.0.2",
|
|
48
47
|
"@types/parse5": "^6.0.0",
|