@festo-ui/react 5.0.0-dev.154 → 5.0.0-dev.155

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 (4) hide show
  1. package/lib/forms/text-editor/TextEditor.d.ts +2 -1
  2. package/lib/forms/text-editor/TextEditor.js +29 -14
  3. package/node/lib/forms/text-editor/TextEditor.js +28 -13
  4. package/package.json +1 -1
package/lib/forms/text-editor/TextEditor.d.ts CHANGED
@@ -18,6 +18,7 @@ export interface TextEditorProps {
18
18
  label: string;
19
19
  maxLength?: number;
20
20
  value?: string;
21
+ defaultValue?: string;
21
22
  hint?: string;
22
23
  error?: string;
23
24
  readOnly?: boolean;
@@ -25,5 +26,5 @@ export interface TextEditorProps {
25
26
  className?: string;
26
27
  config?: TextEditorConfiguration;
27
28
  }
28
- declare function TextEditor({ disabled, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): JSX.Element;
29
+ declare function TextEditor({ disabled, defaultValue, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): JSX.Element;
29
30
  export default TextEditor;
package/lib/forms/text-editor/TextEditor.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useEffect, useRef, useState } from 'react';
1
+ import { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import classNames from 'classnames';
3
3
  import TextEditorButton from './TextEditorButton';
4
4
  import useId from '../../helper/useId';
@@ -19,9 +19,13 @@ const defaultConfig = {
19
19
  link: true
20
20
  }
21
21
  };
22
+ function postpone(fn) {
23
+ Promise.resolve().then(fn);
24
+ }
22
25
  function TextEditor(_ref) {
23
26
  let {
24
27
  disabled = false,
28
+ defaultValue,
25
29
  label,
26
30
  maxLength,
27
31
  value,
@@ -35,13 +39,29 @@ function TextEditor(_ref) {
35
39
  const editorRef = useRef(null);
36
40
  const [editor, setEditor] = useState(null);
37
41
  const id = useId();
38
- const [innerValue, setInnerValue] = useState(value);
42
+ const [innerValue, setInnerValue] = useState(null);
39
43
  const config = {
40
44
  toolbar: {
41
45
  ...defaultConfig.toolbar,
42
46
  ...configProps?.toolbar
43
47
  }
44
48
  };
49
+ const setEditorContents = useCallback((e, v) => {
50
+ if (e) {
51
+ const whiteList = {
52
+ ...xss.whiteList,
53
+ a: [...xss.whiteList.a, 'rel']
54
+ };
55
+ const sanitizedValue = xss(v, {
56
+ whiteList
57
+ });
58
+ const content = e.clipboard.convert(sanitizedValue);
59
+ const selection = e.getSelection();
60
+ e.setContents(content, 'silent');
61
+ setInnerValue(sanitizedValue);
62
+ postpone(() => e.setSelection(selection));
63
+ }
64
+ }, []);
45
65
  useEffect(() => {
46
66
  if (editorRef && editor === null && typeof window === 'object') {
47
67
  // eslint-disable-next-line global-require
@@ -75,8 +95,11 @@ function TextEditor(_ref) {
75
95
  return new Delta().insert('');
76
96
  });
77
97
  setEditor(newEditor);
98
+ if (defaultValue) {
99
+ setEditorContents(newEditor, defaultValue);
100
+ }
78
101
  }
79
- }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image]);
102
+ }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image, setEditorContents, defaultValue]);
80
103
  useEffect(() => {
81
104
  if (editor) {
82
105
  editor.on('text-change', () => {
@@ -92,18 +115,10 @@ function TextEditor(_ref) {
92
115
  }
93
116
  }, [editor, onChange]);
94
117
  useEffect(() => {
95
- if (editor) {
96
- const whiteList = {
97
- ...xss.whiteList,
98
- a: [...xss.whiteList.a, 'rel']
99
- };
100
- const sanitizedValue = xss(value, {
101
- whiteList
102
- });
103
- const content = editor.clipboard.convert(sanitizedValue);
104
- editor.setContents(content, 'silent');
118
+ if (value !== innerValue && value !== undefined && value !== null) {
119
+ setEditorContents(editor, value);
105
120
  }
106
- }, [editor, value]);
121
+ }, [editor, innerValue, setEditorContents, value]);
107
122
  function currentLength() {
108
123
  return innerValue?.length || 0;
109
124
  }
package/node/lib/forms/text-editor/TextEditor.js CHANGED
@@ -24,9 +24,13 @@ const defaultConfig = {
24
24
  link: true
25
25
  }
26
26
  };
27
+ function postpone(fn) {
28
+ Promise.resolve().then(fn);
29
+ }
27
30
  function TextEditor(_ref) {
28
31
  let {
29
32
  disabled = false,
33
+ defaultValue,
30
34
  label,
31
35
  maxLength,
32
36
  value,
@@ -40,13 +44,29 @@ function TextEditor(_ref) {
40
44
  const editorRef = (0, _react.useRef)(null);
41
45
  const [editor, setEditor] = (0, _react.useState)(null);
42
46
  const id = (0, _useId.default)();
43
- const [innerValue, setInnerValue] = (0, _react.useState)(value);
47
+ const [innerValue, setInnerValue] = (0, _react.useState)(null);
44
48
  const config = {
45
49
  toolbar: {
46
50
  ...defaultConfig.toolbar,
47
51
  ...configProps?.toolbar
48
52
  }
49
53
  };
54
+ const setEditorContents = (0, _react.useCallback)((e, v) => {
55
+ if (e) {
56
+ const whiteList = {
57
+ ...xss.whiteList,
58
+ a: [...xss.whiteList.a, 'rel']
59
+ };
60
+ const sanitizedValue = xss(v, {
61
+ whiteList
62
+ });
63
+ const content = e.clipboard.convert(sanitizedValue);
64
+ const selection = e.getSelection();
65
+ e.setContents(content, 'silent');
66
+ setInnerValue(sanitizedValue);
67
+ postpone(() => e.setSelection(selection));
68
+ }
69
+ }, []);
50
70
  (0, _react.useEffect)(() => {
51
71
  if (editorRef && editor === null && typeof window === 'object') {
52
72
  // eslint-disable-next-line global-require
@@ -80,8 +100,11 @@ function TextEditor(_ref) {
80
100
  return new Delta().insert('');
81
101
  });
82
102
  setEditor(newEditor);
103
+ if (defaultValue) {
104
+ setEditorContents(newEditor, defaultValue);
105
+ }
83
106
  }
84
- }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image]);
107
+ }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image, setEditorContents, defaultValue]);
85
108
  (0, _react.useEffect)(() => {
86
109
  if (editor) {
87
110
  editor.on('text-change', () => {
@@ -97,18 +120,10 @@ function TextEditor(_ref) {
97
120
  }
98
121
  }, [editor, onChange]);
99
122
  (0, _react.useEffect)(() => {
100
- if (editor) {
101
- const whiteList = {
102
- ...xss.whiteList,
103
- a: [...xss.whiteList.a, 'rel']
104
- };
105
- const sanitizedValue = xss(value, {
106
- whiteList
107
- });
108
- const content = editor.clipboard.convert(sanitizedValue);
109
- editor.setContents(content, 'silent');
123
+ if (value !== innerValue && value !== undefined && value !== null) {
124
+ setEditorContents(editor, value);
110
125
  }
111
- }, [editor, value]);
126
+ }, [editor, innerValue, setEditorContents, value]);
112
127
  function currentLength() {
113
128
  return innerValue?.length || 0;
114
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/react",
3
- "version": "5.0.0-dev.154",
3
+ "version": "5.0.0-dev.155",
4
4
  "author": "Festo UI (styleguide@festo.com)",
5
5
  "license": "apache-2.0",
6
6
  "peerDependencies": {