@laerdal/life-react-components 3.2.3-dev.5 → 3.2.3-dev.6
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/dist/InputFields/RichTextField.cjs +8 -3
- package/dist/InputFields/RichTextField.cjs.map +1 -1
- package/dist/InputFields/RichTextField.js +8 -3
- package/dist/InputFields/RichTextField.js.map +1 -1
- package/dist/styles/global.cjs +2 -1
- package/dist/styles/global.cjs.map +1 -1
- package/dist/styles/global.js +2 -1
- package/dist/styles/global.js.map +1 -1
- package/package.json +1 -1
|
@@ -18,11 +18,11 @@ var _styles = require("../styles");
|
|
|
18
18
|
var _systemicons = require("../icons/systemicons");
|
|
19
19
|
require("react-quill/dist/quill.snow.css");
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
-
var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules"];
|
|
21
|
+
var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
|
|
22
22
|
var _templateObject;
|
|
23
23
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
24
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
-
var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n
|
|
25
|
+
var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n &.medium {\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
26
26
|
exports.RichTextFieldContainer = RichTextFieldContainer;
|
|
27
27
|
var RichTextFieldFormats;
|
|
28
28
|
exports.RichTextFieldFormats = RichTextFieldFormats;
|
|
@@ -67,17 +67,22 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
67
67
|
state = _ref.state,
|
|
68
68
|
resizable = _ref.resizable,
|
|
69
69
|
modules = _ref.modules,
|
|
70
|
+
formats = _ref.formats,
|
|
70
71
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
71
72
|
var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
|
|
72
73
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
73
74
|
});
|
|
75
|
+
var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
|
|
76
|
+
return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
|
|
77
|
+
});
|
|
74
78
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
|
|
75
79
|
className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
76
80
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
|
|
77
81
|
ref: ref,
|
|
78
82
|
readOnly: readOnly || disabled,
|
|
79
83
|
modules: m,
|
|
80
|
-
theme: 'snow'
|
|
84
|
+
theme: 'snow',
|
|
85
|
+
formats: f
|
|
81
86
|
}, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
|
|
82
87
|
className: size || '',
|
|
83
88
|
type: state !== null && state !== void 0 ? state : _types.States.Invalid,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor{\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n \n &.medium {\n .ql-editor{\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n &.medium {\n .ql-editor {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n formats,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n formats={f}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAElC,IAAMA,sBAAsB,GAAGC,yBAAM,CAACC,GAAG,muDAMdC,cAAM,CAACC,WAAW,EAKlBD,cAAM,CAACE,WAAW,EAIlBF,cAAM,CAACG,YAAY,EAInBH,cAAM,CAACI,WAAW,EAIlBJ,cAAM,CAACK,WAAW,EAI9C,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAER,cAAM,CAACS,KAAK,CAAC,EAI3D,IAAAH,yBAAiB,EAACC,0BAAkB,CAACG,MAAM,EAAEV,cAAM,CAACW,WAAW,CAAC,EAK9D,IAAAC,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAER,cAAM,CAACS,KAAK,CAAC,EAI3D,IAAAG,yBAAiB,EAACL,0BAAkB,CAACG,MAAM,EAAEV,cAAM,CAACW,WAAW,CAAC,EAQzCX,cAAM,CAACa,WAAW,EAyB3C,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,EAuB1BC,sBAAa,EASejB,cAAM,CAACkB,WAAW,EACvClB,cAAM,CAACmB,WAAW,EAGhBnB,cAAM,CAACmB,WAAW,CAIlC;AAAC;AAAA,IAEUC,oBAAoB;AAAA;AAAA,WAApBA,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;AAAA,GAApBA,oBAAoB,oCAApBA,oBAAoB;AAwBhC,IAAMC,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;AA8BM,IAAMC,aAAa,gBAAGC,cAAK,CAACC,UAAU,CAA0B,gBAWwBC,GAAG,EAAK;EAAA;EAAA,IAV7BC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGhB,WAAI,CAACiB,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAG/E,IAAIC,CAAC,mCAAQH,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,CAAC,CAAC;IAAGI,OAAO,sBAAEJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,+DAAIlB;EAAqB,EAAC;EAChF,IAAImB,CAAC,GAAGJ,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIK,MAAM,CAACC,MAAM,CAACtB,oBAAoB,CAAC,CAACuB,MAAM,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,KAAKxB,oBAAoB,CAACyB,KAAK,IAAID,CAAC,KAAKxB,oBAAoB,CAAC0B,KAAK,IAAIF,CAAC,KAAKxB,oBAAoB,CAAC2B,OAAO;EAAA,EAAC;EAE9K,oBACE,sBAAC,sBAAsB;IACrB,SAAS,YAAKb,SAAS,GAAG,WAAW,GAAG,EAAE,cAAIH,IAAI,cAAIE,KAAK,IAAI,EAAE,cAAIN,QAAQ,GAAG,UAAU,GAAG,EAAE,eAAKC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;IAAA,wBACjI,qBAAC,mBAAU;MAAC,GAAG,EAAEF,GAAI;MACT,QAAQ,EAAEC,QAAQ,IAAIC,QAAS;MAC/B,OAAO,EAAEU,CAAE;MACX,KAAK,EAAE,MAAO;MACd,OAAO,EAAEE;IAAE,GACPH,IAAI,EAClB,EACDR,iBAAiB,iBAChB,sBAAC,0BAAiB;MAAC,SAAS,EAAEE,IAAI,IAAI,EAAG;MAAC,IAAI,EAAEE,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIe,aAAM,CAACC,OAAQ;MAAA,WAEpEhB,KAAK,KAAKe,aAAM,CAACE,KAAK,gBAClB,qBAAC,sBAAS;QAAC,KAAK,EAAElD,cAAM,CAACmD;MAAY,EAAE,gBACvC,qBAAC,6BAAgB;QAAC,KAAK,EAAEnD,cAAM,CAACoD;MAAa,EAAE,eAErD;QAAA,UAAOvB;MAAiB,EAAQ;IAAA,EAEnC,EACAC,IAAI,IAAI,CAACF,QAAQ,iBAChB,sBAAC,oBAAW;MAAC,SAAS,EAAEG,IAAK;MAAA,WAC1BD,IAAI,CAACuB,IAAI,eACV;QAAA,UAAOvB,IAAI,CAACwB;MAAO,EAAQ;IAAA,EAE9B;EAAA,EACsB;AAE7B,CAAC,CAAC;AAAC;AAAA;EAvEDC,EAAE;EACFC,SAAS;EACTC,WAAW;EACX9B,QAAQ;EACRC,QAAQ;EACRM,SAAS;EAGTE,OAAO;EAMPsB,SAAS;EACTC,UAAU;EACVC,OAAO;EAEPC,KAAK;EACLC,QAAQ;EAERjC,iBAAiB;AAAA"}
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules"];
|
|
5
|
+
var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
|
|
6
6
|
var _templateObject;
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -16,7 +16,7 @@ import { CheckMark, TechnicalWarning } from "../icons/systemicons";
|
|
|
16
16
|
import 'react-quill/dist/quill.snow.css';
|
|
17
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
|
-
export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n
|
|
19
|
+
export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n &.medium {\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
|
|
20
20
|
export var RichTextFieldFormats;
|
|
21
21
|
(function (RichTextFieldFormats) {
|
|
22
22
|
RichTextFieldFormats["Background"] = "background";
|
|
@@ -59,17 +59,22 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
59
59
|
state = _ref.state,
|
|
60
60
|
resizable = _ref.resizable,
|
|
61
61
|
modules = _ref.modules,
|
|
62
|
+
formats = _ref.formats,
|
|
62
63
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
63
64
|
var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
|
|
64
65
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
65
66
|
});
|
|
67
|
+
var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
|
|
68
|
+
return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
|
|
69
|
+
});
|
|
66
70
|
return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
|
|
67
71
|
className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
68
72
|
children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
|
|
69
73
|
ref: ref,
|
|
70
74
|
readOnly: readOnly || disabled,
|
|
71
75
|
modules: m,
|
|
72
|
-
theme: 'snow'
|
|
76
|
+
theme: 'snow',
|
|
77
|
+
formats: f
|
|
73
78
|
}, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
|
|
74
79
|
className: size || '',
|
|
75
80
|
type: state !== null && state !== void 0 ? state : States.Invalid,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor{\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n \n &.medium {\n .ql-editor{\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAmC,aAAa;AAEjE,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,aAAa,EAAEC,iBAAiB,QAAO,WAAW;AACvE,SAAQC,IAAI,EAAEC,MAAM,QAAO,UAAU;AACrC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAO,WAAW;AAC5G,SAAQC,SAAS,EAAEC,gBAAgB,QAAO,sBAAsB;AAEhE,OAAO,iCAAiC;AAAC;AAAA;AAEzC,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACc,GAAG,2rDAMdR,MAAM,CAACS,WAAW,EAKlBT,MAAM,CAACU,WAAW,EAIlBV,MAAM,CAACW,YAAY,EAInBX,MAAM,CAACY,WAAW,EAIlBZ,MAAM,CAACa,WAAW,EAI9CX,iBAAiB,CAACC,kBAAkB,CAACW,MAAM,EAAEd,MAAM,CAACe,WAAW,CAAC,EAGhEb,iBAAiB,CAACC,kBAAkB,CAACW,MAAM,EAAEd,MAAM,CAACe,WAAW,CAAC,EAK9Dd,iBAAiB,CAACE,kBAAkB,CAACW,MAAM,EAAEd,MAAM,CAACe,WAAW,CAAC,EAGhEd,iBAAiB,CAACE,kBAAkB,CAACW,MAAM,EAAEd,MAAM,CAACe,WAAW,CAAC,EAQzCf,MAAM,CAACgB,WAAW,EAyB3CZ,gBAAgB,CAACN,IAAI,CAACmB,KAAK,CAAC,EAsB1BrB,aAAa,EASeI,MAAM,CAACkB,WAAW,EACvClB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACmB,WAAW,CAIlC;AAED,WAAYC,oBAAoB;AAsB/B,WAtBWA,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;AAAA,GAApBA,oBAAoB,KAApBA,oBAAoB;AAwBhC,IAAMC,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;AA8BD,OAAO,IAAMC,aAAa,gBAAG/B,KAAK,CAACgC,UAAU,CAA0B,gBAUwBC,GAAG,EAAK;EAAA;EAAA,IAT7BC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGhC,IAAI,CAACiC,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAG/E,IAAIC,CAAC,mCAAQF,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,CAAC,CAAC;IAAGG,OAAO,sBAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,OAAO,+DAAIhB;EAAqB,EAAC;EAEhF,oBACE,MAAC,sBAAsB;IACrB,SAAS,YAAKY,SAAS,GAAG,WAAW,GAAG,EAAE,cAAIH,IAAI,cAAIE,KAAK,IAAI,EAAE,cAAIN,QAAQ,GAAG,UAAU,GAAG,EAAE,eAAKC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;IAAA,wBACjI,KAAC,UAAU;MAAC,GAAG,EAAEF,GAAI;MACT,QAAQ,EAAEC,QAAQ,IAAIC,QAAS;MAC/B,OAAO,EAAES,CAAE;MACX,KAAK,EAAE;IAAO,GACVD,IAAI,EAClB,EACDP,iBAAiB,iBAChB,MAAC,iBAAiB;MAAC,SAAS,EAAEE,IAAI,IAAI,EAAG;MAAC,IAAI,EAAEE,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIjC,MAAM,CAACuC,OAAQ;MAAA,WAEpEN,KAAK,KAAKjC,MAAM,CAACwC,KAAK,gBAClB,KAAC,SAAS;QAAC,KAAK,EAAEvC,MAAM,CAACwC;MAAY,EAAE,gBACvC,KAAC,gBAAgB;QAAC,KAAK,EAAExC,MAAM,CAACyC;MAAa,EAAE,eAErD;QAAA,UAAOb;MAAiB,EAAQ;IAAA,EAEnC,EACAC,IAAI,IAAI,CAACF,QAAQ,iBAChB,MAAC,WAAW;MAAC,SAAS,EAAEG,IAAK;MAAA,WAC1BD,IAAI,CAACa,IAAI,eACV;QAAA,UAAOb,IAAI,CAACc;MAAO,EAAQ;IAAA,EAE9B;EAAA,EACsB;AAE7B,CAAC,CAAC;AAAC;EApEDC,EAAE;EACFC,SAAS;EACTC,WAAW;EACXpB,QAAQ;EACRC,QAAQ;EACRM,SAAS;EAGTc,OAAO;EAMPC,SAAS;EACTC,UAAU;EACVC,OAAO;EAEPC,KAAK;EACLC,QAAQ;EAERxB,iBAAiB;AAAA"}
|
|
1
|
+
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Regular","black","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n &.medium {\n .ql-editor {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n formats,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n formats={f}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
|
package/dist/styles/global.cjs
CHANGED
|
@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _colors = _interopRequireDefault(require("./colors"));
|
|
9
9
|
var _typography = require("./typography");
|
|
10
|
-
var
|
|
10
|
+
var _figmaSvg = require("@laerdal/figma-svg");
|
|
11
|
+
var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(_colors.default.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(_colors.default.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,").concat(btoa(_figmaSvg.SystemIcons.ExtendTextArea), "\");\n content: 'test';\n }\n\n \n \n \n ").concat(_typography.Typography, "\n");
|
|
11
12
|
var _default = globalStyles;
|
|
12
13
|
exports.default = _default;
|
|
13
14
|
//# sourceMappingURL=global.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100","Typography"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,YAAY,sGAKLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,
|
|
1
|
+
{"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100","btoa","SystemIcons","ExtendTextArea","Typography"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\nimport {SystemIcons} from \"@laerdal/figma-svg\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,${btoa(SystemIcons.ExtendTextArea)}\");\n content: 'test';\n }\n\n \n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,YAAY,sGAKLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,oSAaqBC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAAC,gEAOrFC,sBAAU,OACb;AAAC,eAEaP,YAAY;AAAA"}
|
package/dist/styles/global.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import COLORS from './colors';
|
|
2
2
|
import { Typography } from "./typography";
|
|
3
|
-
|
|
3
|
+
import { SystemIcons } from "@laerdal/figma-svg";
|
|
4
|
+
var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(COLORS.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(COLORS.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,").concat(btoa(SystemIcons.ExtendTextArea), "\");\n content: 'test';\n }\n\n \n \n \n ").concat(Typography, "\n");
|
|
4
5
|
export default globalStyles;
|
|
5
6
|
//# sourceMappingURL=global.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.js","names":["COLORS","Typography","globalStyles","black","primary_100"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;
|
|
1
|
+
{"version":3,"file":"global.js","names":["COLORS","Typography","SystemIcons","globalStyles","black","primary_100","btoa","ExtendTextArea"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\nimport {SystemIcons} from \"@laerdal/figma-svg\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,${btoa(SystemIcons.ExtendTextArea)}\");\n content: 'test';\n }\n\n \n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,WAAW,QAAO,oBAAoB;AAE9C,IAAMC,YAAY,sGAKLH,MAAM,CAACI,KAAK,83BAqDPJ,MAAM,CAACK,WAAW,oSAaqBC,IAAI,CAACJ,WAAW,CAACK,cAAc,CAAC,gEAOrFN,UAAU,OACb;AAED,eAAeE,YAAY"}
|