@bbl-digital/snorre 4.1.27 → 4.1.29
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/bundle.js +350 -503
- package/esm/core/Editor/config.js +19 -7
- package/esm/core/Editor/index.js +173 -113
- package/esm/core/Editor/styles.js +60 -43
- package/esm/core/QuillEditor/styles.js +3 -3
- package/esm/index.js +1 -2
- package/lib/core/Editor/config.d.ts +0 -5
- package/lib/core/Editor/config.d.ts.map +1 -1
- package/lib/core/Editor/config.js +19 -7
- package/lib/core/Editor/index.d.ts +0 -43
- package/lib/core/Editor/index.d.ts.map +1 -1
- package/lib/core/Editor/index.js +173 -113
- package/lib/core/Editor/styles.d.ts +0 -13
- package/lib/core/Editor/styles.d.ts.map +1 -1
- package/lib/core/Editor/styles.js +60 -43
- package/lib/core/QuillEditor/styles.d.ts.map +1 -1
- package/lib/core/QuillEditor/styles.js +3 -3
- package/lib/index.d.ts +1 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -2
- package/package.json +1 -1
@@ -1,7 +1,19 @@
|
|
1
|
-
export const editorContentCss = `
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
export const
|
6
|
-
|
7
|
-
|
1
|
+
// export const editorContentCss = `
|
2
|
+
// body { font-family:'Source Sans Pro',sans-serif; font-size:16px; } p {margin: 0;} h1,h2,h3,h4,h5,h6 {margin-top: 0;margin-bottom: 0;}
|
3
|
+
// `
|
4
|
+
|
5
|
+
// export const editorBlockFormats =
|
6
|
+
// 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;'
|
7
|
+
|
8
|
+
// export const plugins =
|
9
|
+
// 'autolink lists link image code print preview media paste'
|
10
|
+
|
11
|
+
// export const richToolbar =
|
12
|
+
// 'formatselect | ' +
|
13
|
+
// ' | bold italic underline' +
|
14
|
+
// ' | bullist numlist indent outdent' +
|
15
|
+
// ' | alignleft aligncenter alignright alignjustify' +
|
16
|
+
// ' | link unlink'
|
17
|
+
|
18
|
+
// export const basicToolbar =
|
19
|
+
// 'bold italic underline | bullist numlist indent outdent'
|
@@ -1,44 +1 @@
|
|
1
|
-
/** @jsxImportSource @emotion/react */
|
2
|
-
import { FC } from 'react';
|
3
|
-
interface IProps {
|
4
|
-
/** Input text */
|
5
|
-
initialValue?: string;
|
6
|
-
/** Input text that overrides the initialValue or already existing text value, if null is sent in we reset the field */
|
7
|
-
overrideValue?: string;
|
8
|
-
/** Editor type, defaults to basic */
|
9
|
-
type?: 'basic' | 'rich' | 'custom';
|
10
|
-
/** Adds a custom toolbar if type is set to custom */
|
11
|
-
customToolbar?: string;
|
12
|
-
/** Height of textarea */
|
13
|
-
label?: string;
|
14
|
-
/** Deafult height of texteditor */
|
15
|
-
height?: number;
|
16
|
-
/** Max resize height of texteditor */
|
17
|
-
maxHeight?: number;
|
18
|
-
/** Max resize width of texteditor */
|
19
|
-
maxWidth?: number;
|
20
|
-
/** Error message */
|
21
|
-
invalidMessage?: string;
|
22
|
-
/** Allow image in editor */
|
23
|
-
allowImages?: boolean;
|
24
|
-
/** Strip all pasted styles */
|
25
|
-
pasteAsText?: boolean;
|
26
|
-
/** Set resize, defaults to true (vertical) */
|
27
|
-
resize?: boolean | 'both';
|
28
|
-
/** Invalid html elements, must be comma separated, defaults to "button" */
|
29
|
-
invalidElements?: string;
|
30
|
-
/** Valid html elements, must be comma separated */
|
31
|
-
validElements?: string;
|
32
|
-
/** Disable editor */
|
33
|
-
disabled?: boolean;
|
34
|
-
/** Cb on blur */
|
35
|
-
onBlur?: (value: string) => void;
|
36
|
-
/** Cb on change */
|
37
|
-
onChange: (value: string, plainTextLength: number) => void;
|
38
|
-
}
|
39
|
-
/**
|
40
|
-
* @deprecated Use QuillEditor instead
|
41
|
-
*/
|
42
|
-
declare const Editor: FC<IProps>;
|
43
|
-
export default Editor;
|
44
1
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":""}
|
package/lib/core/Editor/index.js
CHANGED
@@ -1,113 +1,173 @@
|
|
1
|
-
/** @jsxImportSource @emotion/react */
|
2
|
-
import { useState } from 'react'
|
3
|
-
import { Editor as TinyEditor } from '@tinymce/tinymce-react'
|
4
|
-
import { ErrorWrapper, Label, styles } from './styles'
|
5
|
-
import {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
import
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
}
|
113
|
-
|
1
|
+
// /** @jsxImportSource @emotion/react */
|
2
|
+
// import { FC, useState } from 'react'
|
3
|
+
// import { Editor as TinyEditor } from '@tinymce/tinymce-react'
|
4
|
+
// import { ErrorWrapper, Label, styles } from './styles'
|
5
|
+
// import {
|
6
|
+
// basicToolbar,
|
7
|
+
// editorBlockFormats,
|
8
|
+
// editorContentCss,
|
9
|
+
// plugins,
|
10
|
+
// richToolbar,
|
11
|
+
// } from './config'
|
12
|
+
// import Skeleton from '../Skeleton'
|
13
|
+
// import Text from '../Text'
|
14
|
+
// import IconErrorOutline from '../../icons/General/IconErrorOutline'
|
15
|
+
// import { useTheme } from '@emotion/react'
|
16
|
+
// import { useIsMobile } from '../../hooks/useIsMobile'
|
17
|
+
// import { useEffect } from 'react'
|
18
|
+
|
19
|
+
// interface IProps {
|
20
|
+
// /** Input text */
|
21
|
+
// initialValue?: string
|
22
|
+
// /** Input text that overrides the initialValue or already existing text value, if null is sent in we reset the field */
|
23
|
+
// overrideValue?: string
|
24
|
+
// /** Editor type, defaults to basic */
|
25
|
+
// type?: 'basic' | 'rich' | 'custom'
|
26
|
+
// /** Adds a custom toolbar if type is set to custom */
|
27
|
+
// customToolbar?: string
|
28
|
+
// /** Height of textarea */
|
29
|
+
// label?: string
|
30
|
+
// /** Deafult height of texteditor */
|
31
|
+
// height?: number
|
32
|
+
// /** Max resize height of texteditor */
|
33
|
+
// maxHeight?: number
|
34
|
+
// /** Max resize width of texteditor */
|
35
|
+
// maxWidth?: number
|
36
|
+
// /** Error message */
|
37
|
+
// invalidMessage?: string
|
38
|
+
// /** Allow image in editor */
|
39
|
+
// allowImages?: boolean
|
40
|
+
// /** Strip all pasted styles */
|
41
|
+
// pasteAsText?: boolean
|
42
|
+
// /** Set resize, defaults to true (vertical) */
|
43
|
+
// resize?: boolean | 'both'
|
44
|
+
// /** Invalid html elements, must be comma separated, defaults to "button" */
|
45
|
+
// invalidElements?: string
|
46
|
+
// /** Valid html elements, must be comma separated */
|
47
|
+
// validElements?: string
|
48
|
+
// /** Disable editor */
|
49
|
+
// disabled?: boolean
|
50
|
+
// /** Cb on blur */
|
51
|
+
// onBlur?: (value: string) => void
|
52
|
+
// /** Cb on change */
|
53
|
+
// onChange: (value: string, plainTextLength: number) => void
|
54
|
+
// }
|
55
|
+
|
56
|
+
// const TINYMCE_API_KEY = '1n4id0n4p67gr15sq9hvnk965wgh5ku8xjgqt30e2hnpccp3'
|
57
|
+
// /**
|
58
|
+
// * @deprecated Use QuillEditor instead
|
59
|
+
// */
|
60
|
+
// const Editor: FC<IProps> = ({
|
61
|
+
// initialValue,
|
62
|
+
// overrideValue,
|
63
|
+
// type = 'basic',
|
64
|
+
// label,
|
65
|
+
// height = 500,
|
66
|
+
// maxHeight,
|
67
|
+
// maxWidth,
|
68
|
+
// customToolbar,
|
69
|
+
// invalidMessage,
|
70
|
+
// allowImages,
|
71
|
+
// pasteAsText,
|
72
|
+
// resize = true,
|
73
|
+
// validElements,
|
74
|
+
// invalidElements = 'button',
|
75
|
+
// disabled,
|
76
|
+
// onChange,
|
77
|
+
// onBlur,
|
78
|
+
// }) => {
|
79
|
+
// const [loaded, setLoaded] = useState(false)
|
80
|
+
// const [value, setValue] = useState(initialValue || '')
|
81
|
+
// const { alert } = useTheme()
|
82
|
+
// const isMobile = useIsMobile()
|
83
|
+
|
84
|
+
// const handleChange = (html: string, editor: any) => {
|
85
|
+
// setValue(html)
|
86
|
+
// onChange(html, editor.getContent({ format: 'text' }).length)
|
87
|
+
// }
|
88
|
+
|
89
|
+
// const handleBlur = () => onBlur?.(value)
|
90
|
+
|
91
|
+
// const toolbar =
|
92
|
+
// type === 'basic'
|
93
|
+
// ? basicToolbar
|
94
|
+
// : type === 'rich'
|
95
|
+
// ? richToolbar
|
96
|
+
// : customToolbar
|
97
|
+
|
98
|
+
// useEffect(() => {
|
99
|
+
// if (overrideValue === undefined) return
|
100
|
+
|
101
|
+
// setValue(() => overrideValue)
|
102
|
+
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
103
|
+
// }, [overrideValue])
|
104
|
+
|
105
|
+
// return (
|
106
|
+
// <div css={(theme) => [styles.default(theme), !loaded && styles.hideEditor]}>
|
107
|
+
// {label && <Label>{label}</Label>}
|
108
|
+
|
109
|
+
// <div className="editor-wrapper">
|
110
|
+
// <TinyEditor
|
111
|
+
// onBlur={handleBlur}
|
112
|
+
// onInit={(_e) => setLoaded(true)}
|
113
|
+
// apiKey={TINYMCE_API_KEY}
|
114
|
+
// value={value}
|
115
|
+
// onEditorChange={handleChange}
|
116
|
+
// disabled={disabled}
|
117
|
+
// init={{
|
118
|
+
// browser_spellcheck: true,
|
119
|
+
// height,
|
120
|
+
// min_height: 100,
|
121
|
+
// max_height: maxHeight,
|
122
|
+
// min_width: 100,
|
123
|
+
// max_width: maxWidth,
|
124
|
+
// toolbar_mode: 'wrap',
|
125
|
+
// menubar: false,
|
126
|
+
// branding: false,
|
127
|
+
// elementpath: false,
|
128
|
+
// resize: resize,
|
129
|
+
// statusbar: !isMobile,
|
130
|
+
// plugins,
|
131
|
+
// toolbar,
|
132
|
+
// content_style: editorContentCss,
|
133
|
+
// language: 'nb_NO',
|
134
|
+
// block_formats: editorBlockFormats,
|
135
|
+
// paste_data_images: allowImages,
|
136
|
+
// paste_as_text:
|
137
|
+
// pasteAsText !== undefined ? pasteAsText : type === 'basic',
|
138
|
+
// contextmenu: false,
|
139
|
+
// invalid_elements: !allowImages
|
140
|
+
// ? 'img,' + invalidElements
|
141
|
+
// : invalidElements,
|
142
|
+
// valid_elements: validElements,
|
143
|
+
// default_link_target: '_blank',
|
144
|
+
// link_assume_external_targets: 'https',
|
145
|
+
// link_title: false,
|
146
|
+
// target_list: false,
|
147
|
+
// }}
|
148
|
+
// />
|
149
|
+
// </div>
|
150
|
+
|
151
|
+
// {!loaded && (
|
152
|
+
// <Skeleton
|
153
|
+
// height={`${height}px`}
|
154
|
+
// width="100%"
|
155
|
+
// borderRadius="3px"
|
156
|
+
// rectangle
|
157
|
+
// />
|
158
|
+
// )}
|
159
|
+
|
160
|
+
// {invalidMessage && (
|
161
|
+
// <ErrorWrapper>
|
162
|
+
// {invalidMessage && (
|
163
|
+
// <Text color={alert}>
|
164
|
+
// <IconErrorOutline size="16px" color={alert} /> {invalidMessage}
|
165
|
+
// </Text>
|
166
|
+
// )}
|
167
|
+
// </ErrorWrapper>
|
168
|
+
// )}
|
169
|
+
// </div>
|
170
|
+
// )
|
171
|
+
// }
|
172
|
+
|
173
|
+
// export default Editor
|
@@ -1,14 +1 @@
|
|
1
|
-
import { IAppTheme } from '../../app-shell/theme';
|
2
|
-
export declare const styles: {
|
3
|
-
default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
|
4
|
-
hideEditor: import("@emotion/react").SerializedStyles;
|
5
|
-
};
|
6
|
-
export declare const Label: import("@emotion/styled").StyledComponent<{
|
7
|
-
theme?: import("@emotion/react").Theme;
|
8
|
-
as?: React.ElementType;
|
9
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
10
|
-
export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
|
11
|
-
theme?: import("@emotion/react").Theme;
|
12
|
-
as?: React.ElementType;
|
13
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
14
1
|
//# sourceMappingURL=styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/styles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/styles.ts"],"names":[],"mappings":""}
|
@@ -1,43 +1,60 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
}
|
22
|
-
|
23
|
-
|
24
|
-
}
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
}
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
1
|
+
// import { css } from '@emotion/react'
|
2
|
+
// import styled from '@emotion/styled'
|
3
|
+
// import { IAppTheme } from '../../app-shell/theme'
|
4
|
+
|
5
|
+
// export const styles = {
|
6
|
+
// default: (theme: IAppTheme) => css`
|
7
|
+
// display: flex;
|
8
|
+
// flex-direction: column;
|
9
|
+
// gap: 4px;
|
10
|
+
|
11
|
+
// .tox-tinymce {
|
12
|
+
// border: 1px solid ${theme.border};
|
13
|
+
// border-radius: 3px;
|
14
|
+
// }
|
15
|
+
// .tox-toolbar__group {
|
16
|
+
// border-color: ${theme.border} !important;
|
17
|
+
// }
|
18
|
+
// .tox-toolbar__primary {
|
19
|
+
// background: none !important;
|
20
|
+
// border-bottom: 1px solid ${theme.border};
|
21
|
+
// }
|
22
|
+
// .tox-statusbar {
|
23
|
+
// border-top: none !important;
|
24
|
+
// }
|
25
|
+
// .editor-wrapper {
|
26
|
+
// display: grid;
|
27
|
+
|
28
|
+
// .tox-toolbar--scrolling,
|
29
|
+
// .tox-edit-area {
|
30
|
+
// &::-webkit-scrollbar {
|
31
|
+
// width: 2px;
|
32
|
+
// height: 2px;
|
33
|
+
// }
|
34
|
+
// }
|
35
|
+
// }
|
36
|
+
// `,
|
37
|
+
// hideEditor: css`
|
38
|
+
// .editor-wrapper {
|
39
|
+
// display: none;
|
40
|
+
// }
|
41
|
+
// `,
|
42
|
+
// }
|
43
|
+
|
44
|
+
// export const Label = styled.span`
|
45
|
+
// line-height: 22px;
|
46
|
+
// font-size: 1em;
|
47
|
+
// font-weight: 600;
|
48
|
+
// margin-bottom: 4px;
|
49
|
+
// `
|
50
|
+
|
51
|
+
// export const ErrorWrapper = styled.div`
|
52
|
+
// display: grid;
|
53
|
+
|
54
|
+
// & > span {
|
55
|
+
// display: flex;
|
56
|
+
// align-items: center;
|
57
|
+
// gap: 6px;
|
58
|
+
// margin-left: 2px;
|
59
|
+
// }
|
60
|
+
// `
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,eAAO,MAAM,MAAM;qBAER,SAAS,cACJ,MAAM,cACN,MAAM,aACP,MAAM,UACT,MAAM,aACH,MAAM,WACR,MAAM;
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,eAAO,MAAM,MAAM;qBAER,SAAS,cACJ,MAAM,cACN,MAAM,aACP,MAAM,UACT,MAAM,aACH,MAAM,WACR,MAAM;CAmLlB,CAAA;AAED,eAAO,MAAM,KAAK;;eA7KD,WAAW;kHAkL3B,CAAA;AAED,eAAO,MAAM,YAAY;;eApLR,WAAW;yGA8L3B,CAAA"}
|