@bbl-digital/snorre 3.0.35 → 3.0.36

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.
Files changed (6) hide show
  1. package/dist/bundle.js +15 -0
  2. package/esm/core/Editor/index.js +17 -0
  3. package/lib/core/Editor/index.d.ts +2 -0
  4. package/lib/core/Editor/index.d.ts.map +1 -1
  5. package/lib/core/Editor/index.js +17 -0
  6. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -32120,6 +32120,7 @@
32120
32120
 
32121
32121
  const Editor = ({
32122
32122
  initialValue,
32123
+ overrideValue,
32123
32124
  type = 'basic',
32124
32125
  label,
32125
32126
  height = 500,
@@ -32136,6 +32137,7 @@
32136
32137
  onChange,
32137
32138
  onBlur
32138
32139
  }) => {
32140
+ const editorRef = React.useRef(null);
32139
32141
  const [loaded, setLoaded] = React.useState(false);
32140
32142
  const [value, setValue] = React.useState(initialValue || '');
32141
32143
  const {
@@ -32153,6 +32155,18 @@
32153
32155
  const handleBlur = () => onBlur && onBlur(value);
32154
32156
 
32155
32157
  const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
32158
+ React.useEffect(() => {
32159
+ const editor = editorRef.current?.editor;
32160
+ if (!editor) return;
32161
+
32162
+ if (overrideValue === null) {
32163
+ editor?.setContent('');
32164
+ return;
32165
+ }
32166
+
32167
+ if (!overrideValue?.length) return;
32168
+ editor.setContent(overrideValue); // eslint-disable-next-line react-hooks/exhaustive-deps
32169
+ }, [overrideValue]);
32156
32170
  return jsxRuntime$1.jsxs("div", {
32157
32171
  css: theme => [styles$3.default(theme), !loaded && styles$3.hideEditor],
32158
32172
  children: [label && jsxRuntime$1.jsx(Label, {
@@ -32160,6 +32174,7 @@
32160
32174
  }), jsxRuntime$1.jsx("div", {
32161
32175
  className: "editor-wrapper",
32162
32176
  children: jsxRuntime$1.jsx(tinymceReact.Editor, {
32177
+ ref: editorRef,
32163
32178
  onBlur: handleBlur,
32164
32179
  onInit: () => setLoaded(true),
32165
32180
  apiKey: TINYMCE_API_KEY,
package/esm/core/Editor/index.js CHANGED
@@ -8,12 +8,15 @@ import Text from '../Text';
8
8
  import IconErrorOutline from '../../icons/General/IconErrorOutline';
9
9
  import { useTheme } from '@emotion/react';
10
10
  import { useIsMobile } from '../../hooks/useIsMobile';
11
+ import { useEffect } from 'react';
12
+ import { useRef } from 'react';
11
13
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
12
14
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
13
15
  const TINYMCE_API_KEY = 'v1hbb9qthd0z2fr0keceoglnwbzhyjqwsj4q7n193ovikt8s';
14
16
 
15
17
  const Editor = ({
16
18
  initialValue,
19
+ overrideValue,
17
20
  type = 'basic',
18
21
  label,
19
22
  height = 500,
@@ -30,6 +33,7 @@ const Editor = ({
30
33
  onChange,
31
34
  onBlur
32
35
  }) => {
36
+ const editorRef = useRef(null);
33
37
  const [loaded, setLoaded] = useState(false);
34
38
  const [value, setValue] = useState(initialValue || '');
35
39
  const {
@@ -47,6 +51,18 @@ const Editor = ({
47
51
  const handleBlur = () => onBlur && onBlur(value);
48
52
 
49
53
  const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
54
+ useEffect(() => {
55
+ const editor = editorRef.current?.editor;
56
+ if (!editor) return;
57
+
58
+ if (overrideValue === null) {
59
+ editor?.setContent('');
60
+ return;
61
+ }
62
+
63
+ if (!overrideValue?.length) return;
64
+ editor.setContent(overrideValue); // eslint-disable-next-line react-hooks/exhaustive-deps
65
+ }, [overrideValue]);
50
66
  return _jsxs("div", {
51
67
  css: theme => [styles.default(theme), !loaded && styles.hideEditor],
52
68
  children: [label && _jsx(Label, {
@@ -54,6 +70,7 @@ const Editor = ({
54
70
  }), _jsx("div", {
55
71
  className: "editor-wrapper",
56
72
  children: _jsx(TinyEditor, {
73
+ ref: editorRef,
57
74
  onBlur: handleBlur,
58
75
  onInit: () => setLoaded(true),
59
76
  apiKey: TINYMCE_API_KEY,
package/lib/core/Editor/index.d.ts CHANGED
@@ -3,6 +3,8 @@ import { FC } from 'react';
3
3
  interface IProps {
4
4
  /** Input text */
5
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 | null;
6
8
  /** Editor type, defaults to basic */
7
9
  type?: 'basic' | 'rich' | 'custom';
8
10
  /** Adds a custom toolbar if type is set to custom */
package/lib/core/Editor/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAgBpC,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,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAID,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CAuGtB,CAAA;AAED,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAkBpC,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,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,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAID,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CA0HtB,CAAA;AAED,eAAe,MAAM,CAAA"}
package/lib/core/Editor/index.js CHANGED
@@ -8,12 +8,15 @@ import Text from '../Text';
8
8
  import IconErrorOutline from '../../icons/General/IconErrorOutline';
9
9
  import { useTheme } from '@emotion/react';
10
10
  import { useIsMobile } from '../../hooks/useIsMobile';
11
+ import { useEffect } from 'react';
12
+ import { useRef } from 'react';
11
13
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
12
14
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
13
15
  const TINYMCE_API_KEY = 'v1hbb9qthd0z2fr0keceoglnwbzhyjqwsj4q7n193ovikt8s';
14
16
 
15
17
  const Editor = ({
16
18
  initialValue,
19
+ overrideValue,
17
20
  type = 'basic',
18
21
  label,
19
22
  height = 500,
@@ -30,6 +33,7 @@ const Editor = ({
30
33
  onChange,
31
34
  onBlur
32
35
  }) => {
36
+ const editorRef = useRef(null);
33
37
  const [loaded, setLoaded] = useState(false);
34
38
  const [value, setValue] = useState(initialValue || '');
35
39
  const {
@@ -47,6 +51,18 @@ const Editor = ({
47
51
  const handleBlur = () => onBlur && onBlur(value);
48
52
 
49
53
  const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
54
+ useEffect(() => {
55
+ const editor = editorRef.current?.editor;
56
+ if (!editor) return;
57
+
58
+ if (overrideValue === null) {
59
+ editor?.setContent('');
60
+ return;
61
+ }
62
+
63
+ if (!overrideValue?.length) return;
64
+ editor.setContent(overrideValue); // eslint-disable-next-line react-hooks/exhaustive-deps
65
+ }, [overrideValue]);
50
66
  return _jsxs("div", {
51
67
  css: theme => [styles.default(theme), !loaded && styles.hideEditor],
52
68
  children: [label && _jsx(Label, {
@@ -54,6 +70,7 @@ const Editor = ({
54
70
  }), _jsx("div", {
55
71
  className: "editor-wrapper",
56
72
  children: _jsx(TinyEditor, {
73
+ ref: editorRef,
57
74
  onBlur: handleBlur,
58
75
  onInit: () => setLoaded(true),
59
76
  apiKey: TINYMCE_API_KEY,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "3.0.35",
3
+ "version": "3.0.36",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",