@pega/cosmos-react-rte 5.0.0-dev.11.0 → 5.0.0-dev.12.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":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;AA0DvE,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAmIpC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -33,26 +33,9 @@ StyledTextSelect.defaultProps = defaultThemeProp;
|
|
|
33
33
|
const StyledSelectMenu = styled.div `
|
|
34
34
|
min-width: 10rem;
|
|
35
35
|
`;
|
|
36
|
-
const textMapping = {
|
|
37
|
-
paragraph: 'Normal',
|
|
38
|
-
'heading-1': 'Heading 1',
|
|
39
|
-
'heading-2': 'Heading 2',
|
|
40
|
-
'heading-3': 'Heading 3',
|
|
41
|
-
'heading-4': 'Heading 4',
|
|
42
|
-
'': 'Normal'
|
|
43
|
-
};
|
|
44
36
|
const getTextCommand = (num, osx) => {
|
|
45
37
|
return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
|
|
46
38
|
};
|
|
47
|
-
const getTextFormats = (osx) => {
|
|
48
|
-
return [
|
|
49
|
-
{ text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },
|
|
50
|
-
{ text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },
|
|
51
|
-
{ text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },
|
|
52
|
-
{ text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },
|
|
53
|
-
{ text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }
|
|
54
|
-
];
|
|
55
|
-
};
|
|
56
39
|
const TextSelect = ({ osx }) => {
|
|
57
40
|
const t = useI18n();
|
|
58
41
|
const { disabled } = useRTEContext();
|
|
@@ -64,8 +47,34 @@ const TextSelect = ({ osx }) => {
|
|
|
64
47
|
const menuRef = useRef(null);
|
|
65
48
|
const editor = useSlate();
|
|
66
49
|
const textFormats = useCallback(() => {
|
|
67
|
-
return
|
|
50
|
+
return [
|
|
51
|
+
{ text: t('rte_heading_style_normal'), subText: getTextCommand(0, osx), type: 'paragraph' },
|
|
52
|
+
{
|
|
53
|
+
text: t('rte_heading_style_heading_1'),
|
|
54
|
+
subText: getTextCommand(1, osx),
|
|
55
|
+
type: 'heading-1'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
text: t('rte_heading_style_heading_2'),
|
|
59
|
+
subText: getTextCommand(2, osx),
|
|
60
|
+
type: 'heading-2'
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
text: t('rte_heading_style_heading_3'),
|
|
64
|
+
subText: getTextCommand(3, osx),
|
|
65
|
+
type: 'heading-3'
|
|
66
|
+
},
|
|
67
|
+
{ text: t('rte_heading_style_heading_4'), subText: getTextCommand(4, osx), type: 'heading-4' }
|
|
68
|
+
];
|
|
68
69
|
}, [osx])();
|
|
70
|
+
const textMapping = {
|
|
71
|
+
paragraph: t('rte_heading_style_normal'),
|
|
72
|
+
'heading-1': t('rte_heading_style_heading_1'),
|
|
73
|
+
'heading-2': t('rte_heading_style_heading_2'),
|
|
74
|
+
'heading-3': t('rte_heading_style_heading_3'),
|
|
75
|
+
'heading-4': t('rte_heading_style_heading_4'),
|
|
76
|
+
'': t('rte_heading_style_normal')
|
|
77
|
+
};
|
|
69
78
|
useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
|
|
70
79
|
setOpen(false);
|
|
71
80
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useCallback } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport { Transforms } from 'slate';\nimport type { Element } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst textMapping: { [key: string]: string } = {\n paragraph: 'Normal',\n 'heading-1': 'Heading 1',\n 'heading-2': 'Heading 2',\n 'heading-3': 'Heading 3',\n 'heading-4': 'Heading 4',\n '': 'Normal'\n};\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst getTextFormats = (\n osx: boolean\n): { text: string; subText: string; type: Element['type'] }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return getTextFormats(osx);\n }, [osx])();\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current || undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
|
|
1
|
+
{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useCallback } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport { Transforms } from 'slate';\nimport type { Element } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return [\n { text: t('rte_heading_style_normal'), subText: getTextCommand(0, osx), type: 'paragraph' },\n {\n text: t('rte_heading_style_heading_1'),\n subText: getTextCommand(1, osx),\n type: 'heading-1'\n },\n {\n text: t('rte_heading_style_heading_2'),\n subText: getTextCommand(2, osx),\n type: 'heading-2'\n },\n {\n text: t('rte_heading_style_heading_3'),\n subText: getTextCommand(3, osx),\n type: 'heading-3'\n },\n { text: t('rte_heading_style_heading_4'), subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n }, [osx])();\n\n const textMapping: { [key: string]: string } = {\n paragraph: t('rte_heading_style_normal'),\n 'heading-1': t('rte_heading_style_heading_1'),\n 'heading-2': t('rte_heading_style_heading_2'),\n 'heading-3': t('rte_heading_style_heading_3'),\n 'heading-4': t('rte_heading_style_heading_4'),\n '': t('rte_heading_style_normal')\n };\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current || undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.12.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"build": "tsc -b tsconfig.build.json"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
21
|
+
"@pega/cosmos-react-core": "5.0.0-dev.12.0",
|
|
22
22
|
"@popperjs/core": "^2.11.6",
|
|
23
23
|
"@types/marked": "^4.0.2",
|
|
24
24
|
"@types/parse5": "^6.0.0",
|