@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.
Files changed (51) hide show
  1. package/dist/bundle.js +8 -10
  2. package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js +16 -0
  3. package/esm/core/CheckboxController/index.js +22 -0
  4. package/esm/core/Datepicker/yearMonthForm.js +56 -0
  5. package/esm/core/EditorOld/config.js +69 -0
  6. package/esm/core/EditorOld/index.js +147 -0
  7. package/esm/core/EditorOld/styles.js +65 -0
  8. package/esm/core/ImageCarousel/index.js +70 -0
  9. package/esm/core/ImageCarousel/styles.js +58 -0
  10. package/esm/enums/ModifierKey.js +13 -0
  11. package/esm/icons/General/IconBellFilled.js +1 -1
  12. package/esm/icons/General/IconBellOutline.js +7 -9
  13. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts +7 -0
  14. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts.map +1 -0
  15. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.js +16 -0
  16. package/lib/core/CheckboxController/index.d.ts +1 -0
  17. package/lib/core/CheckboxController/index.d.ts.map +1 -0
  18. package/lib/core/CheckboxController/index.js +22 -0
  19. package/lib/core/Datepicker/yearMonthForm.d.ts +10 -0
  20. package/lib/core/Datepicker/yearMonthForm.d.ts.map +1 -0
  21. package/lib/core/Datepicker/yearMonthForm.js +56 -0
  22. package/lib/core/EditorOld/config.d.ts +56 -0
  23. package/lib/core/EditorOld/config.d.ts.map +1 -0
  24. package/lib/core/EditorOld/config.js +69 -0
  25. package/lib/core/EditorOld/index.d.ts +39 -0
  26. package/lib/core/EditorOld/index.d.ts.map +1 -0
  27. package/lib/core/EditorOld/index.js +147 -0
  28. package/lib/core/EditorOld/styles.d.ts +23 -0
  29. package/lib/core/EditorOld/styles.d.ts.map +1 -0
  30. package/lib/core/EditorOld/styles.js +65 -0
  31. package/lib/core/ImageCarousel/index.d.ts +11 -0
  32. package/lib/core/ImageCarousel/index.d.ts.map +1 -0
  33. package/lib/core/ImageCarousel/index.js +70 -0
  34. package/lib/core/ImageCarousel/styles.d.ts +26 -0
  35. package/lib/core/ImageCarousel/styles.d.ts.map +1 -0
  36. package/lib/core/ImageCarousel/styles.js +58 -0
  37. package/lib/enums/ModifierKey.d.ts +12 -0
  38. package/lib/enums/ModifierKey.d.ts.map +1 -0
  39. package/lib/enums/ModifierKey.js +13 -0
  40. package/lib/icons/General/IconBellFilled.js +1 -1
  41. package/lib/icons/General/IconBellOutline.d.ts.map +1 -1
  42. package/lib/icons/General/IconBellOutline.js +7 -9
  43. package/package.json +1 -1
  44. package/esm/core/BoxedTable/TableBody/index.js +0 -10
  45. package/esm/core/BoxedTable/TableBody/styles.js +0 -16
  46. package/lib/core/BoxedTable/TableBody/index.d.ts +0 -7
  47. package/lib/core/BoxedTable/TableBody/index.d.ts.map +0 -1
  48. package/lib/core/BoxedTable/TableBody/index.js +0 -10
  49. package/lib/core/BoxedTable/TableBody/styles.d.ts +0 -6
  50. package/lib/core/BoxedTable/TableBody/styles.d.ts.map +0 -1
  51. 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: "M7.01 19.51c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99H7.01ZM9 0c-.83 0-1.5.67-1.5 1.5v1.17C4.36 3.35 2 6.15 2 9.5v6l-2 2v1h18v-1l-2-2v-6c0-3.35-2.36-6.15-5.5-6.83V1.5C10.5.67 9.83 0 9 0Z"
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
- return /*#__PURE__*/_jsx("svg", {
6
- viewBox: "0 0 24 24",
7
- ...props,
8
- children: /*#__PURE__*/_jsx("path", {
9
- d: "M7.01,20.01 C7.01,21.11 7.9,22 9,22 C10.1,22 10.99,21.11 10.99,20.01 L7.01,20.01 Z M9,5 C11.76,5 14,7.24 14,10 L14,17 L4,17 L4,10 C4,7.24 6.24,5 9,5 Z M9,0.5 C8.17,0.5 7.5,1.17 7.5,2 L7.5,3.17 C4.36,3.85 2,6.65 2,10 L2,16 L0,18 L0,19 L18,19 L18,18 L16,16 L16,10 C16,6.65 13.64,3.85 10.5,3.17 L10.5,2 C10.5,1.17 9.83,0.5 9,0.5 Z"
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,7 @@
1
+ /// <reference types="react" />
2
+ declare const useHandleOptionsHeight: () => {
3
+ optionsHeight: number;
4
+ optionsRef: import("react").RefObject<HTMLDivElement>;
5
+ };
6
+ export default useHandleOptionsHeight;
7
+ //# sourceMappingURL=useHandleOptionsHeight.d.ts.map
@@ -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,10 @@
1
+ import React from 'react';
2
+ interface IProps {
3
+ date: Date;
4
+ onChange: (e: Date) => void;
5
+ fromDate: Date;
6
+ toDate: Date;
7
+ }
8
+ declare const YearMonthForm: React.FC<IProps>;
9
+ export default YearMonthForm;
10
+ //# sourceMappingURL=yearMonthForm.d.ts.map
@@ -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"}