sccoreui 4.3.5 → 4.3.7
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.
|
@@ -9,17 +9,41 @@ const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wys
|
|
|
9
9
|
require("froala-editor/js/plugins.pkgd.min.js");
|
|
10
10
|
// import { SvgComponent } from 'sccoreui';
|
|
11
11
|
// import SvgComponent from '../../directives/svg-component';
|
|
12
|
-
|
|
12
|
+
const svg_1 = require("../../assets/svg/svg");
|
|
13
13
|
const MyEditor = () => {
|
|
14
14
|
const editorRef = (0, react_1.useRef)(null);
|
|
15
15
|
const html = ``;
|
|
16
16
|
const [editorContent, setEditorContent] = (0, react_1.useState)(html);
|
|
17
|
-
// const [editorConfig, setEditorConfig] = useState<any>()
|
|
18
17
|
// Callback function to handle content changes
|
|
19
18
|
const handleModelChange = (content) => {
|
|
20
19
|
setEditorContent(content);
|
|
21
20
|
};
|
|
22
21
|
(0, react_1.useEffect)(() => {
|
|
22
|
+
if (editorRef.current) {
|
|
23
|
+
editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${svg_1.Bold}`;
|
|
24
|
+
editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${svg_1.Italic}`;
|
|
25
|
+
// Listen for the 'contentChanged' event
|
|
26
|
+
editorRef.current.editor.events.on('contentChanged', () => {
|
|
27
|
+
const currentContent = editorRef.current.html.get();
|
|
28
|
+
// Define your special keywords
|
|
29
|
+
const specialKeywords = ['@product', '@category', '@item'];
|
|
30
|
+
// Iterate through each keyword and check for its presence in the content
|
|
31
|
+
specialKeywords.forEach(keyword => {
|
|
32
|
+
const keywordIndex = currentContent.lastIndexOf(keyword);
|
|
33
|
+
if (keywordIndex !== -1 && keywordIndex + keyword.length === currentContent.length) {
|
|
34
|
+
// Add a tag when the Enter key is pressed at the end of a special keyword
|
|
35
|
+
editorRef.current.events.on('keydown', (e) => {
|
|
36
|
+
if (e.which === editorRef.current.editor.KEYCODE.ENTER) {
|
|
37
|
+
// Do something special when Enter key is pressed
|
|
38
|
+
console.log(`Enter pressed after special keyword: ${keyword}`);
|
|
39
|
+
// For demonstration, let's insert a tag for demonstration
|
|
40
|
+
editorRef.current.html.insert(`<span class="special-tag">${keyword}</span>`);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
}
|
|
23
47
|
}, []);
|
|
24
48
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-editor' }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
|
|
25
49
|
fontFamilySelection: true,
|
|
@@ -27,6 +51,7 @@ const MyEditor = () => {
|
|
|
27
51
|
'Arial,Helvetica,sans-serif': 'Font 1',
|
|
28
52
|
'Impact,Charcoal,sans-serif': 'Font 2',
|
|
29
53
|
'RobotoItalic,Charcoal,sans-serif': 'RobotoItalic',
|
|
54
|
+
'Tahoma,Geneva,sans-serif': 'Font 3'
|
|
30
55
|
},
|
|
31
56
|
fontFamilyDefaultSelection: 'Font 2',
|
|
32
57
|
placeholderText: 'placeholder',
|
|
@@ -41,6 +66,7 @@ const MyEditor = () => {
|
|
|
41
66
|
toolbarButtons: {
|
|
42
67
|
'fontFamily': {
|
|
43
68
|
'buttons': ['fontFamily'],
|
|
69
|
+
'class': 'customCard',
|
|
44
70
|
},
|
|
45
71
|
'moreText': {
|
|
46
72
|
'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
|
|
@@ -51,9 +77,12 @@ const MyEditor = () => {
|
|
|
51
77
|
'buttonsVisible': 2
|
|
52
78
|
},
|
|
53
79
|
'moreRich': {
|
|
54
|
-
'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html'
|
|
80
|
+
'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html'],
|
|
55
81
|
'buttonsVisible': 2
|
|
56
82
|
},
|
|
83
|
+
'fullscreen': {
|
|
84
|
+
'button': 'fullscreen'
|
|
85
|
+
},
|
|
57
86
|
},
|
|
58
87
|
}, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
|
|
59
88
|
};
|
|
@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const tree_1 = require("primereact/tree");
|
|
6
6
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
7
|
const sccoreui_1 = require("sccoreui");
|
|
8
|
-
const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode }) => {
|
|
8
|
+
const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode, classNames }) => {
|
|
9
9
|
const onClickNode = (e) => {
|
|
10
10
|
if (clickOnNode)
|
|
11
11
|
clickOnNode(e);
|
|
12
12
|
};
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className:
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: `treeNoCollaps ${classNames ? classNames : ''}`, nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node.moduleName] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(sccoreui_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
|
|
14
14
|
};
|
|
15
15
|
exports.default = TreeDropdownSelect;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TreeDropdownSelectTypes } from '../types/type';
|
|
2
|
-
declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode, classNames }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default TreeDropdownSelect;
|