@bbl-digital/snorre 4.0.29 → 4.0.30
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/bundle.js +8 -10
- package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js +16 -0
- package/esm/core/CheckboxController/index.js +22 -0
- package/esm/core/Datepicker/yearMonthForm.js +56 -0
- package/esm/core/EditorOld/config.js +69 -0
- package/esm/core/EditorOld/index.js +147 -0
- package/esm/core/EditorOld/styles.js +65 -0
- package/esm/core/ImageCarousel/index.js +70 -0
- package/esm/core/ImageCarousel/styles.js +58 -0
- package/esm/enums/ModifierKey.js +13 -0
- package/esm/icons/General/IconBellFilled.js +1 -1
- package/esm/icons/General/IconBellOutline.js +7 -9
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts +7 -0
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts.map +1 -0
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.js +16 -0
- package/lib/core/CheckboxController/index.d.ts +1 -0
- package/lib/core/CheckboxController/index.d.ts.map +1 -0
- package/lib/core/CheckboxController/index.js +22 -0
- package/lib/core/Datepicker/yearMonthForm.d.ts +10 -0
- package/lib/core/Datepicker/yearMonthForm.d.ts.map +1 -0
- package/lib/core/Datepicker/yearMonthForm.js +56 -0
- package/lib/core/EditorOld/config.d.ts +56 -0
- package/lib/core/EditorOld/config.d.ts.map +1 -0
- package/lib/core/EditorOld/config.js +69 -0
- package/lib/core/EditorOld/index.d.ts +39 -0
- package/lib/core/EditorOld/index.d.ts.map +1 -0
- package/lib/core/EditorOld/index.js +147 -0
- package/lib/core/EditorOld/styles.d.ts +23 -0
- package/lib/core/EditorOld/styles.d.ts.map +1 -0
- package/lib/core/EditorOld/styles.js +65 -0
- package/lib/core/ImageCarousel/index.d.ts +11 -0
- package/lib/core/ImageCarousel/index.d.ts.map +1 -0
- package/lib/core/ImageCarousel/index.js +70 -0
- package/lib/core/ImageCarousel/styles.d.ts +26 -0
- package/lib/core/ImageCarousel/styles.d.ts.map +1 -0
- package/lib/core/ImageCarousel/styles.js +58 -0
- package/lib/enums/ModifierKey.d.ts +12 -0
- package/lib/enums/ModifierKey.d.ts.map +1 -0
- package/lib/enums/ModifierKey.js +13 -0
- package/lib/icons/General/IconBellFilled.js +1 -1
- package/lib/icons/General/IconBellOutline.d.ts.map +1 -1
- package/lib/icons/General/IconBellOutline.js +7 -9
- package/package.json +1 -1
- package/esm/core/BoxedTable/TableBody/index.js +0 -10
- package/esm/core/BoxedTable/TableBody/styles.js +0 -16
- package/lib/core/BoxedTable/TableBody/index.d.ts +0 -7
- package/lib/core/BoxedTable/TableBody/index.d.ts.map +0 -1
- package/lib/core/BoxedTable/TableBody/index.js +0 -10
- package/lib/core/BoxedTable/TableBody/styles.d.ts +0 -6
- package/lib/core/BoxedTable/TableBody/styles.d.ts.map +0 -1
- package/lib/core/BoxedTable/TableBody/styles.js +0 -16
@@ -0,0 +1,13 @@
|
|
1
|
+
export let ModifierKey;
|
2
|
+
|
3
|
+
(function (ModifierKey) {
|
4
|
+
ModifierKey["enter"] = "Enter";
|
5
|
+
ModifierKey["tab"] = "Tab";
|
6
|
+
ModifierKey["space"] = " ";
|
7
|
+
ModifierKey["escape"] = "Escape";
|
8
|
+
ModifierKey["shift"] = "Shift";
|
9
|
+
ModifierKey["right"] = "ArrowRight";
|
10
|
+
ModifierKey["left"] = "ArrowLeft";
|
11
|
+
ModifierKey["up"] = "ArrowUp";
|
12
|
+
ModifierKey["down"] = "ArrowDown";
|
13
|
+
})(ModifierKey || (ModifierKey = {}));
|
@@ -5,7 +5,7 @@ const IconBellFilled = props => /*#__PURE__*/_jsx("svg", {
|
|
5
5
|
viewBox: "0 0 24 24",
|
6
6
|
...props,
|
7
7
|
children: /*#__PURE__*/_jsx("path", {
|
8
|
-
d: "
|
8
|
+
d: "M10.01 20.76c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99H10.01ZM12 1.25c-.83 0-1.5.67-1.5 1.5v1.17C7.36 4.6 5 7.4 5 10.75v6l-2 2v1h18v-1l-2-2v-6c0-3.35-2.36-6.15-5.5-6.83V2.75C13.5 1.92 12.83 1.25 12 1.25Z"
|
9
9
|
})
|
10
10
|
});
|
11
11
|
export default withIcon('IconBellFilled')(IconBellFilled);
|
@@ -1,13 +1,11 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import withIcon from '../withIcon';
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
const IconBellOutline = props => {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
});
|
12
|
-
};
|
4
|
+
const IconBellOutline = props => /*#__PURE__*/_jsx("svg", {
|
5
|
+
viewBox: "0 0 24 24",
|
6
|
+
...props,
|
7
|
+
children: /*#__PURE__*/_jsx("path", {
|
8
|
+
d: "M10.01 20.76C10.01 21.86 10.9 22.75 12 22.75 13.1 22.75 13.99 21.86 13.99 20.76L10.01 20.76ZM12 5.75C14.76 5.75 17 7.99 17 10.75L17 17.75 7 17.75 7 10.75C7 7.99 9.24 5.75 12 5.75ZM12 1.25C11.17 1.25 10.5 1.92 10.5 2.75L10.5 3.92C7.36 4.6 5 7.4 5 10.75L5 16.75 3 18.75 3 19.75 21 19.75 21 18.75 19 16.75 19 10.75C19 7.4 16.64 4.6 13.5 3.92L13.5 2.75C13.5 1.92 12.83 1.25 12 1.25Z"
|
9
|
+
})
|
10
|
+
});
|
13
11
|
export default withIcon('IconBellOutline')(IconBellOutline);
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useHandleOptionsHeight.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/utils/useHandleOptionsHeight.ts"],"names":[],"mappings":";AAEA,QAAA,MAAM,sBAAsB;;;CAW3B,CAAA;AAED,eAAe,sBAAsB,CAAA"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { createRef, useEffect, useState } from 'react';
|
2
|
+
|
3
|
+
const useHandleOptionsHeight = () => {
|
4
|
+
const [optionsHeight, setOptionsHeight] = useState(0);
|
5
|
+
const optionsRef = /*#__PURE__*/createRef();
|
6
|
+
useEffect(() => {
|
7
|
+
const rect = optionsRef.current?.getBoundingClientRect();
|
8
|
+
setOptionsHeight(rect?.height || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
|
9
|
+
}, [optionsRef.current]);
|
10
|
+
return {
|
11
|
+
optionsHeight,
|
12
|
+
optionsRef
|
13
|
+
};
|
14
|
+
};
|
15
|
+
|
16
|
+
export default useHandleOptionsHeight;
|
@@ -0,0 +1 @@
|
|
1
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CheckboxController/index.tsx"],"names":[],"mappings":""}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// import React from 'react'
|
2
|
+
// interface IProps {
|
3
|
+
// /** Function children in which CheckBox components can be rendered. */
|
4
|
+
// children: (component: React.ComponentType, values: string[], id: string) => void;
|
5
|
+
// /** Unique name of the field. */
|
6
|
+
// name: string,;
|
7
|
+
// /** Callback that is triggered when a child CheckBox is clicked. */
|
8
|
+
// onChange: (values: string[], event: React.ChangeEvent<HTMLInputElement>) => void;
|
9
|
+
// /** Default checked values. */
|
10
|
+
// value?: string,[];
|
11
|
+
// }
|
12
|
+
// const CheckboxController: React.FC<IProps> = props => {
|
13
|
+
// const type: string = 'checkbox'
|
14
|
+
// const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
15
|
+
// if (props.onChange) {
|
16
|
+
// props.onChange(e.target.checked)
|
17
|
+
// }
|
18
|
+
// }
|
19
|
+
// return (
|
20
|
+
// )
|
21
|
+
// }
|
22
|
+
// export default Checkbox
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"yearMonthForm.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Datepicker/yearMonthForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,MAAM;IACd,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAmDnC,CAAA;AAED,eAAe,aAAa,CAAA"}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { MONTHS } from '../../utils/dates';
|
3
|
+
import { StyledSelect, Div } from './styles';
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
|
+
|
7
|
+
const YearMonthForm = ({
|
8
|
+
onChange,
|
9
|
+
date,
|
10
|
+
fromDate,
|
11
|
+
toDate
|
12
|
+
}) => {
|
13
|
+
const months = MONTHS;
|
14
|
+
const years = [];
|
15
|
+
|
16
|
+
for (let i = fromDate.getFullYear(); i <= toDate.getFullYear(); i += 1) {
|
17
|
+
years.push(i);
|
18
|
+
}
|
19
|
+
|
20
|
+
const changeMonth = e => {
|
21
|
+
let newDate = date;
|
22
|
+
newDate.setMonth(e.target.value);
|
23
|
+
if (newDate > toDate) newDate = toDate;
|
24
|
+
onChange(newDate);
|
25
|
+
};
|
26
|
+
|
27
|
+
const changeYear = e => {
|
28
|
+
let newDate = date;
|
29
|
+
newDate.setFullYear(e.target.value);
|
30
|
+
if (newDate > toDate) newDate = toDate;
|
31
|
+
onChange(newDate);
|
32
|
+
};
|
33
|
+
|
34
|
+
return /*#__PURE__*/_jsxs(Div, {
|
35
|
+
className: "DayPicker-Caption",
|
36
|
+
children: [/*#__PURE__*/_jsx(StyledSelect, {
|
37
|
+
name: "month",
|
38
|
+
onChange: changeMonth,
|
39
|
+
value: date.getMonth(),
|
40
|
+
children: months.map((month, i) => /*#__PURE__*/_jsx("option", {
|
41
|
+
value: i,
|
42
|
+
children: month
|
43
|
+
}, month))
|
44
|
+
}), /*#__PURE__*/_jsx(StyledSelect, {
|
45
|
+
name: "year",
|
46
|
+
onChange: changeYear,
|
47
|
+
value: date.getFullYear(),
|
48
|
+
children: years.map(year => /*#__PURE__*/_jsx("option", {
|
49
|
+
value: year,
|
50
|
+
children: year
|
51
|
+
}, year))
|
52
|
+
})]
|
53
|
+
});
|
54
|
+
};
|
55
|
+
|
56
|
+
export default YearMonthForm;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { ExtendedHTMLElement } from 'draft-convert';
|
2
|
+
export declare const basicToolbar: {
|
3
|
+
options: string[];
|
4
|
+
inline: {
|
5
|
+
options: string[];
|
6
|
+
};
|
7
|
+
};
|
8
|
+
export declare const richToolbar: {
|
9
|
+
options: string[];
|
10
|
+
inline: {
|
11
|
+
options: string[];
|
12
|
+
};
|
13
|
+
textAlign: {
|
14
|
+
options: string[];
|
15
|
+
};
|
16
|
+
blockType: {
|
17
|
+
inDropdown: boolean;
|
18
|
+
options: string[];
|
19
|
+
};
|
20
|
+
link: {
|
21
|
+
showOpenOptionOnHover: boolean;
|
22
|
+
defaultTargetOption: string;
|
23
|
+
options: string[];
|
24
|
+
};
|
25
|
+
};
|
26
|
+
export declare const htmlToEntity: (nodeName: string, node: ExtendedHTMLElement<DOMStringMap>, createEntity: any) => any;
|
27
|
+
export declare const getStrippedHtml: (html: string) => string;
|
28
|
+
export declare const editorLabels: {
|
29
|
+
'generic.add': string;
|
30
|
+
'generic.cancel': string;
|
31
|
+
'components.controls.inline.bold': string;
|
32
|
+
'components.controls.inline.italic': string;
|
33
|
+
'components.controls.inline.underline': string;
|
34
|
+
'components.controls.list.unordered': string;
|
35
|
+
'components.controls.list.ordered': string;
|
36
|
+
'components.controls.list.indent': string;
|
37
|
+
'components.controls.list.outdent': string;
|
38
|
+
'components.controls.textAlign.left': string;
|
39
|
+
'components.controls.textAlign.center': string;
|
40
|
+
'components.controls.textAlign.right': string;
|
41
|
+
'components.controls.textAlign.justify': string;
|
42
|
+
'components.controls.blocktype.normal': string;
|
43
|
+
'components.controls.blocktype.h1': string;
|
44
|
+
'components.controls.blocktype.h2': string;
|
45
|
+
'components.controls.blocktype.h3': string;
|
46
|
+
'components.controls.blocktype.h4': string;
|
47
|
+
'components.controls.blocktype.h5': string;
|
48
|
+
'components.controls.blocktype.h6': string;
|
49
|
+
'components.controls.link.linkTitle': string;
|
50
|
+
'components.controls.link.linkTarget': string;
|
51
|
+
'components.controls.link.linkTargetOption': string;
|
52
|
+
'components.controls.link.link': string;
|
53
|
+
'components.controls.link.unlink': string;
|
54
|
+
'components.controls.remove.remove': string;
|
55
|
+
};
|
56
|
+
//# sourceMappingURL=config.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/packages/core/EditorOld/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAEnD,eAAO,MAAM,YAAY;;;;;CAKxB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;CAiBvB,CAAA;AAED,eAAO,MAAM,YAAY,aACb,MAAM,QACV,oBAAoB,YAAY,CAAC,gBACzB,GAAG,QAKlB,CAAA;AAED,eAAO,MAAM,eAAe,SAAU,MAAM,WAE3C,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCxB,CAAA"}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
export const basicToolbar = {
|
2
|
+
options: ['inline', 'list'],
|
3
|
+
inline: {
|
4
|
+
options: ['bold', 'italic', 'underline']
|
5
|
+
}
|
6
|
+
};
|
7
|
+
export const richToolbar = {
|
8
|
+
options: ['blockType', 'inline', 'list', 'textAlign', 'link'],
|
9
|
+
inline: {
|
10
|
+
options: ['bold', 'italic', 'underline']
|
11
|
+
},
|
12
|
+
textAlign: {
|
13
|
+
options: ['left', 'center', 'right', 'justify']
|
14
|
+
},
|
15
|
+
blockType: {
|
16
|
+
inDropdown: true,
|
17
|
+
options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']
|
18
|
+
},
|
19
|
+
link: {
|
20
|
+
showOpenOptionOnHover: true,
|
21
|
+
defaultTargetOption: '_blank',
|
22
|
+
options: ['link', 'unlink']
|
23
|
+
}
|
24
|
+
};
|
25
|
+
export const htmlToEntity = (nodeName, node, createEntity) => {
|
26
|
+
if (nodeName === 'a') {
|
27
|
+
return createEntity('LINK', 'MUTABLE', {
|
28
|
+
url: node.href
|
29
|
+
});
|
30
|
+
}
|
31
|
+
};
|
32
|
+
export const getStrippedHtml = html => {
|
33
|
+
return html.replace(/<img[^>]*>/g, '');
|
34
|
+
};
|
35
|
+
export const editorLabels = {
|
36
|
+
// Generic
|
37
|
+
'generic.add': 'Legg til',
|
38
|
+
'generic.cancel': 'Avbryt',
|
39
|
+
// Inline
|
40
|
+
'components.controls.inline.bold': 'Fet',
|
41
|
+
'components.controls.inline.italic': 'Kursiv',
|
42
|
+
'components.controls.inline.underline': 'Understrek',
|
43
|
+
// List
|
44
|
+
'components.controls.list.unordered': 'Punktliste',
|
45
|
+
'components.controls.list.ordered': 'Nummerliste',
|
46
|
+
'components.controls.list.indent': 'Innrykk',
|
47
|
+
'components.controls.list.outdent': 'Utrykk',
|
48
|
+
// Text align
|
49
|
+
'components.controls.textAlign.left': 'Venstrejuster',
|
50
|
+
'components.controls.textAlign.center': 'Midtstill',
|
51
|
+
'components.controls.textAlign.right': 'Høyrejuster',
|
52
|
+
'components.controls.textAlign.justify': 'Blokkjuster',
|
53
|
+
// Block type
|
54
|
+
'components.controls.blocktype.normal': 'Avsnitt',
|
55
|
+
'components.controls.blocktype.h1': 'Overskrift 1',
|
56
|
+
'components.controls.blocktype.h2': 'Overskrift 2',
|
57
|
+
'components.controls.blocktype.h3': 'Overskrift 3',
|
58
|
+
'components.controls.blocktype.h4': 'Overskrift 4',
|
59
|
+
'components.controls.blocktype.h5': 'Overskrift 5',
|
60
|
+
'components.controls.blocktype.h6': 'Overskrift 6',
|
61
|
+
// Link
|
62
|
+
'components.controls.link.linkTitle': 'Tittel',
|
63
|
+
'components.controls.link.linkTarget': 'URL',
|
64
|
+
'components.controls.link.linkTargetOption': 'Åpne i ny fane',
|
65
|
+
'components.controls.link.link': 'Legg til lenke',
|
66
|
+
'components.controls.link.unlink': 'Fjern lenke',
|
67
|
+
// Remove
|
68
|
+
'components.controls.remove.remove': 'Fjern'
|
69
|
+
};
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
2
|
+
import React from 'react';
|
3
|
+
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
|
4
|
+
interface IProps {
|
5
|
+
/** Input text */
|
6
|
+
initialValue?: string;
|
7
|
+
/** Editor type, defaults to basic */
|
8
|
+
type?: 'basic' | 'rich' | 'custom';
|
9
|
+
/** Adds a custom toolbar if type is set to custom */
|
10
|
+
customToolbar?: object;
|
11
|
+
/** Height of textarea */
|
12
|
+
label?: string;
|
13
|
+
/** Deafult height of texteditor */
|
14
|
+
height?: number;
|
15
|
+
/** Max resize height of texteditor */
|
16
|
+
maxHeight?: number;
|
17
|
+
/** Maxlength of input */
|
18
|
+
maxlength?: number;
|
19
|
+
/** Specifies whether maxlength should include html or not, defaults to 'plaintext' */
|
20
|
+
maxlengthType?: 'plaintext' | 'html';
|
21
|
+
/** Adds an error message if text is too long */
|
22
|
+
maxlengthText?: string;
|
23
|
+
/** Adds a counter of characters compared to maxlength, if maxlength is specified */
|
24
|
+
withCounter?: boolean;
|
25
|
+
/** Error message */
|
26
|
+
invalidMessage?: string;
|
27
|
+
/** Cb on blur */
|
28
|
+
onBlur?: () => void;
|
29
|
+
/** Cb on change */
|
30
|
+
onChange: (value: string) => void;
|
31
|
+
}
|
32
|
+
/**
|
33
|
+
*
|
34
|
+
* TODO: REMOVE AND CLEANUP PACKAGES
|
35
|
+
*
|
36
|
+
*/
|
37
|
+
declare const EditorOld: React.FC<IProps>;
|
38
|
+
export default EditorOld;
|
39
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/EditorOld/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,kDAAkD,CAAA;AAqBzD,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACpC,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAED;;;;GAIG;AAEH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA8I/B,CAAA;AAED,eAAe,SAAS,CAAA"}
|
@@ -0,0 +1,147 @@
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
2
|
+
import React, { useState } from 'react';
|
3
|
+
import { Editor as Wysiwyg } from 'react-draft-wysiwyg';
|
4
|
+
import { convertToRaw, EditorState, Modifier } from 'draft-js';
|
5
|
+
import { stateFromHTML } from 'draft-js-import-html';
|
6
|
+
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
|
7
|
+
import { CounterWrapper, ErrorWrapper, Label, RelativeDiv, styles } from './styles';
|
8
|
+
import { basicToolbar, editorLabels, getStrippedHtml, htmlToEntity, richToolbar } from './config';
|
9
|
+
import { convertToHTML, convertFromHTML } from 'draft-convert';
|
10
|
+
import Text from '../Text';
|
11
|
+
import { useTheme } from '@emotion/react';
|
12
|
+
import IconErrorOutline from '../../icons/General/IconErrorOutline';
|
13
|
+
import draftToHtml from 'draftjs-to-html';
|
14
|
+
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
15
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
16
|
+
|
17
|
+
/**
|
18
|
+
*
|
19
|
+
* TODO: REMOVE AND CLEANUP PACKAGES
|
20
|
+
*
|
21
|
+
*/
|
22
|
+
const EditorOld = ({
|
23
|
+
initialValue,
|
24
|
+
height = 300,
|
25
|
+
maxHeight,
|
26
|
+
maxlength,
|
27
|
+
maxlengthType = 'plaintext',
|
28
|
+
maxlengthText,
|
29
|
+
withCounter,
|
30
|
+
invalidMessage,
|
31
|
+
label,
|
32
|
+
customToolbar,
|
33
|
+
type = 'basic',
|
34
|
+
onChange,
|
35
|
+
onBlur
|
36
|
+
}) => {
|
37
|
+
const theme = useTheme();
|
38
|
+
const [maxlengthError, setMaxlengthError] = useState(null);
|
39
|
+
const [charCount, setCharCount] = useState(0);
|
40
|
+
const [editorState, setEditorState] = useState(initialValue ? EditorState.createWithContent(convertFromHTML({
|
41
|
+
htmlToEntity
|
42
|
+
})(initialValue)) : EditorState.createEmpty());
|
43
|
+
|
44
|
+
const handleEditorChange = state => {
|
45
|
+
handleValidity(state);
|
46
|
+
setEditorState(state);
|
47
|
+
const plainText = state.getCurrentContent().getPlainText();
|
48
|
+
const html = draftToHtml(convertToRaw(state.getCurrentContent()));
|
49
|
+
onChange(plainText.length > 0 ? html : ''); // return empty if no content
|
50
|
+
|
51
|
+
if (withCounter && maxlength) {
|
52
|
+
setCharCount(maxlengthType === 'html' ? html.length : plainText.length);
|
53
|
+
}
|
54
|
+
};
|
55
|
+
|
56
|
+
const handleValidity = state => {
|
57
|
+
if (!maxlength) {
|
58
|
+
setMaxlengthError(null);
|
59
|
+
return;
|
60
|
+
}
|
61
|
+
|
62
|
+
const plaintext = state.getCurrentContent().getPlainText();
|
63
|
+
const html = convertToHTML(state.getCurrentContent());
|
64
|
+
|
65
|
+
if (maxlengthType === 'html' && html.length > maxlength) {
|
66
|
+
setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
|
67
|
+
return;
|
68
|
+
}
|
69
|
+
|
70
|
+
if (maxlengthType === 'plaintext' && plaintext.length > maxlength) {
|
71
|
+
setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
|
72
|
+
return;
|
73
|
+
}
|
74
|
+
|
75
|
+
setMaxlengthError(null);
|
76
|
+
};
|
77
|
+
|
78
|
+
const Counter = _jsx(CounterWrapper, {
|
79
|
+
children: _jsxs(Text, {
|
80
|
+
children: [charCount, "/", maxlength]
|
81
|
+
})
|
82
|
+
});
|
83
|
+
|
84
|
+
const handlePaste = (text, html, editorState, onChange) => {
|
85
|
+
if (!html) return false;
|
86
|
+
const strippedHtml = getStrippedHtml(html);
|
87
|
+
const blockMap = stateFromHTML(strippedHtml).blockMap;
|
88
|
+
const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
|
89
|
+
onChange(EditorState.push(editorState, newState, 'insert-fragment'));
|
90
|
+
return true;
|
91
|
+
};
|
92
|
+
|
93
|
+
const getToolbar = () => {
|
94
|
+
switch (type) {
|
95
|
+
case 'basic':
|
96
|
+
return basicToolbar;
|
97
|
+
|
98
|
+
case 'rich':
|
99
|
+
return richToolbar;
|
100
|
+
|
101
|
+
case 'custom':
|
102
|
+
return customToolbar;
|
103
|
+
|
104
|
+
default:
|
105
|
+
return undefined;
|
106
|
+
}
|
107
|
+
};
|
108
|
+
|
109
|
+
return _jsxs("div", {
|
110
|
+
css: theme => [styles.default(theme, height), maxHeight && styles.maxHeight(maxHeight)],
|
111
|
+
children: [label && _jsx(Label, {
|
112
|
+
children: label
|
113
|
+
}), _jsxs(RelativeDiv, {
|
114
|
+
children: [_jsx(Wysiwyg, {
|
115
|
+
editorState: editorState,
|
116
|
+
toolbarClassName: "toolbar-wrapper",
|
117
|
+
wrapperClassName: "editor-wrapper",
|
118
|
+
editorClassName: "content-wrapper",
|
119
|
+
onEditorStateChange: handleEditorChange,
|
120
|
+
toolbar: getToolbar(),
|
121
|
+
localization: {
|
122
|
+
locale: 'nb_NO',
|
123
|
+
translations: editorLabels
|
124
|
+
},
|
125
|
+
stripPastedStyles: type !== 'rich',
|
126
|
+
onBlur: () => onBlur && onBlur(),
|
127
|
+
handlePastedText: handlePaste
|
128
|
+
}), maxlength && withCounter && Counter]
|
129
|
+
}), (maxlengthError || invalidMessage) && _jsxs(ErrorWrapper, {
|
130
|
+
children: [maxlengthError && _jsxs(Text, {
|
131
|
+
color: theme.alert,
|
132
|
+
children: [_jsx(IconErrorOutline, {
|
133
|
+
size: "16px",
|
134
|
+
color: theme.alert
|
135
|
+
}), ' ', maxlengthError]
|
136
|
+
}), invalidMessage && _jsxs(Text, {
|
137
|
+
color: theme.alert,
|
138
|
+
children: [_jsx(IconErrorOutline, {
|
139
|
+
size: "16px",
|
140
|
+
color: theme.alert
|
141
|
+
}), ' ', invalidMessage]
|
142
|
+
})]
|
143
|
+
})]
|
144
|
+
});
|
145
|
+
};
|
146
|
+
|
147
|
+
export default EditorOld;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { IAppTheme } from '../../app-shell/theme';
|
3
|
+
export declare const styles: {
|
4
|
+
default: (theme: IAppTheme, height: number) => import("@emotion/react").SerializedStyles;
|
5
|
+
maxHeight: (height: number) => import("@emotion/react").SerializedStyles;
|
6
|
+
};
|
7
|
+
export declare const RelativeDiv: import("@emotion/styled").StyledComponent<{
|
8
|
+
theme?: import("@emotion/react").Theme | undefined;
|
9
|
+
as?: import("react").ElementType<any> | undefined;
|
10
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
11
|
+
export declare const Label: import("@emotion/styled").StyledComponent<{
|
12
|
+
theme?: import("@emotion/react").Theme | undefined;
|
13
|
+
as?: import("react").ElementType<any> | undefined;
|
14
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
15
|
+
export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
|
16
|
+
theme?: import("@emotion/react").Theme | undefined;
|
17
|
+
as?: import("react").ElementType<any> | undefined;
|
18
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
19
|
+
export declare const CounterWrapper: import("@emotion/styled").StyledComponent<{
|
20
|
+
theme?: import("@emotion/react").Theme | undefined;
|
21
|
+
as?: import("react").ElementType<any> | undefined;
|
22
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
23
|
+
//# sourceMappingURL=styles.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/EditorOld/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,eAAO,MAAM,MAAM;qBACA,SAAS,UAAU,MAAM;wBAkItB,MAAM;CAK3B,CAAA;AAED,eAAO,MAAM,WAAW;;;yGAEvB,CAAA;AAED,eAAO,MAAM,KAAK;;;2GAKjB,CAAA;AAED,eAAO,MAAM,YAAY;;;yGASxB,CAAA;AAED,eAAO,MAAM,cAAc;;;yGAI1B,CAAA"}
|