@laerdal/life-react-components 6.0.1 → 6.0.2

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.
package/README.md CHANGED
@@ -7,11 +7,53 @@
7
7
  - Add the package to your project:
8
8
  - `cd /path/to/your-app`
9
9
  - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
10
+
11
+ - Required providers:
12
+ - There are several providers required for Life React JS components to work as expected.
13
+ You need to wrap your APP with all of them:
14
+
15
+ - ThemeProvider
16
+ This is default ThemeProvider from styled-components package. It should define the theme.
17
+ 'Theme' object should be provided, even it if is just blank object.
18
+ Theme object can contain name of the theme. Acceptable values: dark, light, rqi_dark, rqi_light.
19
+ Also ThemeProvider can be used to override colors of the theme.
20
+
21
+ - ToastProvider
22
+ Provider with Toast related context. Wrap your whole app with this
23
+ if you want to have ability to show/hide Toasts using Life React JS
24
+
25
+ - NavigationProvider
26
+ NavigationProvider - provides library components with navigation, routing and active-route functionality.
27
+ It has 3 functions:
28
+
29
+ navigate?: (path: string, isExternal: boolean) => void;
30
+ Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true.
31
+
32
+ currentPath?: string | undefined;
33
+ Current path in the navigation context.
34
+
35
+ isActiveRoute?: (url: string, exact: boolean) => boolean;
36
+ Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route
37
+
38
+ If you are still using React Router and don't want to remove it from list of your dependencies, you can find implementation of CustomNavigationProvider
39
+ at https://github.com/Laerdal-Medical/dcs-life-react-js/blob/dev/libraries/react-components/.storybook/custom-navigation-provider.tsx <- this implementation is used at
40
+ Storybook.
41
+
42
+ - LifeGlobalStyles
43
+ React component that should be placed in the App.tsx of your project.
44
+ This component will include coloring for chosen theme and add global styles like fonts and others.
45
+
46
+
47
+
48
+
49
+ After adding all providers defined about you can include components or icons and use them.
50
+
10
51
  - Import components in your code:
11
52
  - `import { TextButton } from '@laerdal/life-react-components'`
12
53
  - or icons:
13
54
  - `import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'`
14
55
 
56
+
15
57
  ## How to use a local version of @laerdal/life-react-components
16
58
 
17
59
  - Pull the latest version of @laerdal/life-react-components from Bitbucket.
@@ -9,13 +9,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _react = _interopRequireDefault(require("react"));
12
- var _reactQuill = _interopRequireDefault(require("react-quill"));
12
+ var _reactQuillNew = _interopRequireDefault(require("react-quill-new"));
13
13
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
14
14
  var _styling = require("./styling");
15
15
  var _types = require("../types");
16
16
  var _styles = require("../styles");
17
17
  var _systemicons = require("../icons/systemicons");
18
- require("react-quill/dist/quill.snow.css");
18
+ require("react-quill-new/dist/quill.snow.css");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
20
  const _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -228,7 +228,7 @@ const RichTextField = exports.RichTextField = /*#__PURE__*/_react.default.forwar
228
228
  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);
229
229
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
230
230
  className: `${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`,
