phx-react 1.3.158 → 1.3.160
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/cjs/components/Combobox/Combobox.d.ts +2 -3
- package/dist/cjs/components/Combobox/Combobox.js +17 -11
- package/dist/cjs/components/Combobox/Combobox.js.map +1 -1
- package/dist/cjs/components/Combobox/custom-multi-select.js +1 -1
- package/dist/cjs/components/Combobox/custom-multi-select.js.map +1 -1
- package/dist/cjs/components/TextEditor/plugins/ExtendedTextNode.d.ts +8 -0
- package/dist/cjs/components/TextEditor/plugins/ExtendedTextNode.js +84 -0
- package/dist/cjs/components/TextEditor/plugins/ExtendedTextNode.js.map +1 -0
- package/dist/cjs/components/TextEditor/textEditor.d.ts +1 -1
- package/dist/cjs/components/TextEditor/textEditor.js +42 -10
- package/dist/cjs/components/TextEditor/textEditor.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.d.ts +2 -3
- package/dist/esm/components/Combobox/Combobox.js +17 -11
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/custom-multi-select.js +1 -1
- package/dist/esm/components/Combobox/custom-multi-select.js.map +1 -1
- package/dist/esm/components/TextEditor/plugins/ExtendedTextNode.d.ts +8 -0
- package/dist/esm/components/TextEditor/plugins/ExtendedTextNode.js +81 -0
- package/dist/esm/components/TextEditor/plugins/ExtendedTextNode.js.map +1 -0
- package/dist/esm/components/TextEditor/textEditor.d.ts +1 -1
- package/dist/esm/components/TextEditor/textEditor.js +43 -11
- package/dist/esm/components/TextEditor/textEditor.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,13 +2,12 @@ import React from 'react';
|
|
|
2
2
|
export interface ComboboxProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
label?: string;
|
|
5
|
-
error?: boolean;
|
|
6
5
|
listOptions?: any;
|
|
7
6
|
multiple?: boolean;
|
|
8
7
|
name?: any;
|
|
9
8
|
id?: any;
|
|
10
9
|
defaultValue?: any;
|
|
11
|
-
errorType?: 'required-field' | 'duplicate-field';
|
|
12
10
|
onChange?: any;
|
|
11
|
+
placeholder?: string;
|
|
13
12
|
}
|
|
14
|
-
export declare const PHXCombobox: ({ multiple, listOptions, className, label, name, onChange, defaultValue, id, }: ComboboxProps) => React.JSX.Element;
|
|
13
|
+
export declare const PHXCombobox: ({ multiple, listOptions, className, label, name, onChange, defaultValue, placeholder, id, }: ComboboxProps) => React.JSX.Element;
|
|
@@ -7,7 +7,7 @@ var react_hook_form_1 = require("react-hook-form");
|
|
|
7
7
|
var custom_multi_select_1 = require("./custom-multi-select");
|
|
8
8
|
var react_select_1 = tslib_1.__importDefault(require("react-select"));
|
|
9
9
|
var PHXCombobox = function (_a) {
|
|
10
|
-
var _b = _a.multiple, multiple = _b === void 0 ? false : _b, listOptions = _a.listOptions, className = _a.className, label = _a.label, name = _a.name, onChange = _a.onChange, defaultValue = _a.defaultValue, id = _a.id;
|
|
10
|
+
var _b = _a.multiple, multiple = _b === void 0 ? false : _b, listOptions = _a.listOptions, className = _a.className, label = _a.label, name = _a.name, onChange = _a.onChange, defaultValue = _a.defaultValue, placeholder = _a.placeholder, id = _a.id;
|
|
11
11
|
var filterOptions = function (option, inputValue) {
|
|
12
12
|
if (!inputValue) {
|
|
13
13
|
return true;
|
|
@@ -24,20 +24,26 @@ var PHXCombobox = function (_a) {
|
|
|
24
24
|
var control = (0, react_hook_form_1.useForm)().control;
|
|
25
25
|
return (react_1["default"].createElement("div", { className: className },
|
|
26
26
|
label && react_1["default"].createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
|
|
27
|
-
react_1["default"].createElement(react_hook_form_1.Controller, { control: control, name: name, rules: { required: true }, defaultValue: defaultValue
|
|
28
|
-
?
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
react_1["default"].createElement(react_hook_form_1.Controller, { control: control, name: name, rules: { required: true }, defaultValue: !defaultValue
|
|
28
|
+
? ''
|
|
29
|
+
: multiple
|
|
30
|
+
? defaultValue.map(function (item) { return ({
|
|
31
|
+
value: listOptions.find(function (option) { return option.id === item; }).id,
|
|
32
|
+
label: listOptions.find(function (option) { return option.id === item; }).name
|
|
33
|
+
}); })
|
|
34
|
+
: { value: defaultValue, label: listOptions.find(function (option) { return option.id === defaultValue; }).name }, render: function (_a) {
|
|
33
35
|
var field = _a.field;
|
|
34
36
|
return (react_1["default"].createElement(react_select_1["default"], tslib_1.__assign({}, field, { onChange: function (val) {
|
|
35
37
|
handleChange(val);
|
|
36
38
|
field.onChange(val);
|
|
37
|
-
}, id: id, className: 'block w-full rounded-md border-gray-300 sm:text-sm', isMulti: multiple, filterOption: filterOptions, defaultValue: defaultValue
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
}, id: id, placeholder: placeholder, className: 'block w-full rounded-md border-gray-300 sm:text-sm', isMulti: multiple, filterOption: filterOptions, defaultValue: !defaultValue
|
|
40
|
+
? ''
|
|
41
|
+
: multiple
|
|
42
|
+
? defaultValue.map(function (item) { return ({
|
|
43
|
+
value: listOptions.find(function (option) { return option.id === item; }).id,
|
|
44
|
+
label: listOptions.find(function (option) { return option.id === item; }).name
|
|
45
|
+
}); })
|
|
46
|
+
: { value: defaultValue, label: listOptions.find(function (option) { return option.id === defaultValue; }).name }, options: listOptions === null || listOptions === void 0 ? void 0 : listOptions.map(function (people) { return ({ value: people.id, label: people.name }); }), styles: custom_multi_select_1.customStyles, menuPortalTarget: document.body })));
|
|
41
47
|
} })));
|
|
42
48
|
};
|
|
43
49
|
exports.PHXCombobox = PHXCombobox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,mDAAqD;AACrD,6DAAoD;AACpD,sEAAiC;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ exports.customStyles = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
exports.customStyles = {
|
|
6
6
|
control: function (base) { return (tslib_1.__assign(tslib_1.__assign({}, base), { borderRadius: '8px', '&:hover': { borderColor: '#64748b' }, border: '1px solid lightgray', boxShadow: 'none' })); },
|
|
7
|
-
placeholder: function (provided) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: '#6B7280', fontSize: '
|
|
7
|
+
placeholder: function (provided) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: '#6B7280', fontSize: '0.8125rem', fontWeight: 400 })); },
|
|
8
8
|
dropdownIndicator: function (provided) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: '#787f8d', width: '2.1rem' })); },
|
|
9
9
|
clearIndicator: function (provided) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: '#787f8d', width: '2.1rem' })); },
|
|
10
10
|
input: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { border: state.isFocused ? 'none' : provided.border, outline: state.isFocused ? 'none' : provided.outline, caretColor: '#000' })); },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-multi-select.js","sourceRoot":"","sources":["../../../../src/components/Combobox/custom-multi-select.ts"],"names":[],"mappings":";;;;AAAa,QAAA,YAAY,GAAG;IAC1B,OAAO,EAAE,UAAC,IAAS,IAAK,OAAA,uCACnB,IAAI,KACP,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EACrC,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,MAAM,IACjB,EANsB,CAMtB;IACF,WAAW,EAAE,UAAC,QAAa,IAAK,OAAA,uCAC3B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"custom-multi-select.js","sourceRoot":"","sources":["../../../../src/components/Combobox/custom-multi-select.ts"],"names":[],"mappings":";;;;AAAa,QAAA,YAAY,GAAG;IAC1B,OAAO,EAAE,UAAC,IAAS,IAAK,OAAA,uCACnB,IAAI,KACP,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EACrC,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,MAAM,IACjB,EANsB,CAMtB;IACF,WAAW,EAAE,UAAC,QAAa,IAAK,OAAA,uCAC3B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,GAAG,IACf,EAL8B,CAK9B;IACF,iBAAiB,EAAE,UAAC,QAAa,IAAK,OAAA,uCACjC,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,QAAQ,IACf,EAJoC,CAIpC;IACF,cAAc,EAAE,UAAC,QAAa,IAAK,OAAA,uCAC9B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,QAAQ,IACf,EAJiC,CAIjC;IACF,KAAK,EAAE,UAAC,QAAa,EAAE,KAAU,IAAK,OAAA,uCACjC,QAAQ,KACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAClD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,EACpD,UAAU,EAAE,MAAM,IAClB,EALoC,CAKpC;IACF,gBAAgB,EAAE,UAAC,QAAa,IAAK,OAAA,uCAChC,QAAQ,KACX,SAAS,EAAE;YACT,eAAe,EAAE,SAAS;YAC1B,KAAK,EAAE,OAAO;SACf,EACD,gCAAgC,EAAE;YAChC,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB,IACD,EAVmC,CAUnC;IACF,IAAI,EAAE,UAAC,QAAa,IAAK,OAAA,uCACpB,QAAQ,KACX,eAAe,EAAE,OAAO,EACxB,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,yBAAyB,EACpC,OAAO,EAAE,OAAO,IAChB,EANuB,CAMvB;IACF,MAAM,EAAE,UAAC,QAAa,EAAE,KAAU,IAAK,OAAA,uCAClC,QAAQ,KACX,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAC7D,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE;YACR,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACzD,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,MAAM;SACd,IACD,EAbqC,CAarC;CACH,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DOMConversionMap, NodeKey, TextNode, SerializedTextNode } from 'lexical';
|
|
2
|
+
export declare class ExtendedTextNode extends TextNode {
|
|
3
|
+
constructor(text: string, key?: NodeKey);
|
|
4
|
+
static getType(): string;
|
|
5
|
+
static clone(node: ExtendedTextNode): ExtendedTextNode;
|
|
6
|
+
static importDOM(): DOMConversionMap | null;
|
|
7
|
+
static importJSON(serializedNode: SerializedTextNode): TextNode;
|
|
8
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
exports.ExtendedTextNode = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var lexical_1 = require("lexical");
|
|
6
|
+
var ExtendedTextNode = /** @class */ (function (_super) {
|
|
7
|
+
tslib_1.__extends(ExtendedTextNode, _super);
|
|
8
|
+
function ExtendedTextNode(text, key) {
|
|
9
|
+
return _super.call(this, text, key) || this;
|
|
10
|
+
}
|
|
11
|
+
ExtendedTextNode.getType = function () {
|
|
12
|
+
return 'extended-text';
|
|
13
|
+
};
|
|
14
|
+
ExtendedTextNode.clone = function (node) {
|
|
15
|
+
return new ExtendedTextNode(node.__text, node.__key);
|
|
16
|
+
};
|
|
17
|
+
ExtendedTextNode.importDOM = function () {
|
|
18
|
+
var importers = lexical_1.TextNode.importDOM();
|
|
19
|
+
return tslib_1.__assign(tslib_1.__assign({}, importers), { code: function () { return ({
|
|
20
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.code),
|
|
21
|
+
priority: 1
|
|
22
|
+
}); }, em: function () { return ({
|
|
23
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.em),
|
|
24
|
+
priority: 1
|
|
25
|
+
}); }, span: function () { return ({
|
|
26
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.span),
|
|
27
|
+
priority: 1
|
|
28
|
+
}); }, strong: function () { return ({
|
|
29
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.strong),
|
|
30
|
+
priority: 1
|
|
31
|
+
}); }, sub: function () { return ({
|
|
32
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.sub),
|
|
33
|
+
priority: 1
|
|
34
|
+
}); }, sup: function () { return ({
|
|
35
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.sup),
|
|
36
|
+
priority: 1
|
|
37
|
+
}); } });
|
|
38
|
+
};
|
|
39
|
+
ExtendedTextNode.importJSON = function (serializedNode) {
|
|
40
|
+
return lexical_1.TextNode.importJSON(serializedNode);
|
|
41
|
+
};
|
|
42
|
+
return ExtendedTextNode;
|
|
43
|
+
}(lexical_1.TextNode));
|
|
44
|
+
exports.ExtendedTextNode = ExtendedTextNode;
|
|
45
|
+
function patchStyleConversion(originalDOMConverter) {
|
|
46
|
+
return function (node) {
|
|
47
|
+
var original = originalDOMConverter === null || originalDOMConverter === void 0 ? void 0 : originalDOMConverter(node);
|
|
48
|
+
if (!original) {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
var originalOutput = original.conversion(node);
|
|
52
|
+
if (!originalOutput) {
|
|
53
|
+
return originalOutput;
|
|
54
|
+
}
|
|
55
|
+
var backgroundColor = node.style.backgroundColor;
|
|
56
|
+
var color = node.style.color;
|
|
57
|
+
var fontFamily = node.style.fontFamily;
|
|
58
|
+
var fontWeight = node.style.fontWeight;
|
|
59
|
+
var fontSize = node.style.fontSize;
|
|
60
|
+
var textDecoration = node.style.textDecoration;
|
|
61
|
+
return tslib_1.__assign(tslib_1.__assign({}, originalOutput), { forChild: function (lexicalNode, parent) {
|
|
62
|
+
var _a;
|
|
63
|
+
var originalForChild = (_a = originalOutput === null || originalOutput === void 0 ? void 0 : originalOutput.forChild) !== null && _a !== void 0 ? _a : (function (x) { return x; });
|
|
64
|
+
var result = originalForChild(lexicalNode, parent);
|
|
65
|
+
if ((0, lexical_1.$isTextNode)(result)) {
|
|
66
|
+
var style = [
|
|
67
|
+
backgroundColor ? "background-color: ".concat(backgroundColor) : null,
|
|
68
|
+
color ? "color: ".concat(color) : null,
|
|
69
|
+
fontFamily ? "font-family: ".concat(fontFamily) : null,
|
|
70
|
+
fontWeight ? "font-weight: ".concat(fontWeight) : null,
|
|
71
|
+
fontSize ? "font-size: ".concat(fontSize) : null,
|
|
72
|
+
textDecoration ? "text-decoration: ".concat(textDecoration) : null,
|
|
73
|
+
]
|
|
74
|
+
.filter(function (value) { return value != null; })
|
|
75
|
+
.join('; ');
|
|
76
|
+
if (style.length > 0) {
|
|
77
|
+
return result.setStyle(style);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
return result;
|
|
81
|
+
} });
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=ExtendedTextNode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExtendedTextNode.js","sourceRoot":"","sources":["../../../../../src/components/TextEditor/plugins/ExtendedTextNode.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const PHXTextEditor: ({ onChangeEditor }: any) => React.JSX.Element;
|
|
2
|
+
export declare const PHXTextEditor: ({ onChangeEditor, value }: any) => React.JSX.Element;
|
|
@@ -3,6 +3,7 @@ exports.__esModule = true;
|
|
|
3
3
|
exports.PHXTextEditor = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var code_1 = require("@lexical/code");
|
|
6
|
+
var html_1 = require("@lexical/html");
|
|
6
7
|
var link_1 = require("@lexical/link");
|
|
7
8
|
var list_1 = require("@lexical/list");
|
|
8
9
|
var markdown_1 = require("@lexical/markdown");
|
|
@@ -18,9 +19,11 @@ var LexicalOnChangePlugin_1 = require("@lexical/react/LexicalOnChangePlugin");
|
|
|
18
19
|
var LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
|
|
19
20
|
var rich_text_1 = require("@lexical/rich-text");
|
|
20
21
|
var table_1 = require("@lexical/table");
|
|
22
|
+
var lexical_1 = require("lexical");
|
|
21
23
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
22
24
|
var AutoLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/AutoLinkPlugin"));
|
|
23
25
|
var CodeHighlightPlugin_1 = tslib_1.__importDefault(require("./plugins/CodeHighlightPlugin"));
|
|
26
|
+
var ExtendedTextNode_1 = require("./plugins/ExtendedTextNode");
|
|
24
27
|
var ListMaxIndentLevelPlugin_1 = tslib_1.__importDefault(require("./plugins/ListMaxIndentLevelPlugin"));
|
|
25
28
|
var ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
|
|
26
29
|
var ExampleTheme_1 = tslib_1.__importDefault(require("./themes/ExampleTheme"));
|
|
@@ -28,16 +31,19 @@ function Placeholder() {
|
|
|
28
31
|
return react_1["default"].createElement("div", { className: 'editor-placeholder' }, "Enter some rich text...");
|
|
29
32
|
}
|
|
30
33
|
var PHXTextEditor = function (_a) {
|
|
31
|
-
var onChangeEditor = _a.onChangeEditor;
|
|
34
|
+
var onChangeEditor = _a.onChangeEditor, value = _a.value;
|
|
32
35
|
var editorConfig = {
|
|
33
|
-
// The editor theme
|
|
34
36
|
theme: ExampleTheme_1["default"],
|
|
35
|
-
|
|
37
|
+
editorState: prepopulatedRichText,
|
|
36
38
|
onError: function (error) {
|
|
37
39
|
throw error;
|
|
38
40
|
},
|
|
39
|
-
// Any custom nodes go here
|
|
40
41
|
nodes: [
|
|
42
|
+
ExtendedTextNode_1.ExtendedTextNode,
|
|
43
|
+
{
|
|
44
|
+
replace: lexical_1.TextNode,
|
|
45
|
+
"with": function (node) { return new ExtendedTextNode_1.ExtendedTextNode(node.__text, node.__key); }
|
|
46
|
+
},
|
|
41
47
|
rich_text_1.HeadingNode,
|
|
42
48
|
list_1.ListNode,
|
|
43
49
|
list_1.ListItemNode,
|
|
@@ -51,16 +57,42 @@ var PHXTextEditor = function (_a) {
|
|
|
51
57
|
link_1.LinkNode,
|
|
52
58
|
]
|
|
53
59
|
};
|
|
54
|
-
var
|
|
55
|
-
var onChange = function () {
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
var _b = (0, react_1.useState)(''), htmll = _b[0], setHtmll = _b[1];
|
|
61
|
+
var onChange = function (editorState, editor) {
|
|
62
|
+
editorState.read(function () {
|
|
63
|
+
var value = JSON.stringify(editorState);
|
|
64
|
+
console.log(value);
|
|
65
|
+
});
|
|
66
|
+
editor.update(function () {
|
|
67
|
+
var rawHTML = (0, html_1.$generateHtmlFromNodes)(editor, null);
|
|
68
|
+
var base64 = btoa(unescape(encodeURIComponent(rawHTML)));
|
|
69
|
+
setHtmll(base64);
|
|
70
|
+
});
|
|
58
71
|
};
|
|
72
|
+
onChangeEditor(htmll);
|
|
73
|
+
function prepopulatedRichText() {
|
|
74
|
+
if (value) {
|
|
75
|
+
var html = atob(value);
|
|
76
|
+
var utf8Array = new Uint8Array(html.length);
|
|
77
|
+
for (var i = 0; i < html.length; i++) {
|
|
78
|
+
utf8Array[i] = html.charCodeAt(i);
|
|
79
|
+
}
|
|
80
|
+
var utf8Text = new TextDecoder('utf-8').decode(utf8Array);
|
|
81
|
+
var editor = (0, lexical_1.createEditor)();
|
|
82
|
+
var parser = new DOMParser();
|
|
83
|
+
var dom = parser.parseFromString(utf8Text, 'text/html');
|
|
84
|
+
var nodes = (0, html_1.$generateNodesFromDOM)(editor, dom);
|
|
85
|
+
var root = (0, lexical_1.$getRoot)();
|
|
86
|
+
if (root.getFirstChild() === null) {
|
|
87
|
+
root.append.apply(root, nodes);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
59
91
|
return (react_1["default"].createElement(LexicalComposer_1.LexicalComposer, { initialConfig: editorConfig },
|
|
60
92
|
react_1["default"].createElement("div", { className: 'editor-container' },
|
|
61
93
|
react_1["default"].createElement(ToolbarPlugin_1["default"], null),
|
|
62
|
-
react_1["default"].createElement("div", {
|
|
63
|
-
react_1["default"].createElement("style", null, "\n ul li {\n /* list-style: inherit !important; */\n list-style-type: disc !important;\n \n }\n \n ol {\n /* list-style: inherit !important; */\n list-style-type: decimal !important;\n }\n .dropdown .item.fontsize-item,\n .dropdown .item.fontsize-item .text {\n min-width: unset;\n }\n .font-size .dropdown-button-text {\n display: flex !important;\n }\n .other h2 {\n font-size: 18px;\n color: #444;\n margin-bottom: 7px;\n }\n \n .other a {\n color: #777;\n text-decoration: underline;\n font-size: 14px;\n }\n \n .other ul {\n padding: 0;\n margin: 0;\n list-style-type: none;\n }\n \n .App {\n font-family: sans-serif;\n text-align: center;\n }\n \n h1 {\n font-size: 24px;\n color: #333;\n }\n \n .ltr {\n text-align: left;\n }\n \n .rtl {\n text-align: right;\n }\n \n .editor-container {\n margin: 20px 0px;\n border-radius: 2px;\n max-width: 600px;\n color: #000;\n position: relative;\n line-height: 20px;\n font-weight: 400;\n text-align: left;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n \n .editor-inner {\n background: #fff;\n position: relative;\n }\n \n .editor-input {\n min-height: 150px;\n resize: none;\n font-size: 15px;\n caret-color: rgb(5, 5, 5);\n position: relative;\n tab-size: 1;\n outline: 0;\n padding: 15px 10px;\n caret-color: #444;\n }\n button.item.dropdown-item-active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n button.item.dropdown-item-active i {\n opacity: 1;\n }\n .editor-placeholder {\n color: #999;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n top: 15px;\n left: 10px;\n font-size: 15px;\n user-select: none;\n display: inline-block;\n pointer-events: none;\n }\n \n .editor-text-bold {\n font-weight: bold;\n }\n \n .editor-text-italic {\n font-style: italic;\n }\n \n .editor-text-underline {\n text-decoration: underline;\n }\n \n .editor-text-strikethrough {\n text-decoration: line-through;\n }\n \n .editor-text-underlineStrikethrough {\n text-decoration: underline line-through;\n }\n \n .editor-text-code {\n background-color: rgb(240, 242, 245);\n padding: 1px 0.25rem;\n font-family: Menlo, Consolas, Monaco, monospace;\n font-size: 94%;\n }\n \n .editor-link {\n color: rgb(33, 111, 219);\n text-decoration: none;\n }\n \n .tree-view-output {\n display: block;\n background: #222;\n color: #fff;\n padding: 5px;\n font-size: 12px;\n white-space: pre-wrap;\n margin: 1px auto 10px auto;\n max-height: 250px;\n position: relative;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n overflow: auto;\n line-height: 14px;\n }\n \n .editor-code {\n background-color: rgb(240, 242, 245);\n font-family: Menlo, Consolas, Monaco, monospace;\n display: block;\n padding: 8px 8px 8px 52px;\n line-height: 1.53;\n font-size: 13px;\n margin: 0;\n margin-top: 8px;\n margin-bottom: 8px;\n tab-size: 2;\n /* white-space: pre; */\n overflow-x: auto;\n position: relative;\n }\n \n .editor-code:before {\n content: attr(data-gutter);\n position: absolute;\n background-color: #eee;\n left: 0;\n top: 0;\n border-right: 1px solid #ccc;\n padding: 8px;\n color: #777;\n white-space: pre-wrap;\n text-align: right;\n min-width: 25px;\n }\n .editor-code:after {\n content: attr(data-highlight-language);\n top: 0;\n right: 3px;\n padding: 3px;\n font-size: 10px;\n text-transform: uppercase;\n position: absolute;\n color: rgba(0, 0, 0, 0.5);\n }\n \n .editor-tokenComment {\n color: slategray;\n }\n \n .editor-tokenPunctuation {\n color: #999;\n }\n \n .editor-tokenProperty {\n color: #905;\n }\n \n .editor-tokenSelector {\n color: #690;\n }\n \n .editor-tokenOperator {\n color: #9a6e3a;\n }\n \n .editor-tokenAttr {\n color: #07a;\n }\n \n .editor-tokenVariable {\n color: #e90;\n }\n \n .editor-tokenFunction {\n color: #dd4a68;\n }\n \n .editor-paragraph {\n margin: 0;\n margin-bottom: 8px;\n position: relative;\n }\n \n .editor-paragraph:last-child {\n margin-bottom: 0;\n }\n \n .editor-heading-h1 {\n font-size: 24px;\n color: rgb(5, 5, 5);\n font-weight: 400;\n margin: 0;\n margin-bottom: 12px;\n padding: 0;\n }\n \n .editor-heading-h2 {\n font-size: 15px;\n color: rgb(101, 103, 107);\n font-weight: 700;\n margin: 0;\n margin-top: 10px;\n padding: 0;\n text-transform: uppercase;\n }\n \n .editor-quote {\n margin: 0;\n margin-left: 20px;\n font-size: 15px;\n color: rgb(101, 103, 107);\n border-left-color: rgb(206, 208, 212);\n border-left-width: 4px;\n border-left-style: solid;\n padding-left: 16px;\n }\n \n .editor-list-ol {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-list-ul {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-listitem {\n margin: 8px 32px 8px 32px;\n }\n \n .editor-nested-listitem {\n list-style-type: none;\n }\n \n pre::-webkit-scrollbar {\n background: transparent;\n width: 10px;\n }\n \n pre::-webkit-scrollbar-thumb {\n background: #999;\n }\n \n .debug-timetravel-panel {\n overflow: hidden;\n padding: 0 0 10px 0;\n margin: auto;\n display: flex;\n }\n \n .debug-timetravel-panel-slider {\n padding: 0;\n flex: 8;\n }\n \n .debug-timetravel-panel-button {\n padding: 0;\n border: 0;\n background: none;\n flex: 1;\n color: #fff;\n font-size: 12px;\n }\n \n .debug-timetravel-panel-button:hover {\n text-decoration: underline;\n }\n \n .debug-timetravel-button {\n border: 0;\n padding: 0;\n font-size: 12px;\n top: 10px;\n right: 15px;\n position: absolute;\n background: none;\n color: #fff;\n }\n \n .debug-timetravel-button:hover {\n text-decoration: underline;\n }\n \n .toolbar {\n display: flex;\n margin-bottom: 1px;\n background: #fff;\n padding: 4px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n cursor: pointer;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item:disabled {\n cursor: not-allowed;\n }\n \n .toolbar button.toolbar-item.spaced {\n margin-right: 2px;\n }\n \n .toolbar button.toolbar-item i.format {\n background-size: contain;\n display: inline-block;\n height: 18px;\n width: 18px;\n margin-top: 2px;\n vertical-align: -0.25em;\n display: flex;\n opacity: 0.6;\n }\n \n .toolbar button.toolbar-item:disabled i.format {\n opacity: 0.2;\n }\n \n .toolbar button.toolbar-item.active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n .toolbar button.toolbar-item.active i {\n opacity: 1;\n }\n \n .toolbar .toolbar-item:hover:not([disabled]) {\n background-color: #eee;\n }\n \n .toolbar .divider {\n width: 1px;\n background-color: #eee;\n margin: 0 4px;\n }\n \n .toolbar select.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n vertical-align: middle;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 70px;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n }\n \n .toolbar select.code-language {\n text-transform: capitalize;\n width: 130px;\n }\n \n .toolbar .toolbar-item .text {\n display: flex;\n line-height: 20px;\n width: 200px;\n vertical-align: middle;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n width: 70px;\n overflow: hidden;\n height: 20px;\n text-align: left;\n }\n \n .toolbar .toolbar-item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 8px;\n line-height: 16px;\n background-size: contain;\n }\n \n .toolbar i.chevron-down {\n margin-top: 3px;\n width: 16px;\n height: 16px;\n display: flex;\n user-select: none;\n }\n \n .toolbar i.chevron-down.inside {\n width: 16px;\n height: 16px;\n display: flex;\n margin-left: -25px;\n margin-top: 11px;\n margin-right: 10px;\n pointer-events: none;\n }\n \n i.chevron-down {\n background-color: transparent;\n background-size: contain;\n display: inline-block;\n height: 8px;\n width: 8px;\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n }\n \n #block-controls button:hover {\n background-color: #efefef;\n }\n \n #block-controls button:focus-visible {\n border-color: blue;\n }\n \n #block-controls span.block-type {\n background-size: contain;\n display: block;\n width: 18px;\n height: 18px;\n margin: 2px;\n }\n \n #block-controls span.block-type.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n #block-controls span.block-type.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n #block-controls span.block-type.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n #block-controls span.block-type.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n #block-controls span.block-type.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n #block-controls span.block-type.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n #block-controls span.block-type.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n .dropdown {\n z-index: 5;\n display: block;\n position: absolute;\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n border-radius: 8px;\n min-width: 100px;\n min-height: 40px;\n background-color: #fff;\n }\n \n .dropdown .item {\n margin: 0 8px 0 8px;\n padding: 8px;\n color: #050505;\n cursor: pointer;\n line-height: 16px;\n font-size: 15px;\n display: flex;\n align-content: center;\n flex-direction: row;\n flex-shrink: 0;\n justify-content: space-between;\n background-color: #fff;\n border-radius: 8px;\n border: 0;\n min-width: 268px;\n }\n \n .dropdown .item .active {\n display: flex;\n width: 20px;\n height: 20px;\n background-size: contain;\n }\n \n .dropdown .item:first-child {\n margin-top: 8px;\n }\n \n .dropdown .item:last-child {\n margin-bottom: 8px;\n }\n \n .dropdown .item:hover {\n background-color: #eee;\n }\n \n .dropdown .item .text {\n display: flex;\n line-height: 20px;\n flex-grow: 1;\n width: 200px;\n }\n \n .dropdown .item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 12px;\n line-height: 16px;\n background-size: contain;\n }\n \n .link-editor {\n position: absolute;\n z-index: 100;\n top: -10000px;\n left: -10000px;\n margin-top: -6px;\n max-width: 300px;\n width: 100%;\n opacity: 0;\n background-color: #fff;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n border-radius: 8px;\n transition: opacity 0.5s;\n }\n \n .link-editor .link-input {\n display: block;\n width: calc(100% - 24px);\n box-sizing: border-box;\n margin: 8px 12px;\n padding: 8px 12px;\n border-radius: 15px;\n background-color: #eee;\n font-size: 15px;\n color: rgb(5, 5, 5);\n border: 0;\n outline: 0;\n position: relative;\n font-family: inherit;\n }\n \n .link-editor div.link-edit {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n background-size: 16px;\n background-position: center;\n background-repeat: no-repeat;\n width: 35px;\n vertical-align: -0.25em;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n cursor: pointer;\n }\n \n .link-editor .link-input a {\n color: rgb(33, 111, 219);\n text-decoration: none;\n display: block;\n white-space: nowrap;\n overflow: hidden;\n margin-right: 30px;\n text-overflow: ellipsis;\n }\n \n .link-editor .link-input a:hover {\n text-decoration: underline;\n }\n \n .link-editor .button {\n width: 20px;\n height: 20px;\n display: inline-block;\n padding: 6px;\n border-radius: 8px;\n cursor: pointer;\n margin: 0 2px;\n }\n \n .link-editor .button.hovered {\n width: 20px;\n height: 20px;\n display: inline-block;\n background-color: #eee;\n }\n \n .link-editor .button i,\n .actions i {\n background-size: contain;\n display: inline-block;\n height: 20px;\n width: 20px;\n vertical-align: -0.25em;\n }\n \n i.undo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n }\n \n i.redo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n }\n \n .icon.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n .icon.large-heading,\n .icon.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n .icon.small-heading,\n .icon.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n .icon.bullet-list,\n .icon.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n .icon.numbered-list,\n .icon.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n .icon.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n .icon.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.bold {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n }\n \n i.italic {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n }\n \n i.underline {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n }\n \n i.strikethrough {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n }\n \n i.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.link {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n }\n \n i.left-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n }\n \n i.center-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n }\n \n i.right-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n }\n \n i.justify-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n }\n \n \n \n "),
|
|
94
|
+
react_1["default"].createElement("div", { className: 'editor-inner' },
|
|
95
|
+
react_1["default"].createElement("style", null, "\n ul li {\n /* list-style: inherit !important; */\n list-style-type: disc !important;\n \n }\n \n ol {\n /* list-style: inherit !important; */\n list-style-type: decimal !important;\n }\n .dropdown .item.fontsize-item,\n .dropdown .item.fontsize-item .text {\n min-width: unset;\n }\n .font-size .dropdown-button-text {\n display: flex !important;\n }\n .other h2 {\n font-size: 18px;\n color: #444;\n margin-bottom: 7px;\n }\n \n .other a {\n color: #777;\n text-decoration: underline;\n font-size: 14px;\n }\n \n .other ul {\n padding: 0;\n margin: 0;\n list-style-type: none;\n }\n \n .App {\n font-family: sans-serif;\n text-align: center;\n }\n \n h1 {\n font-size: 24px;\n color: #333;\n }\n \n .ltr {\n text-align: left;\n }\n \n .rtl {\n text-align: right;\n }\n \n .editor-container {\n margin: 20px 0px;\n border-radius: 2px;\n max-width: 600px;\n color: #000;\n position: relative;\n line-height: 20px;\n font-weight: 400;\n text-align: left;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n \n .editor-inner {\n background: #fff;\n position: relative;\n }\n \n .editor-input {\n min-height: 150px;\n resize: none;\n font-size: 15px;\n caret-color: rgb(5, 5, 5);\n position: relative;\n tab-size: 1;\n outline: 0;\n padding: 15px 10px;\n caret-color: #444;\n }\n button.item.dropdown-item-active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n @media screen and (max-width: 1100px) {\n .dropdown-button-text {\n display: none !important;\n }\n \n .font-size .dropdown-button-text {\n display: flex !important;\n }\n \n .code-language .dropdown-button-text {\n display: flex !important;\n }\n }\n \n button.item.dropdown-item-active i {\n opacity: 1;\n }\n .editor-placeholder {\n color: #999;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n top: 15px;\n left: 10px;\n font-size: 15px;\n user-select: none;\n display: inline-block;\n pointer-events: none;\n }\n \n .editor-text-bold {\n font-weight: bold;\n }\n \n .editor-text-italic {\n font-style: italic;\n }\n \n .editor-text-underline {\n text-decoration: underline;\n }\n \n .editor-text-strikethrough {\n text-decoration: line-through;\n }\n \n .editor-text-underlineStrikethrough {\n text-decoration: underline line-through;\n }\n \n .editor-text-code {\n background-color: rgb(240, 242, 245);\n padding: 1px 0.25rem;\n font-family: Menlo, Consolas, Monaco, monospace;\n font-size: 94%;\n }\n \n .editor-link {\n color: rgb(33, 111, 219);\n text-decoration: none;\n }\n \n .tree-view-output {\n display: block;\n background: #222;\n color: #fff;\n padding: 5px;\n font-size: 12px;\n white-space: pre-wrap;\n margin: 1px auto 10px auto;\n max-height: 250px;\n position: relative;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n overflow: auto;\n line-height: 14px;\n }\n \n .editor-code {\n background-color: rgb(240, 242, 245);\n font-family: Menlo, Consolas, Monaco, monospace;\n display: block;\n padding: 8px 8px 8px 52px;\n line-height: 1.53;\n font-size: 13px;\n margin: 0;\n margin-top: 8px;\n margin-bottom: 8px;\n tab-size: 2;\n /* white-space: pre; */\n overflow-x: auto;\n position: relative;\n }\n \n .editor-code:before {\n content: attr(data-gutter);\n position: absolute;\n background-color: #eee;\n left: 0;\n top: 0;\n border-right: 1px solid #ccc;\n padding: 8px;\n color: #777;\n white-space: pre-wrap;\n text-align: right;\n min-width: 25px;\n }\n .editor-code:after {\n content: attr(data-highlight-language);\n top: 0;\n right: 3px;\n padding: 3px;\n font-size: 10px;\n text-transform: uppercase;\n position: absolute;\n color: rgba(0, 0, 0, 0.5);\n }\n \n .editor-tokenComment {\n color: slategray;\n }\n \n .editor-tokenPunctuation {\n color: #999;\n }\n \n .editor-tokenProperty {\n color: #905;\n }\n \n .editor-tokenSelector {\n color: #690;\n }\n \n .editor-tokenOperator {\n color: #9a6e3a;\n }\n \n .editor-tokenAttr {\n color: #07a;\n }\n \n .editor-tokenVariable {\n color: #e90;\n }\n \n .editor-tokenFunction {\n color: #dd4a68;\n }\n \n .editor-paragraph {\n margin: 0;\n margin-bottom: 8px;\n position: relative;\n }\n \n .editor-paragraph:last-child {\n margin-bottom: 0;\n }\n \n .editor-heading-h1 {\n font-size: 24px;\n color: rgb(5, 5, 5);\n font-weight: 400;\n margin: 0;\n margin-bottom: 12px;\n padding: 0;\n }\n \n .editor-heading-h2 {\n font-size: 15px;\n color: rgb(101, 103, 107);\n font-weight: 700;\n margin: 0;\n margin-top: 10px;\n padding: 0;\n text-transform: uppercase;\n }\n \n .editor-quote {\n margin: 0;\n margin-left: 20px;\n font-size: 15px;\n color: rgb(101, 103, 107);\n border-left-color: rgb(206, 208, 212);\n border-left-width: 4px;\n border-left-style: solid;\n padding-left: 16px;\n }\n \n .editor-list-ol {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-list-ul {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-listitem {\n margin: 8px 32px 8px 32px;\n }\n \n .editor-nested-listitem {\n list-style-type: none;\n }\n \n pre::-webkit-scrollbar {\n background: transparent;\n width: 10px;\n }\n \n pre::-webkit-scrollbar-thumb {\n background: #999;\n }\n \n .debug-timetravel-panel {\n overflow: hidden;\n padding: 0 0 10px 0;\n margin: auto;\n display: flex;\n }\n \n .debug-timetravel-panel-slider {\n padding: 0;\n flex: 8;\n }\n \n .debug-timetravel-panel-button {\n padding: 0;\n border: 0;\n background: none;\n flex: 1;\n color: #fff;\n font-size: 12px;\n }\n \n .debug-timetravel-panel-button:hover {\n text-decoration: underline;\n }\n \n .debug-timetravel-button {\n border: 0;\n padding: 0;\n font-size: 12px;\n top: 10px;\n right: 15px;\n position: absolute;\n background: none;\n color: #fff;\n }\n \n .debug-timetravel-button:hover {\n text-decoration: underline;\n }\n \n .toolbar {\n display: flex;\n margin-bottom: 1px;\n background: #fff;\n padding: 4px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n cursor: pointer;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item:disabled {\n cursor: not-allowed;\n }\n \n .toolbar button.toolbar-item.spaced {\n margin-right: 2px;\n }\n \n .toolbar button.toolbar-item i.format {\n background-size: contain;\n display: inline-block;\n height: 18px;\n width: 18px;\n margin-top: 2px;\n vertical-align: -0.25em;\n display: flex;\n opacity: 0.6;\n }\n \n .toolbar button.toolbar-item:disabled i.format {\n opacity: 0.2;\n }\n \n .toolbar button.toolbar-item.active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n .toolbar button.toolbar-item.active i {\n opacity: 1;\n }\n \n .toolbar .toolbar-item:hover:not([disabled]) {\n background-color: #eee;\n }\n \n .toolbar .divider {\n width: 1px;\n background-color: #eee;\n margin: 0 4px;\n }\n \n .toolbar select.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n vertical-align: middle;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 70px;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n }\n \n .toolbar select.code-language {\n text-transform: capitalize;\n width: 130px;\n }\n \n .toolbar .toolbar-item .text {\n display: flex;\n line-height: 20px;\n width: 200px;\n vertical-align: middle;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n width: 70px;\n overflow: hidden;\n height: 20px;\n text-align: left;\n }\n \n .toolbar .toolbar-item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 8px;\n line-height: 16px;\n background-size: contain;\n }\n \n .toolbar i.chevron-down {\n margin-top: 3px;\n width: 16px;\n height: 16px;\n display: flex;\n user-select: none;\n }\n \n .toolbar i.chevron-down.inside {\n width: 16px;\n height: 16px;\n display: flex;\n margin-left: -25px;\n margin-top: 11px;\n margin-right: 10px;\n pointer-events: none;\n }\n \n i.chevron-down {\n background-color: transparent;\n background-size: contain;\n display: inline-block;\n height: 8px;\n width: 8px;\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n }\n \n #block-controls button:hover {\n background-color: #efefef;\n }\n \n #block-controls button:focus-visible {\n border-color: blue;\n }\n \n #block-controls span.block-type {\n background-size: contain;\n display: block;\n width: 18px;\n height: 18px;\n margin: 2px;\n }\n \n #block-controls span.block-type.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n #block-controls span.block-type.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n #block-controls span.block-type.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n #block-controls span.block-type.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n #block-controls span.block-type.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n #block-controls span.block-type.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n #block-controls span.block-type.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n .dropdown {\n z-index: 5;\n display: block;\n position: absolute;\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n border-radius: 8px;\n min-width: 100px;\n min-height: 40px;\n background-color: #fff;\n }\n \n .dropdown .item {\n margin: 0 8px 0 8px;\n padding: 8px;\n color: #050505;\n cursor: pointer;\n line-height: 16px;\n font-size: 15px;\n display: flex;\n align-content: center;\n flex-direction: row;\n flex-shrink: 0;\n justify-content: space-between;\n background-color: #fff;\n border-radius: 8px;\n border: 0;\n min-width: 268px;\n }\n \n .dropdown .item .active {\n display: flex;\n width: 20px;\n height: 20px;\n background-size: contain;\n }\n \n .dropdown .item:first-child {\n margin-top: 8px;\n }\n \n .dropdown .item:last-child {\n margin-bottom: 8px;\n }\n \n .dropdown .item:hover {\n background-color: #eee;\n }\n \n .dropdown .item .text {\n display: flex;\n line-height: 20px;\n flex-grow: 1;\n width: 200px;\n }\n \n .dropdown .item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 12px;\n line-height: 16px;\n background-size: contain;\n }\n \n .link-editor {\n position: absolute;\n z-index: 100;\n top: -10000px;\n left: -10000px;\n margin-top: -6px;\n max-width: 300px;\n width: 100%;\n opacity: 0;\n background-color: #fff;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n border-radius: 8px;\n transition: opacity 0.5s;\n }\n \n .link-editor .link-input {\n display: block;\n width: calc(100% - 24px);\n box-sizing: border-box;\n margin: 8px 12px;\n padding: 8px 12px;\n border-radius: 15px;\n background-color: #eee;\n font-size: 15px;\n color: rgb(5, 5, 5);\n border: 0;\n outline: 0;\n position: relative;\n font-family: inherit;\n }\n \n .link-editor div.link-edit {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n background-size: 16px;\n background-position: center;\n background-repeat: no-repeat;\n width: 35px;\n vertical-align: -0.25em;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n cursor: pointer;\n }\n \n .link-editor .link-input a {\n color: rgb(33, 111, 219);\n text-decoration: none;\n display: block;\n white-space: nowrap;\n overflow: hidden;\n margin-right: 30px;\n text-overflow: ellipsis;\n }\n \n .link-editor .link-input a:hover {\n text-decoration: underline;\n }\n \n .link-editor .button {\n width: 20px;\n height: 20px;\n display: inline-block;\n padding: 6px;\n border-radius: 8px;\n cursor: pointer;\n margin: 0 2px;\n }\n \n .link-editor .button.hovered {\n width: 20px;\n height: 20px;\n display: inline-block;\n background-color: #eee;\n }\n \n .link-editor .button i,\n .actions i {\n background-size: contain;\n display: inline-block;\n height: 20px;\n width: 20px;\n vertical-align: -0.25em;\n }\n \n i.undo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n }\n \n i.redo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n }\n \n .icon.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n .icon.large-heading,\n .icon.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n .icon.small-heading,\n .icon.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n .icon.bullet-list,\n .icon.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n .icon.numbered-list,\n .icon.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n .icon.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n .icon.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.bold {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n }\n \n i.italic {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n }\n \n i.underline {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n }\n \n i.strikethrough {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n }\n \n i.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.link {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n }\n \n i.left-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n }\n \n i.center-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n }\n \n i.right-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n }\n \n i.justify-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n }\n \n \n \n "),
|
|
64
96
|
react_1["default"].createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1["default"].createElement(LexicalContentEditable_1.ContentEditable, { className: 'editor-input' }), ErrorBoundary: LexicalErrorBoundary_1["default"], placeholder: react_1["default"].createElement(Placeholder, null) }),
|
|
65
97
|
react_1["default"].createElement(LexicalOnChangePlugin_1.OnChangePlugin, { onChange: onChange }),
|
|
66
98
|
react_1["default"].createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textEditor.js","sourceRoot":"","sources":["../../../../src/components/TextEditor/textEditor.tsx"],"names":[],"mappings":";;;;AAAA,sCAA2D;AAC3D,sCAAsD;AACtD,sCAAsD;AACtD,8CAAgD;AAChD,gFAAuE;AACvE,kEAAgE;AAChE,gFAAuE;AACvE,qGAAsE;AACtE,4EAAmE;AACnE,sEAA6D;AAC7D,sEAA6D;AAC7D,8FAAqF;AACrF,8EAAqE;AACrE,8EAAqE;AACrE,gDAA2D;AAC3D,wCAAuE;AACvE,
|
|
1
|
+
{"version":3,"file":"textEditor.js","sourceRoot":"","sources":["../../../../src/components/TextEditor/textEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,13 +2,12 @@ import React from 'react';
|
|
|
2
2
|
export interface ComboboxProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
label?: string;
|
|
5
|
-
error?: boolean;
|
|
6
5
|
listOptions?: any;
|
|
7
6
|
multiple?: boolean;
|
|
8
7
|
name?: any;
|
|
9
8
|
id?: any;
|
|
10
9
|
defaultValue?: any;
|
|
11
|
-
errorType?: 'required-field' | 'duplicate-field';
|
|
12
10
|
onChange?: any;
|
|
11
|
+
placeholder?: string;
|
|
13
12
|
}
|
|
14
|
-
export declare const PHXCombobox: ({ multiple, listOptions, className, label, name, onChange, defaultValue, id, }: ComboboxProps) => React.JSX.Element;
|
|
13
|
+
export declare const PHXCombobox: ({ multiple, listOptions, className, label, name, onChange, defaultValue, placeholder, id, }: ComboboxProps) => React.JSX.Element;
|
|
@@ -4,7 +4,7 @@ import { Controller, useForm } from 'react-hook-form';
|
|
|
4
4
|
import { customStyles } from './custom-multi-select';
|
|
5
5
|
import Select from 'react-select';
|
|
6
6
|
export var PHXCombobox = function (_a) {
|
|
7
|
-
var _b = _a.multiple, multiple = _b === void 0 ? false : _b, listOptions = _a.listOptions, className = _a.className, label = _a.label, name = _a.name, onChange = _a.onChange, defaultValue = _a.defaultValue, id = _a.id;
|
|
7
|
+
var _b = _a.multiple, multiple = _b === void 0 ? false : _b, listOptions = _a.listOptions, className = _a.className, label = _a.label, name = _a.name, onChange = _a.onChange, defaultValue = _a.defaultValue, placeholder = _a.placeholder, id = _a.id;
|
|
8
8
|
var filterOptions = function (option, inputValue) {
|
|
9
9
|
if (!inputValue) {
|
|
10
10
|
return true;
|
|
@@ -21,20 +21,26 @@ export var PHXCombobox = function (_a) {
|
|
|
21
21
|
var control = useForm().control;
|
|
22
22
|
return (React.createElement("div", { className: className },
|
|
23
23
|
label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
|
|
24
|
-
React.createElement(Controller, { control: control, name: name, rules: { required: true }, defaultValue: defaultValue
|
|
25
|
-
?
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
React.createElement(Controller, { control: control, name: name, rules: { required: true }, defaultValue: !defaultValue
|
|
25
|
+
? ''
|
|
26
|
+
: multiple
|
|
27
|
+
? defaultValue.map(function (item) { return ({
|
|
28
|
+
value: listOptions.find(function (option) { return option.id === item; }).id,
|
|
29
|
+
label: listOptions.find(function (option) { return option.id === item; }).name
|
|
30
|
+
}); })
|
|
31
|
+
: { value: defaultValue, label: listOptions.find(function (option) { return option.id === defaultValue; }).name }, render: function (_a) {
|
|
30
32
|
var field = _a.field;
|
|
31
33
|
return (React.createElement(Select, __assign({}, field, { onChange: function (val) {
|
|
32
34
|
handleChange(val);
|
|
33
35
|
field.onChange(val);
|
|
34
|
-
}, id: id, className: 'block w-full rounded-md border-gray-300 sm:text-sm', isMulti: multiple, filterOption: filterOptions, defaultValue: defaultValue
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
}, id: id, placeholder: placeholder, className: 'block w-full rounded-md border-gray-300 sm:text-sm', isMulti: multiple, filterOption: filterOptions, defaultValue: !defaultValue
|
|
37
|
+
? ''
|
|
38
|
+
: multiple
|
|
39
|
+
? defaultValue.map(function (item) { return ({
|
|
40
|
+
value: listOptions.find(function (option) { return option.id === item; }).id,
|
|
41
|
+
label: listOptions.find(function (option) { return option.id === item; }).name
|
|
42
|
+
}); })
|
|
43
|
+
: { value: defaultValue, label: listOptions.find(function (option) { return option.id === defaultValue; }).name }, options: listOptions === null || listOptions === void 0 ? void 0 : listOptions.map(function (people) { return ({ value: people.id, label: people.name }); }), styles: customStyles, menuPortalTarget: document.body })));
|
|
38
44
|
} })));
|
|
39
45
|
};
|
|
40
46
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,MAAM,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
export var customStyles = {
|
|
3
3
|
control: function (base) { return (__assign(__assign({}, base), { borderRadius: '8px', '&:hover': { borderColor: '#64748b' }, border: '1px solid lightgray', boxShadow: 'none' })); },
|
|
4
|
-
placeholder: function (provided) { return (__assign(__assign({}, provided), { color: '#6B7280', fontSize: '
|
|
4
|
+
placeholder: function (provided) { return (__assign(__assign({}, provided), { color: '#6B7280', fontSize: '0.8125rem', fontWeight: 400 })); },
|
|
5
5
|
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: '#787f8d', width: '2.1rem' })); },
|
|
6
6
|
clearIndicator: function (provided) { return (__assign(__assign({}, provided), { color: '#787f8d', width: '2.1rem' })); },
|
|
7
7
|
input: function (provided, state) { return (__assign(__assign({}, provided), { border: state.isFocused ? 'none' : provided.border, outline: state.isFocused ? 'none' : provided.outline, caretColor: '#000' })); },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-multi-select.js","sourceRoot":"","sources":["../../../../src/components/Combobox/custom-multi-select.ts"],"names":[],"mappings":";AAAA,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,UAAC,IAAS,IAAK,OAAA,uBACnB,IAAI,KACP,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EACrC,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,MAAM,IACjB,EANsB,CAMtB;IACF,WAAW,EAAE,UAAC,QAAa,IAAK,OAAA,uBAC3B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"custom-multi-select.js","sourceRoot":"","sources":["../../../../src/components/Combobox/custom-multi-select.ts"],"names":[],"mappings":";AAAA,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,UAAC,IAAS,IAAK,OAAA,uBACnB,IAAI,KACP,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EACrC,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,MAAM,IACjB,EANsB,CAMtB;IACF,WAAW,EAAE,UAAC,QAAa,IAAK,OAAA,uBAC3B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,GAAG,IACf,EAL8B,CAK9B;IACF,iBAAiB,EAAE,UAAC,QAAa,IAAK,OAAA,uBACjC,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,QAAQ,IACf,EAJoC,CAIpC;IACF,cAAc,EAAE,UAAC,QAAa,IAAK,OAAA,uBAC9B,QAAQ,KACX,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,QAAQ,IACf,EAJiC,CAIjC;IACF,KAAK,EAAE,UAAC,QAAa,EAAE,KAAU,IAAK,OAAA,uBACjC,QAAQ,KACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAClD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,EACpD,UAAU,EAAE,MAAM,IAClB,EALoC,CAKpC;IACF,gBAAgB,EAAE,UAAC,QAAa,IAAK,OAAA,uBAChC,QAAQ,KACX,SAAS,EAAE;YACT,eAAe,EAAE,SAAS;YAC1B,KAAK,EAAE,OAAO;SACf,EACD,gCAAgC,EAAE;YAChC,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB,IACD,EAVmC,CAUnC;IACF,IAAI,EAAE,UAAC,QAAa,IAAK,OAAA,uBACpB,QAAQ,KACX,eAAe,EAAE,OAAO,EACxB,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,yBAAyB,EACpC,OAAO,EAAE,OAAO,IAChB,EANuB,CAMvB;IACF,MAAM,EAAE,UAAC,QAAa,EAAE,KAAU,IAAK,OAAA,uBAClC,QAAQ,KACX,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAC7D,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE;YACR,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACzD,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,MAAM;SACd,IACD,EAbqC,CAarC;CACH,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DOMConversionMap, NodeKey, TextNode, SerializedTextNode } from 'lexical';
|
|
2
|
+
export declare class ExtendedTextNode extends TextNode {
|
|
3
|
+
constructor(text: string, key?: NodeKey);
|
|
4
|
+
static getType(): string;
|
|
5
|
+
static clone(node: ExtendedTextNode): ExtendedTextNode;
|
|
6
|
+
static importDOM(): DOMConversionMap | null;
|
|
7
|
+
static importJSON(serializedNode: SerializedTextNode): TextNode;
|
|
8
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { __assign, __extends } from "tslib";
|
|
2
|
+
import { $isTextNode, TextNode, } from 'lexical';
|
|
3
|
+
var ExtendedTextNode = /** @class */ (function (_super) {
|
|
4
|
+
__extends(ExtendedTextNode, _super);
|
|
5
|
+
function ExtendedTextNode(text, key) {
|
|
6
|
+
return _super.call(this, text, key) || this;
|
|
7
|
+
}
|
|
8
|
+
ExtendedTextNode.getType = function () {
|
|
9
|
+
return 'extended-text';
|
|
10
|
+
};
|
|
11
|
+
ExtendedTextNode.clone = function (node) {
|
|
12
|
+
return new ExtendedTextNode(node.__text, node.__key);
|
|
13
|
+
};
|
|
14
|
+
ExtendedTextNode.importDOM = function () {
|
|
15
|
+
var importers = TextNode.importDOM();
|
|
16
|
+
return __assign(__assign({}, importers), { code: function () { return ({
|
|
17
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.code),
|
|
18
|
+
priority: 1
|
|
19
|
+
}); }, em: function () { return ({
|
|
20
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.em),
|
|
21
|
+
priority: 1
|
|
22
|
+
}); }, span: function () { return ({
|
|
23
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.span),
|
|
24
|
+
priority: 1
|
|
25
|
+
}); }, strong: function () { return ({
|
|
26
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.strong),
|
|
27
|
+
priority: 1
|
|
28
|
+
}); }, sub: function () { return ({
|
|
29
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.sub),
|
|
30
|
+
priority: 1
|
|
31
|
+
}); }, sup: function () { return ({
|
|
32
|
+
conversion: patchStyleConversion(importers === null || importers === void 0 ? void 0 : importers.sup),
|
|
33
|
+
priority: 1
|
|
34
|
+
}); } });
|
|
35
|
+
};
|
|
36
|
+
ExtendedTextNode.importJSON = function (serializedNode) {
|
|
37
|
+
return TextNode.importJSON(serializedNode);
|
|
38
|
+
};
|
|
39
|
+
return ExtendedTextNode;
|
|
40
|
+
}(TextNode));
|
|
41
|
+
export { ExtendedTextNode };
|
|
42
|
+
function patchStyleConversion(originalDOMConverter) {
|
|
43
|
+
return function (node) {
|
|
44
|
+
var original = originalDOMConverter === null || originalDOMConverter === void 0 ? void 0 : originalDOMConverter(node);
|
|
45
|
+
if (!original) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
var originalOutput = original.conversion(node);
|
|
49
|
+
if (!originalOutput) {
|
|
50
|
+
return originalOutput;
|
|
51
|
+
}
|
|
52
|
+
var backgroundColor = node.style.backgroundColor;
|
|
53
|
+
var color = node.style.color;
|
|
54
|
+
var fontFamily = node.style.fontFamily;
|
|
55
|
+
var fontWeight = node.style.fontWeight;
|
|
56
|
+
var fontSize = node.style.fontSize;
|
|
57
|
+
var textDecoration = node.style.textDecoration;
|
|
58
|
+
return __assign(__assign({}, originalOutput), { forChild: function (lexicalNode, parent) {
|
|
59
|
+
var _a;
|
|
60
|
+
var originalForChild = (_a = originalOutput === null || originalOutput === void 0 ? void 0 : originalOutput.forChild) !== null && _a !== void 0 ? _a : (function (x) { return x; });
|
|
61
|
+
var result = originalForChild(lexicalNode, parent);
|
|
62
|
+
if ($isTextNode(result)) {
|
|
63
|
+
var style = [
|
|
64
|
+
backgroundColor ? "background-color: ".concat(backgroundColor) : null,
|
|
65
|
+
color ? "color: ".concat(color) : null,
|
|
66
|
+
fontFamily ? "font-family: ".concat(fontFamily) : null,
|
|
67
|
+
fontWeight ? "font-weight: ".concat(fontWeight) : null,
|
|
68
|
+
fontSize ? "font-size: ".concat(fontSize) : null,
|
|
69
|
+
textDecoration ? "text-decoration: ".concat(textDecoration) : null,
|
|
70
|
+
]
|
|
71
|
+
.filter(function (value) { return value != null; })
|
|
72
|
+
.join('; ');
|
|
73
|
+
if (style.length > 0) {
|
|
74
|
+
return result.setStyle(style);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return result;
|
|
78
|
+
} });
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=ExtendedTextNode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExtendedTextNode.js","sourceRoot":"","sources":["../../../../../src/components/TextEditor/plugins/ExtendedTextNode.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const PHXTextEditor: ({ onChangeEditor }: any) => React.JSX.Element;
|
|
2
|
+
export declare const PHXTextEditor: ({ onChangeEditor, value }: any) => React.JSX.Element;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CodeHighlightNode, CodeNode } from '@lexical/code';
|
|
2
|
+
import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
|
|
2
3
|
import { AutoLinkNode, LinkNode } from '@lexical/link';
|
|
3
4
|
import { ListItemNode, ListNode } from '@lexical/list';
|
|
4
5
|
import { TRANSFORMERS } from '@lexical/markdown';
|
|
@@ -14,9 +15,11 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
|
|
|
14
15
|
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
|
|
15
16
|
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
|
|
16
17
|
import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
|
|
17
|
-
import
|
|
18
|
+
import { $getRoot, TextNode, createEditor } from 'lexical';
|
|
19
|
+
import React, { useState } from 'react';
|
|
18
20
|
import AutoLinkPlugin from './plugins/AutoLinkPlugin';
|
|
19
21
|
import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
|
|
22
|
+
import { ExtendedTextNode } from './plugins/ExtendedTextNode';
|
|
20
23
|
import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
|
|
21
24
|
import ToolbarPlugin from './plugins/ToolbarPlugin';
|
|
22
25
|
import ExampleTheme from './themes/ExampleTheme';
|
|
@@ -24,16 +27,19 @@ function Placeholder() {
|
|
|
24
27
|
return React.createElement("div", { className: 'editor-placeholder' }, "Enter some rich text...");
|
|
25
28
|
}
|
|
26
29
|
export var PHXTextEditor = function (_a) {
|
|
27
|
-
var onChangeEditor = _a.onChangeEditor;
|
|
30
|
+
var onChangeEditor = _a.onChangeEditor, value = _a.value;
|
|
28
31
|
var editorConfig = {
|
|
29
|
-
// The editor theme
|
|
30
32
|
theme: ExampleTheme,
|
|
31
|
-
|
|
33
|
+
editorState: prepopulatedRichText,
|
|
32
34
|
onError: function (error) {
|
|
33
35
|
throw error;
|
|
34
36
|
},
|
|
35
|
-
// Any custom nodes go here
|
|
36
37
|
nodes: [
|
|
38
|
+
ExtendedTextNode,
|
|
39
|
+
{
|
|
40
|
+
replace: TextNode,
|
|
41
|
+
"with": function (node) { return new ExtendedTextNode(node.__text, node.__key); }
|
|
42
|
+
},
|
|
37
43
|
HeadingNode,
|
|
38
44
|
ListNode,
|
|
39
45
|
ListItemNode,
|
|
@@ -47,16 +53,42 @@ export var PHXTextEditor = function (_a) {
|
|
|
47
53
|
LinkNode,
|
|
48
54
|
]
|
|
49
55
|
};
|
|
50
|
-
var
|
|
51
|
-
var onChange = function () {
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
var _b = useState(''), htmll = _b[0], setHtmll = _b[1];
|
|
57
|
+
var onChange = function (editorState, editor) {
|
|
58
|
+
editorState.read(function () {
|
|
59
|
+
var value = JSON.stringify(editorState);
|
|
60
|
+
console.log(value);
|
|
61
|
+
});
|
|
62
|
+
editor.update(function () {
|
|
63
|
+
var rawHTML = $generateHtmlFromNodes(editor, null);
|
|
64
|
+
var base64 = btoa(unescape(encodeURIComponent(rawHTML)));
|
|
65
|
+
setHtmll(base64);
|
|
66
|
+
});
|
|
54
67
|
};
|
|
68
|
+
onChangeEditor(htmll);
|
|
69
|
+
function prepopulatedRichText() {
|
|
70
|
+
if (value) {
|
|
71
|
+
var html = atob(value);
|
|
72
|
+
var utf8Array = new Uint8Array(html.length);
|
|
73
|
+
for (var i = 0; i < html.length; i++) {
|
|
74
|
+
utf8Array[i] = html.charCodeAt(i);
|
|
75
|
+
}
|
|
76
|
+
var utf8Text = new TextDecoder('utf-8').decode(utf8Array);
|
|
77
|
+
var editor = createEditor();
|
|
78
|
+
var parser = new DOMParser();
|
|
79
|
+
var dom = parser.parseFromString(utf8Text, 'text/html');
|
|
80
|
+
var nodes = $generateNodesFromDOM(editor, dom);
|
|
81
|
+
var root = $getRoot();
|
|
82
|
+
if (root.getFirstChild() === null) {
|
|
83
|
+
root.append.apply(root, nodes);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
55
87
|
return (React.createElement(LexicalComposer, { initialConfig: editorConfig },
|
|
56
88
|
React.createElement("div", { className: 'editor-container' },
|
|
57
89
|
React.createElement(ToolbarPlugin, null),
|
|
58
|
-
React.createElement("div", {
|
|
59
|
-
React.createElement("style", null, "\n ul li {\n /* list-style: inherit !important; */\n list-style-type: disc !important;\n \n }\n \n ol {\n /* list-style: inherit !important; */\n list-style-type: decimal !important;\n }\n .dropdown .item.fontsize-item,\n .dropdown .item.fontsize-item .text {\n min-width: unset;\n }\n .font-size .dropdown-button-text {\n display: flex !important;\n }\n .other h2 {\n font-size: 18px;\n color: #444;\n margin-bottom: 7px;\n }\n \n .other a {\n color: #777;\n text-decoration: underline;\n font-size: 14px;\n }\n \n .other ul {\n padding: 0;\n margin: 0;\n list-style-type: none;\n }\n \n .App {\n font-family: sans-serif;\n text-align: center;\n }\n \n h1 {\n font-size: 24px;\n color: #333;\n }\n \n .ltr {\n text-align: left;\n }\n \n .rtl {\n text-align: right;\n }\n \n .editor-container {\n margin: 20px 0px;\n border-radius: 2px;\n max-width: 600px;\n color: #000;\n position: relative;\n line-height: 20px;\n font-weight: 400;\n text-align: left;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n \n .editor-inner {\n background: #fff;\n position: relative;\n }\n \n .editor-input {\n min-height: 150px;\n resize: none;\n font-size: 15px;\n caret-color: rgb(5, 5, 5);\n position: relative;\n tab-size: 1;\n outline: 0;\n padding: 15px 10px;\n caret-color: #444;\n }\n button.item.dropdown-item-active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n button.item.dropdown-item-active i {\n opacity: 1;\n }\n .editor-placeholder {\n color: #999;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n top: 15px;\n left: 10px;\n font-size: 15px;\n user-select: none;\n display: inline-block;\n pointer-events: none;\n }\n \n .editor-text-bold {\n font-weight: bold;\n }\n \n .editor-text-italic {\n font-style: italic;\n }\n \n .editor-text-underline {\n text-decoration: underline;\n }\n \n .editor-text-strikethrough {\n text-decoration: line-through;\n }\n \n .editor-text-underlineStrikethrough {\n text-decoration: underline line-through;\n }\n \n .editor-text-code {\n background-color: rgb(240, 242, 245);\n padding: 1px 0.25rem;\n font-family: Menlo, Consolas, Monaco, monospace;\n font-size: 94%;\n }\n \n .editor-link {\n color: rgb(33, 111, 219);\n text-decoration: none;\n }\n \n .tree-view-output {\n display: block;\n background: #222;\n color: #fff;\n padding: 5px;\n font-size: 12px;\n white-space: pre-wrap;\n margin: 1px auto 10px auto;\n max-height: 250px;\n position: relative;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n overflow: auto;\n line-height: 14px;\n }\n \n .editor-code {\n background-color: rgb(240, 242, 245);\n font-family: Menlo, Consolas, Monaco, monospace;\n display: block;\n padding: 8px 8px 8px 52px;\n line-height: 1.53;\n font-size: 13px;\n margin: 0;\n margin-top: 8px;\n margin-bottom: 8px;\n tab-size: 2;\n /* white-space: pre; */\n overflow-x: auto;\n position: relative;\n }\n \n .editor-code:before {\n content: attr(data-gutter);\n position: absolute;\n background-color: #eee;\n left: 0;\n top: 0;\n border-right: 1px solid #ccc;\n padding: 8px;\n color: #777;\n white-space: pre-wrap;\n text-align: right;\n min-width: 25px;\n }\n .editor-code:after {\n content: attr(data-highlight-language);\n top: 0;\n right: 3px;\n padding: 3px;\n font-size: 10px;\n text-transform: uppercase;\n position: absolute;\n color: rgba(0, 0, 0, 0.5);\n }\n \n .editor-tokenComment {\n color: slategray;\n }\n \n .editor-tokenPunctuation {\n color: #999;\n }\n \n .editor-tokenProperty {\n color: #905;\n }\n \n .editor-tokenSelector {\n color: #690;\n }\n \n .editor-tokenOperator {\n color: #9a6e3a;\n }\n \n .editor-tokenAttr {\n color: #07a;\n }\n \n .editor-tokenVariable {\n color: #e90;\n }\n \n .editor-tokenFunction {\n color: #dd4a68;\n }\n \n .editor-paragraph {\n margin: 0;\n margin-bottom: 8px;\n position: relative;\n }\n \n .editor-paragraph:last-child {\n margin-bottom: 0;\n }\n \n .editor-heading-h1 {\n font-size: 24px;\n color: rgb(5, 5, 5);\n font-weight: 400;\n margin: 0;\n margin-bottom: 12px;\n padding: 0;\n }\n \n .editor-heading-h2 {\n font-size: 15px;\n color: rgb(101, 103, 107);\n font-weight: 700;\n margin: 0;\n margin-top: 10px;\n padding: 0;\n text-transform: uppercase;\n }\n \n .editor-quote {\n margin: 0;\n margin-left: 20px;\n font-size: 15px;\n color: rgb(101, 103, 107);\n border-left-color: rgb(206, 208, 212);\n border-left-width: 4px;\n border-left-style: solid;\n padding-left: 16px;\n }\n \n .editor-list-ol {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-list-ul {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-listitem {\n margin: 8px 32px 8px 32px;\n }\n \n .editor-nested-listitem {\n list-style-type: none;\n }\n \n pre::-webkit-scrollbar {\n background: transparent;\n width: 10px;\n }\n \n pre::-webkit-scrollbar-thumb {\n background: #999;\n }\n \n .debug-timetravel-panel {\n overflow: hidden;\n padding: 0 0 10px 0;\n margin: auto;\n display: flex;\n }\n \n .debug-timetravel-panel-slider {\n padding: 0;\n flex: 8;\n }\n \n .debug-timetravel-panel-button {\n padding: 0;\n border: 0;\n background: none;\n flex: 1;\n color: #fff;\n font-size: 12px;\n }\n \n .debug-timetravel-panel-button:hover {\n text-decoration: underline;\n }\n \n .debug-timetravel-button {\n border: 0;\n padding: 0;\n font-size: 12px;\n top: 10px;\n right: 15px;\n position: absolute;\n background: none;\n color: #fff;\n }\n \n .debug-timetravel-button:hover {\n text-decoration: underline;\n }\n \n .toolbar {\n display: flex;\n margin-bottom: 1px;\n background: #fff;\n padding: 4px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n cursor: pointer;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item:disabled {\n cursor: not-allowed;\n }\n \n .toolbar button.toolbar-item.spaced {\n margin-right: 2px;\n }\n \n .toolbar button.toolbar-item i.format {\n background-size: contain;\n display: inline-block;\n height: 18px;\n width: 18px;\n margin-top: 2px;\n vertical-align: -0.25em;\n display: flex;\n opacity: 0.6;\n }\n \n .toolbar button.toolbar-item:disabled i.format {\n opacity: 0.2;\n }\n \n .toolbar button.toolbar-item.active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n .toolbar button.toolbar-item.active i {\n opacity: 1;\n }\n \n .toolbar .toolbar-item:hover:not([disabled]) {\n background-color: #eee;\n }\n \n .toolbar .divider {\n width: 1px;\n background-color: #eee;\n margin: 0 4px;\n }\n \n .toolbar select.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n vertical-align: middle;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 70px;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n }\n \n .toolbar select.code-language {\n text-transform: capitalize;\n width: 130px;\n }\n \n .toolbar .toolbar-item .text {\n display: flex;\n line-height: 20px;\n width: 200px;\n vertical-align: middle;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n width: 70px;\n overflow: hidden;\n height: 20px;\n text-align: left;\n }\n \n .toolbar .toolbar-item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 8px;\n line-height: 16px;\n background-size: contain;\n }\n \n .toolbar i.chevron-down {\n margin-top: 3px;\n width: 16px;\n height: 16px;\n display: flex;\n user-select: none;\n }\n \n .toolbar i.chevron-down.inside {\n width: 16px;\n height: 16px;\n display: flex;\n margin-left: -25px;\n margin-top: 11px;\n margin-right: 10px;\n pointer-events: none;\n }\n \n i.chevron-down {\n background-color: transparent;\n background-size: contain;\n display: inline-block;\n height: 8px;\n width: 8px;\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n }\n \n #block-controls button:hover {\n background-color: #efefef;\n }\n \n #block-controls button:focus-visible {\n border-color: blue;\n }\n \n #block-controls span.block-type {\n background-size: contain;\n display: block;\n width: 18px;\n height: 18px;\n margin: 2px;\n }\n \n #block-controls span.block-type.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n #block-controls span.block-type.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n #block-controls span.block-type.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n #block-controls span.block-type.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n #block-controls span.block-type.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n #block-controls span.block-type.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n #block-controls span.block-type.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n .dropdown {\n z-index: 5;\n display: block;\n position: absolute;\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n border-radius: 8px;\n min-width: 100px;\n min-height: 40px;\n background-color: #fff;\n }\n \n .dropdown .item {\n margin: 0 8px 0 8px;\n padding: 8px;\n color: #050505;\n cursor: pointer;\n line-height: 16px;\n font-size: 15px;\n display: flex;\n align-content: center;\n flex-direction: row;\n flex-shrink: 0;\n justify-content: space-between;\n background-color: #fff;\n border-radius: 8px;\n border: 0;\n min-width: 268px;\n }\n \n .dropdown .item .active {\n display: flex;\n width: 20px;\n height: 20px;\n background-size: contain;\n }\n \n .dropdown .item:first-child {\n margin-top: 8px;\n }\n \n .dropdown .item:last-child {\n margin-bottom: 8px;\n }\n \n .dropdown .item:hover {\n background-color: #eee;\n }\n \n .dropdown .item .text {\n display: flex;\n line-height: 20px;\n flex-grow: 1;\n width: 200px;\n }\n \n .dropdown .item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 12px;\n line-height: 16px;\n background-size: contain;\n }\n \n .link-editor {\n position: absolute;\n z-index: 100;\n top: -10000px;\n left: -10000px;\n margin-top: -6px;\n max-width: 300px;\n width: 100%;\n opacity: 0;\n background-color: #fff;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n border-radius: 8px;\n transition: opacity 0.5s;\n }\n \n .link-editor .link-input {\n display: block;\n width: calc(100% - 24px);\n box-sizing: border-box;\n margin: 8px 12px;\n padding: 8px 12px;\n border-radius: 15px;\n background-color: #eee;\n font-size: 15px;\n color: rgb(5, 5, 5);\n border: 0;\n outline: 0;\n position: relative;\n font-family: inherit;\n }\n \n .link-editor div.link-edit {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n background-size: 16px;\n background-position: center;\n background-repeat: no-repeat;\n width: 35px;\n vertical-align: -0.25em;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n cursor: pointer;\n }\n \n .link-editor .link-input a {\n color: rgb(33, 111, 219);\n text-decoration: none;\n display: block;\n white-space: nowrap;\n overflow: hidden;\n margin-right: 30px;\n text-overflow: ellipsis;\n }\n \n .link-editor .link-input a:hover {\n text-decoration: underline;\n }\n \n .link-editor .button {\n width: 20px;\n height: 20px;\n display: inline-block;\n padding: 6px;\n border-radius: 8px;\n cursor: pointer;\n margin: 0 2px;\n }\n \n .link-editor .button.hovered {\n width: 20px;\n height: 20px;\n display: inline-block;\n background-color: #eee;\n }\n \n .link-editor .button i,\n .actions i {\n background-size: contain;\n display: inline-block;\n height: 20px;\n width: 20px;\n vertical-align: -0.25em;\n }\n \n i.undo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n }\n \n i.redo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n }\n \n .icon.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n .icon.large-heading,\n .icon.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n .icon.small-heading,\n .icon.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n .icon.bullet-list,\n .icon.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n .icon.numbered-list,\n .icon.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n .icon.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n .icon.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.bold {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n }\n \n i.italic {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n }\n \n i.underline {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n }\n \n i.strikethrough {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n }\n \n i.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.link {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n }\n \n i.left-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n }\n \n i.center-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n }\n \n i.right-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n }\n \n i.justify-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n }\n \n \n \n "),
|
|
90
|
+
React.createElement("div", { className: 'editor-inner' },
|
|
91
|
+
React.createElement("style", null, "\n ul li {\n /* list-style: inherit !important; */\n list-style-type: disc !important;\n \n }\n \n ol {\n /* list-style: inherit !important; */\n list-style-type: decimal !important;\n }\n .dropdown .item.fontsize-item,\n .dropdown .item.fontsize-item .text {\n min-width: unset;\n }\n .font-size .dropdown-button-text {\n display: flex !important;\n }\n .other h2 {\n font-size: 18px;\n color: #444;\n margin-bottom: 7px;\n }\n \n .other a {\n color: #777;\n text-decoration: underline;\n font-size: 14px;\n }\n \n .other ul {\n padding: 0;\n margin: 0;\n list-style-type: none;\n }\n \n .App {\n font-family: sans-serif;\n text-align: center;\n }\n \n h1 {\n font-size: 24px;\n color: #333;\n }\n \n .ltr {\n text-align: left;\n }\n \n .rtl {\n text-align: right;\n }\n \n .editor-container {\n margin: 20px 0px;\n border-radius: 2px;\n max-width: 600px;\n color: #000;\n position: relative;\n line-height: 20px;\n font-weight: 400;\n text-align: left;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n \n .editor-inner {\n background: #fff;\n position: relative;\n }\n \n .editor-input {\n min-height: 150px;\n resize: none;\n font-size: 15px;\n caret-color: rgb(5, 5, 5);\n position: relative;\n tab-size: 1;\n outline: 0;\n padding: 15px 10px;\n caret-color: #444;\n }\n button.item.dropdown-item-active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n @media screen and (max-width: 1100px) {\n .dropdown-button-text {\n display: none !important;\n }\n \n .font-size .dropdown-button-text {\n display: flex !important;\n }\n \n .code-language .dropdown-button-text {\n display: flex !important;\n }\n }\n \n button.item.dropdown-item-active i {\n opacity: 1;\n }\n .editor-placeholder {\n color: #999;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n top: 15px;\n left: 10px;\n font-size: 15px;\n user-select: none;\n display: inline-block;\n pointer-events: none;\n }\n \n .editor-text-bold {\n font-weight: bold;\n }\n \n .editor-text-italic {\n font-style: italic;\n }\n \n .editor-text-underline {\n text-decoration: underline;\n }\n \n .editor-text-strikethrough {\n text-decoration: line-through;\n }\n \n .editor-text-underlineStrikethrough {\n text-decoration: underline line-through;\n }\n \n .editor-text-code {\n background-color: rgb(240, 242, 245);\n padding: 1px 0.25rem;\n font-family: Menlo, Consolas, Monaco, monospace;\n font-size: 94%;\n }\n \n .editor-link {\n color: rgb(33, 111, 219);\n text-decoration: none;\n }\n \n .tree-view-output {\n display: block;\n background: #222;\n color: #fff;\n padding: 5px;\n font-size: 12px;\n white-space: pre-wrap;\n margin: 1px auto 10px auto;\n max-height: 250px;\n position: relative;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n overflow: auto;\n line-height: 14px;\n }\n \n .editor-code {\n background-color: rgb(240, 242, 245);\n font-family: Menlo, Consolas, Monaco, monospace;\n display: block;\n padding: 8px 8px 8px 52px;\n line-height: 1.53;\n font-size: 13px;\n margin: 0;\n margin-top: 8px;\n margin-bottom: 8px;\n tab-size: 2;\n /* white-space: pre; */\n overflow-x: auto;\n position: relative;\n }\n \n .editor-code:before {\n content: attr(data-gutter);\n position: absolute;\n background-color: #eee;\n left: 0;\n top: 0;\n border-right: 1px solid #ccc;\n padding: 8px;\n color: #777;\n white-space: pre-wrap;\n text-align: right;\n min-width: 25px;\n }\n .editor-code:after {\n content: attr(data-highlight-language);\n top: 0;\n right: 3px;\n padding: 3px;\n font-size: 10px;\n text-transform: uppercase;\n position: absolute;\n color: rgba(0, 0, 0, 0.5);\n }\n \n .editor-tokenComment {\n color: slategray;\n }\n \n .editor-tokenPunctuation {\n color: #999;\n }\n \n .editor-tokenProperty {\n color: #905;\n }\n \n .editor-tokenSelector {\n color: #690;\n }\n \n .editor-tokenOperator {\n color: #9a6e3a;\n }\n \n .editor-tokenAttr {\n color: #07a;\n }\n \n .editor-tokenVariable {\n color: #e90;\n }\n \n .editor-tokenFunction {\n color: #dd4a68;\n }\n \n .editor-paragraph {\n margin: 0;\n margin-bottom: 8px;\n position: relative;\n }\n \n .editor-paragraph:last-child {\n margin-bottom: 0;\n }\n \n .editor-heading-h1 {\n font-size: 24px;\n color: rgb(5, 5, 5);\n font-weight: 400;\n margin: 0;\n margin-bottom: 12px;\n padding: 0;\n }\n \n .editor-heading-h2 {\n font-size: 15px;\n color: rgb(101, 103, 107);\n font-weight: 700;\n margin: 0;\n margin-top: 10px;\n padding: 0;\n text-transform: uppercase;\n }\n \n .editor-quote {\n margin: 0;\n margin-left: 20px;\n font-size: 15px;\n color: rgb(101, 103, 107);\n border-left-color: rgb(206, 208, 212);\n border-left-width: 4px;\n border-left-style: solid;\n padding-left: 16px;\n }\n \n .editor-list-ol {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-list-ul {\n padding: 0;\n margin: 0;\n margin-left: 16px;\n }\n \n .editor-listitem {\n margin: 8px 32px 8px 32px;\n }\n \n .editor-nested-listitem {\n list-style-type: none;\n }\n \n pre::-webkit-scrollbar {\n background: transparent;\n width: 10px;\n }\n \n pre::-webkit-scrollbar-thumb {\n background: #999;\n }\n \n .debug-timetravel-panel {\n overflow: hidden;\n padding: 0 0 10px 0;\n margin: auto;\n display: flex;\n }\n \n .debug-timetravel-panel-slider {\n padding: 0;\n flex: 8;\n }\n \n .debug-timetravel-panel-button {\n padding: 0;\n border: 0;\n background: none;\n flex: 1;\n color: #fff;\n font-size: 12px;\n }\n \n .debug-timetravel-panel-button:hover {\n text-decoration: underline;\n }\n \n .debug-timetravel-button {\n border: 0;\n padding: 0;\n font-size: 12px;\n top: 10px;\n right: 15px;\n position: absolute;\n background: none;\n color: #fff;\n }\n \n .debug-timetravel-button:hover {\n text-decoration: underline;\n }\n \n .toolbar {\n display: flex;\n margin-bottom: 1px;\n background: #fff;\n padding: 4px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n cursor: pointer;\n vertical-align: middle;\n }\n \n .toolbar button.toolbar-item:disabled {\n cursor: not-allowed;\n }\n \n .toolbar button.toolbar-item.spaced {\n margin-right: 2px;\n }\n \n .toolbar button.toolbar-item i.format {\n background-size: contain;\n display: inline-block;\n height: 18px;\n width: 18px;\n margin-top: 2px;\n vertical-align: -0.25em;\n display: flex;\n opacity: 0.6;\n }\n \n .toolbar button.toolbar-item:disabled i.format {\n opacity: 0.2;\n }\n \n .toolbar button.toolbar-item.active {\n background-color: rgba(223, 232, 250, 0.3);\n }\n \n .toolbar button.toolbar-item.active i {\n opacity: 1;\n }\n \n .toolbar .toolbar-item:hover:not([disabled]) {\n background-color: #eee;\n }\n \n .toolbar .divider {\n width: 1px;\n background-color: #eee;\n margin: 0 4px;\n }\n \n .toolbar select.toolbar-item {\n border: 0;\n display: flex;\n background: none;\n border-radius: 10px;\n padding: 8px;\n vertical-align: middle;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 70px;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n }\n \n .toolbar select.code-language {\n text-transform: capitalize;\n width: 130px;\n }\n \n .toolbar .toolbar-item .text {\n display: flex;\n line-height: 20px;\n width: 200px;\n vertical-align: middle;\n font-size: 14px;\n color: #777;\n text-overflow: ellipsis;\n width: 70px;\n overflow: hidden;\n height: 20px;\n text-align: left;\n }\n \n .toolbar .toolbar-item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 8px;\n line-height: 16px;\n background-size: contain;\n }\n \n .toolbar i.chevron-down {\n margin-top: 3px;\n width: 16px;\n height: 16px;\n display: flex;\n user-select: none;\n }\n \n .toolbar i.chevron-down.inside {\n width: 16px;\n height: 16px;\n display: flex;\n margin-left: -25px;\n margin-top: 11px;\n margin-right: 10px;\n pointer-events: none;\n }\n \n i.chevron-down {\n background-color: transparent;\n background-size: contain;\n display: inline-block;\n height: 8px;\n width: 8px;\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chevron-down.svg);\n }\n \n #block-controls button:hover {\n background-color: #efefef;\n }\n \n #block-controls button:focus-visible {\n border-color: blue;\n }\n \n #block-controls span.block-type {\n background-size: contain;\n display: block;\n width: 18px;\n height: 18px;\n margin: 2px;\n }\n \n #block-controls span.block-type.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n #block-controls span.block-type.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n #block-controls span.block-type.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n #block-controls span.block-type.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n #block-controls span.block-type.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n #block-controls span.block-type.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n #block-controls span.block-type.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n .dropdown {\n z-index: 5;\n display: block;\n position: absolute;\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n border-radius: 8px;\n min-width: 100px;\n min-height: 40px;\n background-color: #fff;\n }\n \n .dropdown .item {\n margin: 0 8px 0 8px;\n padding: 8px;\n color: #050505;\n cursor: pointer;\n line-height: 16px;\n font-size: 15px;\n display: flex;\n align-content: center;\n flex-direction: row;\n flex-shrink: 0;\n justify-content: space-between;\n background-color: #fff;\n border-radius: 8px;\n border: 0;\n min-width: 268px;\n }\n \n .dropdown .item .active {\n display: flex;\n width: 20px;\n height: 20px;\n background-size: contain;\n }\n \n .dropdown .item:first-child {\n margin-top: 8px;\n }\n \n .dropdown .item:last-child {\n margin-bottom: 8px;\n }\n \n .dropdown .item:hover {\n background-color: #eee;\n }\n \n .dropdown .item .text {\n display: flex;\n line-height: 20px;\n flex-grow: 1;\n width: 200px;\n }\n \n .dropdown .item .icon {\n display: flex;\n width: 20px;\n height: 20px;\n user-select: none;\n margin-right: 12px;\n line-height: 16px;\n background-size: contain;\n }\n \n .link-editor {\n position: absolute;\n z-index: 100;\n top: -10000px;\n left: -10000px;\n margin-top: -6px;\n max-width: 300px;\n width: 100%;\n opacity: 0;\n background-color: #fff;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n border-radius: 8px;\n transition: opacity 0.5s;\n }\n \n .link-editor .link-input {\n display: block;\n width: calc(100% - 24px);\n box-sizing: border-box;\n margin: 8px 12px;\n padding: 8px 12px;\n border-radius: 15px;\n background-color: #eee;\n font-size: 15px;\n color: rgb(5, 5, 5);\n border: 0;\n outline: 0;\n position: relative;\n font-family: inherit;\n }\n \n .link-editor div.link-edit {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/pencil-fill.svg);\n background-size: 16px;\n background-position: center;\n background-repeat: no-repeat;\n width: 35px;\n vertical-align: -0.25em;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n cursor: pointer;\n }\n \n .link-editor .link-input a {\n color: rgb(33, 111, 219);\n text-decoration: none;\n display: block;\n white-space: nowrap;\n overflow: hidden;\n margin-right: 30px;\n text-overflow: ellipsis;\n }\n \n .link-editor .link-input a:hover {\n text-decoration: underline;\n }\n \n .link-editor .button {\n width: 20px;\n height: 20px;\n display: inline-block;\n padding: 6px;\n border-radius: 8px;\n cursor: pointer;\n margin: 0 2px;\n }\n \n .link-editor .button.hovered {\n width: 20px;\n height: 20px;\n display: inline-block;\n background-color: #eee;\n }\n \n .link-editor .button i,\n .actions i {\n background-size: contain;\n display: inline-block;\n height: 20px;\n width: 20px;\n vertical-align: -0.25em;\n }\n \n i.undo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-counterclockwise.svg);\n }\n \n i.redo {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/arrow-clockwise.svg);\n }\n \n .icon.paragraph {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-paragraph.svg);\n }\n \n .icon.large-heading,\n .icon.h1 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h1.svg);\n }\n \n .icon.small-heading,\n .icon.h2 {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-h2.svg);\n }\n \n .icon.bullet-list,\n .icon.ul {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ul.svg);\n }\n \n .icon.numbered-list,\n .icon.ol {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/list-ol.svg);\n }\n \n .icon.quote {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/chat-square-quote.svg);\n }\n \n .icon.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.bold {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-bold.svg);\n }\n \n i.italic {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-italic.svg);\n }\n \n i.underline {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-underline.svg);\n }\n \n i.strikethrough {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/type-strikethrough.svg);\n }\n \n i.code {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/code.svg);\n }\n \n i.link {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/link.svg);\n }\n \n i.left-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-left.svg);\n }\n \n i.center-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-center.svg);\n }\n \n i.right-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/text-right.svg);\n }\n \n i.justify-align {\n background-image: url(https://static-data-sisv2.phx-smartschool.com/common/prod/text-editor/images/icons/justify.svg);\n }\n \n \n \n "),
|
|
60
92
|
React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: 'editor-input' }), ErrorBoundary: LexicalErrorBoundary, placeholder: React.createElement(Placeholder, null) }),
|
|
61
93
|
React.createElement(OnChangePlugin, { onChange: onChange }),
|
|
62
94
|
React.createElement(HistoryPlugin, null),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textEditor.js","sourceRoot":"","sources":["../../../../src/components/TextEditor/textEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAA;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACvE,OAAO,
|
|
1
|
+
{"version":3,"file":"textEditor.js","sourceRoot":"","sources":["../../../../src/components/TextEditor/textEditor.tsx"],"names":[],"mappings":"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"}
|