funuicss 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/ui/richtext/RichText.d.ts +2 -3
  3. package/ui/richtext/RichText.js +48 -26
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.1",
2
+ "version": "3.0.3",
3
3
  "name": "funuicss",
4
4
  "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
5
5
  "main": "index.js",
package/ui/richtext/RichText.d.ts CHANGED
@@ -8,12 +8,11 @@ interface RichTextProps {
8
8
  placeholder?: string;
9
9
  afterEmoji?: React.ReactNode;
10
10
  funcss?: string;
11
- /** Custom Quill modules (e.g., additional toolbar items) */
12
11
  modules?: any;
13
- /** Quill theme (e.g. 'bubble' | 'snow') */
14
12
  theme?: 'bubble' | 'snow';
15
- /** Optional fontFamily override */
16
13
  fontFamily?: string;
14
+ /** Maximum number of characters allowed */
15
+ maxValue?: number;
17
16
  }
18
17
  declare const RichText: React.FC<RichTextProps>;
19
18
  export default RichText;
package/ui/richtext/RichText.js CHANGED
@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  var react_1 = __importStar(require("react"));
41
41
  var react_quilljs_1 = require("react-quilljs");
42
42
  require("quill/dist/quill.bubble.css");
43
- require("quill/dist/quill.snow.css"); // Add support for snow theme
43
+ require("quill/dist/quill.snow.css");
44
44
  var md_1 = require("react-icons/md");
45
45
  var Emojis_1 = require("../../utils/Emojis");
46
46
  var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
@@ -48,10 +48,10 @@ var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
48
48
  var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
49
49
  var Circle_1 = __importDefault(require("../specials/Circle"));
50
50
  var Tip_1 = __importDefault(require("../tooltip/Tip"));
51
+ var Flex_1 = __importDefault(require("../flex/Flex"));
51
52
  var RichText = function (_a) {
52
- var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily;
53
+ var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily, maxValue = _a.maxValue;
53
54
  var savedRange = (0, react_1.useRef)(null);
54
- // Default modules (basic toolbar)
55
55
  var defaultModules = {
56
56
  toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
57
57
  };
@@ -68,7 +68,19 @@ var RichText = function (_a) {
68
68
  savedRange.current = range;
69
69
  };
70
70
  var handleTextChange = function () {
71
- onChange(quill.root.innerHTML);
71
+ if (!quill)
72
+ return;
73
+ var plainText = quill.getText(); // Includes \n
74
+ var trimmedText = plainText.trim(); // Exclude trailing \n for accurate count
75
+ if (maxValue && trimmedText.length > maxValue) {
76
+ var truncated = trimmedText.slice(0, maxValue);
77
+ quill.setText(truncated);
78
+ quill.setSelection(truncated.length);
79
+ onChange(quill.root.innerHTML);
80
+ }
81
+ else {
82
+ onChange(quill.root.innerHTML);
83
+ }
72
84
  };
73
85
  quill.on('selection-change', handleSelectionChange);
74
86
  quill.on('text-change', handleTextChange);
@@ -76,7 +88,7 @@ var RichText = function (_a) {
76
88
  quill.off('selection-change', handleSelectionChange);
77
89
  quill.off('text-change', handleTextChange);
78
90
  };
79
- }, [quill, onChange]);
91
+ }, [quill, onChange, maxValue]);
80
92
  (0, react_1.useEffect)(function () {
81
93
  if (quill && value !== quill.root.innerHTML) {
82
94
  quill.root.innerHTML = value;
@@ -84,33 +96,43 @@ var RichText = function (_a) {
84
96
  }, [quill, value]);
85
97
  var insertEmoji = function (emoji) {
86
98
  if (quill && savedRange.current) {
87
- quill.insertText(savedRange.current.index, emoji);
88
- quill.setSelection(savedRange.current.index + emoji.length);
99
+ var plainText = quill.getText().trim();
100
+ if (!maxValue || plainText.length + emoji.length <= maxValue) {
101
+ quill.insertText(savedRange.current.index, emoji);
102
+ quill.setSelection(savedRange.current.index + emoji.length);
103
+ }
89
104
  }
90
105
  };
91
106
  var renderEmojiSection = function (title, emojis) { return (react_1.default.createElement(react_1.default.Fragment, null,
92
107
  react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
93
108
  react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
94
- return (react_1.default.createElement("div", { className: funcss },
95
- react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container p-0" },
96
- react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? "bubble-editor " : "snow-editor ", style: {
109
+ return (react_1.default.createElement("div", { className: "fit round-edge ".concat(funcss), style: { position: "relative", overflow: "visible" } },
110
+ react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container p-0" },
111
+ react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? 'bubble-editor' : 'snow-editor', style: {
97
112
  fontFamily: fontFamily || 'inherit',
98
113
  } })),
99
- (showEmojis || afterEmoji) && (react_1.default.createElement(RowFlex_1.default, { gap: 0.5, funcss: 'mt-1' },
100
- showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
101
- react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
102
- react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
103
- react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
104
- {
105
- label: (react_1.default.createElement("div", { className: "w-200 h-300", style: { overflowY: 'auto' } },
106
- renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
107
- renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
108
- renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
109
- renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
110
- renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
111
- renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
112
- },
113
- ] })),
114
- afterEmoji))));
114
+ (showEmojis || maxValue) && (react_1.default.createElement("div", { className: 'p-1', style: { height: 'fit-content', top: "calc(100%)", width: "100%" } },
115
+ react_1.default.createElement(Flex_1.default, { justify: 'space-between', gap: 1, alignItems: 'center' },
116
+ (showEmojis || afterEmoji) ? (react_1.default.createElement("div", null,
117
+ react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
118
+ showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
119
+ react_1.default.createElement(Circle_1.default, { size: 2, funcss: "bg border" },
120
+ react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
121
+ react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
122
+ {
123
+ label: (react_1.default.createElement("div", { className: "w-200 h-200", style: { overflowY: 'auto' } },
124
+ renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
125
+ renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
126
+ renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
127
+ renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
128
+ renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
129
+ renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
130
+ },
131
+ ] })),
132
+ afterEmoji))) : (react_1.default.createElement("div", null)),
133
+ (maxValue && quill) ? (react_1.default.createElement("div", { className: "text-xs text-right" },
134
+ react_1.default.createElement("span", { className: "text-primary" }, quill.getText().trim().length),
135
+ " /",
136
+ maxValue)) : (react_1.default.createElement("div", null)))))));
115
137
  };
116
138
  exports.default = RichText;