231
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
231
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuillNew.default, _objectSpread({
232
232
  ref: ref,
233
233
  readOnly: readOnly || disabled,
234
234
  modules: m,
@@ -265,6 +265,7 @@ RichTextField.propTypes = {
265
265
  readOnly: _propTypes.default.bool,
266
266
  disabled: _propTypes.default.bool,
267
267
  resizable: _propTypes.default.bool,
268
+ modules: _propTypes.default.objectOf(_propTypes.default.any),
268
269
  formats: _propTypes.default.arrayOf(_propTypes.default.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
269
270
  onKeyDown: _propTypes.default.func,
270
271
  onKeyPress: _propTypes.default.func,
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuill","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: StringMap;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuillNew","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,iBAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AACAA,OAAA;AAA6C,IAAAQ,WAAA,GAAAR,OAAA;AAAA,MAAAS,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAEtC,MAAMkC,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,kCAAkCC,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAChI;AACA;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjI;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjI;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,KAAK,EAAC;AAAO,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrH;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,KAAK,EAAC;AAAO,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrH;AACA;AACA;AACA;AACA,MAAML,KAAK,IAAI,IAAAO,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAER,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA,MAAML,KAAK,IAAI,IAAAO,yBAAiB,EAACC,0BAAkB,CAACE,MAAM,EAAET,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC/I;AACA;AACA;AACA;AACA;AACA,QAAQL,KAAK,IAAI,IAAAW,yBAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAER,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACnJ;AACA;AACA;AACA,QAAQL,KAAK,IAAI,IAAAW,yBAAiB,EAACH,0BAAkB,CAACE,MAAM,EAAET,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+BL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,IAAAO,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,sBAAa;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoCf,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,KAAK,EAAC;AAAU,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AAC1H,eAAeL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,KAAK,EAAC;AAAU,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACnG;AACA;AACA,iBAAiBL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,KAAK,EAAC;AAAU,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrG;AACA;AACA;AACA,CAAC;AAAC,IAEUW,oBAAoB,GAAAnB,OAAA,CAAAmB,oBAAA,0BAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AAwBhC,MAAMC,qBAAqB,GAAG,CAC5B,CAAC;EAACC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK;AAAC,CAAC,CAAC,EAC5B,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,EACzC,CAAC;EAAC,MAAM,EAAE;AAAS,CAAC,EAAE;EAAC,MAAM,EAAE;AAAQ,CAAC,CAAC,EACzC,CAAC,MAAM,CAAC,EACR,CAAC,OAAO,CAAC,CACV;AAmGM,MAAMC,aAAa,GAAAtB,OAAA,CAAAsB,aAAA,gBAAGC,cAAK,CAACC,UAAU,CAA0B,CAAAC,IAAA,EAWwBC,GAAG,KAAK;EAAA,IAX/B;MACEC,QAAQ;MACRC,QAAQ;MACRC,iBAAiB;MACjBC,IAAI;MACJC,IAAI,GAAGf,WAAI,CAACgB,MAAM;MAClBvB,KAAK;MACLwB,SAAS;MACTC,OAAO;MACPC;IAEkB,CAAC,GAAAV,IAAA;IADhBW,IAAI,OAAAC,yBAAA,CAAAnE,OAAA,EAAAuD,IAAA,EAAA9D,SAAA;EAG/E,MAAM6C,KAAK,GAAG,IAAA8B,0BAAQ,EAAC,CAAC;EACxB,IAAIC,CAAC,GAAA/C,aAAA,CAAAA,aAAA,KAAQ0C,OAAO,IAAI,CAAC,CAAC;IAAGM,OAAO,EAAEN,OAAO,EAAEM,OAAO,IAAIpB;EAAqB,EAAC;EAChF,IAAIqB,CAAC,GAAGN,OAAO,IAAI3D,MAAM,CAACkE,MAAM,CAACvB,oBAAoB,CAAC,CAAC/B,MAAM,CAACb,CAAC,IAAIA,CAAC,KAAK4C,oBAAoB,CAACwB,KAAK,IAAIpE,CAAC,KAAK4C,oBAAoB,CAACyB,KAAK,IAAIrE,CAAC,KAAK4C,oBAAoB,CAAC0B,OAAO,CAAC;EAE9K,oBACE,IAAAnF,WAAA,CAAAoF,IAAA,EAAC/C,sBAAsB;IACrBgD,SAAS,EAAE,GAAGd,SAAS,GAAG,WAAW,GAAG,EAAE,IAAIF,IAAI,IAAItB,KAAK,IAAI,EAAE,IAAIkB,QAAQ,GAAG,UAAU,GAAG,EAAE,KAAKC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAG;IAAAoB,QAAA,gBACjI,IAAAtF,WAAA,CAAAuF,GAAA,EAAC9F,cAAA,CAAAe,OAAU,EAAAsB,aAAA;MAACkC,GAAG,EAAEA,GAAI;MACTC,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;MAC/BM,OAAO,EAAEK,CAAE;MACX/B,KAAK,EAAE,MAAO;MACd2B,OAAO,EAAEM;IAAE,GACPL,IAAI,CACnB,CAAC,EACDP,iBAAiB,iBAChB,IAAAnE,WAAA,CAAAoF,IAAA,EAACxF,QAAA,CAAA4F,iBAAiB;MAACH,SAAS,EAAEhB,IAAI,IAAI,EAAG;MAACoB,IAAI,EAAE1C,KAAK,IAAI2C,aAAM,CAACC,OAAQ;MAAAL,QAAA,GAEpEvC,KAAK,KAAK2C,aAAM,CAACE,KAAK,gBAClB,IAAA5F,WAAA,CAAAuF,GAAA,EAACxF,YAAA,CAAA8F,SAAS;QAACC,KAAK,EAAEpD,cAAM,CAACC,aAAa,CAAC;UAACC,aAAa,EAAC,MAAM;UAAEC,cAAc,EAAC;QAAU,CAAC,EAAEC,KAAK;MAAE,CAAC,CAAC,gBACnG,IAAA9C,WAAA,CAAAuF,GAAA,EAACxF,YAAA,CAAAgG,gBAAgB;QAACD,KAAK,EAAEpD,cAAM,CAACC,aAAa,CAAC;UAACC,aAAa,EAAC,MAAM;UAAEC,cAAc,EAAC;QAAU,CAAC,EAAEC,KAAK;MAAE,CAAC,CAAC,eAEhH,IAAA9C,WAAA,CAAAuF,GAAA;QAAAD,QAAA,EAAOnB;MAAiB,CAAO,CAAC;IAAA,CACf,CACpB,EACAC,IAAI,IAAI,CAACF,QAAQ,iBAChB,IAAAlE,WAAA,CAAAoF,IAAA,EAACxF,QAAA,CAAAoG,WAAW;MAACX,SAAS,EAAEhB,IAAK;MAAAiB,QAAA,GAC1BlB,IAAI,CAAC6B,IAAI,eACV,IAAAjG,WAAA,CAAAuF,GAAA;QAAAD,QAAA,EAAOlB,IAAI,CAAC8B;MAAO,CAAO,CAAC;IAAA,CAChB,CACd;EAAA,CACqB,CAAC;AAE7B,CAAC,CAAC;AAACtC,aAAA,CAAAuC,SAAA;EA1IDC,EAAE,EAAAC,UAAA,CAAA7F,OAAA,CAAA8F,MAAA;EAKFjB,SAAS,EAAAgB,UAAA,CAAA7F,OAAA,CAAA8F,MAAA;EAKTC,WAAW,EAAAF,UAAA,CAAA7F,OAAA,CAAA8F,MAAA;EAKXrC,QAAQ,EAAAoC,UAAA,CAAA7F,OAAA,CAAAgG,IAAA;EAKRtC,QAAQ,EAAAmC,UAAA,CAAA7F,OAAA,CAAAgG,IAAA;EAKRjC,SAAS,EAAA8B,UAAA,CAAA7F,OAAA,CAAAgG,IAAA;EAKThC,OAAO,EAAA6B,UAAA,CAAA7F,OAAA,CAAAiG,QAAA,CAAAJ,UAAA,CAAA7F,OAAA,CAAAkG,GAAA;EAKPjC,OAAO,EAAA4B,UAAA,CAAA7F,OAAA,CAAAmG,OAAA,CAAAN,UAAA,CAAA7F,OAAA,CAAAoG,KAAA;EAePC,SAAS,EAAAR,UAAA,CAAA7F,OAAA,CAAAsG,IAAA;EAKTC,UAAU,EAAAV,UAAA,CAAA7F,OAAA,CAAAsG,IAAA;EAKVE,OAAO,EAAAX,UAAA,CAAA7F,OAAA,CAAAsG,IAAA;EAKPG,KAAK,EAAAZ,UAAA,CAAA7F,OAAA,CAAAkG,GAAA,CAAAQ,UAAA;EAKLC,QAAQ,EAAAd,UAAA,CAAA7F,OAAA,CAAAsG,IAAA,CAAAI,UAAA;EAKR/C,iBAAiB,EAAAkC,UAAA,CAAA7F,OAAA,CAAA8F;AAAA","ignoreList":[]}
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
- import { Range, UnprivilegedEditor } from "react-quill";
2
+ import ReactQuill, { EmitterSource } from "react-quill-new";
3
3
  import { TextFieldNote } from "./types";
4
4
  import { Size, States } from "../types";
5
- import { Sources, StringMap } from "quill";
6
- import 'react-quill/dist/quill.snow.css';
5
+ import 'react-quill-new/dist/quill.snow.css';
7
6
  export declare const RichTextFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
8
7
  export declare enum RichTextFieldFormats {
9
8
  Background = "background",
@@ -56,7 +55,7 @@ export interface RichTextFieldProps {
56
55
  /**
57
56
  * Optional. An object containing the modules to be used by the rich text field.
58
57
  */
59
- modules?: StringMap;
58
+ modules?: Record<string, unknown>;
60
59
  /**
61
60
  * Optional. An array of formats to be used by the rich text field.
62
61
  */
@@ -64,11 +63,11 @@ export interface RichTextFieldProps {
64
63
  /**
65
64
  * Optional. A function to be called when the rich text field gains focus.
66
65
  */
67
- onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
66
+ onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;
68
67
  /**
69
68
  * Optional. A function to be called when the rich text field loses focus.
70
69
  */
71
- onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
70
+ onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;
72
71
  /**
73
72
  * Optional. A function to be called when a keydown event occurs in the rich text field.
74
73
  */
@@ -5,13 +5,13 @@ const _excluded = ["readOnly", "disabled", "validationMessage", "note", "size",
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  import React from 'react';
8
- import ReactQuill from "react-quill";
8
+ import ReactQuill from "react-quill-new";
9
9
  import styled, { useTheme } from "styled-components";
10
10
  import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
11
11
  import { Size, States } from "../types";
12
12
  import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
13
13
  import { CheckMark, TechnicalWarning } from "../icons/systemicons";
14
- import 'react-quill/dist/quill.snow.css';
14
+ import 'react-quill-new/dist/quill.snow.css';
15
15
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
16
  export const RichTextFieldContainer = styled.div`
17
17
  .quill {
@@ -256,6 +256,7 @@ RichTextField.propTypes = {
256
256
  readOnly: _pt.bool,
257
257
  disabled: _pt.bool,
258
258
  resizable: _pt.bool,
259
+ modules: _pt.objectOf(_pt.any),
259
260
  formats: _pt.arrayOf(_pt.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
260
261
  onKeyDown: _pt.func,
261
262
  onKeyPress: _pt.func,
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: StringMap;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "6.0.1",
3
+ "version": "6.0.2",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],
@@ -74,9 +74,9 @@
74
74
  "react-dom": "^19.0.0",
75
75
  "react-inlinesvg": "^4.2.0",
76
76
  "react-modal": "^3.16.0",
77
- "react-quill": "^2.0.0",
78
- "react-resize-detector": "^11.0.1",
79
- "rooks": "^7.1.1",
77
+ "react-quill-new": "^3.6.0",
78
+ "react-resize-detector": "^12.0.0",
79
+ "rooks": "8.4.0",
80
80
  "styled-components": "^6.1.13",
81
81
  "typescript": "^5.1.2"
82
82
  },